{"id":51026603,"url":"https://github.com/gitstq/designkit-cli","last_synced_at":"2026-06-21T20:02:06.918Z","repository":{"id":363287459,"uuid":"1262667549","full_name":"gitstq/designkit-cli","owner":"gitstq","description":"🎨 DesignKit-CLI: Lightweight Design Token Generator \u0026 AI UI Style Engine — Generate, preview, and export design systems with zero dependencies. Interactive TUI, multi-format export (CSS/JSON/Tailwind/SCSS/DTCG), color palette generation, AI prompt templates optimized for GLM-5.1/GPT/Claude.","archived":false,"fork":false,"pushed_at":"2026-06-08T07:56:35.000Z","size":38,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-08T09:25:33.897Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gitstq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-08T07:52:02.000Z","updated_at":"2026-06-08T07:55:20.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/gitstq/designkit-cli","commit_stats":null,"previous_names":["gitstq/designkit-cli"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/gitstq/designkit-cli","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fdesignkit-cli","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fdesignkit-cli/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fdesignkit-cli/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fdesignkit-cli/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gitstq","download_url":"https://codeload.github.com/gitstq/designkit-cli/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fdesignkit-cli/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34623906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-21T02:00:05.568Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-21T20:02:06.086Z","updated_at":"2026-06-21T20:02:06.900Z","avatar_url":"https://github.com/gitstq.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/badge/🎨_DesignKit-CLI-6366f1?style=for-the-badge\u0026logo=python\u0026logoColor=white\u0026labelColor=1e1b4b\"\u003e\n    \u003cimg alt=\"DesignKit-CLI\" src=\"https://img.shields.io/badge/🎨_DesignKit-CLI-6366f1?style=for-the-badge\u0026logo=python\u0026logoColor=white\u0026labelColor=e0e7ff\"\u003e\n  \u003c/picture\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eLightweight Design Token Generator \u0026 AI UI Style Engine\u003c/b\u003e\u003cbr\u003e\n  \u003ci\u003eGenerate, preview, and export complete design systems — zero dependencies, maximum creativity.\u003c/i\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"./README.md\"\u003e\u003cimg src=\"https://img.shields.io/badge/EN-🇬🇧-blue?style=flat-square\" alt=\"English\"\u003e\u003c/a\u003e\n  \u003ca href=\"./README.zh-CN.md\"\u003e\u003cimg src=\"https://img.shields.io/badge/简体中文-🇨🇳-red?style=flat-square\" alt=\"简体中文\"\u003e\u003c/a\u003e\n  \u003ca href=\"./README.zh-TW.md\"\u003e\u003cimg src=\"https://img.shields.io/badge/繁體中文-🇭🇰-red?style=flat-square\" alt=\"繁體中文\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#-key-features\"\u003eFeatures\u003c/a\u003e •\n  \u003ca href=\"#-quick-start\"\u003eQuick Start\u003c/a\u003e •\n  \u003ca href=\"#-usage-guide\"\u003eUsage\u003c/a\u003e •\n  \u003ca href=\"#-export-formats\"\u003eExport\u003c/a\u003e •\n  \u003ca href=\"#-ai-prompt-integration\"\u003eAI Prompts\u003c/a\u003e •\n  \u003ca href=\"#-design-philosophy\"\u003ePhilosophy\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003e **💡 What is DesignKit-CLI?** A zero-dependency Python CLI tool that lets you generate beautiful design systems from simple theme presets. Choose from 7 carefully crafted design themes, customize every parameter, preview in your terminal, and export to CSS/JSON/Tailwind/SCSS/DTCG format. Plus — it generates optimized **AI system prompts** for GLM-5.1, GPT, and Claude, so your AI coding tools produce consistent, professional UI code every time.\n\n---\n\n## ✨ Key Features\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd width=\"300\"\u003e\n\n### 🎨 **7 Theme Presets**\nFrom Minimal to Brutalist, Warm to Neon — each with perfectly balanced colors, typography, and spacing.\n\n\u003c/td\u003e\n\u003ctd width=\"300\"\u003e\n\n### 🖌️ **Color Intelligence**\nAutomatic palette generation (50–950 scale), complementary/analogous/triadic schemes, WCAG contrast checking.\n\n\u003c/td\u003e\n\u003ctd width=\"300\"\u003e\n\n### 🔤 **Typography Engine**\nModular type scales with 5 font pairings, line-height optimization, and weight recommendations.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n### 🖥️ **Interactive TUI**\nBeautiful Rich-powered terminal interface for live theme preview and design exploration.\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n### 📦 **Multi-Format Export**\nCSS Custom Properties, JSON, Tailwind Config, SCSS Variables, DTCG (Design Tokens Format) — one command, all formats.\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n### 🤖 **AI Prompt Generator**\nGenerate system prompts optimized for **GLM-5.1**, GPT-4o, and Claude — your AI will follow your design system perfectly.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n---\n\n## 🚀 Quick Start\n\n```bash\n# Install (no dependencies needed for core)\npip install designkit-cli\n\n# Or run directly without install\ngit clone https://github.com/gitstq/designkit-cli.git\ncd designkit-cli\npip install -e .\n\n# For TUI preview (optional):\npip install rich\n\n# 👇 Try these commands right now:\ndesignkit list                          # See all 7 themes\ndesignkit preview --theme minimal       # Preview a theme\ndesignkit export --theme minimal --format css   # Export tokens\ndesignkit palette \"#6366f1\"             # Generate color palette\ndesignkit prompt --theme neon --model glm      # Generate AI prompt\n```\n\n**Requirements**: Python 3.8+ (core: zero dependencies; TUI: Rich library optional)\n\n---\n\n## 📖 Usage Guide\n\n### `designkit list` — Browse themes\n\n```bash\ndesignkit list\n```\n\nLists all 7 built-in design themes with descriptions:\n- `minimal` — Clean, whitespace-driven\n- `brutalist` — Bold, high-contrast\n- `warm` — Soft, earthy, approachable\n- `neon` — Vibrant, dark-mode-first\n- `corporate` — Professional, data-dense\n- `playful` — Fun, colorful, rounded\n- `nature` — Organic, calm, green\n\n### `designkit preview` — Preview in terminal\n\n```bash\n# Preview all themes sequentially\ndesignkit preview\n\n# Preview a specific theme\ndesignkit preview --theme neon\n```\n\n\u003e **💎 Pro Tip:** Install `rich` for a beautiful, color-rich TUI experience with live color swatches, typography tables, spacing bars, and simulated component previews.\n\n### `designkit export` — Export design tokens\n\n```bash\ndesignkit export --theme minimal --format css        # CSS custom properties\ndesignkit export --theme minimal --format json       # Structured JSON\ndesignkit export --theme minimal --format tailwind   # Tailwind config\ndesignkit export --theme minimal --format scss       # SCSS variables\ndesignkit export --theme minimal --format dtcg       # W3C Design Tokens\n\n# Export all themes at once:\ndesignkit export --format css\n\n# Specify output path:\ndesignkit export --theme playful --format css --output ./my-theme.css\n```\n\n### `designkit palette` — Color wizardry\n\n```bash\n# Generate full palette from any hex color\ndesignkit palette \"#6366f1\"\n\n# Short form also works\ndesignkit palette ff6b6b\n```\n\nOutput includes: 11-step primary palette, neutral gray palette, complementary color, analogous colors, triadic scheme, and foreground text contrast analysis.\n\n### `designkit prompt` — AI system prompt generation\n\n```bash\n# Generate GLM-5.1 optimized prompt (default)\ndesignkit prompt --theme minimal --model glm\n\n# Generate for GPT-4o\ndesignkit prompt --theme neon --model openai\n\n# Generate for Claude\ndesignkit prompt --theme warm --model claude\n\n# Generate a component-specific prompt\ndesignkit prompt --theme minimal --model glm --component \"Card\" --framework React\n```\n\nThe generated prompts include complete design system context (colors, typography, spacing, motion, visual density) — ensuring your AI always produces code that matches your chosen design language.\n\n---\n\n## 📦 Export Formats\n\n| Format | File Ext | Description | Use Case |\n|--------|----------|-------------|----------|\n| **CSS** | `.css` | CSS Custom Properties (`--dk-*`) | Any web project |\n| **JSON** | `.json` | Structured nested tokens | Programmatic use |\n| **Tailwind** | `.config.js` | Tailwind CSS `extend` config | Tailwind projects |\n| **SCSS** | `.scss` | SCSS variables \u0026 maps | Sass projects |\n| **DTCG** | `.tokens.json` | W3C Design Tokens Format | Design tool interop |\n\n---\n\n## 💡 Design Philosophy \u0026 Roadmap\n\n### Design Principles\n\nDesignKit-CLI was born from a simple observation: **AI-generated interfaces all look the same**. Whether it's GPT-4o, GLM-5.1, or Claude — without explicit design guidance, AI outputs generic, cookie-cutter UIs.\n\nInspired by the vision behind [taste-skill](https://github.com/Leonxlnx/taste-skill) (37K+ stars on GitHub), DesignKit-CLI takes a more comprehensive approach:\n\n1. **🎯 Tokens over Instructions** — Instead of just telling AI \"make it look good,\" we provide precise numerical design tokens\n2. **🔄 Live Preview** — See your design system come to life in the terminal before committing to code\n3. **🌐 Multi-Format** — Export to the format your project actually uses (CSS, Tailwind, SCSS, etc.)\n4. **🤖 AI-Native** — Purpose-built for the AI-assisted development era, with prompt templates for every major model\n5. **🔧 Zero Dependencies** — Core functionality works with just Python standard library\n\n### Roadmap\n\n- [ ] **Custom Theme Builder** — Interactive CLI wizard for creating themes from scratch\n- [ ] **Component Library** — Pre-built design system component CSS (buttons, cards, forms, nav)\n- [ ] **Figma Plugin Support** — Import/export tokens from Figma\n- [ ] **Web UI** — Simple web-based theme designer\n- [ ] **Dark Mode Toggle** — Auto-generate both light and dark token sets\n- [ ] **More AI Models** — DeepSeek, Qwen, Gemini prompt templates\n- [ ] **i18n** — RTL language support tokens\n\n---\n\n## 🤝 Contributing\n\nWe welcome contributions! Here's how to get involved:\n\n1. 🍴 **Fork** the repository\n2. 🌿 **Create** a feature branch (`git checkout -b feature/amazing`)\n3. 💻 **Commit** your changes (`git commit -m 'feat: add amazing feature'`)\n4. 📤 **Push** to the branch (`git push origin feature/amazing`)\n5. 🔄 **Open** a Pull Request\n\nPlease follow [Angular Commit Convention](https://www.conventionalcommits.org/) for commit messages.\n\n**Issues**: Found a bug? Have an idea? [Open an issue](https://github.com/gitstq/designkit-cli/issues)\n\n---\n\n## 📄 License\n\nThis project is licensed under the **MIT License** — see the [LICENSE](./LICENSE) file for details.\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003csub\u003eBuilt with ❤️ by the DesignKit Team · Inspired by \u003ca href=\"https://github.com/Leonxlnx/taste-skill\"\u003etaste-skill\u003c/a\u003e\u003c/sub\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003csub\u003e🇬🇧 English · \u003ca href=\"./README.zh-CN.md\"\u003e🇨🇳 简体中文\u003c/a\u003e · \u003ca href=\"./README.zh-TW.md\"\u003e🇭🇰 繁體中文\u003c/a\u003e\u003c/sub\u003e\n\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitstq%2Fdesignkit-cli","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgitstq%2Fdesignkit-cli","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitstq%2Fdesignkit-cli/lists"}