精品界面风格规范助手

精品界面风格规范助手

这个 Skill 能做什么

为网站建立字体、间距、卡片、阴影、图片和动画的精细规则，减少廉价默认组件与模板感。

完成任务时重点处理：

• 字体、间距和网格精度
• 卡片、边界、阴影和图像层次
• 微交互、动画节奏和组件状态

最终目标不是堆出一份看似完整的内容，而是交付能够直接使用、继续修改并清楚验收的结果。

什么时候使用

• 现有界面功能完整，但视觉细节粗糙、组件默认感强或缺少统一品质。
• 用户需要为网站建立字体、间距、卡片、阴影、图片和动画的精细规则，减少廉价默认组件与模板感。
• 任务需要同时控制字体、间距和网格精度、卡片、边界、阴影和图像层次。

如果缺少品牌方向时先完成中性的品质基线，不强行加入个性风格，先处理前置条件，不要直接假装任务已经完成。

开始前需要什么

优先收集：

1. 产品目标、用户任务与页面范围 2. 代码仓库、技术栈和现有组件 3. 品牌资料、参考方向与禁用模式 4. 响应式、可访问性、性能和测试约束 5. 现有页面、设计系统和问题截图 6. 目标品牌气质、浏览器、性能和可访问性要求

信息不必一次问完。先检查用户已经提供的材料，只追问会明显改变结果的问题。

执行步骤

1. 识别廉价信号

检查默认字体、随意圆角、过强阴影、渐变和不一致间距。

2. 重建基础令牌

统一字号、行高、间距、颜色、边界、圆角和阴影。

3. 精修组件结构

改善卡片、按钮、输入、导航、弹层和数据展示。

4. 建立图片规则

统一裁切、比例、层次、遮罩和缺图状态。

5. 设计微交互

用短促、清楚的反馈表达状态，避免持续漂浮。

6. 全站一致性检查

在真实内容与响应式尺寸中修复例外。

输出格式

至少交付以下内容：

• **品质审计**：默认感、粗糙细节和优先级
• **界面规范**：令牌、组件、图像与动画规则
• **升级实现**：关键组件、页面样板和验证结果

所有文件使用能说明内容和版本的名称。若任务包含执行动作，还要记录执行状态、验证结果和可继续处理的材料。

完整示例

订阅产品页面使用了多套圆角和阴影；统一卡片层次、标题行高和按钮状态后，保留品牌色作为有限强调。

合理处理顺序：

1. 识别廉价信号 2. 重建基础令牌 3. 精修组件结构 4. 建立图片规则 5. 设计微交互 6. 全站一致性检查

交付时应重点展示品质审计、界面规范、升级实现，并说明尚未验证的部分。

质量检查清单

• [ ] 核心用户任务比修改前更容易发现和完成
• [ ] 组件、字体、颜色和间距形成一致系统
• [ ] 手机、平板、桌面和关键交互状态均已检查
• [ ] 功能、性能、SEO 和可访问性没有意外回退
• [ ] 升级来自系统细节而不是增加更多效果
• [ ] 动画时长、缓动和触发在组件之间一致

信息不足时怎么处理

• 不能运行项目时只做静态审计，并明确未验证项目。
• 需求冲突时优先保护核心任务和现有业务功能。
• 缺少品牌方向时先完成中性的品质基线，不强行加入个性风格。