AI网站构建器
一款应用只有在同时满足五个条件时才算世界级：它回答了用户真正想要的东西；它看起来与众不同且能有效转化；它只陈述真实信息；它里面的每一个功能都能工作；并且在声称完成之前，有人在真实浏览器上查看过它。这个技能就是用来达成所有五个条件的方法论，适用于任何技术栈，无论是独自工作还是与辅助代理协作。
从这里开始：人们将用它做什么？
在进行任何工具调用之前，先确定你要构建的是以下哪种应用。如果不明确，请阅读 references/01-read-the-request.md。
| 用户要求…… | 构建 | 阅读的参考文件 |
|---|---|---|
| 一个关于企业、个人、地点或其销售物品的应用 | 一个阅读型应用：故事、他们提供的真实证明、联系他们的方式 | 01, 02, 03, 09, 04, 10 |
| 一个需要“使用”的东西：仪表盘、工具、门户、“像Slack但...”、对现有工作工具的重新设计 | 一个功能型应用：/ 是工作界面，包含演示数据，如果有登录功能，则应显示可见的演示凭据 | 01, 05优先，然后是03, 09, 04 |
| 一个活动（如语言学习、考试练习、计划、追踪），有目标受众但未提及具体企业 | 一个功能型应用。对于学习类：一个精心设计的首页，包含各个部分，然后是课程、练习、进度跟踪。不是为一个虚构学校做的宣传册 | 01, 05, 09 |
| 一个呈现现有产品的页面 | 一个关于该产品的阅读型应用 | 01, 02, 03, 09, 04, 10 |
请求中的“网站”一词并不决定其类型；决定因素是所有者用语（如“我的学院”、“我们的商店”）以及人们将在此平台上做什么。当不确定时，按照构建功能型应用的方式来解读，并在你的第一条消息中说明。
工作循环（详情见 references/00-operating-loop.md）
- 读取请求。 编写
.app-notes/brief.json（包含用户原话中的事实、未知项、假设）和.app-notes/requirements.json（包含他们现在和之后说的每一件事）。最多提出一个经过分类的问题，仅在一个错误猜测会改变构建方向时提问。 - 研究与策略（与步骤3并行）。研究真实的类别，写下九项策略答案和设计论点。详见
references/02-research-and-strategy.md - 灵感板（与步骤2并行）。每轮六个板；每个板是一个设计，以同一应用的四个屏幕截图展示，尺寸约2048 x 1280；用户可以要求更多轮，直到满意。这六个板来自目标受众文化中的六个候选世界，而不是六个形容词（
references/09-design-craft.md第2节）。详见references/03-design-direction.md - 概念、证据、评审组。 每个板对应一个概念，结构上各不相同；将每个概念渲染为一个真实页面；进行评分；选择最佳方案。
- 绑定设计方向。 创建
DESIGN.md、tokens.css、fonts.css，进行对比度检查，并为每个页面创建蓝图。 - 规划。 为页面和区域分配简明任务，为功能分配可执行的验收步骤，为图片分配用途。
- 构建。 先构建基础，然后并行构建页面生成器，最后进行集成。仅使用设计Token（tokens），真实文案，真实图片，可工作的控件。详见
references/04-build-system.md，功能型应用参考references/05-working-apps.md。 - 验证 在生产构建上运行
scripts/check-app.mjs：测试三种视口尺寸，模拟访客滚动方式，截图，记录测量事实，执行设计扫描（对比度、排版、层级结构、文字覆盖、AI生成痕迹检测器），检查功能流程，录制导览。详见references/06-qa-and-repair.md - 评审，然后修复。 首先，不带预设地评判设计；然后阅读扫描结果；接着逐个运行命名的优化迭代（布局、排版、着色、加粗、稳固、打磨……），每个迭代有明确范围，并以证据收尾。修复问题根源；重新检查；回滚使情况恶化的改动。详见
references/09-design-craft.md - 根据选定的图片进行打磨，然后仅基于测量数据诚实地报告。
不要跳过步骤3、4、8和9：这是应用摆脱模板化、让“完成”不再只是口头承诺的关键步骤。可以并行运行彼此独立的步骤。
不可协商的规则
- 诚实高于一切。 绝不虚构推荐语、Logo、媒体报道、评分、统计数据、奖项、团队成员、地址、邮箱、电话号码、价格、营业时间、回复时间、政策、保证或资质。缺失的事实要么直接省略（默认做法），要么转化为邀请用户补充，或者用可见的
<Draft>标记一次以供所有者处理。统计用户未列出的内容即视为虚构。功能型应用中的示例数据仅在屏幕上有“演示数据”字样时才被允许。 - 没有虚假运作的功能。 不能有空的
href="#"、指向虚无的表单、被禁用的“未连接”按钮、用户未选定的第三方表单服务、或接受任何输入的登录框。要就真实接入，要就完全省略并说明原因。 - 绝不声称未经测量的事情。 不能在没有明确证据的情况下说“已测试”、“已验证”、“无障碍”、“已打磨”或“响应式”。“无法查看”绝不等于“干净”。除非你已发起启动调用的操作，否则绝不说工作已开始。
- 在编码之前，根据图片决定外观， 然后构建与选定图片一致的应用。不使用现成的默认外观。拒绝第1和2阶AI痕迹，除非此客户的领域确实需要它们（
09将它们列为一套规则，QA脚本会测量；一个review发现只有当有理由时才保留）。 - 一个设计系统。 颜色、字体、圆角、阴影和缓动效果只能来自设计Token。最多使用两种字体族。一个标志性时刻和一个刻意的不完美之处。强调色要谨慎使用。
- 图片丰富、经过艺术指导且绝不伪造。 大约每滚动一屏一张图片，采用统一的风格，通过图片清单管理，包含真实的alt文本；不使用手绘的SVG对象或人物插画；图片中不含文字；不使用被标注为真实事件的AI生成图片。
- 正确的语言，正确的书写系统。 正确设置
lang和dir；使用真实的书写系统（绝不用音译代替）；使用逻辑CSS属性；无法验证的翻译需标记给所有者处理。 - 用户说的每一句话都被记录和使用。 后续问题、调整和回答需要记录到需求清单中，并被后续所有步骤读取。后续沟通是同一个项目的一部分。
- 证据优先于代码。 每一个视觉上的主张都必须源于你在本次运行中，在390px、768px和1440px宽截图下实际查看过的图片。
- 修复原因，最小改动。 先复现，再修复原因，最后重新检查。两次修补尝试失败后，重写组件。如果生成图片中存在缺陷，需要新图片，而非CSS。
启动模板与脚本
下方 <skill> 指的是此SKILL.md所在的文件夹（例如 ~/.claude/skills/ai-website-builder）。请从项目文件夹运行脚本。
bash <skill>/scripts/scaffold.sh ./my-app [--app] # 复制启动模板，安装依赖，运行lint，构建（--app 为功能型应用添加 src/app/ 目录）
node <skill>/scripts/contrast.mjs --tokens src/styles/tokens.css # 检查组件使用的所有颜色对，包括亮色和暗色模式
node <skill>/scripts/optimize-images.mjs --src .app-notes/originals --alt .app-notes/alt.json # 生成avif + webp格式图片集合及其清单
pnpm build && pnpm preview # 启动生产版本的预览服务（保持运行）
node <skill>/scripts/check-app.mjs --url http://localhost:4173 --flows .app-notes/flows.json --tour [--extremes]
# 截图、测量事实、设计扫描、功能流程测试、录制访问过程、生成报告
# --extremes 额外测试320x640和1920x1080视口；--no-design跳过设计扫描
QA脚本需要Playwright（pnpm add -D playwright && npx playwright install chromium）或 --chrome /path/to/chrome。图片优化器需要Sharp。
assets/template/ 是一个Vite + React 19 + TypeScript + Tailwind v4项目，包含按路由预渲染、Token契约、18个UI原语、动效工具包、沉浸式工具包、应用工具包以及一个能在构建失败时检查常见错误的lint。它的 AGENTS.md 是权威的文件映射；STANDALONE.md 说明了在没有托管平台的情况下手动操作需要做什么（如配置作者Token、制作图片、设置表单端点）。对于功能型应用，使用 scaffold.sh --app（它会创建 src/app/{accounts,db,seed}.ts；如果无人登录的应用，保留 demoAccounts 为空）。如果用户项目已有其他技术栈，可以使用它：本法、规则和脚本不依赖于此模板。
使用辅助代理
如果使用子代理工具，请根据 references/08-role-briefs.md 划分工作，并为每个助手分配不重叠的写作用域（基础层：共享文件；页面构建器：每个页面一个文件夹；集成器最后进行）。如果独自工作，遵循相同的顺序。维护一个共享的待办列表：用户的事项归他们决定；在与你部分相关的事项全部完成之前，不要交回控制权；最终，每个事项要么已完成，要么有备注说明被阻止，要么有未完成的原因。
结项报告（仅基于测量数据）
你构建的内容（页面、功能）；对于功能型应用，哪些是真实的、哪些是模拟的；用户必须自行提供什么；已验证的内容及其结论；哪些内容未被验证；仍以简单语言描述的待办事项；按需求分类：已构建并已验证、已构建但未验证、或未完成并说明原因。报告应简短、直白、无营销语气。在发送之前，请使用 assets/checklists/done.md 进行检查。
参考文件地图
| 文件 | 何时阅读 |
|---|---|
references/00-operating-loop.md | 规划运行、拆分工作、维护清单和待办列表时 |
references/01-read-the-request.md | 每次任务的前十分钟；判断是阅读型应用还是功能型应用；确定语言；识别用户主张；处理后续问题 |
references/02-research-and-strategy.md | 研究类别、撰写策略和设计论点、选择页面骨架时 |
references/03-design-direction.md | 处理灵感板、概念、设计手法、排版、工艺规则、AI痕迹、证据、评审组、保真度时 |
references/04-build-system.md | 编写代码时：Token、页面、文案、表单、图片、动效、SEO、无障碍、性能预算 |
references/05-working-apps.md | 涉及任何用户可使用的功能时：模拟后端、登录、区域、流程、学习类应用 |
references/06-qa-and-repair.md | 验证、评判、修复、评审、编写结项报告时 |
references/07-failure-catalogue.md | 开始前和报告前：之前出错的记录及修复方法 |
references/08-role-briefs.md | 向辅助代理分配任务时；映射工具名称 |
references/09-design-craft.md | 决定推进力度（访客模式）、构建世界、设定颜色和排版基线、作为规则的AI痕迹、可优化的迭代步骤、两种评估方式、评分标准时 |
references/10-copy-and-voice.md | 编写或审查应用中的任何文字时：基于事实的语气、文案插槽规则、AI生成的散文痕迹识别 |
references/11-listening-to-the-audience.md | 研究步骤：倾听目标受众的担忧和用词，但不借用他们的主张 |
references/12-diagrams.md | 需要绘制工作原理图、流程图、架构图或示意图时；使用Token在标记中构建 |
references/13-reference-teardown.md | 研究期间，评估最多三个参考应用的工艺和结构时 |
references/14-scripts-and-app-jobs.md | 处理非拉丁字体脚本；了解不同类型应用中访客的目的；添加无障碍功能时 |
references/15-redesign-and-extension.md | 处理已存在的应用时：记录现状，选择打磨、重新样式化或全面重新设计，并证明未丢失任何功能 |
references/NOTICE.md | 此技能借鉴的公开项目的致谢和许可信息 |
assets/checklists/brief.md, done.md | 清单模板；作为最终检查 |