# Tailwind Design System

> 使用 Tailwind CSS 构建生产级设计系统，包括设计 token、组件变体、响应式模式和无障碍支持。触发词：设计系统、Tailwind 设计系统、组件库、设计 token、响应式组件、深色模式、无障碍组件

- Skill: `kscz0000/tailwind-design-system` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add kscz0000/tailwind-design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/tailwind-design-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/tailwind-design-system

---


# Tailwind 设计系统

使用 Tailwind CSS 构建生产级设计系统，包括设计 token、组件变体、响应式模式和无障碍支持。

## 适用场景

- 使用 Tailwind 创建组件库
- 实现设计 token 和主题系统
- 构建响应式和无障碍组件
- 统一代码库中的 UI 模式
- 迁移或扩展 Tailwind CSS
- 设置深色模式和配色方案

## 不适用场景

- 任务与 Tailwind 设计系统无关
- 需要此范围之外的其他领域或工具

## 使用说明

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

## 资源

- `resources/implementation-playbook.md` 包含详细模式和示例。

## 限制

- 仅在任务明确匹配上述范围时使用此技能。
- 不要将输出视为特定环境验证、测试或专家评审的替代品。
- 如果缺少所需输入、权限、安全边界或成功标准，请停止并请求澄清。