技能介绍

解决的具体问题

当前 AI 生成的网页设计普遍存在重复默认值：单一压缩图像覆盖过多区块导致文字过小、暗色 hero 布局俗套、卡片堆砌缺乏层次、排版层级混乱、间距模糊、嵌套容器过多、首屏信息过载等问题。这些输出虽然视觉上看似完整，但缺乏艺术指导和可实现性，难以直接用于前端开发。

核心能力与关键步骤

该技能强制采用 image-first 工作流，将设计图像作为唯一视觉源，代码仅作为实现层。核心步骤包括：

先生成设计图像：在视觉任务中必须优先生成高质量设计参考图，禁止跳过图像生成直接编码
生成足够数量的图像：每个区块独立生成清晰图像，避免压缩导致文字、间距、按钮细节不可读
Codex 中每节一张图像：请求 N 个区块时生成 N 张独立大图，确保文字可读、排版可分析、间距可见
不裁剪旧图像：当区块需要更清晰视图时，生成新图像而非裁剪现有图像，保持设计语言一致性
必要时重新生成：当区块细节不清晰时，生成新的独立图像，优化文字大小和间距可读性
深度图像分析：将生成图像作为设计规范，提取文字、排版、间距、颜色、布局、按钮、组件逻辑等细节
干净分析标准：系统化分析每个区块的视觉优先级、文字可读性、排版关系、间距关系、按钮控件等，避免模糊判断

适用边界与注意点

该技能适用于需要视觉质量的网站设计任务，如 hero sections、landing pages、marketing sites、startup sites、editorial brand pages、product pages、portfolio websites 等。不适用于非视觉任务。使用时需注意：不要跳过图像生成、不要懒惰生成图像数量、不要裁剪旧图像、不要从自由编码开始、不要依赖记忆中的 "好前端品味" 替代实际视觉参考。