design-ui

设计系统优先\n\n该技能要求在编写样式之前先定义一次设计系统，然后从系统中组合界面，避免零散地插入临时数值，目的是让界面看起来是有意设计且高品质的，而不是模板化产物。\n\n令牌与组件\n\n在 src/styles.css 的 @theme 中定义调色板、圆角与字体等 CSS 变量，再作为 Tailwind 工具类使用，形成单一事实来源。按钮、对话框、下拉、输入等组件使用 shadcn/ui（Radix 原语 + cva 变体 + tailwind-merge），它们可访问且一致，生成到 src/components/ui，并通过令牌而非内联十六进制着色。技能还给出 Tailwind v4 的基础修正：Preflight 让按钮使用 cursor: default，需要在 @layer base 中为未禁用的 button 与 role=button 元素加上 pointer 光标。 \n量化规则\n\n总颜色不超过 3–5 种（一个主色加中性色，至多一个强调色），不要默认紫色；字体不超过 2 种；正文行高 1.4–1.6，大标题更紧；覆盖背景色时同时覆盖前景文字色，并检查明暗两种模式下的对比度；移动端优先，先设计约 390px 布局再放大，不允许横向溢出，点击目标不小于 44px；使用 4/8 为基础的统一间距；强调色只用于主要操作。 \n反 AI 套路\n\n避免渐变块填充、用巨大首屏渐变替代内容、用 emoji 当图标（应用 lucide-react 等真实图标集）、手绘 SVG 插图/地图/图表（图表用 recharts 等真实库）、占位图或灰色占位块（应使用真实图片或内容，canvas 图片设置 crossOrigin="anonymous"）、默认系统字体的廉价感；每个元素都要有其价值，编辑现有应用时匹配已有 UI，不要引入第二套视觉语言。 \n布局、动效与游戏覆盖层\n\n强调清晰的视觉层级，每个视图一个主要操作，用尺寸、字重、颜色表达重要性；采用真实的 grid/flex 布局与容器最大宽度，对齐统一网格；空状态、加载状态和错误状态都算设计的一部分。动效短促、有缓动（150–250ms），尊重 prefers-reduced-motion，优先 transform/opacity 以避免卡顿。与游戏构建技能配合时，该技能只负责 DOM 覆盖层（开始/点击游玩界面、HUD、分数、菜单、暂停、移动端控制），要保证在 canvas 上可读，并避开指针锁定与游戏输入路径。 \n参考资料与检查清单\n\n参考资料按需加载，包括 refined-ui.md（产品界面/覆盖层设计系统）、typography.md（字号、搭配、节奏）、surfaces.md（层级、边框、阴影）、animations.md（运动与过渡）、performance.md（保持 60fps 流畅）。完成前需核对：令牌已定义、无裸十六进制或任意值、颜色与字体数量受限、对比度成立、移动端无溢出、真实图标图片图表、各状态齐全、动效克制且在浏览器中实际查看过。