Openprd Frontend Design

<!-- OPENPRD:GENERATED
adapter=codex
source=openprd-frontend-design
version=0.1.19
checksum=c1dce7f1b79de34b
-->

OpenPrd Frontend Design

当任务涉及界面、页面、视觉、样式、组件层级、信息架构、内容型页面或前端体验时，使用这份 skill。

如果任务会新建界面、结构性改变信息架构/核心布局/视觉系统，或后续要交给 Impeccable，实现前同时读取 skills/openprd-ui-context/SKILL.md。由 UI Context 负责 greenfield/brownfield 项目理解、三个专业方向、用户确认以及 PRODUCT.md/DESIGN.md 编译；本 skill 继续提供审美资产框架与反模板化门禁。低风险局部修正使用 UI Context 的 local-fix 路径，不重复冻结完整合同。

核心目标

• 让 Agent 在动手实现前，先有一套稳定的前端设计资产和判断顺序。
• 避免界面任务默认收敛成同一种安全解。
• 避免“没素材硬做”“事实没核实就写页面”“看起来好看但空心”的情况。
• 让每个界面先有明确审美主张和记忆点，而不是只套默认模板、堆卡片或复用通用 AI 风格。

先读这些文件

• .openprd/design/README.md
• .openprd/design/templates/README.md
• skills/openprd-frontend-design/references/design-asset-contract.md
• skills/openprd-frontend-design/references/direction-engine.md

如果当前工作区本来就有现成前端结构，或你明确需要偏离模板默认组合，再读：

• .openprd/design/lenses/frontend-lenses.md
• .openprd/design/themes/theme-catalog.json
• .openprd/design/layouts/layout-catalog.json
• .openprd/design/components/component-catalog.md
• .openprd/design/checklists/ui-quality-gate.md
• .openprd/design/anti-slop.md

如果本轮已经进入实现准备，再读：

• .openprd/design/active/facts-sheet.md
• .openprd/design/active/asset-spec.md
• .openprd/design/active/image-preflight.md
• .openprd/design/active/direction-plan.md
• .openprd/design/active/selected-direction.md

使用顺序

1. 先判断这是不是前端体验任务。
2. 选一个 lens，明确这次界面的视觉判断角度。
3. 写清本次审美立意：页面解决什么问题、服务谁、气质要偏哪一端、受什么技术/可访问性约束、用户第一眼应该记住什么。
4. 选一个 theme、一个 layout skeleton 和一个 recipe，并说明它们如何服务上面的审美立意。
5. 如果页面会写具体产品事实，先补 facts-sheet.md。
6. 如果页面依赖品牌素材、产品图、界面图、图库或插图，先补 asset-spec.md，并记录字体、色彩、动效、背景/表面这些审美资产。
7. 如果这类页面没有真实图片就会空心，先补 image-preflight.md。
8. 如果用户还没有给参考方向，先补 direction-plan.md，明确 3 个异源方向；每个方向都要有不同审美主张和记忆点。
9. 用户选定方向后，再补 selected-direction.md，把选中的 lens、theme、layout、组件、审美主张、记忆点和风险锁定。
10. 如果用户已经给了效果图、设计稿、参考截图或其他明确参考图，先把它视为主参考源：优先锁定它的版式、层级、主视觉和关键路径；starter / lens / theme / layout 只作为实现加速器，不作为高于参考图的裁决源。
11. 如果当前是空白工作区的前端/页面冷启动，而且用户原话已经给了明确的页面主题、模块范围或“直接实现”的意图，优先运行 openprd run . --context --message <用户原话>，不要先跑不带 message 的 run --context。
12. 跑完 design-starter 后，立即进入 Patch Mode：把生成的入口文件当成稳定基座，在同一路径里细化结构、内容、样式和交互。
13. 最后再进入验证，并用 .openprd/design/checklists/ui-quality-gate.md 和 .openprd/design/anti-slop.md 做自检。

空白工作区快路径

如果当前工作区几乎没有前端入口文件，或只有 .openprd/ 与说明文档：

1. 先运行一次 openprd run . --context 看建议路径；如果当前轮用户已经把页面主题、模块范围或“直接实现”的意图说清，优先带 --message <用户原话>，让建议基于当前请求，而不是只看空白工作区状态。
2. 如果建议已经是轻量原型/轻量实现路径，或这类 blank frontend task 在带 message 后仍短暂返回 clarify-user 但用户原话已足够明确，不要继续长时间翻 docs/basic/ 占位文档。
3. 立刻把 .openprd/design/active/facts-sheet.md、asset-spec.md、image-preflight.md、direction-plan.md、selected-direction.md 写成具体内容；如果当前任务是个人博客、通用静态首页、单页介绍或其他不依赖外部产品事实/品牌素材/真实图片的页面，也要明确写成“无外部事实依赖”“当前无品牌素材依赖”“真实图片不是页面成立前提”，不要长期保留 pending。
4. 选 .openprd/design/templates/ 里最接近的一份模板；如果用户已经给了效果图、设计稿或参考图，先挑最接近它的 starter / lens / theme / layout；只有确实接近时才复用，不接近就允许偏离默认组合，以用户参考图为准。如果当前任务已经有一句明确页面主题和模块范围，优先直接运行 openprd design-starter . --starter <starter-id> --out index.html --brief "<页面主题>" --sections "<模块1|模块2|模块3>"。只有像个人博客、工具台、纯结构化产品页这类确认不靠真实图片成立的静态首页，才补 --no-external-facts --no-brand-assets --no-real-images，让 starter 同步写实 active design artifacts，并把 docs/basic/、入口文件说明书和根目录文件夹 README 一起补到可过 standards 的状态；如果题目更像旅游、导览、展览、博物馆、城市、自然观察、案例展示或品牌内容页，默认不要带 --no-real-images，先让 starter 尝试补首批真实图片。
5. 下一步动作应该是一轮补丁，同时改 active design artifacts 和生成的入口文件；如果 design-starter 已经带 --brief 生成了第一版真实内容，就直接在生成的入口文件上细化结构、内容和样式，并立即进入 Patch Mode。Patch Mode 的意思是：入口路径已经固定，后续所有大改都在当前文件里完成；如果你觉得整页都要重写，也是在同一路径内覆盖，不做 delete-first。禁止删除 index.html 后另起新稿；即使结构要大改，也是在当前文件里重排，不要回头整份通读模板源码。如果你真的需要整页重写，先把完整新稿写到同目录 sibling draft，例如 index.next.html，确认内容成形后再覆盖回 index.html，不要让入口文件出现空窗。starter 一落地后，只允许做一轮就地对焦：快速读一次生成的入口文件和必要的 active design artifacts；这轮对焦结束后，下一步就必须是真实写入口，不要再回头搜网页、翻 docs/basic/ 或继续模板漫游。把最后一批必要的查事实、查图、读模板动作放在口头宣布之前做完；一旦你已经口头宣布“开始覆盖入口文件”或“进入整页重写”，下一步必须是对 index.html 或 sibling draft 的实际写操作，不要继续长时间读模板、翻文档、压图片或停在口头承诺。只有规划、下载图片、补合同或口头说明还不算完成；必须把最终页面真的改到入口文件里。

