技能说明
适合官网、活动页、产品站和工作台的视觉改版，覆盖现状审查、四个差异明显的设计方向、明确确认、真实内容实现、多尺寸截图对照和视觉修正。技能不会静默删改原有功能，生成内容也必须经过产品审核。
关于此技能
用“先看方向、再做页面、最后对照修正”的方式设计和改造网页与应用，避免只凭文字直接堆代码。
核心能力
四种设计方向
先审查现有界面，再提出四个有明显差异的视觉、布局和交互方向，其中一个保留为大胆备选。
确认后实现
把重要的视觉和交互选择列成选项，得到明确确认后再实现，保留原有功能和数据约束。
多尺寸对照
按手机、平板和桌面尺寸对照设计稿与实际页面，记录差异并至少完成一轮针对性修正。
适用场景
网页重新设计
为官网、活动页、产品站和工作台探索不同设计方向，再实现被选中的方案。
已有页面改版
先盘点现有功能、状态和响应式行为，避免改版时误删设置、菜单或异常处理。
视觉还原与验收
用匹配尺寸的截图检查布局、层级、间距、密度和移动端重排是否与选定方向一致。
使用步骤
- 01
第一步：审查真实页面
检查路由、组件、状态、数据和已有响应式表现，同时记录加载、空数据、报错、禁用和确认状态。
- 02
第二步：提出并确认方向
生成四个差异明显的方向，列出需要决定的视觉与交互事项，先得到用户明确选择。
- 03
第三步：实现并对照修正
用真实内容和代表性密度实现，分别截取手机、平板和桌面页面，对照差异后定向修正并复查边界状态。
常见问题
它会直接替我选一个设计方向吗？+
不会。技能要求把方向和重要设计决定列出来并等待明确确认；只有用户明确授权时才可跳过选择。
生成的图片和文案可以直接当成最终产品内容吗？+
不可以。SKILL.md 把生成内容视为候选方案，仍需按产品真实内容、功能和安全约束审核。
通过构建测试就代表视觉验收通过吗？+
不代表。技能要求在相同尺寸、内容密度和交互状态下比较设计与实际截图，构建成功不能代替视觉检查。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Claude Code · Codex · Cursor
已提供来源链接
命令可直接复制
2026/09/03
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
git clone https://github.com/swyxio/skills.git ~/Work/skills && ln -sf ~/Work/skills/design-apps-with-imagegen ~/.claude/skills/design-apps-with-imagegen