先把站点做成能被搜到的文件，再让它看起来像品牌。
很多人一打开 Claude，第一句是：给我做一个现代、高级、能转化的网站。十分钟后，页面确实漂亮。标题在客户端才写进去，正文靠 JavaScript 灌进空壳，404 页面返回的是 200，移动端表格得横向拖，字体是满屏的 Inter 和 Instrument Serif。
它像一个网站。它不太像一份能被收录的文档。
@Timseo_ 这条帖子的口气很冲：到底怎样用 Claude 做出能在 Google 排名的网站，而且不用任何 CMS？括号里还有一句更关键——他不会写代码。
五条建议看起来像设计口吻，其实全是收录纪律。核心只有一句：永远先要技术 SEO 底座，再要好看的设计。第一条规则不是审美，是他要一个能被 Google 和 ChatGPT 索引的站点。
你不是在做网站，你是在向两台机器投递文件
搜索引擎和问答引擎读页面的方式，比人类苛刻。它们先要一份已经写好的 HTML：内容在源码里，标题在源码里，描述和规范链接也在源码里。等脚本跑完再出现的文字，对它们来说像一场迟到的自我介绍。
所以他不让 Claude 先想配色。他先规定交付物的形态。
要静态 HTML，或 Next.js、Astro 这类 SSR/SSG 框架，或构建后的预渲染。不要纯 SPA。每一条 URL 打开源码，就该看见正文、title、meta description 和 canonical。不要把这些标签只交给页面加载之后的 JavaScript。
同时预埋三件基础设施：
根据全站页面自动生成 sitemap.xml；robots.txt 指向该 sitemap，并放行 JS 和 CSS，别把渲染所需的资源挡在门外；
不存在的地址必须返回真正的 404 状态码。页面上写“找不到”不够，服务器回 200 等于告诉收录系统：这是一篇成功的空内容。
不会写代码的人，最容易在这里被模型带偏。模型喜欢单页应用，因为它演示起来流畅。收录不看演示，看源码和状态码。你把底座写进第一轮提示词，后面所有“再加一页博客、再加一个案例”才不会长成另一具空壳。
不要说“帮我做 SEO”，把每一页的零件点名
“优化一下 SEO”是一句空话。模型会塞进它最熟的平均值：重复的标题模板、到处堆的 FAQ 结构化数据、和可见内容对不上的 Schema。
他给的是清单，而且要求应用到每一页，包括以后才新增的页面。
每页一组独特的 title 和 meta description，必须从该页正文里长出来，不能全站共用一句口号。
只有一个 H1，H2 和 H3 按内容层级走，不要为了“看起来有结构”硬插标题。
每条 URL 写明 canonical，避免参数页和预览页互相抢收录。
补上 Open Graph 和 Twitter Card，转发时才不是随机截图。
结构化数据更要克制。首页用 Organization 和 WebSite；博客文章用 Article；只有页面上真的展示了 FAQ，才用 FAQPage。看不见的内容，不要发明一套机器可读的谎言。
这条纪律的价值，不在一次生成。在于你把规则写成站点宪法。Claude 接下来每加一页，都还走同一套零件。SEO 失败通常不是某一页没写好，是第五页开始模型忘了第一页的约定。
设计提示词里，最有用的往往是“不要”
只说“现代网站”，等于把几乎所有决定权交给模型。它会调用此刻最流行的 AI 站点脸谱：卡片或引用旁一条彩色竖线、到处都是全大写小标签、每个标题上方再飘一行 eyebrow、光晕、重阴影、满屏衬线、以及听起来很史诗的区块名。
他直接把禁区写死：
不要卡片和引用侧面的彩色描边；
不要满屏小写变大写的微型标签；
不要每个标题上方再叠一行小字；
不要光晕、巨大阴影和无处不在的衬线；
不要装腔的栏目名。
字体也指定。他只用 Geist 和 Geist Mono，并明确禁止 Inter 和 Instrument Serif。这不是普世真理，是他的选择。你可以把禁区换成自己的：不要鼠尾草绿，不要倾斜手机，不要“赋能未来”这种标题。重要的是先告诉模型，什么不允许出现在你的站点上。
审美分歧一旦拖到整站生成之后，你就会陷入整页重做。禁区写在第一轮，返工会从“推倒重来”变成“改这一块”。
移动端不是桌面的缩小版，加载也不是上线后再补的课
他会要求 100% 响应式，但还是单独把手机稿拿出来审。桌面变窄，不等于手机体验成立。
典型例子：不要必须左右横滑才能读完的表格。改成可折叠的栏，或让文字自行换行。很多 Claude 生成的“数据区块”在电脑上像报表，在手机上像一道过宽的墙。
加载相关的三条，同样写进第一轮，而不是等全部页面都生出来再打补丁：
视口外的图片做 lazy loading；
图片写上 width 和 height，避免布局跳动；
字体使用 font-display: swap，先显示系统字，再换成品牌字。
这些看起来像前端常识。对不会写代码的人，常识必须变成提示词，否则模型会优先保证“看起来完成了”。完成和可收录、可打开、不跳排，不是同一件事。
他提到自己会用浏览器扩展单独看手机视图。工具可以换，习惯不能换：同一条 URL，至少用一种窄屏把每个区块点一遍。Hero 在桌面很气派，在手机上可能是一张切掉主信息的大图加一个点不到的按钮。
第一版只是开工，真正的站点是在本地来回里长出来的
五条里最不像“秘籍”的，其实最接近现实：必须迭代。第一版是起点。然后逐个打磨 Hero、内容区块、动效、页脚。
灵感不从“再现代一点”里来。他去 21st.dev 或 One Page Love 找真正上线过的一页式站点，指出想借哪一处结构，再让 Claude 按自己的站点改，而不是整页抄。
工作方式也很土，因而有效。让 Claude 在本地启动站点，给你 localhost 链接。左边浏览器开着站，右边对话框开着 Claude。你在浏览器里验收，再把下一句改动送回去。
这和“生成一个完整网站”的幻觉相反。完整网站是多次局部同意堆出来的。你批准的是这一屏的信息层级、这一组标题是否像人话、这一处按钮在拇指热区里能不能点到。模型负责改文件，你负责当客户和质检。
不会写代码，在这里反而是一种提醒：你不需要读懂框架，你需要会看页面，并会把看到的问题写成下一句指令。能说“这条 Hero 在手机上把主按钮挤出屏幕了”，就比“整体再高级一点”更接近工程。
把五条收成你可以今晚粘贴的宪法
若把帖子压成一份可复用的总提示，逻辑顺序应当是这样。
先规定架构：静态或 SSR/SSG，源码里必须有正文和元信息，自动 sitemap，正确的 robots，真正的 404。
再规定每一页零件：独立标题和描述、单一 H1、规范链接、分享标签、与可见内容一致的结构化数据。
再规定设计禁区和指定字体，避免模型调用默认的 AI 脸谱。
再规定手机稿和加载细节，避免上线后才补性能课。
最后规定工作方式：本地打开，一节一节改，参考真实站点而不是形容词。
少做一件，站点仍可能很好看。五件都做，它才开始像一份愿意被索引的出版物。
CMS 的好处是把这些零件藏进主题和插件。你不用 CMS，就把零件从后台搬进提示词。差别不在你会不会写代码，在你能不能在模型动手前，把收录系统当成第一位读者。
写在最后
Claude 很擅长在短时间内交出一个“像那么回事”的站点。像那么回事，足够拿去给朋友看；不够拿去跟 Google 谈长期关系。
@Timseo_ 的方法不神秘。他只是拒绝让设计欲望排在文件格式前面。先要能被读到的 HTML，再要独特的页面零件，再要一份写清禁区的审美，再要经得起一只手操作的手机稿，最后用 localhost 把每一节改到自己愿意签字。
不会写代码不是障碍。障碍是第一句话就在要皮肤。
今晚如果你也准备让 Claude 做站，不妨把开场白改成这句：先给我一个能被 Google 和 ChatGPT 索引的骨架。漂亮的外壳，等骨架在浏览器里站稳了再谈。
No comments yet