默认要求：

• 对 blank static prototype，模板默认组合优先于“把所有 catalog 全读一遍再决定”；只有真的需要偏离模板默认组合时，才回头细读 lenses / themes / layouts / components。
• 对 blank static prototype，优先使用 openprd design-starter . --starter <starter-id> --out index.html，把“挑模板”和“创建入口文件”变成确定动作，不要让 Agent 自己发明复制步骤。
• 对 blank static prototype，如果 prompt 已经给了页面主题和模块范围，优先把它们带进 design-starter 的 --brief 与 --sections，让 starter 直接落真实首版，并顺手把基础文档和说明书从模板态拉成当前事实，而不是先生成整页占位再手工回填。
• 对 blank static prototype，如果当前轮是用户直接给任务，优先让 openprd run . --context --message <用户原话> 参与当前请求解析，而不是只看空白工作区自身状态。
• 如果用户已经给了效果图、设计稿、参考截图或其他明确参考图，默认把它当成这轮实现的主约束；只有现有 starter、theme、layout 足够接近时才复用它们，否则以参考图为准，不强行套库。
• 没有明确参考图时，不要直接落回紫白渐变、白底卡片堆叠、通用 SaaS hero、Inter/Roboto/Arial/system-ui 默认字体栈，或“浅色留白 + 少量点缀色”的安全解；先写出更具体的气质和记忆点。
• 选择 theme 时优先用有角色分工的字体、色彩、表面、动效和密度体系；如果必须使用中性字体或克制配色，要说明这是为扫描效率、品牌限制或可访问性服务，而不是偷懒。
• 动效、背景、纹理、阴影和装饰只能强化本次审美主张，不能替代信息层级、真实素材或任务完成路径。
• 对 blank static prototype，如果页面不依赖外部产品事实、品牌素材或真实图片，允许并建议在 active design artifacts 里直接写清：无外部产品事实依赖、当前无品牌素材依赖、真实图片不是页面成立前提；这类页面不该因为“没有更多证据可查”而一直停在 待填写 / pending。
• 对旅游、导览、展览、博物馆、城市、自然观察、馆藏、案例展示这类页面，默认先把“真实图片大概率是页面成立前提”写进判断里；除非你已经有明确降级方案，否则不要顺手补 --no-real-images。
• 跑完 design-starter 后，立即替换生成入口文件里的 title、首屏文案、CTA 和所有 [占位] 文案；除非真的需要额外结构，不要再回头整页阅读模板文件。
• 跑完 design-starter 后，不要再重新判断“要不要删文件重写”；下一步默认就是进入 Patch Mode，至少同时修改 index.html 和必要的 active design artifacts；直接在生成的入口文件上改。禁止删除 index.html 后重起，也不要继续翻 theme / layout / template 源码来给自己找“再等等”的理由。
• 跑完 design-starter 后，如果确实还需要确认当前骨架，只允许做一轮就地对焦：快速读一次生成的入口文件和必要的 active design artifacts；对焦结束后，下一步就必须是真实写入 index.html 或 sibling draft，不要再回头搜网页、翻 docs/basic/ 或继续模板漫游。
• 如果确实要做整页重写，默认先写 sibling draft，例如 index.next.html 或 index.rewrite.html，确认新稿已经成形后再覆盖回 index.html；不要先把当前入口删掉再慢慢补。
• 把最后一批必要的查事实、查图、读模板动作放在口头宣布之前做完；一旦你已经说“现在开始覆盖入口文件”或“现在开始整页重写”，下一步必须出现真实写文件动作；优先直接修改 index.html，或先写 index.next.html / index.rewrite.html，不要继续只读浏览或长时间停住。
• 如果用户已经给了效果图或设计稿，跑完 design-starter 后的第一目标不是“回到样式库重新想一版”，而是把参考图里的版式、信息层级、主视觉和关键路径真正映射到当前入口文件里。
• active design artifacts 是空白工作区里第一批应该被写实的文件，不是实现后补填的附属记录。
• 当你已经读完 design 框架和 active 模板后，不要继续反复扫描同一批模板文件；直接进入填写和实现。
• 对静态单页原型，默认优先用单文件 HTML 模板起步；只有复杂交互或现有项目结构已经明确时，才拆成多文件。