Tailwind 设计系统

问题：Tailwind 项目容易变成工具类堆叠

很多前端项目在使用 Tailwind CSS 时，并不是缺少样式能力，而是缺少一套稳定的设计系统。组件里散落着颜色、间距、圆角、阴影，暗色模式靠局部覆盖，响应式断点各写各的；换项目后又要重新发明一遍按钮、卡片、表单。结果就是视觉不一致、可访问性不稳定、迁移成本高。

工作方式：围绕设计令牌与组件变体建立约束

这个技能把重点放在“生产级”的 Tailwind 模式上，而不是零散样式技巧。核心包括：

• 设计令牌：把 color、spacing、font、radius、shadow 等收敛为可复用变量或主题约定。
• 组件变体：为按钮、输入框、卡片等定义 default、hover、focus、disabled、error 等状态，减少手写类名。
• 响应式模式：用 sm:、md:、lg: 等断点组织布局，而不是为每个屏幕复制结构。
• 可访问性：补充焦点样式、对比度、语义结构和交互状态，使组件不只“看起来能用”。

关键步骤通常是先明确目标组件、约束和输入；再按设计令牌组织主题；然后实现组件状态与响应式；最后用示例或检查清单验证交互与可访问性。资料里提示可继续查看 resources/implementation-playbook.md 获取更详细的模式和示例。

适用边界

它适合建立组件库、实现主题系统、标准化 UI 模式、迁移或扩展 Tailwind CSS，以及设置暗黑模式和配色方案。若任务与设计系统无关，或需要更广泛的前端框架、后端工具、视觉资产生成，就不要用它替代相应领域工具。