利用 Tailwind CSS 快速构建生产级 UI 设计系统
解决 UI 风格不统一和维护成本高的问题：通过 AI 规范化 Tailwind CSS 的配置，快速建立一套包含设计令牌、组件变体和响应式标准的生产级设计系统。
为什么需要这个技能
在大型项目或团队协作中，如果直接在 HTML 中随意书写 Tailwind 类名，会导致代码冗余且难以维护。真正的“设计系统”需要将颜色、间距、圆角等抽象为设计令牌（Design Tokens），并定义一套标准化的组件变体（Variants）。
本技能让 AI 能够从架构层面思考 Tailwind 的应用，而不仅仅是写几个 CSS 类。它能帮助你快速搭建一套可扩展的主题体系，确保全站 UI 风格一致，并同时兼顾暗黑模式（Dark Mode）与无障碍访问（Accessibility）标准。
适用场景
- 构建企业级组件库：需要基于 Tailwind 创建一套可复用的 UI 基础库。
- 统一视觉规范：将 UI 设计稿中的颜色、字体等参数转化为
tailwind.config.js中的设计令牌。 - 响应式适配：为复杂页面定义一套标准且统一的断点响应模式。
- 主题迁移或升级：将既有的 CSS 样式迁移至 Tailwind，或扩展现有的主题配置。
- 实现暗黑模式：快速配置一套支持无缝切换的亮暗主题色方案。
核心工作流
- 定义设计令牌：在
tailwind.config.js中配置自定义的theme扩展，定义品牌色、语义化颜色（如primary,success,danger）和间距标准。 - 构建组件变体：结合 AI 生成具有不同状态（如
primary,outline,ghost）和尺寸（如sm,md,lg）的组件类名组合。 - 实施响应式与无障碍策略：应用 Tailwind 的响应式前缀，并确保 HTML 结构符合 ARIA 标准，增强组件的可访问性。
- 验证与迭代：参考
resources/implementation-playbook.md中的模式，验证生成的类名是否符合生产环境的最优实践。
下载和安装
下载 tailwind-design-system 中文版 Skill ZIP
解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。
你可能还需要
暂无推荐