SuperAPI AI 工具集

design-system

设计与创作

查看项目

更新于 10-15 17:28

技能介绍

用途:为 HTML 文档和幻灯片演示提供视觉主题层,把 token 文件编译成单个自包含、可内联的 CSS 包,并在发布前校验所有颜色配对的 WCAG 对比度。适合需要单个自包含 HTML 文件的报告、白皮书、幻灯片主题、发布前调色板审计以及明暗模式诊断。它不是产品 UI 组件库,不含按钮、表单状态或组件变体。

主要能力:theme_builder.py 将 token JSON 编译为含明暗两种模式的 CSS 包;contrast_validator.py 按 AA/AAA 对声明配对打分,支持 --all-pairs 和 --no-gate,可作 CI 门槛;token_linter.py 做结构审计,检查字阶合理性、色阶单调性、模式一致性与孤立色阶。

用法:先复制并编辑 assets/sample_tokens.json,再用 linter 检查,然后编译并内联。命令示例:python3 markdown-html/design-system/scripts/token_linter.py --input markdown-html/design-system/assets/sample_tokens.json --format text;python3 markdown-html/design-system/scripts/theme_builder.py --input markdown-html/design-system/assets/sample_tokens.json --out build/theme.css --format text;python3 markdown-html/design-system/scripts/contrast_validator.py --input markdown-html/design-system/assets/sample_tokens.json --level AA --format text。三重退出码:0 正常,2 未过门槛,1 工具本身出错。

选型要点:文档字阶比 1.25、幻灯片 1.333;AA 门槛为正文 4.5:1、大字与 UI 3:1、装饰 1.5:1;深色模式颜色角色应移动 2-3 档而非 1 档。

限制:对比度只衡量亮度,对文字叠图、半透明遮罩、未声明的悬停与焦点状态、同亮度红绿配对等盲区无法覆盖;自包含 HTML 无法获取网络字体,需自备字体回退栈。生成前需确认 AA/AAA、是否打印或导出 PDF、文档还是幻灯片、是否有既有品牌色。缺失细节暂未提供。