design-with-images

使用图像进行设计

交付成果应是可运行的设计，并且在视觉上与获批的参考图一致。 图像生成用于探索目标效果；真实截图用于证明实现效果。 如果请求仅用于探索，请交付备选方案并等待选择。

工作流

1. 明确决策范围。 阅读相关设计技能，并截取实际界面。明确哪些内容可以更改、哪些必须保持不变：内容、取景、配色、交互和周围 UI。保留原始截图。
2. 生成备选方案。 使用可用的图像生成技能/工具，并将该截图作为参考。生成一组少量且标注清晰、视觉方向各异的方案。将其展示为概念图，绝不可当作已实现代码的截图。
3. 锁定选定目标。 使用现有审批或委托的设计裁量权；否则请用户选择。在项目的参考目录中保留选定的图像、提示词和来源信息。明确其可见要求：间距和内边距、轮廓、排版、不透明度、边缘柔和度、层级和位置。不要用提示词中要求的属性替代选定图像实际呈现的效果。编码前，请根据 Reference Landmarks 完成参考测量。
4. 实现设计。 使用项目实际的组件和视觉原语。生成的样图不是源代码，简单的 CSS 也不能证明实现忠实度。若实现约束要求采用不同机制，应保留原本预期的关系。将生成文本中的错误或虚构细节标记为伪影；不要仅为匹配像素而将其发布。
5. 比较并迭代。 在可比的缩放比例、取景和状态下，截取真实实现的界面。使用 compare-screenshots，对照获批的概念图进行比较，并提供完整上下文以及针对已更改特征的紧凑裁剪图。完成边界/重叠检查：比较效果的每一侧以及效果所覆盖的任何前景，不要只比较整体柔和度和间距。交接时保留每项特征的通过/修复/不确定记录。代码修改前后的截图对比仅作补充；它能证明发生了更改，却不能证明与选定设计一致。列出重要差异，在代码中修复后重新截图并再次比较。持续迭代，直到每项预期特征都匹配，或用户明确修改目标。功能测试通过、差异分数降低，或凭记忆判断“已经够接近”，都不是停止条件。一旦出现限制，立即说明。
6. 验证并交接。 在相关状态和尺寸下检查真实设计，包括拥挤和低对比度的情况。使用 screenshot-critique 进行不受预期影响的审查；将获批的参考图与实际结果并排展示并清楚标注，并在可用时使用 preview-shots。在宣告完成或发布前，通过同一比较循环解决重要反馈。先稳定这一视觉验收关卡，再运行耗时较长的收尾测试套件；设计仍在变化时，使用有针对性的检查。保留现有授权；如果选定的设计和发布操作均已获批，不要另行设置审批关卡。

规则

• 区分概念、先前实现和当前实现。 切勿用最新代码截图替换已批准的参考。
• 以实际尺寸的截图作为主要证据。标明衍生对齐结果； 切勿更改应用缩放比例或裁掉缺陷来改善一致性。
• 根据生成参考图的预期设计特征进行评判，而非要求重新渲染的文本或景物完全相同。明确记录此类排除项； 但这并不意味着可以忽略不同的内边距、形状或层级。
• 选定的概念是要求，而非可以默默重新诠释的灵感来源。 如果无法忠实实现，请展示具体冲突并寻求修订后的目标，而不要将近似方案作为成品呈现。