SuperAPI AI 工具集

demo-design-tokens

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

用途:这是一套为演示应用准备的预配置设计令牌,用于在没有正式设计系统的情况下,也能构建观感良好的演示 UI。

主要能力:提供完整的样式变量集合。颜色方面包含品牌色(--brand-primary #2563EB、--brand-secondary #1E40AF、--brand-accent #7C3AED)、中性色(--neutral-50 至 --neutral-900)、语义色(--success、--warning、--error、--info)、用于数据可视化的严重度色(--severity-critical/high/medium/low/info)以及状态色(--condition-excellent/good/fair/poor)。此外还有字体栈与字号阶梯、基于 4px 网格的间距、阴影、圆角与过渡时长和缓动曲线。

使用方式:以 CSS 变量形式在页面中引用;资料给出了 Tailwind 配置扩展的 tailwind.config.ts 示例,可将品牌色、严重度色、状态色与字体族登记到主题中,之后用语义令牌而非原始值调用。

适用场景:快速搭建演示页面、原型或内部示例,尤其需要统一配色、排版与间距节奏时。

限制与建议:资料强调应优先使用语义令牌、保持间距节奏一致、阴影与圆角搭配使用,并对颜色做 WCAG 对比度测试;同时列出反模式:组件中不要硬编码十六进制颜色、不要使用不一致的间距值、不要混用设计系统。关于具体安装方式、许可、收费与版本信息,资料暂未提供。