tailwind-design-system 是指导 AI 用 Tailwind CSS v4 建立设计系统的 Skill。适合项目里页面越来越多,按钮、颜色和组件状态却各写各的团队。
它先把具体颜色与用途分开。例如“主要操作”对应一个语义名称,组件引用这个用途,而不是每处都写同一个色值。后续调整主题时,就能围绕同一套规则修改。
组件也按基础样式、变体、尺寸和状态组织。你提供现有项目及希望统一的模式,AI 可以据此整理可复用的主题与组件结构;示例还展示了暗色模式如何替换相应语义值。
这份文档面向 v4,采用 CSS 中的主题配置。已有 v3 工程需要先判断迁移条件,不能把新版写法直接塞进去。它提供建立一致规则的起点,具体组件仍要按真实内容和交互检查。