UI 设计师

通过自然语言生成具备生产质量的 React 页面，实时预览，持续迭代直至用户满意。

初始化配置

请查阅 TOOLS.md 中 ### UI Designer 配置项。若缺失，请运行首次初始化脚本：

1. 向用户询问端口号（默认：5174）
2. 执行：bash scripts/setup.sh
3. 将配置保存至 TOOLS.md

项目结构

/
├── project-a/
│   ├── project.json       （配置文件：项目名、偏好设置、设计系统、页面列表）
│   ├── assets/             （图片资源，自动转为 .webp 格式）
│   ├── landing/index.html  （通过 CDN 加载的 React 页面）
│   └── about/index.html

React 页面模板（CDN 方式，无需构建步骤）

工作流程

关键要求：每次操作均需主动向用户发送消息 —— 不仅限于里程碑节点。例如：读取文件时说“正在读取项目配置……”；生成 HTML 时说“正在生成悬赏页……”；截图时说“正在截图……”。用户应始终清楚你当前在执行什么操作。请将其视作实时构建日志来处理。

步骤 1：项目名称

询问：“项目名称是什么？”

• 若 // 已存在：读取 project.json，展示当前配置与已有页面，并询问是修改现有内容还是新增
• 若为新项目：创建目录及 project.json
• → 向用户发送消息：“项目已创建 / 已加载 ✓”

步骤 2：偏好设置（新建或修改）

询问设计偏好（风格、字体、配色、品牌素材等），并保存至 project.json。

• → 向用户发送消息：“偏好设置已保存 ✓”

步骤 3：页面 Slug

询问：“该页面的 slug 是什么？”

• 检查是否已存在 → 若存在则询问是否覆盖或新建
• → 向用户发送消息：“Slug 已确认：/ ✓”

步骤 4：设计细节与设计系统

询问页面内容需求及设计系统规范（参见下方「设计原则」）。更新 project.json 中的设计系统字段。

• → 向用户发送消息：“已收到，正在生成……”

步骤 5：生成页面

生成 React 页面，并严格遵循「设计原则」。

• → 向用户发送消息：“HTML 已生成，正在进行视觉审查……”

步骤 6：截图审查循环

bash scripts/screenshot.sh "http://localhost:///" /tmp/-review.png 1400 900

使用 image 工具分析截图，修复问题后重新截图。同时需检查移动端效果（宽度 = 390）。

• → 向用户发送消息：“审查完成，正在发送预览……”

在向用户分享前，必须至少完成一次桌面端 + 一次移动端的完整审查流程。

步骤 7：分享与迭代

向用户发送实时访问 URL 及截图。 收集反馈 → 应用修改 → 重新截图 → 再次分享 → 循环执行。

• → 每次迭代环节均需同步告知用户进展

步骤 8：媒体资源处理

若用户提供图片：

1. 保存至 /assets/
2. 转换为 .webp 格式：bash scripts/convert-image.sh [quality]
3. 在 HTML 中引用路径为：../assets/filename.webp

• → 向用户发送消息：“图片已转换：1.2MB → 340KB（体积减少 72%）✓”

步骤 9：导出项目

压缩整个项目文件夹并发送：

cd  && zip -r /tmp/.zip /

通过消息工具以 filePath 参数发送 ZIP 文件。基于 CDN 的 React 页面可独立运行 —— 直接打开 index.html，或使用任意静态服务器托管即可。

图片处理

为保障性能，所有用户提供的图片均需转为 .webp 格式：

bash scripts/convert-image.sh input.png output.webp 80

• 默认质量值：80（画质与体积的良好平衡）
• 用于首屏大图 / Banner 图：质量值设为 85
• 用于缩略图 / 图标：质量值设为 70
• 每次转换后均需向用户报告压缩节省量

原型设计阶段如需占位图：

• 照片类占位图：https://picsum.photos/seed///
• 纯色占位图：https://placehold.co/x//

设计原则

所有生成页面必须一致遵守以下原则。这些是不可妥协的质量标准。

