什么是 主题生成器？

Theme Generator 是一款高性能实用程序，旨在消除 Openclaw Skills 生态系统中创建色阶的手动劳动。只需提供一个主要的品牌颜色，开发人员即可立即生成一个完整的设计系统，其具有语义令牌、50-950 色阶和数学平衡的调色板。该工具确保生成的每种颜色在现代 Web 应用程序中保持无障碍性和视觉和谐。

该技能专为重视速度和一致性的开发人员而构建，弥合了原始品牌资产与生产就绪代码之间的鸿沟。它自动执行为每种颜色选择九个色阶的繁琐过程，允许团队专注于构建功能而不是调整 HEX 代码。作为 Openclaw Skills 集合的一部分，它提供了一个无缝的工作流，用于在任何项目架构中标准化设计令牌。

下载入口:https://github.com/openclaw/skills/tree/main/skills/lxgicstudios/theme-gen

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

主题生成器 应用场景

• 启动新的 Web 项目并需要即时、稳健的色彩系统。
• 将客户提供的单一品牌颜色扩展为完整的、生产就绪的设计调色板。
• 通过将不一致的颜色迁移到统一的设计令牌来标准化遗留代码库。
• 在早期设计和发现阶段快速原型化 UI 变体。

1. 用户通过 Openclaw Skills 支持的 CLI 界面提供基础 HEX 颜色。
2. 引擎应用先进的色彩理论和亮度计算，生成从 50 到 950 的和谐色阶。
3. 根据提供的主要和次要输入，自动映射语义角色，如成功、警告、错误和信息。
4. 系统验证对比度，确保所有颜色组合符合现代无障碍标准。
5. 最终的设计系统导出为 CSS 自定义属性、Tailwind 配置或独立文件。

主题生成器 配置指南

Theme Generator 需要 Node.js 18 或更高版本。您可以在 Openclaw Skills 环境中使用以下命令直接执行该工具，而无需全局安装：

npx ai-theme --primary "#3B82F6" --secondary "#10B981"

要查看所有可用的自定义标志，请运行：

npx ai-theme --help

主题生成器 数据架构与分类体系

name: theme-gen
description: Generate a complete design system from brand colors using AI. Use when starting a new project or standardizing colors.

Theme Generator

Give it your brand colors. Get back a complete design system with semantic tokens, shade scales, and ready-to-use CSS variables or Tailwind config. Stop manually picking 9 shades of blue.

One command. Zero config. Just works.

Quick Start

npx ai-theme --primary "#3B82F6" --secondary "#10B981"

What It Does

• Generates full color shade scales from your base colors (50 through 950)
• Creates semantic tokens like success, warning, error, info
• Outputs CSS custom properties, Tailwind config, or both
• Ensures accessible contrast ratios between foreground and background
• Builds consistent spacing and typography scales

Usage Examples

# Generate from primary color only
npx ai-theme --primary "#6366F1"

# Full brand palette
npx ai-theme --primary "#3B82F6" --secondary "#10B981" --accent "#F59E0B"

# Output Tailwind config
npx ai-theme --primary "#8B5CF6" --format tailwind

# Include dark mode variants
npx ai-theme --primary "#EC4899" --dark-mode

# Export to file
npx ai-theme --primary "#14B8A6" -o ./theme.css

Best Practices

• Start with your hero color - The primary color sets the tone. Get that right first
• Don't fight the generated scales - They're mathematically balanced. Trust the output
• Test in context - Paste the variables into your project and see how they look on real UI
• Customize after generating - Use this as a starting point, then tweak individual shades

When to Use This

• Starting a new project and need a color system fast
• Client gave you one brand color and expects a full palette
• Converting a messy codebase to consistent design tokens
• Exploring color options during early design phases

Part of the LXGIC Dev Toolkit

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.

Find more:

• GitHub: https://github.com/LXGIC-Studios
• Twitter: https://x.com/lxgicstudios
• Substack: https://lxgicstudios.substack.com
• Website: https://lxgic.dev

Requirements

No install needed. Just run with npx. Node.js 18+ recommended.

npx ai-theme --help

How It Works

The tool takes your base colors and uses color theory principles to generate harmonious shade scales. It calculates luminance values to ensure each step in the scale has proper contrast, then maps these to semantic purposes like backgrounds, text, and interactive states.

License

MIT. Free forever. Use it however you want.