gstack /design-review 教程80 项线上站点设计审计 修复循环与前后截图对比【免费下载链接】gstackUse Garry Tans exact Claude Code setup: 23 opinionated tools that serve as CEO, Designer, Eng Manager, Release Manager, Doc Engineer, and QA项目地址: https://gitcode.com/GitHub_Trending/gs/gstackgstack 的/design-review是一款设计师之眼设计审计工具它用真实浏览器打开你的线上站点按 80 项设计检查清单逐项体检找出视觉不一致、间距问题、层级混乱和AI 味界面然后自动修改源码、逐条原子提交并为每个修复生成before/after 前后截图对比。一句话触发从审计到修复闭环完成。/design-review 是什么设计师 前端工程师的双重角色/design-review是 Y Combinator CEO Garry Tan 开源的 gstack 套件23 个虚拟员工技能中的一员。gstack 的理念是一个人 正确工具 一支团队的产出上面两张贡献热力图正是作者 2013 年与 2026 年开发节奏的对比——工具改变一切。这个技能让 AI 同时扮演两个角色资深产品设计师对字体排印、间距、视觉层级有强烈观点对看起来像 AI 生成的界面零容忍前端工程师找到问题后直接改源码每个修复独立提交并用截图重新验证它的完整工作定义在项目文件 design-review/SKILL.md 中核心口号是Design Audit → Fix → Verify审计 → 修复 → 验证。 相关技能上线前的规划期设计评审请用/plan-design-review而/design-review专门针对已运行的线上站点做完即改。一键运行/design-review 安装与调用步骤第一步安装 gstack30 秒在 Claude Code 中执行安装克隆仓库后运行./setupgit clone --single-branch --depth 1 https://gitcode.com/GitHub_Trending/gs/gstack ~/.claude/skills/gstack cd ~/.claude/skills/gstack ./setup第二步一句话触发审计在你的站点项目里对 Claude Code 说Run /design-review on https://your-site.comRun /design-review --quick只审首页 2 个关键页Run /design-review --deep10-15 页适合上线前大审计技能会自动解析你的参数目标 URL、审计范围、深度、认证方式。如果没给 URL 且你正在 feature 分支上它会自动进入diff 感知模式——只审计你这次改动影响的页面并对比修改前后的设计质量。前置检查也很严格干净工作区有未提交改动时会先询问提交 / 暂存 / 中止保证每个修复都有独立 commitDESIGN.md 校准若仓库根目录有DESIGN.md等设计规范文件所有判断以其为基准偏差的严重度更高认证检测跳转到登录页时提示导入浏览器 Cookie可配合/setup-browser-cookies80 项设计审计检查清单10 大类别逐项打分这是整个技能最硬核的部分。对每个页面AI 逐项应用一份10 大类别、约 80 项的检查清单每个发现都标注影响等级high / medium / polish#类别条目数典型检查点1视觉层级与构图8唯一焦点 CTA眯眼测试还能看到层级吗2字体排印15字体 ≤3 种行距 1.5x每行 45-75 字符3色彩与对比度10WCAG AA 对比度语义色一致暗色模式规范4间距与布局124/8px 间距体系圆角层级移动端无横向滚动5交互状态10hover/focus/disabled 齐全触控目标 ≥44px6响应式设计8移动端是设计过的不是桌面堆叠7动效与动画6尊重 prefers-reduced-motion只动画 transform/opacity8内容与微文案8空状态有温度按钮文案具体无happy talk9AI Slop 检测10十大AI 味反模式黑名单见下10性能即设计6LCP 2.0sCLS 0.1图片懒加载清单全文见 design-review/SKILL.md 的Design Audit Checklist小节。 AI Slop 黑名单一眼识别AI 生成的网站技能的自述超能力是检测AI 味。测试标准只有一句** respected 设计工作室的人类设计师会发布这种界面吗** 十大黑名单包括紫色/靛蓝渐变背景三列功能网格彩色圆底图标 粗标题 两行描述重复三次——最具辨识度的 AI 布局彩色圆底图标装饰全部居中对齐所有元素同一个圆滚滚的大圆角装饰性色块、波浪分隔线emoji 当设计元素标题里的卡片彩色左边框套话 Hero 文案Welcome to [X]、Unlock the power of...千篇一律的页面节奏Hero → 三功能 → 评价 → 定价 → CTA双维度 A-F 评分审计报告输出两个头条分数每项按 A精心打磨到 F正在伤害用户体验评级Design Score设计分10 个类别的加权平均——层级/排印/间距各占 15%AI Slop、动效、性能感知各占 5%AI Slop Score独立评级 一句犀利裁决规则很直观每个 High 影响发现降一档每个 Medium 降半档。分数会写入design-baseline.json下次运行时自动进入回归模式对比新旧基线——哪些类目分数变了、哪些问题已解决。修复循环逐条修复 前后截图对比 原子提交审计不是终点/design-review的精髓是闭环修复。所有发现按影响排序后进入逐条修复循环Phase 8每条修复都走同一条流水线定位源码只找与该发现直接相关的文件优先 CSS 改动更安全、可回退目标效果图可选若安装了 gstack designer 组件可先生成修复后应该长什么样的 mockup让差距变得肉眼可见——这是现状这是目标现在改源码去匹配它最小化修复只解决该问题不顺手重构原子提交一条修复一个 commit格式固定为style(design): FINDING-NNN — 简短描述永不打包多个修复重新验证回到受影响页面截finding-NNN-after.png并与finding-NNN-before.png组成前后对比分类结果verified验证通过/best-effort无法完全验证/reverted发现回归 → 立即git revert HEAD并标记 deferred自我调节风险熔断机制每修满 5 条或任何一次回滚后技能会计算设计修复风险值每次回滚 15%改动组件文件JSX/TSX每文件 5%改动无关文件 20%CSS 改动 0%风险超过 20% → 立即停止向你展示已完成内容并询问是否继续硬性上限 30 条修复超出即停这套机制保证 AI 不会越修越乱。最终报告证据链完整可追溯Phase 9-10 会对所有受影响页面重跑审计输出完整报告到项目目录每个发现附带修复状态verified / best-effort / reverted / deferred提交 SHA、改动文件列表before / target / after 三张截图设计分与 AI Slop 分的变化Design score B → A一段可直接粘贴进 PR 描述的总结Design review found N issues, fixed M. Design score X → Y.若仓库有TODOS.md未修复的发现会自动追加为 TODO已修复的历史项会标注Fixed by /design-review。审计流程全景11 个阶段怎么走完整流程可以浓缩成这张表阶段做什么关键输出Phase 1 初印象全页截图 设计师直觉批评第一屏截图、一句话裁决Phase 2 设计系统提取用 JS 探测真实字体/色板/标题层级/触控目标可固化为 DESIGN.mdPhase 3 逐页审计80 项清单 每页树干测试遮住内容只留导航你能知道这是哪个站、你在哪吗逐页发现 标注截图Phase 4 交互流走查走 2-3 条核心用户流程维护善意值仪表盘隐藏定价 -15、强制弹窗 -15…善意值 0-100 分Phase 5 跨页一致性导航/页脚/组件/语气跨页对比一致性发现Phase 6 汇总报告双分数 类目评级 基线 JSONdesign-audit 报告Phase 7 分诊按 high/medium/polish 排序不可修标记 deferred修复队列Phase 8 修复循环见上文定位→修复→提交→截图→验证before/after 截图对Phase 9 终审重跑审计、对比目标 mockup最终分数Phase 10 报告写报告 PR 摘要完整证据链Phase 11 TODOS 更新遗留项进 TODOS.md持续追踪报告目录结构也很讲究design-audit-{日期}/下按first-impression.png、{页面}-annotated.png、{页面}-mobile/tablet/desktop.png、finding-NNN-before/target/after.png分层存放所有证据按发现编号归档。五种运行模式从 --quick 到回归审计模式触发适用场景Full默认直接运行5-8 个页面完整清单 响应式截图 交互流Quick--quick首页 2 个关键页最快拿到设计分数Deep--deep10-15 页 全部交互流上线前/大改版Diff 感知feature 分支且未给 URL 时自动只审本次改动影响的页面对比改动前后Regression--regression或存在历史基线对比上次基线输出回归表新手上手建议3 个使用技巧先--quick后 Deep第一次运行先用 quick 模式熟悉报告格式看到 Quick Wins30 分钟内能完成的最高收益修复后再用完整模式做全量审计。先固化 DESIGN.mdPhase 2 会主动提出要不要把提取出的设计系统存为 DESIGN.md——同意它。之后每次审计都有明确基准AI Slop 判定更准。善用回归模式每次大改后跑一次/design-review报告会对比design-baseline.json基线分数倒退会醒目地警告你——把设计质量变成了可度量的工程指标。/design-review只是 gstack 虚拟团队的一员写完代码用/review找生产级 bugQA 用/qa开真实浏览器测试发布用/ship完成 PR。全部 23 个技能的清单和团队模式说明见 README.md 与 docs/PROJECT_STRUCTURE.md。现在给 Claude Code 发一句Run /design-review on 你的站点让那位零容忍 AI 味的设计师开工吧。【免费下载链接】gstackUse Garry Tans exact Claude Code setup: 23 opinionated tools that serve as CEO, Designer, Eng Manager, Release Manager, Doc Engineer, and QA项目地址: https://gitcode.com/GitHub_Trending/gs/gstack创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 gstack /design-review 教程：80 项线上站点设计审计 + 修复循环与前后截图对比
gstack /design-review 教程80 项线上站点设计审计 修复循环与前后截图对比【免费下载链接】gstackUse Garry Tans exact Claude Code setup: 23 opinionated tools that serve as CEO, Designer, Eng Manager, Release Manager, Doc Engineer, and QA项目地址: https://gitcode.com/GitHub_Trending/gs/gstackgstack 的/design-review是一款设计师之眼设计审计工具它用真实浏览器打开你的线上站点按 80 项设计检查清单逐项体检找出视觉不一致、间距问题、层级混乱和AI 味界面然后自动修改源码、逐条原子提交并为每个修复生成before/after 前后截图对比。一句话触发从审计到修复闭环完成。/design-review 是什么设计师 前端工程师的双重角色/design-review是 Y Combinator CEO Garry Tan 开源的 gstack 套件23 个虚拟员工技能中的一员。gstack 的理念是一个人 正确工具 一支团队的产出上面两张贡献热力图正是作者 2013 年与 2026 年开发节奏的对比——工具改变一切。这个技能让 AI 同时扮演两个角色资深产品设计师对字体排印、间距、视觉层级有强烈观点对看起来像 AI 生成的界面零容忍前端工程师找到问题后直接改源码每个修复独立提交并用截图重新验证它的完整工作定义在项目文件 design-review/SKILL.md 中核心口号是Design Audit → Fix → Verify审计 → 修复 → 验证。 相关技能上线前的规划期设计评审请用/plan-design-review而/design-review专门针对已运行的线上站点做完即改。一键运行/design-review 安装与调用步骤第一步安装 gstack30 秒在 Claude Code 中执行安装克隆仓库后运行./setupgit clone --single-branch --depth 1 https://gitcode.com/GitHub_Trending/gs/gstack ~/.claude/skills/gstack cd ~/.claude/skills/gstack ./setup第二步一句话触发审计在你的站点项目里对 Claude Code 说Run /design-review on https://your-site.comRun /design-review --quick只审首页 2 个关键页Run /design-review --deep10-15 页适合上线前大审计技能会自动解析你的参数目标 URL、审计范围、深度、认证方式。如果没给 URL 且你正在 feature 分支上它会自动进入diff 感知模式——只审计你这次改动影响的页面并对比修改前后的设计质量。前置检查也很严格干净工作区有未提交改动时会先询问提交 / 暂存 / 中止保证每个修复都有独立 commitDESIGN.md 校准若仓库根目录有DESIGN.md等设计规范文件所有判断以其为基准偏差的严重度更高认证检测跳转到登录页时提示导入浏览器 Cookie可配合/setup-browser-cookies80 项设计审计检查清单10 大类别逐项打分这是整个技能最硬核的部分。对每个页面AI 逐项应用一份10 大类别、约 80 项的检查清单每个发现都标注影响等级high / medium / polish#类别条目数典型检查点1视觉层级与构图8唯一焦点 CTA眯眼测试还能看到层级吗2字体排印15字体 ≤3 种行距 1.5x每行 45-75 字符3色彩与对比度10WCAG AA 对比度语义色一致暗色模式规范4间距与布局124/8px 间距体系圆角层级移动端无横向滚动5交互状态10hover/focus/disabled 齐全触控目标 ≥44px6响应式设计8移动端是设计过的不是桌面堆叠7动效与动画6尊重 prefers-reduced-motion只动画 transform/opacity8内容与微文案8空状态有温度按钮文案具体无happy talk9AI Slop 检测10十大AI 味反模式黑名单见下10性能即设计6LCP 2.0sCLS 0.1图片懒加载清单全文见 design-review/SKILL.md 的Design Audit Checklist小节。 AI Slop 黑名单一眼识别AI 生成的网站技能的自述超能力是检测AI 味。测试标准只有一句** respected 设计工作室的人类设计师会发布这种界面吗** 十大黑名单包括紫色/靛蓝渐变背景三列功能网格彩色圆底图标 粗标题 两行描述重复三次——最具辨识度的 AI 布局彩色圆底图标装饰全部居中对齐所有元素同一个圆滚滚的大圆角装饰性色块、波浪分隔线emoji 当设计元素标题里的卡片彩色左边框套话 Hero 文案Welcome to [X]、Unlock the power of...千篇一律的页面节奏Hero → 三功能 → 评价 → 定价 → CTA双维度 A-F 评分审计报告输出两个头条分数每项按 A精心打磨到 F正在伤害用户体验评级Design Score设计分10 个类别的加权平均——层级/排印/间距各占 15%AI Slop、动效、性能感知各占 5%AI Slop Score独立评级 一句犀利裁决规则很直观每个 High 影响发现降一档每个 Medium 降半档。分数会写入design-baseline.json下次运行时自动进入回归模式对比新旧基线——哪些类目分数变了、哪些问题已解决。修复循环逐条修复 前后截图对比 原子提交审计不是终点/design-review的精髓是闭环修复。所有发现按影响排序后进入逐条修复循环Phase 8每条修复都走同一条流水线定位源码只找与该发现直接相关的文件优先 CSS 改动更安全、可回退目标效果图可选若安装了 gstack designer 组件可先生成修复后应该长什么样的 mockup让差距变得肉眼可见——这是现状这是目标现在改源码去匹配它最小化修复只解决该问题不顺手重构原子提交一条修复一个 commit格式固定为style(design): FINDING-NNN — 简短描述永不打包多个修复重新验证回到受影响页面截finding-NNN-after.png并与finding-NNN-before.png组成前后对比分类结果verified验证通过/best-effort无法完全验证/reverted发现回归 → 立即git revert HEAD并标记 deferred自我调节风险熔断机制每修满 5 条或任何一次回滚后技能会计算设计修复风险值每次回滚 15%改动组件文件JSX/TSX每文件 5%改动无关文件 20%CSS 改动 0%风险超过 20% → 立即停止向你展示已完成内容并询问是否继续硬性上限 30 条修复超出即停这套机制保证 AI 不会越修越乱。最终报告证据链完整可追溯Phase 9-10 会对所有受影响页面重跑审计输出完整报告到项目目录每个发现附带修复状态verified / best-effort / reverted / deferred提交 SHA、改动文件列表before / target / after 三张截图设计分与 AI Slop 分的变化Design score B → A一段可直接粘贴进 PR 描述的总结Design review found N issues, fixed M. Design score X → Y.若仓库有TODOS.md未修复的发现会自动追加为 TODO已修复的历史项会标注Fixed by /design-review。审计流程全景11 个阶段怎么走完整流程可以浓缩成这张表阶段做什么关键输出Phase 1 初印象全页截图 设计师直觉批评第一屏截图、一句话裁决Phase 2 设计系统提取用 JS 探测真实字体/色板/标题层级/触控目标可固化为 DESIGN.mdPhase 3 逐页审计80 项清单 每页树干测试遮住内容只留导航你能知道这是哪个站、你在哪吗逐页发现 标注截图Phase 4 交互流走查走 2-3 条核心用户流程维护善意值仪表盘隐藏定价 -15、强制弹窗 -15…善意值 0-100 分Phase 5 跨页一致性导航/页脚/组件/语气跨页对比一致性发现Phase 6 汇总报告双分数 类目评级 基线 JSONdesign-audit 报告Phase 7 分诊按 high/medium/polish 排序不可修标记 deferred修复队列Phase 8 修复循环见上文定位→修复→提交→截图→验证before/after 截图对Phase 9 终审重跑审计、对比目标 mockup最终分数Phase 10 报告写报告 PR 摘要完整证据链Phase 11 TODOS 更新遗留项进 TODOS.md持续追踪报告目录结构也很讲究design-audit-{日期}/下按first-impression.png、{页面}-annotated.png、{页面}-mobile/tablet/desktop.png、finding-NNN-before/target/after.png分层存放所有证据按发现编号归档。五种运行模式从 --quick 到回归审计模式触发适用场景Full默认直接运行5-8 个页面完整清单 响应式截图 交互流Quick--quick首页 2 个关键页最快拿到设计分数Deep--deep10-15 页 全部交互流上线前/大改版Diff 感知feature 分支且未给 URL 时自动只审本次改动影响的页面对比改动前后Regression--regression或存在历史基线对比上次基线输出回归表新手上手建议3 个使用技巧先--quick后 Deep第一次运行先用 quick 模式熟悉报告格式看到 Quick Wins30 分钟内能完成的最高收益修复后再用完整模式做全量审计。先固化 DESIGN.mdPhase 2 会主动提出要不要把提取出的设计系统存为 DESIGN.md——同意它。之后每次审计都有明确基准AI Slop 判定更准。善用回归模式每次大改后跑一次/design-review报告会对比design-baseline.json基线分数倒退会醒目地警告你——把设计质量变成了可度量的工程指标。/design-review只是 gstack 虚拟团队的一员写完代码用/review找生产级 bugQA 用/qa开真实浏览器测试发布用/ship完成 PR。全部 23 个技能的清单和团队模式说明见 README.md 与 docs/PROJECT_STRUCTURE.md。现在给 Claude Code 发一句Run /design-review on 你的站点让那位零容忍 AI 味的设计师开工吧。【免费下载链接】gstackUse Garry Tans exact Claude Code setup: 23 opinionated tools that serve as CEO, Designer, Eng Manager, Release Manager, Doc Engineer, and QA项目地址: https://gitcode.com/GitHub_Trending/gs/gstack创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考