SKILL-PROJECT: Skill for OpenCode

HTML 原型生成器

生成用于需求沟通和交互验证的简约 Web 原型。默认采用扁平设计，不把原型包装成高装饰性的正式 UI。

必读资源

• 分析页面、交互和视觉要求前读取 references/prototype-dsl.md。
• 生成时以 templates/web-prototype.html 为结构参考，不直接照搬模板业务内容。
• 需要完整案例时读取 examples/red-packet-prototype.html。

强制流程

需求分析 → 页面与任务规划 → 详细自然语言 DSL → 匹配基础模板 → 生成 HTML → 结构与交互检查 → 浏览器渲染检查 → 修正并交付

1. 分析需求

明确原型目的、用户角色、核心任务、页面范围、设备类型、保真度、主题、交互深度和输出路径。用户提供需求文档时读取该文档；未提供时直接分析当前需求，不依赖固定默认文件。

区分用户确认事实、合理补充和不能擅自推断的业务规则。页面或核心操作不明确且会改变结果时再询问用户。

2. 规划页面与任务

列出页面清单、全局导航、每个页面的主要任务以及页面之间的跳转。先保证核心任务闭环，再增加次要页面。普通后台原型通常覆盖列表、详情、创建或编辑以及必要的状态反馈。

3. 生成详细自然语言 DSL

按 references/prototype-dsl.md 描述全局布局、页面区域、组件、文案、示例数据、交互、状态和检查要求。DSL 不强制落盘，不使用 JSON、JSON Schema 或 DiagramPlan。

完成条件：只阅读 DSL 即可还原页面结构和主要交互，HTML 阶段不再猜测页面意图。

4. 匹配基础模板

使用 templates/web-prototype.html 的设计令牌、页面骨架和基础组件。根据需求删除、替换或重组区域，禁止为了保留模板而输出无业务意义的导航、卡片或空容器。

5. 生成 HTML

• 默认生成单个自包含 .html，内嵌 CSS 和 JavaScript。
• 不依赖 React、Vue、npm 工程、CDN、在线字体或远程图片。
• 默认浅色；用户明确要求时再生成深色或品牌主题。
• 默认无阴影、渐变、网格、玻璃效果和装饰性插画。
• 页面允许纵向滚动，不把全部内容强行压进一屏。
• 仅在需求明确需要跨刷新保留状态时使用 localStorage。
• 不把每个区域都包装成卡片，边界只用于帮助理解结构。

6. 结构与交互检查

检查页面清单、导航、按钮、标签页、弹窗、表单校验和状态反馈是否完整；检查重复 ID、空链接、失效按钮、不可关闭弹窗和不可恢复状态。核心任务必须可以从入口执行到完成或失败反馈。

7. 浏览器渲染检查

在真实浏览器中打开 HTML，至少检查一个主流桌面视口。复杂页面同时检查 1440×810 和 1280×720。验证浏览器控制台、页面切换、表单、弹窗和关键操作。

视觉检查必须覆盖：颜色对比、布局均衡、元素重叠、文字清晰、组件对齐、间距一致、内容拥挤和大面积空白。失败时返回布局或 DSL 阶段修正，不得通过缩小字体或无意义扩大页面规避问题。

简约视觉基线

• 使用系统字体、1px 边框、4–6px 圆角和 4/8px 间距体系。
• 主色只用于主要操作和当前状态；成功、警告、错误色仅用于对应语义。
• 页面标题、区域标题和正文形成清楚的三级层级。
• 默认不使用阴影；确有浮层层级时也优先使用边框和遮罩表达。
• 保持同类按钮、输入框、表格行和标签样式一致。

输出

输出到用户指定目录；未指定时输出到项目根目录 output/prototype/html。默认只交付最终 .html 路径，并说明页面范围、主题及交互和渲染验证结果。不交付 README、中间 DSL 或临时截图，除非用户明确要求。