设计变量与组件交付规范

原名：ui-design-system

整理颜色、字号、间距和组件规则，形成可与开发核对的设计基础。

中文 Skills 技能说明

页面越做越多、颜色和字号越来越乱时，可先建立一套可维护的规则。提供品牌色、现有界面、组件约束和目标设备，技能用包内 Python 工具生成设计变量草稿，结合组件与响应式指南整理文档及交付清单。生成的色阶和字号不是自动合格，须检查实际对比度、中文排版和不同屏幕效果。尊重现有设计系统，不擅自全站换样式；修改公共变量会影响多个页面，应先在分支预览，经设计与开发复核后合并。

上游能力依据

上游原始适用说明：UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff.

上游 SKILL.md 主要章节（保留原文标题）：

• Table of Contents
• Trigger Terms
• Workflows
• Workflow 1: Generate Design Tokens
• Workflow 2: Create Component System
• Workflow 3: Responsive Design
• Workflow 4: Developer Handoff
• Tool Reference
• designtokengenerator.py
• Quick Reference Tables

使用边界

先核对上游说明、依赖、输入资料和所需权限。涉及写入、删除、发布、支付或外部发送时，必须在执行前人工确认。

作者、翻译与许可证

原作者

Alireza Rezvani 与 claude-skills contributors

中文翻译

CEOFans翻译

许可证

MIT

上游来源

https://github.com/alirezarezvani/claude-skills/tree/19392f7a08264ed00486a251f5b2098321771f94/product-team/skills/ui-design-system

适用范围

平台：linux、macos、windows；标签：设计与前端、设计变量与组件交付规范、开源技能

安全提示

基础静态扫描不等于绝对安全。技能可能调用命令、浏览器、云服务或本地文件，请在最小权限环境中使用，高风险操作必须人工确认。

如发现侵权、许可证或安全问题，可在本页前台提交投诉，管理员复核后可立即下架。