基于 ui-ux-pro-max 的 Claude Code 网页设计栈五步设计闭环与质量护栏实战指南【免费下载链接】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/CLAUDE.md 为核心文档系统讲解如何为 Claude Code 装配一套知识knowledge— 审美taste— 视觉反馈visual feedback三层的网页设计栈从plan → commit → build → see → review的五步设计闭环到响应式、无障碍、性能与文案的质量底线再到无需 MCP 的独立审计脚本与端到端工作流示例。读完你将掌握如何让 AI Agent 在写任何页面、落地页、组件或视觉打磨任务时先基于真实设计数据库做规划、再承诺一个明确的审美方向、最后真正用眼睛看到渲染结果并自我修复从而产出可上线的高质量 UI。一、栈的定位AI 设计翻车的三个原因与三层修复CLAUDE.md 开篇点明本栈的定位这是一个让 Claude Code 擅长网站设计的即用环境。它的核心洞察是——通用 AI 设计之所以显得廉价是因为模型从来不看自己构建的结果也没有有主见的审美立场。stack/docs/STACK.md 给出了更精确的对照AI 设计以三种可预测的方式失败每一层栈恰好修复其中一种失败模式修复手段对应工具千篇一律的模板化外观AI slop强制先做审美承诺frontend-designtaste 层Token 与模式模糊、前后不一致用真实数据库支撑决策ui-ux-pro-maxknowledge 层从不查看结果 → 交付损坏的 UI给 Agent 一双眼睛Playwright / Chrome DevTools MCPfeedback 层重复造基础组件轮子拉取久经验证的组件shadcn MCP我觉得没问题的自我评估独立、严格的复查design-reviewsubagent三个核心层次各有分工知识层Knowledgeui-ux-pro-max提供可搜索的设计智能数据集回答这东西到底应该长什么样、反模式有哪些审美层Tastefrontend-designAnthropic 官方插件约 50 行 Markdown阻止模型从训练数据的安全中心采样回答怎么让它与众不同反馈层FeedbackPlaywright MCP Chrome DevTools MCP 让模型真正打开浏览器、截图、读控制台、操作交互状态回答我做出来的东西到底行不行。一句话概括两把尺子的分工ui-ux-pro-max决定什么是对的frontend-design决定什么是独特的两者一起用。二、核心设计闭环五步工作流严格按顺序执行CLAUDE.md 给出的设计循环是整份文档的灵魂它把写代码压缩为五步闭环中的一环跳过了看到和复查两步正是 AI 设计看起来像 AI 设计的原因。2.1 PLAN with data —— 先出设计系统再写标记写任何标记markup之前先获得一个具体的设计系统。运行生成器然后按表面surface拉取细节python3 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其中skill解析为已安装的技能路径例如.claude/skills/ui-ux-pro-max或插件位置技能的SKILL.md会给出确切的命令形式。在本仓库中这套搜索脚本的源码位于 src/ui-ux-pro-max/scripts/search.py其配套的数据集样式、配色、字体搭配、UX 指南、落地页结构等位于 src/ui-ux-pro-max/data 目录下。它的用途覆盖产品类型模式、颜色 token、字体搭配、UX 反模式、落地页结构、以及 Core Web Vitals 预算。把它的输出当作 token颜色、字号、间距的唯一事实来源source of truth。从数据规模看知识层内置约84 种 UI 风格、192 套配色、73 组字体搭配、99 条 UX 指南、25 种图表类型、22 个技术栈数据来自 stack/docs/STACK.md并以 CSV 形式存放在 src/ui-ux-pro-max/data/stacks 与 src/ui-ux-pro-max/data/styles.csv 等文件中。2.2 COMMIT to an aesthetic —— 先承诺再动手不要采样训练分布的安全中心。动手前先回答四个问题purpose目的、tone基调、constraints约束、differentiation差异化然后选定一种基调并精确执行。文档明确点名了三种要避开的AI slop 默认值除非需求明确要求否则不要落入奶油色 衬线字体 赤陶色cream serif terracotta近黑色 酸性强调色near-black acid accent发丝线大报风格hairline broadsheet。策略上把大胆花在一个标志性元素上其余部分保持安静——这是 stack/docs/WORKFLOW.md 中精确、工程化、等宽字体点缀这类单一基调能够成立的原因。2.3 BUILD —— 用已承诺的 token 实现使用第二步承诺的 token 实现并匹配周边代码的约定。对于组件驱动的技术栈React/Next/Vue/Svelte 等使用shadcn MCP通过自然语言搜索/添加组件而不是手写基础组件。示例在一个 React 项目中直接让 Agent 用 shadcn MCP 添加card、toggle、badge而不是从零实现。2.4 SEE IT —— 代码能编译不等于完成这一步是整个栈存在的意义。代码能编译不算完成——必须在一个真实浏览器中打开页面然后截图不同视口读取控制台输出演练交互状态hover、focus、打开菜单、提交表单调整视口尺寸resize viewport。然后修复看到的问题z-index、动画时序、布局偏移layout shift、溢出overflow。CLAUDE.md 的原话值得反复强调你还没看过的改动就是没有完成a change you have not looked at is not finished。2.5 REVIEW —— 用独立 subagent 做最终复查在宣布一个 UI 改动完成之前运行design-reviewsubagent通过/design-review命令触发。它会驱动 Playwright 在 mobile → ultrawide 视口区间遍历检查 WCAG 2.1 AA对比度、焦点顺序、键盘陷阱检查响应式完整性responsive integrity检查交互状态。返回按严重度排序的问题清单Blockers / High / Medium / Low必须在收尾前修复所有 Blocker 与 High 级发现。三、质量底线绝不低于以下标准交付CLAUDE.md 用Quality floor定义了四类不可妥协的硬性指标它们既是验收标准也是design-review与审计脚本的检查来源响应式Responsive在 375 / 768 / 1024 / 1440 px 视口下无横向滚动内容是重排reflow而非缩放shrink。无障碍Accessible每个可交互元素都有可见的:focus-visible焦点样式WCAG AA 对比度正文 4.5:1大号文字 / UI 组件 3:1语义化地标semantic landmarks、带标签的控件labelled controls尊重prefers-reduced-motion。性能Performant布局稳定无因未设尺寸的媒体/字体引起的 CLS首屏以下图片懒加载lazy-load below-foldfont-display: swap避免阻塞渲染的资源对照web-vitals领域数据核查预算。文案Intentional copy主动语态、句首大写sentence case、用用户能识别的名称命名事物。四、仓库内已接线的工具一览CLAUDE.md 给出了一张什么接了什么的接线表是理解整个栈装配关系的关键层工具位置知识ui-ux-pro-maxskill通过scripts/setup.sh安装plugin审美frontend-designskill通过scripts/setup.sh安装plugin组件生成shadcnMCP.mcp.json视觉反馈playwright/mcpchrome-devtools-mcp.mcp.json自动复查design-reviewsubagent /design-review命令.claude/agents、.claude/commands独立审计scripts/design-audit.mjs多视口截图scripts/CI 见.github/workflows为什么每个工具在这里见 stack/docs/STACK.md如何安装见 stack/docs/SETUP.md端到端演练见 stack/docs/WORKFLOW.md。4.1 知识层与审美层的安装方式两者由 stack/scripts/setup.sh 一键安装npm install # 安装审计依赖Playwright npx playwright install chromium # 安装 Chromium已预装时可跳过 npx ui-ux-pro-max-cli init --ai claude # 安装 ui-ux-pro-max 知识层技能脚本结尾会打印两个必须在 Claude Code 内部完成的步骤启用插件并运行/plugin install frontend-designanthropics/claude-code以及批准.mcp.json中的三个项目级 MCP 服务器。4.2 MCP 服务器接线.mcp.json默认接入三个服务器playwright打开真实 Chromium导航、点击、缩放、截图、读控制台、无障碍快照、chrome-devtools深度性能 / 网络 / CLS 剖析、shadcn自然语言搜索与安装组件。.claude/settings.json中已设置enableAllProjectMcpServers: true启动时自动加载可在 Claude Code 内用/mcp验证。可选扩展不在默认.mcp.json中需按需加入保证基础栈零密钥运行包括Figma Dev Mode MCP读取设计稿 frame 的 token/布局生成匹配代码也可把 Claude 构建的 UI 推回画布为可编辑图层需要 Figma 桌面应用与 Dev Mode配置为figma: { url: http://127.0.0.1:3845/mcp }21st.dev Magic MCP21st-dev/magic从提示词生成 React 组件编辑器里的 v0但需要 API key配置形如magic: { command: npx, args: [-y, 21st-dev/magiclatest], env: { API_KEY: your-key } }密钥应放在 gitignore 的.claude/settings.local.json或 shell 环境中。五、独立审计脚本无 MCP 的自动化兜底除了交互式闭环同一套检查还以纯脚本形式提供供本地快速过一遍与 CI 使用node scripts/design-audit.mjs --url http://localhost:3000 --out audit-output # 或审计静态文件 node scripts/design-audit.mjs --file ./index.html脚本在仓库中的位置是 stack/scripts/design-audit.mjs对应 npm 脚本为npm run audit -- --url .../npm run audit -- --file ...见 stack/package.json。七个视口档位定义在脚本的VIEWPORTS常量中stack/scripts/design-audit.mjs#L25-L32mobile-360 → mobile-390 → tablet-768 → laptop-1024 → desktop-1440 → wide-1920每个视口都会生成整页截图。启发式检查项inPageChecks函数stack/scripts/design-audit.mjs#L51-L134覆盖检查项严重度判定逻辑要点横向溢出 horizontal-overflowhighscrollWidth viewport 1并列出溢出元素未设尺寸的媒体 unsized-mediamediumimg缺少width/height属性CLS 风险图片缺 althighalt属性缺失触控目标 tap-targetmedium≤480px 视口下交互元素 44×44px焦点可见性 focus-visiblehigh采样 25 个可聚焦元素检查 outline / box-shadow控件无障碍名称 accessible-namehigh按钮/链接无文字、无 aria-label/title标题结构 headingsmedium/low无h1或存在多个h1viewport meta / html langhigh/medium缺失meta[nameviewport]、html lang文本对比度 contrastmedium近似计算取最近的不透明背景正文 4.5:1、大号 3:1值得注意的实现细节自动滚动autoScrollstack/scripts/design-audit.mjs#L139-L153先滚到底再回顶部用于触发IntersectionObserver滚动显现scroll-reveal内容避免整页截图出现空白区块的误判控制台健康每个视口监听console错误与pageerror并汇总进报告退出码存在 High 级发现时以退出码 2 结束process.exit(counts.high 0 ? 2 : 0)这正是适合 CI 门禁gate merge的原因。脚本输出audit-output/report.md 各视口截图 机器可读的report.json。注意脚本是启发式heuristic检查不是/design-reviewsubagent 的替代品——它检查机械性缺陷审美、交互流程与边界情况仍由 subagent 判断。六、端到端工作流从提示词到可上线stack/docs/WORKFLOW.md 用一个真实任务为开发者工具构建定价区块演示了完整闭环1. 用数据规划/design-plan developer tool pricing section, technical audience, trustworthy, high-contrast—— Claude 运行设计系统生成器拉取配色、字体搭配与相关 UX 反模式如不要隐藏总价让推荐方案一目了然输出紧凑 token 集4–6 种颜色、2 个字体角色、一套间距尺度。2. 承诺外观回答 purpose / tone / constraints / differentiation选定一种基调如精确、工程化、等宽字体点缀并挑一个标志性元素如推荐方案卡片背后的细微网格纸背景明确拒绝奶油衬线等默认。3. 构建用承诺的 token 实现React 项目上通过 shadcn MCP 添加card、toggle、badge。4. 亲眼看到Open it at http://localhost:3000/pricing. Screenshot mobile (375) and desktop (1440). Toggle monthly/annual and check the focus states.—— Claude 打开真实页面抓出代码评审看不到的问题月度/年度切换无可见焦点环、375px 下Most popular徽章压到卡片边框、价格数字在卡片滚入视口前就开始动画。逐一修复并重新截图。5. 复查/design-review http://localhost:3000/pricing—— subagent 遍历全部视口档位、Tab 走查整段、检查灰色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 后该区块即告完成独特、响应式、无障碍、且经过了真实验证。6.1 对既有站点的同款闭环把工具指向已部署的站点即可npm run audit -- --url https://your-site.com # 快速启发式 截图 /design-review https://your-site.com/pricing # 带审美与流程判断的完整复查6.2 一次真实的生产审计示例stack/examples/juniper-audit/README.md 记录了scripts/design-audit.mjs对一个金融服务业营销首页的真实运行产物包括 stack/examples/juniper-audit/report.md分级发现 控制台健康、report.json机器可读供 CI 消费以及screenshots/下六个视口档位的整页截图。该站点本身质量不错有设计 token、自托管字体、prefers-reduced-motion、滚动显现审计仍找出三件人眼快速扫视容易漏掉的问题2–3 个交互元素无可见焦点指示High对应 WCAG 2.4.7、移动端 14 个触控目标小于 44×44pxMedium、约 1 个文本节点对比度低于 AAMedium近似值需人工复核。唯一的控制台错误是一条资源 404。示例还给出两条实战经验用 HTTP 而非file://伺服站点file://会触发成片的字体 CORS 报错浏览器阻止null源下的跨域字体请求是纯噪声示例数据来自真实 HTTP 伺服控制台才干净。可在站点目录运行python3 -m http.server 8099再审计。整页截图与激进 scroll-reveal 并不完全兼容脚本自动滚动可恢复大部分内容但只在细粒度滚动时才显现的区块仍可能在单张整页截图中出现空白带——这既是工具限制也是真实的健壮性信号同样的内容对某些爬虫、打印与任何非交互式捕获不可见。这类页面应改用交互式/design-reviewsubagent自然滚动、等待、交互做更可靠的检查。七、实践规则rules of thumbCLAUDE.md 与 WORKFLOW.md 共同沉淀出四条操作准则直接约束日常使用没有第 4 步SEE IT就不准宣布 UI 工作完成——你没看过的东西就不算完成数据归ui-ux-pro-max态度归frontend-design——数据管正确性审美管独特性Blocker / High 级发现门禁合并Medium / Nit 不阻塞——保持节奏不要纠结细枝末节bikeshedding每次修复后重新截图——闭环成本很低回归的代价很高。八、快速验证与环境要求安装后可用三条命令验证整栈生效见 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 从ui-ux-pro-max拉取 token、打开浏览器截图、并返回分级发现。环境要求Node 18、Python 3.x、启用了插件能力的 Claude Code/plugin开启一次。常见故障排查/mcp显示某服务器失败时手动运行其命令看报错如npx -y playwright/mcplatest审计找不到 Chromium 时执行npx playwright install chromium或设置PW_EXECUTABLE_PATHui-ux-pro-max命令找不到时重跑npx ui-ux-pro-max-cli init --ai claude并核对打印的技能路径。结语这份设计栈的本质是把 AI 设计从一次生成的碰运气改造成可被观察、可被复查的工程闭环知识层保证正确审美层保证独特反馈层保证真实复查层保证及格线。无论你是想改造自己的 Claude Code 工作流还是把这套stack/目录直接作为团队起步模板CLAUDE.md 定义的五步闭环与质量底线都是可以直接落地的操作规范而 stack/scripts/design-audit.mjs 则让机械性缺陷检查得以脱离交互环境、自动跑进 CI与design-reviewsubagent 的体验级判断互补使用。【免费下载链接】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 的 Claude Code 网页设计栈：五步设计闭环与质量护栏实战指南
基于 ui-ux-pro-max 的 Claude Code 网页设计栈五步设计闭环与质量护栏实战指南【免费下载链接】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/CLAUDE.md 为核心文档系统讲解如何为 Claude Code 装配一套知识knowledge— 审美taste— 视觉反馈visual feedback三层的网页设计栈从plan → commit → build → see → review的五步设计闭环到响应式、无障碍、性能与文案的质量底线再到无需 MCP 的独立审计脚本与端到端工作流示例。读完你将掌握如何让 AI Agent 在写任何页面、落地页、组件或视觉打磨任务时先基于真实设计数据库做规划、再承诺一个明确的审美方向、最后真正用眼睛看到渲染结果并自我修复从而产出可上线的高质量 UI。一、栈的定位AI 设计翻车的三个原因与三层修复CLAUDE.md 开篇点明本栈的定位这是一个让 Claude Code 擅长网站设计的即用环境。它的核心洞察是——通用 AI 设计之所以显得廉价是因为模型从来不看自己构建的结果也没有有主见的审美立场。stack/docs/STACK.md 给出了更精确的对照AI 设计以三种可预测的方式失败每一层栈恰好修复其中一种失败模式修复手段对应工具千篇一律的模板化外观AI slop强制先做审美承诺frontend-designtaste 层Token 与模式模糊、前后不一致用真实数据库支撑决策ui-ux-pro-maxknowledge 层从不查看结果 → 交付损坏的 UI给 Agent 一双眼睛Playwright / Chrome DevTools MCPfeedback 层重复造基础组件轮子拉取久经验证的组件shadcn MCP我觉得没问题的自我评估独立、严格的复查design-reviewsubagent三个核心层次各有分工知识层Knowledgeui-ux-pro-max提供可搜索的设计智能数据集回答这东西到底应该长什么样、反模式有哪些审美层Tastefrontend-designAnthropic 官方插件约 50 行 Markdown阻止模型从训练数据的安全中心采样回答怎么让它与众不同反馈层FeedbackPlaywright MCP Chrome DevTools MCP 让模型真正打开浏览器、截图、读控制台、操作交互状态回答我做出来的东西到底行不行。一句话概括两把尺子的分工ui-ux-pro-max决定什么是对的frontend-design决定什么是独特的两者一起用。二、核心设计闭环五步工作流严格按顺序执行CLAUDE.md 给出的设计循环是整份文档的灵魂它把写代码压缩为五步闭环中的一环跳过了看到和复查两步正是 AI 设计看起来像 AI 设计的原因。2.1 PLAN with data —— 先出设计系统再写标记写任何标记markup之前先获得一个具体的设计系统。运行生成器然后按表面surface拉取细节python3 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其中skill解析为已安装的技能路径例如.claude/skills/ui-ux-pro-max或插件位置技能的SKILL.md会给出确切的命令形式。在本仓库中这套搜索脚本的源码位于 src/ui-ux-pro-max/scripts/search.py其配套的数据集样式、配色、字体搭配、UX 指南、落地页结构等位于 src/ui-ux-pro-max/data 目录下。它的用途覆盖产品类型模式、颜色 token、字体搭配、UX 反模式、落地页结构、以及 Core Web Vitals 预算。把它的输出当作 token颜色、字号、间距的唯一事实来源source of truth。从数据规模看知识层内置约84 种 UI 风格、192 套配色、73 组字体搭配、99 条 UX 指南、25 种图表类型、22 个技术栈数据来自 stack/docs/STACK.md并以 CSV 形式存放在 src/ui-ux-pro-max/data/stacks 与 src/ui-ux-pro-max/data/styles.csv 等文件中。2.2 COMMIT to an aesthetic —— 先承诺再动手不要采样训练分布的安全中心。动手前先回答四个问题purpose目的、tone基调、constraints约束、differentiation差异化然后选定一种基调并精确执行。文档明确点名了三种要避开的AI slop 默认值除非需求明确要求否则不要落入奶油色 衬线字体 赤陶色cream serif terracotta近黑色 酸性强调色near-black acid accent发丝线大报风格hairline broadsheet。策略上把大胆花在一个标志性元素上其余部分保持安静——这是 stack/docs/WORKFLOW.md 中精确、工程化、等宽字体点缀这类单一基调能够成立的原因。2.3 BUILD —— 用已承诺的 token 实现使用第二步承诺的 token 实现并匹配周边代码的约定。对于组件驱动的技术栈React/Next/Vue/Svelte 等使用shadcn MCP通过自然语言搜索/添加组件而不是手写基础组件。示例在一个 React 项目中直接让 Agent 用 shadcn MCP 添加card、toggle、badge而不是从零实现。2.4 SEE IT —— 代码能编译不等于完成这一步是整个栈存在的意义。代码能编译不算完成——必须在一个真实浏览器中打开页面然后截图不同视口读取控制台输出演练交互状态hover、focus、打开菜单、提交表单调整视口尺寸resize viewport。然后修复看到的问题z-index、动画时序、布局偏移layout shift、溢出overflow。CLAUDE.md 的原话值得反复强调你还没看过的改动就是没有完成a change you have not looked at is not finished。2.5 REVIEW —— 用独立 subagent 做最终复查在宣布一个 UI 改动完成之前运行design-reviewsubagent通过/design-review命令触发。它会驱动 Playwright 在 mobile → ultrawide 视口区间遍历检查 WCAG 2.1 AA对比度、焦点顺序、键盘陷阱检查响应式完整性responsive integrity检查交互状态。返回按严重度排序的问题清单Blockers / High / Medium / Low必须在收尾前修复所有 Blocker 与 High 级发现。三、质量底线绝不低于以下标准交付CLAUDE.md 用Quality floor定义了四类不可妥协的硬性指标它们既是验收标准也是design-review与审计脚本的检查来源响应式Responsive在 375 / 768 / 1024 / 1440 px 视口下无横向滚动内容是重排reflow而非缩放shrink。无障碍Accessible每个可交互元素都有可见的:focus-visible焦点样式WCAG AA 对比度正文 4.5:1大号文字 / UI 组件 3:1语义化地标semantic landmarks、带标签的控件labelled controls尊重prefers-reduced-motion。性能Performant布局稳定无因未设尺寸的媒体/字体引起的 CLS首屏以下图片懒加载lazy-load below-foldfont-display: swap避免阻塞渲染的资源对照web-vitals领域数据核查预算。文案Intentional copy主动语态、句首大写sentence case、用用户能识别的名称命名事物。四、仓库内已接线的工具一览CLAUDE.md 给出了一张什么接了什么的接线表是理解整个栈装配关系的关键层工具位置知识ui-ux-pro-maxskill通过scripts/setup.sh安装plugin审美frontend-designskill通过scripts/setup.sh安装plugin组件生成shadcnMCP.mcp.json视觉反馈playwright/mcpchrome-devtools-mcp.mcp.json自动复查design-reviewsubagent /design-review命令.claude/agents、.claude/commands独立审计scripts/design-audit.mjs多视口截图scripts/CI 见.github/workflows为什么每个工具在这里见 stack/docs/STACK.md如何安装见 stack/docs/SETUP.md端到端演练见 stack/docs/WORKFLOW.md。4.1 知识层与审美层的安装方式两者由 stack/scripts/setup.sh 一键安装npm install # 安装审计依赖Playwright npx playwright install chromium # 安装 Chromium已预装时可跳过 npx ui-ux-pro-max-cli init --ai claude # 安装 ui-ux-pro-max 知识层技能脚本结尾会打印两个必须在 Claude Code 内部完成的步骤启用插件并运行/plugin install frontend-designanthropics/claude-code以及批准.mcp.json中的三个项目级 MCP 服务器。4.2 MCP 服务器接线.mcp.json默认接入三个服务器playwright打开真实 Chromium导航、点击、缩放、截图、读控制台、无障碍快照、chrome-devtools深度性能 / 网络 / CLS 剖析、shadcn自然语言搜索与安装组件。.claude/settings.json中已设置enableAllProjectMcpServers: true启动时自动加载可在 Claude Code 内用/mcp验证。可选扩展不在默认.mcp.json中需按需加入保证基础栈零密钥运行包括Figma Dev Mode MCP读取设计稿 frame 的 token/布局生成匹配代码也可把 Claude 构建的 UI 推回画布为可编辑图层需要 Figma 桌面应用与 Dev Mode配置为figma: { url: http://127.0.0.1:3845/mcp }21st.dev Magic MCP21st-dev/magic从提示词生成 React 组件编辑器里的 v0但需要 API key配置形如magic: { command: npx, args: [-y, 21st-dev/magiclatest], env: { API_KEY: your-key } }密钥应放在 gitignore 的.claude/settings.local.json或 shell 环境中。五、独立审计脚本无 MCP 的自动化兜底除了交互式闭环同一套检查还以纯脚本形式提供供本地快速过一遍与 CI 使用node scripts/design-audit.mjs --url http://localhost:3000 --out audit-output # 或审计静态文件 node scripts/design-audit.mjs --file ./index.html脚本在仓库中的位置是 stack/scripts/design-audit.mjs对应 npm 脚本为npm run audit -- --url .../npm run audit -- --file ...见 stack/package.json。七个视口档位定义在脚本的VIEWPORTS常量中stack/scripts/design-audit.mjs#L25-L32mobile-360 → mobile-390 → tablet-768 → laptop-1024 → desktop-1440 → wide-1920每个视口都会生成整页截图。启发式检查项inPageChecks函数stack/scripts/design-audit.mjs#L51-L134覆盖检查项严重度判定逻辑要点横向溢出 horizontal-overflowhighscrollWidth viewport 1并列出溢出元素未设尺寸的媒体 unsized-mediamediumimg缺少width/height属性CLS 风险图片缺 althighalt属性缺失触控目标 tap-targetmedium≤480px 视口下交互元素 44×44px焦点可见性 focus-visiblehigh采样 25 个可聚焦元素检查 outline / box-shadow控件无障碍名称 accessible-namehigh按钮/链接无文字、无 aria-label/title标题结构 headingsmedium/low无h1或存在多个h1viewport meta / html langhigh/medium缺失meta[nameviewport]、html lang文本对比度 contrastmedium近似计算取最近的不透明背景正文 4.5:1、大号 3:1值得注意的实现细节自动滚动autoScrollstack/scripts/design-audit.mjs#L139-L153先滚到底再回顶部用于触发IntersectionObserver滚动显现scroll-reveal内容避免整页截图出现空白区块的误判控制台健康每个视口监听console错误与pageerror并汇总进报告退出码存在 High 级发现时以退出码 2 结束process.exit(counts.high 0 ? 2 : 0)这正是适合 CI 门禁gate merge的原因。脚本输出audit-output/report.md 各视口截图 机器可读的report.json。注意脚本是启发式heuristic检查不是/design-reviewsubagent 的替代品——它检查机械性缺陷审美、交互流程与边界情况仍由 subagent 判断。六、端到端工作流从提示词到可上线stack/docs/WORKFLOW.md 用一个真实任务为开发者工具构建定价区块演示了完整闭环1. 用数据规划/design-plan developer tool pricing section, technical audience, trustworthy, high-contrast—— Claude 运行设计系统生成器拉取配色、字体搭配与相关 UX 反模式如不要隐藏总价让推荐方案一目了然输出紧凑 token 集4–6 种颜色、2 个字体角色、一套间距尺度。2. 承诺外观回答 purpose / tone / constraints / differentiation选定一种基调如精确、工程化、等宽字体点缀并挑一个标志性元素如推荐方案卡片背后的细微网格纸背景明确拒绝奶油衬线等默认。3. 构建用承诺的 token 实现React 项目上通过 shadcn MCP 添加card、toggle、badge。4. 亲眼看到Open it at http://localhost:3000/pricing. Screenshot mobile (375) and desktop (1440). Toggle monthly/annual and check the focus states.—— Claude 打开真实页面抓出代码评审看不到的问题月度/年度切换无可见焦点环、375px 下Most popular徽章压到卡片边框、价格数字在卡片滚入视口前就开始动画。逐一修复并重新截图。5. 复查/design-review http://localhost:3000/pricing—— subagent 遍历全部视口档位、Tab 走查整段、检查灰色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 后该区块即告完成独特、响应式、无障碍、且经过了真实验证。6.1 对既有站点的同款闭环把工具指向已部署的站点即可npm run audit -- --url https://your-site.com # 快速启发式 截图 /design-review https://your-site.com/pricing # 带审美与流程判断的完整复查6.2 一次真实的生产审计示例stack/examples/juniper-audit/README.md 记录了scripts/design-audit.mjs对一个金融服务业营销首页的真实运行产物包括 stack/examples/juniper-audit/report.md分级发现 控制台健康、report.json机器可读供 CI 消费以及screenshots/下六个视口档位的整页截图。该站点本身质量不错有设计 token、自托管字体、prefers-reduced-motion、滚动显现审计仍找出三件人眼快速扫视容易漏掉的问题2–3 个交互元素无可见焦点指示High对应 WCAG 2.4.7、移动端 14 个触控目标小于 44×44pxMedium、约 1 个文本节点对比度低于 AAMedium近似值需人工复核。唯一的控制台错误是一条资源 404。示例还给出两条实战经验用 HTTP 而非file://伺服站点file://会触发成片的字体 CORS 报错浏览器阻止null源下的跨域字体请求是纯噪声示例数据来自真实 HTTP 伺服控制台才干净。可在站点目录运行python3 -m http.server 8099再审计。整页截图与激进 scroll-reveal 并不完全兼容脚本自动滚动可恢复大部分内容但只在细粒度滚动时才显现的区块仍可能在单张整页截图中出现空白带——这既是工具限制也是真实的健壮性信号同样的内容对某些爬虫、打印与任何非交互式捕获不可见。这类页面应改用交互式/design-reviewsubagent自然滚动、等待、交互做更可靠的检查。七、实践规则rules of thumbCLAUDE.md 与 WORKFLOW.md 共同沉淀出四条操作准则直接约束日常使用没有第 4 步SEE IT就不准宣布 UI 工作完成——你没看过的东西就不算完成数据归ui-ux-pro-max态度归frontend-design——数据管正确性审美管独特性Blocker / High 级发现门禁合并Medium / Nit 不阻塞——保持节奏不要纠结细枝末节bikeshedding每次修复后重新截图——闭环成本很低回归的代价很高。八、快速验证与环境要求安装后可用三条命令验证整栈生效见 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 从ui-ux-pro-max拉取 token、打开浏览器截图、并返回分级发现。环境要求Node 18、Python 3.x、启用了插件能力的 Claude Code/plugin开启一次。常见故障排查/mcp显示某服务器失败时手动运行其命令看报错如npx -y playwright/mcplatest审计找不到 Chromium 时执行npx playwright install chromium或设置PW_EXECUTABLE_PATHui-ux-pro-max命令找不到时重跑npx ui-ux-pro-max-cli init --ai claude并核对打印的技能路径。结语这份设计栈的本质是把 AI 设计从一次生成的碰运气改造成可被观察、可被复查的工程闭环知识层保证正确审美层保证独特反馈层保证真实复查层保证及格线。无论你是想改造自己的 Claude Code 工作流还是把这套stack/目录直接作为团队起步模板CLAUDE.md 定义的五步闭环与质量底线都是可以直接落地的操作规范而 stack/scripts/design-audit.mjs 则让机械性缺陷检查得以脱离交互环境、自动跑进 CI与design-reviewsubagent 的体验级判断互补使用。【免费下载链接】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），仅供参考
