2026/9/18 16:30:14
FEATURED · 精选文章 
ui-ux-pro-max-skill 设计栈工作流实战从 plan 到 review 的完整设计循环【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill本篇文章围绕仓库stack/docs/WORKFLOW.md定义的核心工作流展开系统讲解 ui-ux-pro-max-skill 设计栈如何在 Claude Code 中落地plan → commit → build → see → review五步设计循环先用ui-ux-pro-max知识层产出设计令牌用frontend-design定下审美基调再用 Playwright 真正看见渲染结果并修复最后经design-review子代理按 WCAG 2.1 AA 标准收口。读完你将掌握一套可直接复用的 AI 前端设计流程——包括定价区块的完整实战示例、对存量站点做审计的命令行操作以及如何读懂真实审计报告并把它接入 CI。一、为什么 AI 设计看起来像 AI 设计缺的恰恰是看见这一步大多数 AI 生成界面的通病不是代码写错而是模型从未真正看过自己产出的页面——代码能编译通过不代表布局、交互状态、无障碍与响应式没有问题。ui-ux-pro-max-skill 的stack/目录正是针对这一点设计的它不是一个提示词模板而是一套把知识层 审美层 反馈层接进 Claude Code 的完整环境参见 stack/CLAUDE.md。这套环境围绕一个单一循环运转plan → commit → build → see → review其中see打开真实浏览器截图、读控制台、触发交互状态和review子代理按可访问性标准复核是决定成败的两步。stack/docs/WORKFLOW.md的原话是跳过 see 和 review恰恰就是让 AI 设计露出马脚的原因。每个环节由哪一层、哪个工具负责stack/docs/STACK.md 给出了明确的失败模式对照表失败模式对应修复工具/层千篇一律的模板化观感AI slop强制做出审美承诺frontend-design审美层令牌与模式模糊、不一致让决策扎根于真实数据库ui-ux-pro-max知识层永远看不到结果 → 交付损坏的 UI给 Agent 一双眼睛Playwright / Chrome DevTools MCP重复造原始组件直接拉取成熟组件shadcn MCP我觉得还行的自我评估独立、严格的复核design-review子代理简言之ui-ux-pro-max决定什么是对的frontend-design决定什么是有辨识度的。二、五步循环总览plan → commit → build → see → review在开始实战之前先建立对循环的整体认知。每一步对应一个明确产出PLAN用数据规划写任何标记之前先跑设计系统生成器拿到具体 token——4~6 个颜色、2 个字体角色、间距刻度以及相关 UX 反模式清单。COMMIT定下观感回答purpose / tone / constraints / differentiation四个问题选定唯一的 tone 与一个签名元素并明确拒绝AI 三俗默认观感奶油色衬线陶土色、近黑酸性强调色、发丝线大报风格。BUILD按 token 实现用已定 token 实现组件化栈优先通过 shadcn MCP 添加card、toggle、badge等成熟组件而非手搓。SEE真正看见在真实浏览器打开页面截图、读控制台、触发 hover/focus/菜单/表单提交等交互状态并缩放到多档视口修复 z-index、动画时序、布局偏移、溢出等问题。REVIEW独立复核运行design-review子代理跨移动端→超宽屏视口驱动 Playwright检查 WCAG 2.1 AA对比度、焦点顺序、键盘陷阱、响应式完整性与交互状态返回分级发现修复 Blocker/High 后才算完成。stack/docs/STACK.md进一步给出了知识层ui-ux-pro-max的数据规模84 种 UI 风格、192 组色板、73 组字体搭配、99 条 UX 指南、25 种图表类型、一份 Core Web Vitals 数据集以及 22 个技术栈。这些数据落在本仓库 src/ui-ux-pro-max/data/ 下如 colors.csv、typography.csv、ux-guidelines.csv、stacks/ 下的 react.csv、vue.csv、nextjs.csv 等并由 search.py 提供检索入口。三、实战示例为一个开发者工具构建定价区块stack/docs/WORKFLOW.md用一个完整任务串起整个循环Build a pricing section for a developer tool为开发者工具构建定价区块受众是技术人员要求可信、高对比。下面逐步拆解。3.1 Plan with data/design-plan→ui-ux-pro-max启动规划的命令是 /design-plan developer tool pricing section, technical audience, trustworthy, high-contrastClaude 会运行设计系统生成器拉取调色板、字体搭配与相关的 UX 反模式例如 dont hide the total——不要隐藏总价make the recommended plan obvious——让推荐套餐显而易见。产出是一组紧凑的 token4~6 个颜色2 个字体角色type roles一套间距刻度spacing scale。在仓库里设计系统生成器对应的底层命令形如路径中的skill需替换为实际安装路径参见 stack/CLAUDE.mdpython3 skill/scripts/search.py product industry keywords --design-system -p Project python3 skill/scripts/search.py query --domain style|color|typography|ux|landing|web-vitals即本仓库 src/ui-ux-pro-max/scripts/search.py它支持按 domain 精确检索风格、色彩、字体、UX 指南、落地页结构与 Web Vitals 预算。这些输出被当作 token颜色/字体/间距的事实来源source of truth。3.2 Commit to a lookfrontend-design定审美基调CLAUDE 需要回答purpose / tone / constraints / differentiation四个问题然后只选一种 tone并精确执行。本例选定precise, engineered, monospace-accented精确、工程化、等宽字体点缀并选择唯一签名元素——推荐套餐背后的细网格纸grid-paper背景。同时明确拒绝creamserif 与 acid-on-black 这两种 AI 默认观感。这一步的价值在于不采样训练分布的安全中心把胆量花在一个签名元素上其余部分保持安静。3.3 Build用已定 token 实现使用第 3.1 步选定的 token 实现。在 React 项目上通过shadcn MCP添加card、toggle、badge组件而不是手搓这些可访问性原语——避免重复造轮子也保证组件级可访问性基线。3.4 See itPlaywright MCP——最关键的步骤代码编译通过 ≠ 完成。工作流要求打开真实页面 Open it at http://localhost:3000/pricing. Screenshot mobile (375) and desktop (1440). Toggle monthly/annual and check the focus states.Claude 打开真实页面后抓到代码审查看不出来的三个问题月度/年度切换开关没有可见的焦点环focus ringMost popular 徽章在 375px 宽度下压到了卡片边框价格数字在卡片滚入视口之前就开始播放入场动画。Claude 逐一修复并重新截图。这正是stack/CLAUDE.md中反馈层的核心表述A change you have not looked at is not finished你没看过的改动就不算完成。3.5 Review/design-review独立复核收尾前运行 /design-review http://localhost:3000/pricing子代理会驱动全部六档视口、用 Tab 键遍历整个区块、检查 muted per month 文字的对比度然后返回分级结论Verdict: Ship with fixes Blockers: none High: per user / month text is 3.9:1 on the card background (fails AA for body text) Medium: CTA tap target is 40px tall on mobile (44) Whats working: type scale is consistent; recommended-plan emphasis is clear修复 High Medium 之后这个区块才算完成——有辨识度、响应式、可访问且经过真实验证。四、把同一个循环用在已有站点上stack/docs/WORKFLOW.md特别说明这套循环同样适用于已经部署的站点只需把工具指向线上地址 npm run audit -- --url https://your-site.com # 快速启发式扫描 截图 /design-review https://your-site.com/pricing # 带审美判断与交互流分析的完整复核第一条命令对应 stack/scripts/design-audit.mjs在 stack/package.json 中以npm run audit暴露特点是快、自动、无 MCP 依赖适合本地快速扫描与 CI 门禁第二条则交给design-review子代理做全量体验评审。二者定位不同启发式检查抓机械缺陷子代理评判体验。五、生产站点的一次真实审计juniper-audit 实例stack/examples/juniper-audit/ 收录了一次真实运行design-audit.mjs的完整产物审计对象是一个金融咨询公司Juniper的营销主页。该目录包含三部分report.md——分级发现 控制台健康度report.json——机器可读版本CI 消费的就是它screenshots/——六个视口360 → 1920px的全页截图也就是文首两张图的完整来源。5.1 如何复现这次审计stack/examples/juniper-audit/README.md 给出了精确复现命令——关键是用 HTTP 服务而非 file:// 打开避免字体 CORS 噪音污染控制台python3 -m http.server 8099 # 在站点目录中启动 node scripts/design-audit.mjs --url http://localhost:8099/ --out examples/juniper-audit5.2 从源码看审计脚本做了什么打开 stack/scripts/design-audit.mjs可以看到脚本的核心设计六档视口L25-L32mobile-360/mobile-390/tablet-768/laptop-1024/desktop-1440/wide-1920每个视口独立开 context、独立截图与检查8 类启发式检查inPageChecks函数L51-L134横向溢出页面宽度超过视口 1px 即报 high并列出前 5 个越界元素未定尺寸媒体缺width/height的img属 CLS 风险与缺失alt移动端点击目标≤480px 视口下小于 44×44px 的交互元素焦点可见性对前 25 个可聚焦元素逐一 focus检查 outline/shadow控件可访问名称无文本、无 aria-label、无图片替代的 button/link标题结构缺h1或出现多个h1文档元信息缺viewportmeta、html缺lang近似文本对比度对最多 120 个文本节点做 WCAG AA 估算large 文本 3:1、普通文本 4.5:1。自动滚动后再截图autoScrollL139-L153先滚动全页触发IntersectionObserver的 scroll-reveal 与懒加载再回到顶部截图避免全页截图拍到空白区块聚合与退出码L191-L229按check message去重并记录命中的视口按 high/medium/low 排序写入report.md与report.json存在 high 级发现时退出码为 2可直接作为 CI 门禁。5.3 读懂真实报告juniper-audit 的真实 report.md 摘要如下Findings: 2 high · 2 medium · 0 low Console errors (1): [mobile-360] Failed to load resource: ... 404 HIGH - focus-visible2~3/25 个采样交互元素无可见焦点指示命中全部视口 MEDIUM - tap-target移动端 14 个交互目标 44×44px命中 mobile-360/390 MEDIUM - contrast约 1/82 个文本节点低于 AA 对比度近似值值得注意该站点本身构建良好有设计令牌、自托管字体、prefers-reduced-motion、scroll-reveal但启发式层依然捞出了三类人工快速浏览容易漏掉的问题——键盘用户找不到焦点WCAG 2.4.7、手机误触、以及一处待人工核实的对比度疑点唯一的控制台错误是单个资源的 404属于需要追踪但不是布局缺陷的问题。5.4 两个关于工具本身的经验教训stack/examples/juniper-audit/README.md 特别总结了两次实际运行教会我们的两点用 HTTP 而非file://服务页面。file://下浏览器会从nullorigin 拦截跨源字体请求产生一屏纯粹是伪影的 CORS 错误。示例中所有数字都来自真实 HTTP 服务所以控制台是干净的。全页截图与激进 scroll-reveal 并不完全兼容。脚本虽然会自动滚动触发 reveal 以恢复大部分内容但对只在精细滚动下才展示的区块单张全页截图中仍可能出现空白带。这既是工具限制也是真实的健壮性信号——同样的内容对部分爬虫、打印和非交互式捕获也是不可见的。此时应当用会自然滚动、等待并交互的/design-review子代理来复核启发式检查抓机械缺陷子代理评判体验。六、经验法则与质量底线6.1 四条经验法则stack/docs/WORKFLOW.md收尾给出四条铁律是整个循环的浓缩没有第 4 步see就不要宣称 UI 工作完成——你没看过的东西就不算完成让ui-ux-pro-max定 token、frontend-design定态度——数据负责正确性品味负责辨识度Blocker/High 阻断合并Medium/Nit 不阻断——保持节奏不要在细枝末节上过度争论每次修复后重新截图——循环本身很便宜回归才昂贵。6.2 质量底线永远不低于这个标准交付stack/CLAUDE.md 为循环补充了四条硬性质量底线作为 review 环节的验收标尺响应式375 / 768 / 1024 / 1440px 下无横向滚动内容重排而非缩放可访问每个交互元素都有可见的:focus-visibleWCAG AA 对比度正文 4.5:1、大文本/UI 3:1语义化 landmarks控件有标签尊重prefers-reduced-motion性能布局稳定无因未定尺寸媒体/字体引发的 CLS首屏以下图片懒加载font-display: swap避免渲染阻塞资源对照web-vitalsdomain 核查文案有意图主动语态、句子式大小写、用用户认识的词命名事物。七、落地指南安装、验证与独立审计如果你想把整套循环接入自己的项目stack/docs/SETUP.md 给出了从零到可用的三步# 1. 一键安装审计依赖 Playwright Chromium、ui-ux-pro-max skill ./scripts/setup.sh # 2. 在 Claude Code 内安装审美层插件 /plugin install frontend-designanthropics/claude-code # 3. 打开 Claude Code批准项目 MCP 服务器playwright / chrome-devtools / shadcn用 /mcp 验证装好后可用三句话验证工作流是否打通来自 stack/docs/SETUP.md /design-plan portfolio site for a photographer, editorial and minimal Build the hero, then screenshot it at 375px and 1440px and fix anything that breaks. /design-review http://localhost:3000不依赖 Claude 的独立审计同样可用且支持本地文件npm run audit -- --url http://localhost:3000 npm run audit -- --file ./index.html输出到audit-output/report.md与逐视口截图存在 high 级发现时退出码非零可挂进 CIstack/package.json 中的audit与audit:file两个 script 就是入口。常见故障MCP 服务器启动失败、找不到 Chromium、skill 命令不存在的排查方法也都记录在 stack/docs/SETUP.md 的 Troubleshooting 一节。结语让看见成为流程的一部分回到stack/docs/WORKFLOW.md的核心论点AI 设计之所以露出破绽不是模型能力不足而是流程里缺了see与review两个闭环。ui-ux-pro-max-skill 设计栈的解法是把知识ui-ux-pro-max数据层、品味frontend-design、反馈Playwright 截图与交互和复核design-review子代理 CI 启发式审计四者接进 Claude Code 的日常工作流。从本文的定价区块实战与 juniper-audit 真实报告可以看到只要循环闭环产出的 UI 就能同时具备辨识度、响应式、可访问性与可验证性——这恰恰是看起来像 AI 设计的反面。【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
ui-ux-pro-max-skill 设计栈工作流实战：从 plan 到 review 的完整设计循环
ui-ux-pro-max-skill 设计栈工作流实战从 plan 到 review 的完整设计循环【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill本篇文章围绕仓库stack/docs/WORKFLOW.md定义的核心工作流展开系统讲解 ui-ux-pro-max-skill 设计栈如何在 Claude Code 中落地plan → commit → build → see → review五步设计循环先用ui-ux-pro-max知识层产出设计令牌用frontend-design定下审美基调再用 Playwright 真正看见渲染结果并修复最后经design-review子代理按 WCAG 2.1 AA 标准收口。读完你将掌握一套可直接复用的 AI 前端设计流程——包括定价区块的完整实战示例、对存量站点做审计的命令行操作以及如何读懂真实审计报告并把它接入 CI。一、为什么 AI 设计看起来像 AI 设计缺的恰恰是看见这一步大多数 AI 生成界面的通病不是代码写错而是模型从未真正看过自己产出的页面——代码能编译通过不代表布局、交互状态、无障碍与响应式没有问题。ui-ux-pro-max-skill 的stack/目录正是针对这一点设计的它不是一个提示词模板而是一套把知识层 审美层 反馈层接进 Claude Code 的完整环境参见 stack/CLAUDE.md。这套环境围绕一个单一循环运转plan → commit → build → see → review其中see打开真实浏览器截图、读控制台、触发交互状态和review子代理按可访问性标准复核是决定成败的两步。stack/docs/WORKFLOW.md的原话是跳过 see 和 review恰恰就是让 AI 设计露出马脚的原因。每个环节由哪一层、哪个工具负责stack/docs/STACK.md 给出了明确的失败模式对照表失败模式对应修复工具/层千篇一律的模板化观感AI slop强制做出审美承诺frontend-design审美层令牌与模式模糊、不一致让决策扎根于真实数据库ui-ux-pro-max知识层永远看不到结果 → 交付损坏的 UI给 Agent 一双眼睛Playwright / Chrome DevTools MCP重复造原始组件直接拉取成熟组件shadcn MCP我觉得还行的自我评估独立、严格的复核design-review子代理简言之ui-ux-pro-max决定什么是对的frontend-design决定什么是有辨识度的。二、五步循环总览plan → commit → build → see → review在开始实战之前先建立对循环的整体认知。每一步对应一个明确产出PLAN用数据规划写任何标记之前先跑设计系统生成器拿到具体 token——4~6 个颜色、2 个字体角色、间距刻度以及相关 UX 反模式清单。COMMIT定下观感回答purpose / tone / constraints / differentiation四个问题选定唯一的 tone 与一个签名元素并明确拒绝AI 三俗默认观感奶油色衬线陶土色、近黑酸性强调色、发丝线大报风格。BUILD按 token 实现用已定 token 实现组件化栈优先通过 shadcn MCP 添加card、toggle、badge等成熟组件而非手搓。SEE真正看见在真实浏览器打开页面截图、读控制台、触发 hover/focus/菜单/表单提交等交互状态并缩放到多档视口修复 z-index、动画时序、布局偏移、溢出等问题。REVIEW独立复核运行design-review子代理跨移动端→超宽屏视口驱动 Playwright检查 WCAG 2.1 AA对比度、焦点顺序、键盘陷阱、响应式完整性与交互状态返回分级发现修复 Blocker/High 后才算完成。stack/docs/STACK.md进一步给出了知识层ui-ux-pro-max的数据规模84 种 UI 风格、192 组色板、73 组字体搭配、99 条 UX 指南、25 种图表类型、一份 Core Web Vitals 数据集以及 22 个技术栈。这些数据落在本仓库 src/ui-ux-pro-max/data/ 下如 colors.csv、typography.csv、ux-guidelines.csv、stacks/ 下的 react.csv、vue.csv、nextjs.csv 等并由 search.py 提供检索入口。三、实战示例为一个开发者工具构建定价区块stack/docs/WORKFLOW.md用一个完整任务串起整个循环Build a pricing section for a developer tool为开发者工具构建定价区块受众是技术人员要求可信、高对比。下面逐步拆解。3.1 Plan with data/design-plan→ui-ux-pro-max启动规划的命令是 /design-plan developer tool pricing section, technical audience, trustworthy, high-contrastClaude 会运行设计系统生成器拉取调色板、字体搭配与相关的 UX 反模式例如 dont hide the total——不要隐藏总价make the recommended plan obvious——让推荐套餐显而易见。产出是一组紧凑的 token4~6 个颜色2 个字体角色type roles一套间距刻度spacing scale。在仓库里设计系统生成器对应的底层命令形如路径中的skill需替换为实际安装路径参见 stack/CLAUDE.mdpython3 skill/scripts/search.py product industry keywords --design-system -p Project python3 skill/scripts/search.py query --domain style|color|typography|ux|landing|web-vitals即本仓库 src/ui-ux-pro-max/scripts/search.py它支持按 domain 精确检索风格、色彩、字体、UX 指南、落地页结构与 Web Vitals 预算。这些输出被当作 token颜色/字体/间距的事实来源source of truth。3.2 Commit to a lookfrontend-design定审美基调CLAUDE 需要回答purpose / tone / constraints / differentiation四个问题然后只选一种 tone并精确执行。本例选定precise, engineered, monospace-accented精确、工程化、等宽字体点缀并选择唯一签名元素——推荐套餐背后的细网格纸grid-paper背景。同时明确拒绝creamserif 与 acid-on-black 这两种 AI 默认观感。这一步的价值在于不采样训练分布的安全中心把胆量花在一个签名元素上其余部分保持安静。3.3 Build用已定 token 实现使用第 3.1 步选定的 token 实现。在 React 项目上通过shadcn MCP添加card、toggle、badge组件而不是手搓这些可访问性原语——避免重复造轮子也保证组件级可访问性基线。3.4 See itPlaywright MCP——最关键的步骤代码编译通过 ≠ 完成。工作流要求打开真实页面 Open it at http://localhost:3000/pricing. Screenshot mobile (375) and desktop (1440). Toggle monthly/annual and check the focus states.Claude 打开真实页面后抓到代码审查看不出来的三个问题月度/年度切换开关没有可见的焦点环focus ringMost popular 徽章在 375px 宽度下压到了卡片边框价格数字在卡片滚入视口之前就开始播放入场动画。Claude 逐一修复并重新截图。这正是stack/CLAUDE.md中反馈层的核心表述A change you have not looked at is not finished你没看过的改动就不算完成。3.5 Review/design-review独立复核收尾前运行 /design-review http://localhost:3000/pricing子代理会驱动全部六档视口、用 Tab 键遍历整个区块、检查 muted per month 文字的对比度然后返回分级结论Verdict: Ship with fixes Blockers: none High: per user / month text is 3.9:1 on the card background (fails AA for body text) Medium: CTA tap target is 40px tall on mobile (44) Whats working: type scale is consistent; recommended-plan emphasis is clear修复 High Medium 之后这个区块才算完成——有辨识度、响应式、可访问且经过真实验证。四、把同一个循环用在已有站点上stack/docs/WORKFLOW.md特别说明这套循环同样适用于已经部署的站点只需把工具指向线上地址 npm run audit -- --url https://your-site.com # 快速启发式扫描 截图 /design-review https://your-site.com/pricing # 带审美判断与交互流分析的完整复核第一条命令对应 stack/scripts/design-audit.mjs在 stack/package.json 中以npm run audit暴露特点是快、自动、无 MCP 依赖适合本地快速扫描与 CI 门禁第二条则交给design-review子代理做全量体验评审。二者定位不同启发式检查抓机械缺陷子代理评判体验。五、生产站点的一次真实审计juniper-audit 实例stack/examples/juniper-audit/ 收录了一次真实运行design-audit.mjs的完整产物审计对象是一个金融咨询公司Juniper的营销主页。该目录包含三部分report.md——分级发现 控制台健康度report.json——机器可读版本CI 消费的就是它screenshots/——六个视口360 → 1920px的全页截图也就是文首两张图的完整来源。5.1 如何复现这次审计stack/examples/juniper-audit/README.md 给出了精确复现命令——关键是用 HTTP 服务而非 file:// 打开避免字体 CORS 噪音污染控制台python3 -m http.server 8099 # 在站点目录中启动 node scripts/design-audit.mjs --url http://localhost:8099/ --out examples/juniper-audit5.2 从源码看审计脚本做了什么打开 stack/scripts/design-audit.mjs可以看到脚本的核心设计六档视口L25-L32mobile-360/mobile-390/tablet-768/laptop-1024/desktop-1440/wide-1920每个视口独立开 context、独立截图与检查8 类启发式检查inPageChecks函数L51-L134横向溢出页面宽度超过视口 1px 即报 high并列出前 5 个越界元素未定尺寸媒体缺width/height的img属 CLS 风险与缺失alt移动端点击目标≤480px 视口下小于 44×44px 的交互元素焦点可见性对前 25 个可聚焦元素逐一 focus检查 outline/shadow控件可访问名称无文本、无 aria-label、无图片替代的 button/link标题结构缺h1或出现多个h1文档元信息缺viewportmeta、html缺lang近似文本对比度对最多 120 个文本节点做 WCAG AA 估算large 文本 3:1、普通文本 4.5:1。自动滚动后再截图autoScrollL139-L153先滚动全页触发IntersectionObserver的 scroll-reveal 与懒加载再回到顶部截图避免全页截图拍到空白区块聚合与退出码L191-L229按check message去重并记录命中的视口按 high/medium/low 排序写入report.md与report.json存在 high 级发现时退出码为 2可直接作为 CI 门禁。5.3 读懂真实报告juniper-audit 的真实 report.md 摘要如下Findings: 2 high · 2 medium · 0 low Console errors (1): [mobile-360] Failed to load resource: ... 404 HIGH - focus-visible2~3/25 个采样交互元素无可见焦点指示命中全部视口 MEDIUM - tap-target移动端 14 个交互目标 44×44px命中 mobile-360/390 MEDIUM - contrast约 1/82 个文本节点低于 AA 对比度近似值值得注意该站点本身构建良好有设计令牌、自托管字体、prefers-reduced-motion、scroll-reveal但启发式层依然捞出了三类人工快速浏览容易漏掉的问题——键盘用户找不到焦点WCAG 2.4.7、手机误触、以及一处待人工核实的对比度疑点唯一的控制台错误是单个资源的 404属于需要追踪但不是布局缺陷的问题。5.4 两个关于工具本身的经验教训stack/examples/juniper-audit/README.md 特别总结了两次实际运行教会我们的两点用 HTTP 而非file://服务页面。file://下浏览器会从nullorigin 拦截跨源字体请求产生一屏纯粹是伪影的 CORS 错误。示例中所有数字都来自真实 HTTP 服务所以控制台是干净的。全页截图与激进 scroll-reveal 并不完全兼容。脚本虽然会自动滚动触发 reveal 以恢复大部分内容但对只在精细滚动下才展示的区块单张全页截图中仍可能出现空白带。这既是工具限制也是真实的健壮性信号——同样的内容对部分爬虫、打印和非交互式捕获也是不可见的。此时应当用会自然滚动、等待并交互的/design-review子代理来复核启发式检查抓机械缺陷子代理评判体验。六、经验法则与质量底线6.1 四条经验法则stack/docs/WORKFLOW.md收尾给出四条铁律是整个循环的浓缩没有第 4 步see就不要宣称 UI 工作完成——你没看过的东西就不算完成让ui-ux-pro-max定 token、frontend-design定态度——数据负责正确性品味负责辨识度Blocker/High 阻断合并Medium/Nit 不阻断——保持节奏不要在细枝末节上过度争论每次修复后重新截图——循环本身很便宜回归才昂贵。6.2 质量底线永远不低于这个标准交付stack/CLAUDE.md 为循环补充了四条硬性质量底线作为 review 环节的验收标尺响应式375 / 768 / 1024 / 1440px 下无横向滚动内容重排而非缩放可访问每个交互元素都有可见的:focus-visibleWCAG AA 对比度正文 4.5:1、大文本/UI 3:1语义化 landmarks控件有标签尊重prefers-reduced-motion性能布局稳定无因未定尺寸媒体/字体引发的 CLS首屏以下图片懒加载font-display: swap避免渲染阻塞资源对照web-vitalsdomain 核查文案有意图主动语态、句子式大小写、用用户认识的词命名事物。七、落地指南安装、验证与独立审计如果你想把整套循环接入自己的项目stack/docs/SETUP.md 给出了从零到可用的三步# 1. 一键安装审计依赖 Playwright Chromium、ui-ux-pro-max skill ./scripts/setup.sh # 2. 在 Claude Code 内安装审美层插件 /plugin install frontend-designanthropics/claude-code # 3. 打开 Claude Code批准项目 MCP 服务器playwright / chrome-devtools / shadcn用 /mcp 验证装好后可用三句话验证工作流是否打通来自 stack/docs/SETUP.md /design-plan portfolio site for a photographer, editorial and minimal Build the hero, then screenshot it at 375px and 1440px and fix anything that breaks. /design-review http://localhost:3000不依赖 Claude 的独立审计同样可用且支持本地文件npm run audit -- --url http://localhost:3000 npm run audit -- --file ./index.html输出到audit-output/report.md与逐视口截图存在 high 级发现时退出码非零可挂进 CIstack/package.json 中的audit与audit:file两个 script 就是入口。常见故障MCP 服务器启动失败、找不到 Chromium、skill 命令不存在的排查方法也都记录在 stack/docs/SETUP.md 的 Troubleshooting 一节。结语让看见成为流程的一部分回到stack/docs/WORKFLOW.md的核心论点AI 设计之所以露出破绽不是模型能力不足而是流程里缺了see与review两个闭环。ui-ux-pro-max-skill 设计栈的解法是把知识ui-ux-pro-max数据层、品味frontend-design、反馈Playwright 截图与交互和复核design-review子代理 CI 启发式审计四者接进 Claude Code 的日常工作流。从本文的定价区块实战与 juniper-audit 真实报告可以看到只要循环闭环产出的 UI 就能同时具备辨识度、响应式、可访问性与可验证性——这恰恰是看起来像 AI 设计的反面。【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
