SuperAPI AI 工具集

theme-gen

设计与创作

查看项目

更新于 10-16 06:26

技能介绍

Theme Generator 是一款面向开发者和设计师的命令行工具,用于从品牌色快速生成完整的设计系统。它的核心目标是解决手动挑选颜色色阶(例如手动配出 9 种蓝色)的繁琐问题,让配色方案在数学上保持平衡与和谐。

主要能力

该工具接收基础颜色后,会生成完整的颜色色阶(从 50 到 950),创建 success、warning、error、info 等语义化 token,并输出 CSS 自定义属性、Tailwind 配置或两者兼有。它还会确保前景与背景之间具备可访问的对比度,并构建一致的间距与排版比例。

使用方式

该工具无需安装,直接通过 npx 运行即可,推荐使用 Node.js 18 及以上版本。基本命令格式为:npx ai-theme --primary "#3B82F6" --secondary "#10B981"。

使用示例包括:仅从主色生成(npx ai-theme --primary "#6366F1");生成完整品牌调色板(npx ai-theme --primary "#3B82F6" --secondary "#10B981" --accent "#F59E0B");输出 Tailwind 配置(npx ai-theme --primary "#8B5CF6" --format tailwind);包含深色模式变体(npx ai-theme --primary "#EC4899" --dark-mode);导出到文件(npx ai-theme --primary "#14B8A6" -o ./theme.css)。可通过 npx ai-theme --help 查看帮助。

工作原理

工具接收基础颜色后,运用色彩理论原则生成和谐的色阶。它计算亮度值以确保色阶中每一步都具有适当的对比度,然后将这些颜色映射到背景、文本和交互状态等语义用途上。

适用场景

适合在启动新项目并需要快速建立颜色系统时使用;当客户只给出一个品牌色却期望获得完整调色板时使用;将混乱的代码库转换为一致的设计 token 时使用;以及在早期设计阶段探索颜色选项时使用。

最佳实践

建议从主色(hero color)开始,主色决定整体基调,应先确定好主色;不要与生成的色阶对抗,它们在数学上是平衡的,可以信任输出结果;将变量粘贴到项目中,在真实 UI 上测试效果;生成后再进行自定义,将其作为起点,然后微调个别色阶。

限制与说明

该工具属于 LXGIC Dev Toolkit 的一部分,是 LXGIC Studios 构建的 110 多个免费开发者工具之一,免费层级无付费墙、无需注册、无需 API 密钥。采用 MIT 许可,永久免费。关于该工具的具体收费、价格、平台支持范围等更多细节,资料中暂未提供。