布局与间距

• 采用统一的间距刻度 —— 严格使用 Tailwind 默认刻度（4、6、8、12、16、20、24），禁止混用任意数值。
• 限制最大内容宽度 —— 始终约束内容区域（如 max-w-5xl 或 max-w-6xl），文本不得铺满全宽。
• 保持垂直节奏 —— 各区块间留白需一致（主区块用 py-16，子区块用 py-8）。
• 移动端内边距 —— 所有容器最小水平内边距为 px-4，文字不得紧贴屏幕边缘。

排版

• 清晰的层级结构 —— h1 最大，依次递减至 h3；单页字体大小最多使用 3–4 种。
• 合理行长 —— 每行字符数控制在 65–75 以内以提升可读性；正文块建议使用 max-w-prose 或 max-w-2xl。
• 字重对比明确 —— 标题使用加粗（font-bold/font-semibold），正文使用常规字重。
• 文字颜色层级分明 —— 标题用白色，正文用 gray-300，次要/弱化内容用 gray-500。

色彩与对比度

• 满足 WCAG AA 最低对比度要求 —— 文字与背景对比度不低于 4.5:1。
• 精简配色方案 —— 最多使用 1 种主色 + 1 种强调色 + 中性色，避免彩虹式滥用。
• 强调色使用一致 —— 主色仅用于 CTA、链接及激活态，切勿泛用。
• 深色背景分层处理 —— 使用 bg-900 → bg-800 → bg-700 等渐进式深色营造层次感，禁用纯黑（#000）。

响应式设计

• 移动优先 —— 先针对 390px 屏幕设计，再逐步增强适配更大尺寸。
• 断点规范 —— 使用 sm:（640px）、md:（768px）、lg:（1024px）；三者均需测试验证。
• 触控目标尺寸 —— 移动端按钮/链接最小尺寸为 44×44px。
• 移动端堆叠布局 —— 网格布局须坍缩为单列，禁止因内容导致水平滚动。
• 导航方式 —— 移动端必须提供汉堡菜单，并配合下拉式面板展开导航。

组件与交互

• 图标 —— 必须使用 SVG，禁用 emoji（emoji 在无头浏览器中不兼容且渲染不一致）。
• 按钮 —— 明确悬停态（颜色变化 + 轻微缩放或阴影），圆角统一。
• 卡片 —— 添加细微边框（如 border-white/5 或 border-dark-600），背景色与页面背景略有差异。
• 过渡动画 —— 所有可交互元素均需添加 transition 类，持续时间控制在 150–200ms。
• 焦点状态 —— 所有可交互元素必须具备可见的焦点环，确保无障碍访问。

图片与性能

• 全部图片使用 .webp 格式 —— 用户上传图片须经 scripts/convert-image.sh 转换。
• 懒加载 —— 折叠区域以下的图片需添加 loading="lazy" 属性。
• 固定宽高比 —— 使用 aspect-video 或 aspect-square 类防止布局偏移（layout shift）。
• 替代文本 —— 每张图片均需配备描述性 alt 文本。

代码质量

• 语义化 HTML —— 正确使用 header、main、section、footer、nav 等标签，杜绝“div 堆砌”。
• 禁用 Lorem ipsum —— 占位文本必须符合上下文语义，不可随意填充。
• React 组件化 —— 将 UI 拆分为逻辑清晰的组件（如 Navbar、Hero、Features 等）。
• 状态管理 —— 对交互型元素（选项卡、模态框、下拉菜单等）使用 useState。

常见错误（务必规避）

• ❌ 移动端文字紧贴屏幕边缘
• ❌ 使用 emoji 替代图标（应使用 SVG）
• ❌ 使用纯黑色背景（应使用分层深色）
• ❌ 可点击元素缺少悬停态
• ❌ 元素圆角半径不统一
• ❌ 字体过大导致移动端溢出
• ❌ 缺失 meta viewport 标签
• ❌ 移动端遗漏汉堡菜单