⚡

Tailwind设计系统Skill tailwind-design-system

这个技能专注于利用Tailwind CSS框架构建和维护可扩展的设计系统，涵盖设计令牌、组件变体、响应式布局和可访问性标准，旨在提升前端开发效率、确保UI一致性和优化用户体验。关键词包括：Tailwind CSS, 设计系统, 设计令牌, 组件库, 响应式模式, 前端开发。

前端开发 0 次安装 0 次浏览 更新于 3/22/2026

name: Tailwind设计系统 description: 使用Tailwind CSS构建可扩展的设计系统，包括设计令牌、组件库和响应式模式。在创建组件库、实现设计系统或标准化UI模式时使用。 license: MIT metadata: version: “1.0.0” domain: 前端 triggers: Tailwind CSS, 设计系统, 设计令牌, 组件库, 响应式模式 role: 专家 scope: 实施 output-format: 代码 related-skills: tailwind-patterns, radix-ui-design-system

Tailwind设计系统

使用Tailwind CSS构建生产就绪的设计系统，包括设计令牌、组件变体、响应式模式和可访问性。

使用此技能当

  • 使用Tailwind创建组件库
  • 实现设计令牌和主题化
  • 构建响应式和可访问的组件
  • 标准化代码库中的UI模式
  • 迁移到或扩展Tailwind CSS
  • 设置暗模式和颜色方案

不要使用此技能当

  • 任务与Tailwind设计系统无关
  • 需要此范围之外的不同域或工具

指令

  • 明确目标、约束和所需输入。
  • 应用相关最佳实践并验证结果。
  • 提供可操作的步骤和验证。
  • 如果需要详细示例，请打开resources/implementation-playbook.md。

资源

  • resources/implementation-playbook.md 用于详细模式和示例。