🎨 Chuk设计系统
具有多格式导出功能的通用设计令牌系统。定义你的设计系统一次，导出到Canva CSS、Remotion TypeScript、python pptx、标准CSS和W3C设计令牌JSON。
  
✨ 特性
- 🎨 通用设计代币：颜色、排版、间距和运动
- 📦 多格式导出：Canva、远程处理、PPTX、CSS、W3C JSON
- 🎭 7个预置主题：科技、金融、教育、生活方式、游戏、商业、极简主义
- 🔒 类型安全：经过全面验证的Pydantic模型
- ✅ 测试良好：200多个测试的测试覆盖率为89%
- 🚀 MCP服务器：Claude集成就绪
- 📱 平台感知：YouTube、TikTok、Instagram的安全区域
- 🎬 视频优化：框架完美的持续时间和Remotion弹簧
🚀 快速开始
安装
# Using uv (recommended)
uv pip install -e .
# Or using pip
pip install -e .基本用法
from chuk_design_system.themes import get_theme
from chuk_design_system.exporters import export_to_canva_css
# Get a theme
theme = get_theme("tech")
# Export to Canva CSS
css = export_to_canva_css(theme)
print(css)🎨 互动展示
直观地查看设计系统：
# Generate PNG images + open HTML showcase
make showcase
# Open HTML showcase only
make showcase-html交互式HTML展示功能 单击以复制 色样， 悬停动画 为了缓和曲线， 现场排版 样品，以及 视觉梯度.
📚 设计体系结构
颜色
- 调色板：以顺风为灵感的音阶（50-950），13种以上色调
- 语义颜色：基于角色的命名（主要、次要、成功、警告、错误）
- 渐变：6个预定义的梯度（日落、海洋、森林、火焰、极光、宇宙）
- 图表颜色：用于数据可视化的8色序列
排版
- 字体族：展示、车身、单体空间、装饰
- 多分辨率标尺：网页（16px），PPTX（18pt），视频1080p（40px），视频4K（80px）
- 文字样式：英雄头衔、头衔、标题、身体、描述
- 字体权重：薄（100）至黑色（900）
间距
- 8px单位制：Canva兼容（1u=8px）
- 平台安全区：YouTube短片、TikTok、Instagram故事
- 电网系统：4、8、12柱网
运动
- 工期：通过帧转换（30fps、60fps）优化视频
- 缓和曲线：线性、缓出、缓进、平滑、轻快、有弹性
- 弹簧配置：远程兼容物理
- 过渡：输入/退出预设（淡入淡出、滑动、缩放）
🎭 可用主题
| 主题 | 主色 | 用例 |
|---|---|---|
| 技术 | 蓝色（#3b82f6） | 技术，SaaS产品 |
| 金融 | 绿色（#22c55e） | 金融服务、仪表板 |
| 教育 | 紫色（#a855f7） | 学习平台、课程 |
| 生活方式 | 粉红色（#db2777） | 时尚、美容、健康 |
| 游戏 | 绿色（#10b981） | 游戏平台、电子竞技 |
| 商业 | 蓝色（#3b82f6） | 企业、专业服务 |
| 极简主义 | 锌（#71717a） | 极简主义设计，作品集 |
📦 导出格式
Canva CSS
from chuk_design_system.exporters import export_to_canva_css
css = export_to_canva_css(theme)
# Output: --content-primary: #3b82f6;移除TypeScript
from chuk_design_system.exporters import export_to_remotion_ts
ts_code = export_to_remotion_ts(theme)
# Output: export const colorPrimary = "#3b82f6";python pptx
from chuk_design_system.exporters.pptx import create_pptx_theme_dict
pptx_theme = create_pptx_theme_dict(theme)标准CSS
from chuk_design_system.exporters import export_to_css
css = export_to_css(theme)W3C设计令牌JSON
from chuk_design_system.exporters import export_to_w3c_json
json_str = export_to_w3c_json(theme)🛠️ 发展
设置
make setup测试
make test-cov # Run tests with coverage
make test-watch # Run tests in watch mode
make test-quick # Quick test (stop on first failure)代码质量
make format # Format code
make lint # Run linters
make type-check # Type checking
make all # Run all checks📖 用法示例
导出所有主题
from chuk_design_system.themes import THEMES, get_theme
from chuk_design_system.exporters import export_to_canva_css
for theme_name in THEMES.keys():
theme = get_theme(theme_name)
css = export_to_canva_css(theme)
with open(f"exports/{theme_name}.css", "w") as f:
f.write(css)自定义令牌访问
from chuk_design_system.tokens import ColorTokens, TypographyTokens
colors = ColorTokens()
primary_blue = colors.palette["blue"][500] # #3b82f6
typography = TypographyTokens()
hero_style = typography.get_text_style("hero_title", "web")用于远程操作的运动令牌
from chuk_design_system.tokens import MotionTokens
motion = MotionTokens()
spring_config = motion.get_spring_config("smooth")
# {'damping': 22.0, 'stiffness': 150.0, 'mass': 1.0}
frames = motion.get_duration_frames("normal", fps=30) # 9 frames🔗 整合
该设计系统支持：
🤖 MCP服务器
通过模型上下文协议与Claude一起使用：
{
"mcpServers": {
"chuk-design-system": {
"command": "python",
"args": ["-m", "chuk_design_system.server"]
}
}
}📝 Makefile命令
| 命令 | 描述 |
|---|---|
make help | 显示所有可用命令 |
make test-cov | 使用覆盖率报告运行测试 |
make format | 黑色+褶边格式代码 |
make showcase | 生成视觉展示 |
make all | 运行所有检查 |
🧪 测试覆盖率
当前覆盖范围： 89% （729份陈述，82份遗漏）
- tokens/colors.py： 100%
- 标记/排版.py： 100%
- tokens/spang.py： 100%
- tokens/motion.py： 100%
- 出口商/canva.py： 100%
- 出口商/remotion.py： 100%
- 出口商/pptx.py： 94%
🤝 贡献
欢迎投稿！拜托：
- 分叉存储库
- 创建要素分支
- 通过测试进行更改
- 跑
make all验证 - 提交拉取请求
📜 许可证
MIT许可证-有关详细信息，请参阅许可证文件。
🙏 致谢
- 灵感来自Tailwind CSS调色板
- Canva的设计代币系统
- 雷莫的春季物理学
- W3C设计令牌规范