视觉参考转网页助手

视觉参考转网页助手

这个 Skill 能做什么

先创建或分析高质量页面视觉参考，再把每个区块准确实现为响应式网页代码。

完成任务时重点处理：

• 分区视觉参考与细节分析
• 布局、字体、颜色、图片和组件映射
• 代码还原、响应式变化与前后对照

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

什么时候使用

• 网页任务对视觉还原要求高，需要用明确设计图约束后续实现。
• 用户需要先创建或分析高质量页面视觉参考，再把每个区块准确实现为响应式网页代码。
• 任务需要同时控制分区视觉参考与细节分析、布局、字体、颜色、图片和组件映射。

如果无法生成参考图时先制作线框和设计令牌，不凭空跳到精修代码，先处理前置条件，不要直接假装任务已经完成。

开始前需要什么

优先收集：

1. 产品目标、用户任务与页面范围 2. 代码仓库、技术栈和现有组件 3. 品牌资料、参考方向与禁用模式 4. 响应式、可访问性、性能和测试约束 5. 页面目标、文案、区块列表和技术栈 6. 现有参考图或允许生成的设计图数量

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

执行步骤

1. 规划页面区块

先确定信息架构、内容和每个区块的任务。

2. 建立视觉参考

为关键区块生成或选择清晰、可读、尺寸正确的设计图。

3. 深度分析参考

记录网格、间距、字体、色值、图像、组件和状态。

4. 建立实现映射

把视觉元素拆成 DOM、组件、令牌和素材。

5. 逐区块实现

先保证结构与比例，再处理细节、动画和响应式。

6. 截图对照迭代

在相同视口比较参考与实现，记录并修正差异。

输出格式

至少交付以下内容：

• **视觉参考组**：按页面区块整理的高质量设计图
• **实现映射**：视觉决策到组件、样式和素材的对应
• **网页成品**：可运行代码、响应式页面和对照截图

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

完整示例

用户要做八区块产品页；为每个区块准备独立横向参考图，再按共同令牌逐段实现与截图对照。

合理处理顺序：

1. 规划页面区块 2. 建立视觉参考 3. 深度分析参考 4. 建立实现映射 5. 逐区块实现 6. 截图对照迭代

交付时应重点展示视觉参考组、实现映射、网页成品，并说明尚未验证的部分。

质量检查清单

• [ ] 核心用户任务比修改前更容易发现和完成
• [ ] 组件、字体、颜色和间距形成一致系统
• [ ] 手机、平板、桌面和关键交互状态均已检查
• [ ] 功能、性能、SEO 和可访问性没有意外回退
• [ ] 参考图中的文字与结构在实现中不是不可编辑位图
• [ ] 每个区块都有对应参考且没有压成一张难分析长图

信息不足时怎么处理

• 不能运行项目时只做静态审计，并明确未验证项目。
• 需求冲突时优先保护核心任务和现有业务功能。
• 无法生成参考图时先制作线框和设计令牌，不凭空跳到精修代码。