用途：这是一份软件设计与开发领域指南，供在构建、编辑或审查面向用户的软件（Web 应用、移动端、仪表盘、营销站点、内部工具、设计系统等）时使用，目标是让界面看起来像专业设计过，而非“AI 生成”。开始较复杂的 UI 任务前应先通读全文；小改动可查看末尾的 Pre-Ship Checklist。
主要能力：文档按章节组织，涵盖操作原则、视觉语言（字体、色彩系统、间距、布局、边框/圆角/阴影、图标、图像、动效）、组件模式（按钮、表单、表格、模态与对话框、空/错/载入状态、导航、Toast 通知）、无障碍、性能、代码质量、Tailwind CSS 模式、常见模式与反模式。
核心原则：克制优于堆砌，少用颜色、字体和效果；层级靠空间与字重而非装饰；内容塑造布局，从最长真实字符串、最差空状态、最大数据集出发设计；每个交互元素需规划默认、悬停、激活、focus-visible、禁用五种状态，异步还需加载与错误；错误、空、载入状态就是产品本身；无障碍是结构而非附加层；性能是特性；一致性优于局部最优；匹配媒介定位；写可继承的代码。
视觉规范：最多两种字体家族，字号使用基于 rem 的模块化比例（正文最小 14px，正文行高 1.5，行长 60–75 字符）；颜色总量 3–5 种，用 OKLCH/HSL 构建调色板，使用语义化 CSS 变量而非硬编码色值，深色模式是独立调色板而非简单反色；间距使用 4px 基线比例；移动优先，优先 Flexbox 与 CSS Grid；统一圆角比例并遵循内圆角=外圆角−内边距；一套图标库，不用 emoji 作为 UI 元素。
动效与组件：过渡 150–250ms，优先动画 transform 与 opacity，尊重 prefers-reduced-motion；按钮每视图仅一个主操作，含六种状态且加载时保持宽度稳定；表单在失焦时验证、出错不重置、提交按钮保持可用；表格排序→筛选→分页，数字右对齐并使用 tabular-nums；模态慎用并需焦点陷阱。
限制：资料未提供该技能的安装命令、授权方式、收费与价格信息；也未提供具体使用步骤或与 AI 模型集成的调用方式，这些内容暂未提供。