Ui-design

概述

UI Design

Overview

本 skill 指导完成从需求到可评审 UI 设计稿/原型的完整工作流，默认采用通用现代风格（generic modern），不绑定特定行业。产出两类可交付物：

1. 设计说明文档 —— 结构化的设计规格（信息架构、布局线框、设计 token、组件清单、交互、响应式、可达性）。
2. 可视化原型 —— 通过内置 Visualizer 渲染的 inline 线框/高保真 mockup，让用户直接"看到"设计。

设计原则、token 与布局模式详见 references/，设计规格模板见 assets/design-spec-template.md。

When To Use

出现以下任一情形时触发：

• 用户明确要求"设计 UI / 画原型 / 出设计稿 / 设计页面 / 布局方案 / 配色方案 / 组件设计"。
• 用户描述一个新界面、新页面、新功能模块，需要外观与结构方案。
• 用户给出参考图/竞品，要求"照这个风格做一个"。
• 用户请求 wireframe / mockup / prototype。

默认风格为通用现代风；若用户指定行业风格（如国网深色科技风），按用户指定执行，但仍遵循本 skill 的流程与可达性要求。

Design Workflow

按以下顺序推进，每步用最少提问确认关键点，避免一次性抛出过多问题。

Step 1 — 需求澄清 (Clarify)

在动手前确认（可一次性问 2–3 个关键项，其余合理假设并说明）：

• 目标与场景：这个界面解决什么问题？给谁用？
• 平台与设备：桌面后台 / 数据大屏 / 移动 App / 响应式网页 / 落地页？
• 核心内容：必须展示哪些信息、数据、操作？
• 范围：单页还是多页？本次先出哪几个页面？
• 风格：默认通用现代风；用户有无参考或指定方向？

将假设显式写明，便于用户纠偏。

Step 2 — 信息架构 (Information Architecture)

• 拆出页面/视图清单与层级（导航树）。
• 每个页面的目标与主任务一句话说明。
• 确定导航方式（侧边栏 / 顶栏 / 底部 Tab / 无导航单页）。

Step 3 — 布局与线框 (Layout & Wireframe)

• 从 references/layout-patterns.md 选取匹配的布局骨架（Dashboard / Admin-CRUD / Landing / Mobile / Form / Data-table / Auth）。
• 用 ASCII 或区块描述画出每个页面的区域划分（页头 / 侧栏 / 内容区 / 卡片网格 / 浮动操作等）。
• 标注每个区块承载的内容与优先级。

Step 4 — 视觉风格 (Visual Style)

• 从 references/style-tokens.md 取用通用现代风的 Design Token：中性灰阶、主色/强调色、语义色（成功/警告/危险/信息）、字体栈、字号阶梯、间距 4 倍数阶、圆角、阴影、边框。
• 确定浅色 or 深色为主，并说明另一模式的适配策略。
• 校验文本/背景对比度满足 WCAG AA（正文 ≥4.5:1，大字 ≥3:1）。

Step 5 — 组件清单 (Component Inventory)

• 列出所需组件（按钮、输入、表格、卡片、图表容器、弹窗、标签、分页、空状态等）。
• 说明每个组件的状态（默认 / hover / active / disabled / loading / error）与交互反馈。
• 引用通用组件命名，避免重复造轮子。

Step 6 — 产出 (Deliverables)

A. 设计说明文档：以 assets/design-spec-template.md 为骨架，填充本项目内容，输出为 Markdown 文件（建议落盘到工作区 artifacts/ 或项目文档目录）。

B. 可视化原型：调用内置 Visualizer 渲染 inline mockup，让用户直接看到布局与风格：

1. 先调用 widget_guidelines，传入 modules: ["mockup"]（如需图表再叠加 "chart"）加载排版与配色约束。
2. 再调用 show_widget，title 用具体页面名（如 数据大屏首页原型），widget_code 为裸 SVG/HTML 片段（不要包 <html>/<head>/<body>/<!DOCTYPE>）；SVG 以 viewBox="0 0 680 ..." 起手。
3. 用真实设计 token（颜色、圆角、字体）绘制线框或高保真静态原型；控件用占位文本+色块表达，不必可交互。
4. 在原型前后用简短文字说明布局逻辑与关键决策。

设计说明文档是主交付物；可视化原型是辅助评审手段。两者保持一致。

Design Quality Bar

交付前自检（详见 references/design-principles.md 的"10 秒诊断清单"）：

• 每屏是否只有一个清晰主任务 / 视觉焦点？
• 层级是否靠尺寸、对比、留白而非装饰区分？
• 交互是否都有状态反馈？
• 是否移动优先并明确断点适配？
• 是否不依赖单一颜色通道传达信息（可达性）？

Resources

• references/design-principles.md —— 现代 UI 设计原则与可达性、诊断清单。
• references/style-tokens.md —— 通用现代风 Design Token（颜色/字体/间距/圆角/阴影/边框，含浅色与深色）。
• references/layout-patterns.md —— 七类常见界面布局骨架与 ASCII 线框。
• assets/design-spec-template.md —— 可填充的设计规格模板（落盘后填写）。