按钮各长各的?这款Skill统一样式

用 Tailwind CSS v4 构建可扩展的设计系统。

tailwind-design-system 是指导 AI 用 Tailwind CSS v4 建立设计系统的 Skill。适合项目里页面越来越多,按钮、颜色和组件状态却各写各的团队。

它先把具体颜色与用途分开。例如“主要操作”对应一个语义名称,组件引用这个用途,而不是每处都写同一个色值。后续调整主题时,就能围绕同一套规则修改。

组件也按基础样式、变体、尺寸和状态组织。你提供现有项目及希望统一的模式,AI 可以据此整理可复用的主题与组件结构;示例还展示了暗色模式如何替换相应语义值。

这份文档面向 v4,采用 CSS 中的主题配置。已有 v3 工程需要先判断迁移条件,不能把新版写法直接塞进去。它提供建立一致规则的起点,具体组件仍要按真实内容和交互检查。

分类:编程开发

来源仓库:wshobson/agents

适合用来做什么

  • 请用 Tailwind Design System 帮我构建一个响应式导航栏组件。
  • 使用 Tailwind Design System 设计一个可访问性友好的按钮。

安装 tailwind-design-system

npx skills add https://www.iskills.cc/skills/wshobson/agents/tailwind-design-system/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 tailwind-design-system 的用途与原始说明

浏览全部 Skill 指南