AI · 工作流程

Plan 9
2026年10月11日
阅读约 9 分钟

我们如何在不写一行代码的情况下打造一个 SEO 就绪的 .NET 网站

实用指南：plan9.co.uk 如何在短短几天内从 Claude Design 原型变成运行在 IIS 上、经过预渲染的在线网站，SEO 得分 100，所有代码均由 Claude 编写。

AI · 工作流程

原型 → 设计 → 配置 → 发布 → 重复

短短几天内，你正在阅读的这个网站就从 Claude Design 原型变成了运行在 IIS 上、经过预渲染的 ASP.NET Core 在线网站。它在 Lighthouse 中获得 SEO 100 分、移动端性能 91 分。我们团队没有人敲过一行代码。每一行 C#、MSBuild 和 Node 代码都由 Claude Cowork 编写。

这是我们一开始就希望拥有的指南。如果你的网站运行在 Windows、IIS 和 .NET 上，并想用 Claude 打造一个快速、易于被搜索到的网站，下面就是我们的做法、遇到的问题，以及我们会再次采用的方法。

这篇文章讲的是怎么做。想了解我们为什么用这种方式搭建自己的网站，请阅读《鞋匠的孩子光着脚》。

要点

零编码我们定方向、做审核和测试，繁重的工作由 Claude 完成。

分工Claude Design 负责页面和内容，Claude Cowork 负责服务器端功能、预渲染和发布。

为 SEO 预渲染所有爬虫看到的都是完整的 HTML，而不是 JavaScript 占位符。

两步发布导出 zip，点击发布。

测量与调优经过 Lighthouse 审查后，移动端性能从 83 提升到 91，所有指标都在 90 分以上。

你不需要写代码，但需要了解整体情况

每一行代码都由 Claude 编写。我们的工作是描述需求、审核结果并进行测试。这只有在你足够了解相关工具时才行得通，例如 Visual Studio、IIS、Cloudflare、DNS、邮件投递和 Google Search Console，这样才能发现哪里不对。把它想象成指挥施工，而不是亲自动手。

两个 Claude，两条车道

我们做出的最有用的决定，是把工作分给两个工具，并让它们各守其职。

Claude Design：外观与内容设计每个页面，撰写文案和案例，从一个主文件生成所有页面，并将网站导出为 zip。

Claude Cowork：服务器与基础设施它连接到我们的本地开发环境，编写 .NET、邮件、SEO 和发布代码，在自己的沙盒中测试改动，并在浏览器中检查在线网站。

中间用简短的 Markdown 说明衔接两者通过项目文件夹中的简短说明传递工作，例如 CONTACT-FORM.md（表单发送什么、期望返回什么）和 PRERENDER.md。双方都清楚对方需要什么。

技术栈

Visual Studio 和 .NET 10构建应用。点击发布按钮即可通过 Web Deploy 部署到 IIS。

AWS 上的 IIS在 Amazon Web Services 的 Windows 服务器上托管应用。

Cloudflare在服务器前提供 DNS、HTTPS、缓存和压缩。

Amazon SES发送联系表单邮件。

Node.js 和 Playwright发布时在我们开发环境中运行的构建工具。在线服务器上不会额外运行任何东西。

我们从一个空的 ASP.NET Core 项目开始，它唯一的代码只是输出“Hello World!”，然后把 Claude Design 的导出文件复制到 wwwroot 中。

第 1 步：提供静态网站

第一个修复很简单。应用没有提供 wwwroot 中的文件，所以每次访问都显示“Hello World!”。Claude Cowork 启用了静态文件，让每个文件夹的 index.html 以简洁的地址加载，例如 /work/alliance-wine/；设置了合理的缓存；隐藏了设计笔记和构建脚本等工作文件；并为生产环境添加了 HTTPS 重定向。

第 2 步：可用的联系表单

Claude Design 定义了表单，并写了一份简短的约定说明。Claude Cowork 据此构建了服务器端。

一个 /api/contact 接口在服务器上校验姓名、邮箱和留言，然后通过 Amazon SES 把咨询发送到我们的收件箱，并把访客设为 Reply-To。

品牌化的确认邮件Claude Design 按网站风格制作了邮件模板。服务器填入访客信息，并连同纯文本版本一起发送。

防垃圾信息每位访客每十分钟最多提交五次，另有一个只有机器人才会填写的隐藏蜜罐字段。

