Claude Code design-review：对照设计规范检查响应式界面
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/design-review/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/design-review/`，把核对后的文件保存为 `.claude/skills/design-review/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/design-review`。
中文摘要
结合同一份设计规范和页面截图，核对间距、视觉层级和断点表现，并给出可以定位到组件的审查发现。
SKILL.md 中文导读
可复现示例
界面样例 ui-26 的设计稿要求活动卡片在 360 px 视口以 1 列显示。实际截图显示 2 列，并在 360 px 下发生横向滚动。工作步骤
- 先收集设计规范、样式配置和各屏幕宽度的页面证据。
- 逐项对照实现与设计，把可复核差异写入审查报告。
验收方法
审查报告记录 {viewportPx: 360, expectedColumns: 1, actualColumns: 2, horizontalScroll: true}，标出活动卡片组件并附可复查的截图。
GitHub 原文 · 更新日期
适用环境
在 Claude Code 中打开可本地预览的项目，准备 DESIGN.md 或已同意的设计稿，以及不同屏幕宽度的截图。
常见问题
审查后会自动调整视觉样式吗？
默认先输出有截图和组件位置的报告。确认需要修改哪些发现后，再执行相应调整。