技能介绍

要解决的具体问题

当你同时维护官网、活动落地页、商品详情页和内部后台时，颜色、字体和间距往往散落在各自的代码库里。一个按钮在 A 项目是 #1677ff，在 B 项目是 #0b5fff；间距一会儿是 8px，一会儿是 0.75rem；组件的高度、圆角、阴影各写各的，换一套品牌皮肤就要全站翻找。等到设计稿和实现对齐时，还要重新核对可访问性（如对比度和焦点态），成本很高。

技能如何工作

china-design-tailwind-design-system 把这件事拆成一条可检查的闭环。开始前，它会先确认设计目标、受众、渠道、尺寸，以及品牌规范、文案、数据和素材的可用性；信息不足时列出缺口，而不是用猜测填坑。

核心能力是基于 Tailwind CSS 构建生产可用的设计系统，包括设计 token（design tokens）、组件变体（component variants）、响应式模式（responsive patterns）和可访问性（accessibility）。执行流程分为六个步骤：

明确业务目标、使用对象、成功标准和停止条件
整理与颜色、字体、间距、组件规范直接相关的事实、数据、素材和约束
把任务拆成颜色、字体、间距、组件等可检查模块，确定优先级与依赖
依据 Tailwind CSS 设计系统边界执行：生成 token、组件变体与响应式规则
产出设计规范与制作包，同时列出事实依据、风险、缺口和人工确认项
做发布前复核：目标、事实、可执行性、合规与交付完整性

交付物包括目标与范围卡、执行步骤与模板、设计规范与制作包（含负责人、时间、检查点），以及事实证据、风险与待确认清单。

适用边界与注意点

它只处理“网页颜色、字体、间距与组件规范搭建”这一场景。不使用未授权的图片、字体、肖像、商标或竞品素材；不把本地文档或建议冒充成已执行的平台操作；不会读取、记录或输出密钥、Token 或无关个人信息。涉及真实发送、发布、付费、删除或生产变更时，必须先获得你的明确确认。营销与增长类输出只提供合规方案与测试建议，不会承诺流量、排名或成交。