网站与产品 UI 设计

为官网、Landing Page、SaaS 产品、数据看板、表单、表格和响应式应用外壳提供统一且不绑定品牌的 UI 基线。

什么时候用它

• 在已有项目中创建或修改网站与产品界面。
• 把设计转成代码，同时保留项目的技术栈、Token、组件和主题。
• 评审字体、间距、圆角、控件、图标、深度、状态或响应式行为。
• 基于真实渲染视口和交互状态执行视觉质量检查。

它统一什么

• 官网与高密度产品界面分别使用不同的标题体系。
• 正文从16px开始，仅使用400与600字重，行高统一为150%。
• 默认使用8px间距网格，只保留4px作为微间距。
• 统一圆角、控件高度、交互热区、深度与页面层级角色。
• 一个主功能图标系统、稳定语义别名和写入前导出名验证。
• 清楚区分焦点、选中、加载、空、错误、成功、禁用和只读状态。
• 统一响应式容器、断点、重排策略和可观察的视口检查。

决策顺序

用户的明确要求和目标项目已有设计系统始终优先。本 Skill 的默认值只在项目缺少对应规范时使用。

本 Skill 不生成或选择配色。项目没有颜色系统时，只建立结构、排版、间距、组件职责和状态语义，把颜色决策保留在范围之外。

不适用范围

• 组织专属品牌治理，包括仅适用于 TranFu 的品牌规范。
• 独立配色、字体搭配、品牌识别或 Logo 设计。
• 纯文案、纯后端或不影响视觉的修改。
• 不涉及 UI 设计判断的纯无障碍、性能或合规审查。

输出

根据任务只返回一种结构化报告：

• 创建、修改或重构使用 UI_CHANGE_REPORT。
• 有证据的设计评审使用 UI_DESIGN_REVIEW。
• 真实渲染视口检查使用 UI_VISUAL_QA_REPORT。
• 只有必需输入或依赖阻止继续时才使用 UI_DESIGN_BLOCKER_REPORT。