ui-prototype

name	ui-prototype
description	UI 原型产出技能，根据选定风格生成静态 HTML 原型，作为 Builder 的设计契约

UI 原型产出技能

触发条件

• 用户说「画个原型」「做个 UI 草图」「先出个设计看看」
• 用户说「用什么风格好」「给我几个风格选」
• 用户说「生成 preview」
• Designer Agent 在 Plan 阶段被要求产出原型时

工作流程

Step 1：确定风格

如果用户没有指定风格，先询问或提供选项：

请从以下风格中选择（或自定义）：

1. Apple 简约 — 白底、黑白灰、克制用色、大留白
2. 深色渐变 — 深色背景、紫蓝渐变、玻璃拟态卡片
3. 新拟物 — 纯白背景、厚重阴影、大胆色块
4. 极简线框 — 灰白底、细线框、无阴影、排版驱动

输入数字选择，或描述你想要的风格。

风格定义在 styles/ 目录下，用户可自行添加或修改。

Step 2：读取风格定义

从 styles/[style-name].md 读取选中风格的完整定义，包括：

• 色彩系统（背景、文字、主色、辅色、状态色）
• 字体方案
• 圆角/阴影/间距规范
• 组件样式（卡片、按钮、输入框、导航等）
• 禁止项

Step 3：产出原型

根据用户描述的页面需求 + 选定风格，生成静态 HTML 原型：

技术要求：

• 单个 HTML 文件，内联 CSS（无外部依赖）
• 移动端视口：<meta name="viewport" content="width=device-width, initial-scale=1">
• 使用风格定义中的 CSS 变量
• 语义化 HTML 结构
• 包含 2-3 个典型页面状态（如列表页、详情页、空状态）

输出：

• 保存到 preview/[页面名].html
• 用户可在浏览器直接打开预览

Step 4：确认与迭代

• 向用户展示原型预览
• 用户确认后，原型成为 Builder 的设计契约
• 用户要求修改时，直接更新 preview/ 中的文件

风格文件格式

styles/[name].md 结构：

# [风格名称]

## 设计语言
一句话描述风格核心特征。

## 色彩系统
- 背景：#xxx / #xxx
- 文字：主 #xxx / 副 #xxx / 辅助 #xxx
- 主色：#xxx
- 辅色：#xxx
- 状态：成功 #xxx / 警告 #xxx / 错误 #xxx

## 字体
- 字体栈：...
- 标题：xx px / weight
- 正文：xx px / weight
- 辅助：xx px / weight

## 间距
- 页面边距：xxpx
- 卡片间距：xxpx
- 卡片内边距：xxpx

## 圆角
- 卡片：xxpx
- 按钮：xxpx
- 标签：xxpx
- 输入框：xxpx

## 阴影
- 卡片：...
- 悬浮：...

## 组件规范
### 按钮
### 卡片
### 输入框
### 导航
### 列表项

## 禁止项
- 不允许使用的颜色/效果/风格

注意事项

• 原型不是最终代码，是设计契约
• Builder 实现时应还原原型的视觉效果，而非复制原型代码
• 风格文件由用户维护，Designer 只负责读取和应用
• 如果 styles/ 目录为空，使用内置的「Apple 简约」作为默认风格