前端视觉设计助手

前端视觉设计助手

这个 Skill 能做什么

为新建或重做的前端界面建立与产品内容相符的视觉方向，并把设计决策落实为可维护代码。

完成任务时重点处理：

• 从产品主题推导设计方向
• 字体、布局、色彩和图像的系统关系
• 实现后的响应式与交互细节

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

什么时候使用

• 需要设计落地页、应用页面、仪表盘或组件，且不希望出现模板化默认风格。
• 用户需要为新建或重做的前端界面建立与产品内容相符的视觉方向，并把设计决策落实为可维护代码。
• 任务需要同时控制从产品主题推导设计方向、字体、布局、色彩和图像的系统关系。

如果内容与功能尚未明确时，先完成信息架构和低保真结构，先处理前置条件，不要直接假装任务已经完成。

开始前需要什么

优先收集：

1. 产品目标、用户任务与页面范围 2. 代码仓库、技术栈和现有组件 3. 品牌资料、参考方向与禁用模式 4. 响应式、可访问性、性能和测试约束 5. 页面文案、信息架构和主要行动 6. 可使用的字体、图片和前端依赖

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

执行步骤

1. 理解内容气质

从产品、受众和任务中提取设计必须表达的三个关键词。

2. 探索不同方向

提出构图、字体和色彩逻辑明显不同的方案，而不是微调同一模板。

3. 锁定设计系统

定义令牌、网格、组件表面、图片规则和交互动效。

4. 先做关键区域

优先实现首屏或核心流程，检查信息层级与真实内容适配。

5. 扩展到完整页面

复用系统规则，补齐状态、长文本和响应式变化。

6. 批判与修正

从模板感、可用性、性能和一致性四个角度审查并迭代。

输出格式

至少交付以下内容：

• **视觉方向说明**：主题、字体、颜色、网格和图像原则
• **前端实现**：可运行的页面、组件与响应式样式
• **验证记录**：关键尺寸、状态、性能和可访问性结果

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

完整示例

用户要为研究工具制作落地页；用高密度资料感和清楚的阅读节奏表达可信度，同时让主要行动保持醒目。

合理处理顺序：

1. 理解内容气质 2. 探索不同方向 3. 锁定设计系统 4. 先做关键区域 5. 扩展到完整页面 6. 批判与修正

交付时应重点展示视觉方向说明、前端实现、验证记录，并说明尚未验证的部分。

质量检查清单

• [ ] 核心用户任务比修改前更容易发现和完成
• [ ] 组件、字体、颜色和间距形成一致系统
• [ ] 手机、平板、桌面和关键交互状态均已检查
• [ ] 功能、性能、SEO 和可访问性没有意外回退
• [ ] 设计选择能解释产品而不是套用流行风格
• [ ] 真实文案、长标题和缺图状态均已测试

信息不足时怎么处理

• 不能运行项目时只做静态审计，并明确未验证项目。
• 需求冲突时优先保护核心任务和现有业务功能。
• 内容与功能尚未明确时，先完成信息架构和低保真结构。