密钥不进代码邮件凭据保存在我们开发和生产服务器的安全环境配置中，从不进入源代码管理。

第 3 步：真正的 404 页面和重定向

不存在的页面现在会显示我们设计的 404 页面，并返回真正的 404 状态码，避免搜索引擎收录失效链接。旧网站的地址会永久重定向到新位置，添加一条重定向只需在列表中加一行。

第 4 步：为 SEO 预渲染

这是最重要的一步。Claude Design 的页面是由浏览器中的 JavaScript 填充的模板。Google 能应付，但 Bing、LinkedIn 预览、ChatGPT、Perplexity 和 Claude 等 AI 爬虫，以及大多数 SEO 工具，看到的都是花括号中的原始模板占位符，而不是标题和正文。

发布时渲染一次一个 Playwright 脚本会在隐藏的 Chrome 浏览器中打开 sitemap.xml 里的每个页面，等待渲染完成，并将结果保存为完整的 HTML，包括标题、描述、规范链接和结构化数据。

访客体验不变原始模板保留在页面中，并在网站 JavaScript 启动前换回，因此菜单、筛选、主题切换和表单都和以前完全一样。

个性化内容不写入Cookie 弹窗、页面体积提示和访问计数不会保存到 HTML 中，因为它们因访客而异。

安全网只要有页面仍包含未填充的占位符，发布就会失败，因此渲染不完整的网站永远不会上线。

爬虫读不到的内容，就等于不存在。预渲染让每个爬虫都能读懂每个页面。

第 5 步：一键发布

现在更新网站只需两步：

1. 导出从 Claude Design 将网站下载为 zip，并保存到项目中的 design-drop 文件夹。

2. 发布在 Visual Studio 中点击发布。构建过程会把网站解压到 wwwroot、进行优化、预渲染每个页面、部署到 IIS，并通过 Cloudflare 上线。任何失败都会中止发布，因此在线网站永远不会处于更新一半的状态。

额外步骤会在每次 Release 构建时自动运行，因此日常调试依然很快。唯一的一次性设置是在开发环境中安装 Node.js，并让首次发布下载 Playwright 的浏览器。

第 5a 步：团队方案，Git 加 runner

从 Visual Studio 发布适合小团队。如果多人共同维护网站，请改为发布到 Git 仓库，并在服务器上设置一个 runner，例如 GitHub Actions 或 GitLab 的自托管 runner。每次推送更改，runner 都会自动构建、预渲染并部署网站，大家基于同一份源代码工作，每次发布都有记录。

第 6 步：用 Lighthouse 调优

我们在无痕窗口中运行 Lighthouse，并把报告粘贴到两个工具中。Claude Design 修复了内容方面的问题：页面语言、首页 H1 和图片尺寸。Claude Cowork 修复了服务器方面的问题：带版本号文件名的长期缓存、不阻塞渲染的主脚本、从我们自己的服务器提供 React、在页面加载后再加载 Google Tag Manager，以及将脚本压缩到原来大约一半的大小。

性能83 → 91

无障碍92 → 96

SEO100

主要内容出现4.0 秒 → 2.4 秒

如果你也想这样做

每个工具只做一件事让设计工具负责页面和内容，让编码工具负责服务器。不要让两者编辑同一批文件。

书面交接项目文件夹中的简短 Markdown 说明让双方保持同步，也成了我们的文档。

保留一份常驻笔记文件一个写有工作规则的 CLAUDE.md 文件，例如“每个新页面都必须加入 sitemap.xml”，让你不必每次都重复说明。

从第一天起就预渲染如果你的页面是在浏览器中构建的，就在发布时进行预渲染。这决定了网站只是好看，还是能被找到。

让发布失败得响亮能阻止错误发布的自动检查，比任何手动测试都更有价值。

像访客一样测试在无痕窗口、手机上以及 LinkedIn 的 Post Inspector 中检查在线网站。缓存的预览和过期的 CDN 副本会让每个人都中招。

这对我们的客户意味着什么

这个网站刻意保持简单：页面不多，由搭建它的人编辑。对于需要编辑者、工作流和集成的客户，Umbraco 仍然是正确的答案。但同样的方法，由 AI 承担常规工作、经验丰富的人审核每一处改动，如今也贯穿我们的客户项目。它更快、成本更低，也让开发者有更多时间处理真正需要他们的问题。

如果你想在自己的 .NET 和 IIS 环境中打造类似的网站，欢迎联系我们。