UI/UX Design Pro 是一个高级 UI/UX 设计技能，用于构建数据驱动、具有生产级品质的界面。
用途 该技能适用于多种界面类型，资料明确列为：仪表盘、管理后台、SaaS 应用、工具、设置页、数据界面、AI 界面、移动应用、落地页、营销站点和产品展示页。它还包含对金融科技仪表盘、SaaS 落地页和开发者工具的专门支持。
默认设置与推荐模型 资料建议为获得最佳效果使用 GPT-5.3 Codex 或 Gemini 3.0 Pro。默认主题始终偏好浅色模式，只有在用户明确要求时才使用深色模式。核心目标是让每个界面都具备高级别的手艺、意图和一致性。
强制参考阅读 该技能要求在设计任何 UI 之前必须阅读 references/ 目录下的全部参考文件，且给出了阅读顺序：design-directions.md（方向选择与示例系统）、token-architecture.md（Token 命名与分层）、color-system.md（oklch 调色板、对比度、深色模式）、typography.md（字体配对、尺度、层级）、spacing-and-layout.md（网格系统、间距尺度）、depth-and-elevation.md（阴影与边框策略）、component-patterns.md（状态与交互模式）、animation-and-motion.md（时长、缓动、GPU 性能）、real-world-patterns.md（10 个已上线生产模式）、accessibility.md（WCAG 2.2、对比度、键盘导航）、cognitive-principles.md（Hick 定律、Fitts 定律、格式塔）、critique-protocol.md（展示作品前的自评）。
设计理念 资料强调该技能要解决的核心问题是：模型容易生成通用输出。它认为意图存在于文字中，而代码生成会从模式中抽取，默认值正是在这个缝隙中胜出。资料主张排版本身就是设计，导航本身就是产品，数据不是简单展示，Token 命名也应体现产品个性（例如 --ink 和 --parchment 比 --gray-700 和 --surface-2 更能唤起产品世界）。它要求在做任何代码之前先明确回答：这个真实的人是谁、他们必须完成什么（动词）、这应该给人什么感觉。
设计原则 资料列出的设计原则包括：Token 架构（所有颜色追溯到原始值，文本四级、边框四级、专用表单控件 Token）；颜色系统（使用 oklch 构建感知均匀的色阶，APCA 对比度）；排版（通过大小、字重、字距构建层级，数据用等宽与表格数字，clamp() 流式缩放）；间距（选择 4px 或 8px 基数并坚持倍数，使用 CSS Grid 布局、Flexbox 组件）；深度（边框、微阴影、层叠阴影、表面位移中只选一种并贯彻）；组件（每个交互元素都需要默认、悬停、激活、聚焦、禁用状态，数据需要加载、空、错误状态）；动效（150ms 微交互、250ms 模态，尊重 prefers-reduced-motion，仅用 transform 和 opacity）；无障碍（最低 WCAG 2.2 AA，4.5:1 文字对比度，键盘导航，焦点可见，复杂组件 ARIA 角色，触控目标最小 44pt）；认知原则（Hick、Fitts、Miller、格式塔、渐进披露、Von Restorff 效应）。
真实世界模式库 资料提到 10 个从已上线落地页中提取的生产级模式：磨砂导航、编号区块、交错入场、网格渐变、便当网格、品牌阴影、轨道动画、Logo 条、锁定/解锁卡片、高级 CTA。
数据驱动能力 该技能包含一个覆盖 28 个 CSV 数据库、1,875+ 数据行的 BM25 搜索引擎，以及 9 个专用 Python 脚本，可通过统一 CLI 访问。脚本位于 scripts/ 并可通过 design_cli.py 调用：search（BM25 搜索所有设计数据库）、contrast（WCAG 2.2 / APCA 对比度检查）、palette（色彩和谐配色生成）、tokens（带预设的 CSS 自定义属性生成）、typography（模块化字号比例计算）、system（带持久化的完整设计系统生成）、audit（UI 代码质量与无障碍审计，12 条规则）、icons（搜索流行图标库并获取 CDN 链接）。
使用方式 资料给出以下命令示例。通过 Bun CLI 在 cli/ 中运行：
- 搜索设计知识：bun run cli/index.ts search "glassmorphism card"
- 浏览与搜索图标：bun run cli/index.ts icons "arrow"
- 审计 UI 代码：bun run cli/index.ts audit src/components/Button.tsx
- 生成设计系统：bun run cli/index.ts generate "fintech dashboard" --stack nextjs --output system.md 此外 Python 脚本也可通过 python3 scripts/design_cli.py <command> [args] 调用。资料强调最佳实践是：在编写任何代码之前，始终先生成设计系统，因为 system 命令会聚合所有数据库的 BM25 搜索结果。
设计方向 资料列出可选设计方向，包括：精度与密度（紧凑、技术感、单色；适用于开发者工具、管理仪表盘）、温暖与亲和（宽松间距、柔和阴影；协作工具、消费应用）、精致与信任（冷色调、层叠深度；金融、企业 B2B）、大胆与清晰（高对比、戏剧化空间；现代仪表盘、数据密集）、实用与功能（柔和、功能密度；GitHub 风格工具）、数据与分析（图表优化、数字优先）、趣味与表现（圆角、多彩、动效；创意工具、作品集）、温暖高级身份（珊瑚暖色、大圆角；硬件、加密、高级消费）、金融科技专业（深海军蓝、金色、精确数据；交易、银行、加密）、SaaS 发布（鲜亮紫色、干净、动效）、Lime & Obsidian（高对比、霓虹、锐利；开发者工具、CLI、终端）等。
工作流 资料描述的工作流为：若项目已有 system.md，则读取 .interface-design/system.md 并应用；若没有，则探索领域并产出四项要求输出（领域、颜色世界、签名元素、要拒绝的默认值），提出方向，获得用户确认，构建，最后在展示前运行自评检查。每次任务后始终主动提出将模式保存到 .interface-design/system.md。
限制与避免项 资料明确列出应避免的做法：刺眼的边框、剧烈的表面跳跃、不一致的间距、混合深度策略、缺失交互状态、夸张投影、小元素使用大圆角、彩色背景上的纯白卡片、粗装饰边框、为装饰而用渐变和颜色、多个强调色、不同表面使用不同色相、深色模式背景使用纯黑（#000000）、在已样式化 UI 中使用原生表单元素。
其他 资料提及具体收费、价格、平台支持范围、实际效果等信息暂未提供。