想用 AI 做网站，不妨试试 Stitch 配合 Claude Code。先让 Stitch 出界面、挑一个方向，再交给 Claude Code 做成页面。设计和代码分开处理，选方案的时候就能看到大致效果，不用等整页写完再回来讨论风格。
不过我更想推荐的是这套做事顺序：需求先讲清楚，静态页面先过手机那关，过了再往上加滚动动画。AI Labs 的空间主题项目就碰上过手机问题，电脑上好看，小屏幕还得回头修。后来又发现快滚时星星太晃。两处问题都发生在页面已经做出来之后。
先把需求讲明白
动手之前，先让助手问你几个问题：页面给谁看？希望访客看完干什么？每一段要放哪些内容？确定下来的答案写进 brief.md，图片或文案没准备好就先记下来。留一个文件，后面每次生成都读它，临时补充的要求也往这里加。
可以直接给助手一个任务：把已确认的需求整理成 brief.md，缺什么先问我，确认后再开始设计。这是本文的示例任务，你换成自己的页面内容就能用。
颜色和字体另存一份
让 Stitch 按需求出几个设计方向，选到合适的就往下做。颜色、字体、间距这些约定，单独放进 DESIGN.md。以后加一页，目标看 brief.md，样式看 DESIGN.md，两份文件各管各的。
选定设计的代码和素材下载到项目里，让 Claude Code 照着做页面。到这里，你手上应该先有一张能打开的静态页。
手机上也要看一遍
页面跑起来，就把手机也打开。让助手按电脑、平板、手机的尺寸截图，跟原设计放在一起看：缺的内容、裁错的图片、变了的间距，都在这里改。桌面上一行放得下的字，到了手机可能就溢出来；导航有没有挡住内容，也顺手看一眼。改完再截一轮，确认刚才那个问题到底还在不在。
静态这轮看过，再去做 scrollytelling，也就是随滚动逐段讲故事。让助手按 brief.md 的章节来安排，先讲清每个效果要表达什么，再做。空间主题里加的星星、章节标记和横向时间线，都有各自的用途；你做别的页面，按自己的内容选就行。
快滚时，字还读得完吗？
动画做好后，自己快滚一遍。AI Labs 那个案例里的星星，快滚时太多太晃，后来又删掉了一些效果。这个细节挺实在：慢慢滚好看，换个速度就不一定适合阅读。看看字还没读完有没有被切走，章节是否跳了，横向时间线有没有卡住，再试试慢滚和反向滚。截图留作前后对照，这一遍滚动也要自己看。
也试试系统里的“减少动态效果”设置，打开后页面仍然能读。按钮、表单、跳转另做功能测试。选定设计和两轮截图都留着，动画加上之后才坏的地方，先查新加的动效。
技能装好，工具还要接通
我核对到的选装技能命令是下面这条：
npx skills add google-labs-code/stitch-skills
按提示选技能和目标助手。Claude Code 的项目技能在 .claude/skills/，个人技能在 ~/.claude/skills/。仓库目前还要求配置 Stitch MCP，装完以后再试工具能否真正调用。Stitch CLI 的安装和登录我还没核实，这条技能命令不能替它完成安装。
先拿一个单页项目练手。第一版静态页面跑起来，手机打开看一眼，就有具体的问题可以接着改了。这类 AI 建站的踩坑经验，云栈社区 里也有不少人分享。 | 
发表于 1 小时前
|
查看: 6|
回复: 0
