Skip to main content

theme-gen

Generate complete design system from brand colors. Use when building design tokens.

ソース情報

リポジトリ
lxgicstudios/ai-theme
ソースの最終更新活動
2026年8月20日 19:08
検出された SKILL.md の言語
英語
スター
1
フォーク
0

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

SKILL.md を表示中

SKILL.md
ソースの指示 · 読み取り専用プレビュー
name
theme-gen
description
Generate complete design system from brand colors. Use when building design tokens.
# Theme Generator You have two brand colors and need a complete design system. This generates colors, typography, spacing, shadows, and more. **One command. Zero config. Just works.** ## Quick Start ```bash npx ai-theme "#FF4500" "#1A1A2E" ``` ## What It Does - Takes your brand colors - Generates complete color palette - Creates typography scale - Includes spacing, shadows, borders ## Usage Examples ```bash # Generate CSS custom properties npx ai-theme "#FF4500" "#1A1A2E" # Tailwind config format npx ai-theme "#FF4500" "#1A1A2E" -f tailwind # JSON tokens npx ai-theme "#FF4500" "#1A1A2E" -f json -o tokens.json ``` ## Best Practices - **Start with brand colors** - everything else derives from them - **Use consistent scales** - 4px base works well - **Test in context** - tokens alone don't show the full picture - **Document decisions** - why these specific values ## When to Use This - Starting a new design system - Implementing brand guidelines - Creating design tokens - Standardizing across projects ## 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://lxgicstudios.com ## Requirements No install needed. Just run with npx. Node.js 18+ recommended. Needs OPENAI_API_KEY environment variable. ```bash npx ai-theme --help ``` ## How It Works Takes your brand colors and generates a complete design token set. Creates harmonious color relationships, type scales, and spacing systems that work together. ## License MIT. Free forever. Use it however you want.
GitHubで見る