界面样式设计

解决什么问题

React 项目里手写样式有三个常见坑：组件库默认外观千篇一律，改主题要覆盖大量选择器；暗色模式拖到上线前才补，各页面各写各的，切换时闪烁且不一致；赶进度时无障碍细节被跳过，键盘用户和屏幕阅读器用户被挡在门外。这个技能把 shadcn/ui（Radix UI + Tailwind）的工具类优先写法、CSS 变量主题与无障碍基元整合成一套可执行的流程，让界面从第一行代码起就满足响应式、主题一致与 a11y 要求。

核心能力与关键步骤

• 初始化环境：通过 npx shadcn@latest init 选定框架、TypeScript 与路径，自动完成 Tailwind 配置；再用 add 命令引入 button、card、dialog、form 等基元组件。
• 组合基元：以 Card/Button/Dialog 为骨架拼装复杂页面；表单场景用 react-hook-form + zod + shadcn 的 Form 组件实现声明式校验与错误提示。
• 纯 Tailwind 方案：未使用 shadcn 时，在 Vite 项目装好 tailwindcss 与 @tailwindcss/vite，在 src/index.css 中 @import "tailwindcss" 即可开始写工具类。
• 主题与暗色：基于 CSS 变量 + next-themes，为所有主题元素补齐 dark: 变体，自定义色板集中管理。
• 无障碍优先：依赖 Radix 基元、焦点态、语义化 HTML、键盘可达，并保证表单校验信息可被播报。
• 移动优先响应式：按 sm/md/lg/xl/2xl 断点迭代，配合 grid/flex 与容器查询。

技能最终产出 UiSpec 工件：组件清单、设计 token、暗色开关与 a11y 要点，可直接交给前端工程化、3D 叠加或框架集成环节复用。

适用边界与注意点

• 只面向 React 系框架（Next.js / Vite / Remix / Astro），纯后端用不上。
• 非 Web 的桌面 GUI 不在范围内。
• 海报、营销页等视觉物料需要设计 token 体系配合，单靠工具类无法覆盖品牌级动效。
• UiSpec 是接口契约而非完整设计系统，长期项目仍需自行沉淀 token 与组件规范。