用途：这是一个前端/Web UI/UX 视觉工作的路由型技能，本身不是规则手册，规则分布在 references/ 下的四套规则集中。核心要求是先加载覆盖当前请求的最小文件集，用一句话说明加载了哪些文件，再在其指导下执行；不加载而自由发挥会产出通用 AI 味结果，全部加载则浪费上下文并产生冲突指令。标准不是“干净且正确”，而是资深设计师级别的成品；正确但平淡视为失败。
主要能力与流程：Phase 0 路由。任何 UI 实现、样式、重设计、原型或视觉决策，先读 references/design/README.md，它强制两道门：设计系统门（写组件前必须有 DESIGN.md）与 React 开发工具门（默认安装 react-grab / react-scan / react-doctor）。涉及交互或动效时叠加 references/design/interaction-skill.md，以 beui.dev 目录为强制交互参考，读取真实源码后适配到 DESIGN.md 的动效令牌。写或改前端代码、审计性能/SEO/可访问性/质量时叠加 references/perfection/README.md，要求真实 Playwright Chromium 上 Lighthouse 全类别 100，靠架构达成，不得靠删动画或隐藏内容。查询具体风格、配色、字体搭配、图表类型、落地页结构或 UX 指南时用 references/ui-ux-db/README.md 的可搜索 CSV 数据库与 CLI。创建或更新 DESIGN.md 及需要角色、评审、债务、交接、合成用户测试时，加载 references/designpowers/README.md 与 lane-c-review.md。
设计系统与组件工作流：实现前必须选分支。用户给了具体视觉参考时，静态参考（截图、生成稿、Figma 导出等）加载 image-to-code-skill.md，提取精确令牌、布局几何、文案、间距、状态与响应式意图写入 DESIGN.md；实时站点或 URL 参考加载 clone-from-url.md，用真实浏览器经 getComputedStyle 提取运行时真相。两者最终都跑 /visual-qa 的参考保真模式做像素级比对。无参考的全新项目，设计研究是带交付物的构建步骤，需并行跑各研究通道并在 DESIGN.md 的 ## 0. Research Log 记录，未记录即视为未运行。已有 DESIGN.md 的项目先读并遵循；有 UI 但无 DESIGN.md 且无可复用组件层时，必须停下来问用户一个聚焦问题，不得默默选择。
规则集：design 含 1 个架构文件、12 个品味技能（Layer A，最多选一个）与 70 个品牌设计系统（Layer B，可叠加）；perfection 含七项原则与 React 性能工具；ui-ux-db 提供搜索 CLI；designpowers 提供设计操作层指导。共享公理：无设计系统不做 UI；具体参考即契约；不得为分数削弱 UX 或压平界面；图标只用 SVG 图标集，不用 emoji。
限制：资料未提供具体收费、价格、平台支持范围与效果保证；部分命令与文件路径需按实际技能目录解析。