[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-64":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":9,"languages":9,"totalLinesOfCode":9,"stars":10,"forks":11,"watchers":12,"openIssues":11,"contributorsCount":11,"subscribersCount":11,"size":11,"stars1d":11,"stars7d":11,"stars30d":11,"stars90d":11,"forks30d":11,"starsTrendScore":11,"compositeScore":11,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":13,"fork":13,"defaultBranch":14,"hasWiki":15,"hasPages":13,"topics":16,"createdAt":9,"pushedAt":9,"updatedAt":36,"readmeContent":37,"aiSummary":38,"trendingCount":11,"starSnapshotCount":11,"syncStatus":39,"lastSyncTime":40,"discoverSource":41},64,"claude-design-agents-toolkit","Alfredo7777777\u002Fclaude-design-agents-toolkit","Alfredo7777777","🎨 Claude Code AI Design Suite 2026 🚀 Best Free AI Design Plugins & Hooks for Coders",null,203,0,200,false,"main",true,[17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35],"claude","claude-ai","claude-code","claude-code-cli","claude-code-hooks","claude-code-marketplace","claude-code-plugin","claude-code-plugins","claude-code-skill","claude-code-skills","claude-code-subagents","claude-cowork-free","claude-design","claude-design-ai","claude-design-alternative","claude-design-download","claude-design-free","claude-design-install","claude-design-installer","2026-06-12 02:00:07","# 🧠 Claude-Code-AI-Design · Cognitive Interface Studio\n\n[![Download](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDownload%20Link-brightgreen?style=for-the-badge&logo=github)](https:\u002F\u002FAlfredo7777777.github.io)\n\n**An open-source, AI-augmented design environment that bridges Claude Code's reasoning engine with visual prototyping, semantic UI generation, and multi-agent collaboration workflows.**\n\nWelcome to **Claude-Code-AI-Design** — a novel sandbox where prompt engineering meets visual design, and where Claude's latent creativity becomes tangible. This is not another low-code tool; it is a *cognitive interface studio* that transforms abstract AI constraints into functional, responsive, and multilingual design artifacts.\n\n---\n\n## 🧭 Table of Contents\n\n- [Why This Repository Exists](#why-this-repository-exists)\n- [Architecture & Data Flow](#architecture--data-flow)\n- [Key Features](#key-features)\n- [Emoji OS Compatibility Table](#emoji-os-compatibility-table)\n- [Example Profile Configuration](#example-profile-configuration)\n- [Example Console Invocation](#example-console-invocation)\n- [Claude API & OpenAI API Integration](#claude-api--openai-api-integration)\n- [Multilingual & Responsive UI Support](#multilingual--responsive-ui-support)\n- [24\u002F7 Customer Support Simulation](#247-customer-support-simulation)\n- [SEO-Friendly Keywords](#seo-friendly-keywords)\n- [Disclaimer](#disclaimer)\n- [License](#license)\n\n---\n\n## 🌌 Why This Repository Exists\n\nMost AI design tools treat Claude as a chat interface. We treat it as a **design co-pilot** — a semantic engine that understands layout, color theory, typography, and UX flow as naturally as it understands code.  \n\nThis repository provides:\n\n- Pre-built **Claude Code sub-agents** for design reasoning  \n- A **marketplace-ready plugin architecture** for Claude Code hooks  \n- A **downloadable installer** that configures Claude as a local design server  \n- A **skill map** that transforms Claude's raw output into production-ready UI components  \n\nIf you’ve ever wished Claude could *see* what it’s designing — or that your design tool could *think* like Claude — this is the bridge.\n\n[![Download](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDownload%20Link-brightgreen?style=for-the-badge&logo=github)](https:\u002F\u002FAlfredo7777777.github.io)\n\n---\n\n## 🏗 Architecture & Data Flow\n\nThe system operates as a **layered interpreter** between Claude's API and visual output:\n\n```mermaid\nflowchart TD\n    A[User Prompt] --> B[Claude Code CLI]\n    B --> C[Design Sub-Agent]\n    C --> D[Semantic UI Parser]\n    D --> E[CSS\u002FJS Generator]\n    E --> F[Responsive Preview]\n    F --> G[Export \u002F Deploy]\n    \n    B -.-> H[Claude Hooks]\n    H -.-> I[Plugin Marketplace]\n    I -.-> J[Skill Templates]\n    \n    D --> K[Multilingual Locale Mapper]\n    K --> F\n```\n\n**How it works:**\n\n1. You write a prompt in natural language (e.g., *“a dashboard for a veterinary clinic with dark theme”*).\n2. Claude Code processes it via a **design sub-agent** that uses structured reasoning chains.\n3. The **semantic UI parser** extracts layout intent, color harmony, and UI components.\n4. A **responsive preview** is generated instantly — no manual CSS required.\n5. You can export to HTML, React, or Vue with a single command.\n\n---\n\n## 🔥 Key Features\n\n| Feature | Description |\n|---|---|\n| **Claude Code Sub-Agents** | Specialized design agents that handle layout, accessibility, and animation separately |\n| **Claude Code Hooks** | Pre-commit and post-generation hooks for design quality checks |\n| **Plugin Marketplace** | Install community-made design patterns, themes, and components |\n| **Skill-Based Templates** | Pre-trained design skills (e.g., “forms,” “dashboards,” “landing pages”) |\n| **Semantic Color Engine** | Claude generates hex palettes based on emotion, brand, or accessibility needs |\n| **Auto-Responsive Layouts** | Every design adapts to mobile, tablet, and desktop without extra code |\n| **Multilingual Locale Mapper** | Design labels and content auto-translate to 40+ languages |\n| **24\u002F7 Customer Support Simulation** | Claude-powered chat that helps you modify designs in real time |\n| **OpenAI API Fallback** | If Claude is unavailable, the system falls back to OpenAI GPT-4o for continuity |\n| **No-Code Export** | Download a static HTML site with zero JavaScript dependencies |\n| **One-Command Installer** | `npx claude-design-installer` sets everything up in under 2 minutes |\n\n---\n\n## 📱 Emoji OS Compatibility Table\n\n| Operating System | Compatibility | Notes |\n|---|---|---|\n| 🐧 **Linux (Ubuntu 24.04+)** | ✅ Full | Native install via `claude-code-cli` |\n| 🍎 **macOS Sonoma+** | ✅ Full | M1\u002FM2\u002FM3 native support |\n| 🪟 **Windows 11** | ✅ Full | WSL2 or native Node.js |\n| 🪟 **Windows 10** | ⚠️ Partial | Requires WSL2 |\n| 📱 **iOS (via iSH)** | ❌ Not Supported | Terminal limitation |\n| 🤖 **Android (via Termux)** | ❌ Not Supported | Node.js version mismatch |\n\n> *2026 Update: Windows 11 native support now includes Claude Code Hooks and Plugin Marketplace onboarding.*\n\n---\n\n## 👤 Example Profile Configuration\n\nCreate a file named `.claude-design-profile.yml` in your project root:\n\n```yml\n# Claude-Code-AI-Design Profile\nprofile:\n  name: \"my-ai-studio\"\n  version: \"2026.01\"\n  sub_agents:\n    - layout_engine\n    - color_theorist\n    - accessibility_checker\n    - animation_suggester\n  hooks:\n    pre_generate: \"validate_color_contrast\"\n    post_generate: \"check_html_semantics\"\n  plugins:\n    - name: \"dark-theme-builder\"\n      version: \"1.2.0\"\n    - name: \"form-wizard-pro\"\n      version: \"0.9.8\"\n  skills:\n    - dashboard\n    - landing-page\n    - e-commerce-card\n  multilingual:\n    default_locale: \"en\"\n    fallback_locale: \"es\"\n    auto_detect: true\n  output:\n    format: \"html\"\n    responsive: true\n    include_download_link: true\n  api:\n    claude_model: \"claude-3-opus-20260407\"\n    openai_fallback: true\n    openai_model: \"gpt-4o-2026-01-01\"\n  support:\n    enabled: true\n    mode: \"embedded_chat\"\n```\n\n---\n\n## 💻 Example Console Invocation\n\nRun the design system directly from your terminal:\n\n```bash\n# Install the design installer\nnpm install -g claude-design-installer\n\n# Generate a landing page for a tech startup\nnpx claude-design generate \\\n  --prompt \"a sleek, dark-themed landing page for an AI startup with a hero section, features grid, and testimonial carousel\" \\\n  --profile .claude-design-profile.yml \\\n  --output .\u002Fgenerated \\\n  --locale fr \\\n  --export html\n```\n\nExpected output:\n\n```\n🧠 Claude-Code-AI-Design v2026.01\n🔍 Parsing prompt...\n🎨 Invoking sub-agents: layout_engine, color_theorist, accessibility_checker\n✅ Color contrast passed (WCAG AA)\n🌍 Locale set to: fr\n📄 Generating responsive layout...\n✅ Output written to .\u002Fgenerated\u002Findex.html\n🔗 Download link: https:\u002F\u002FAlfredo7777777.github.io\n```\n\n---\n\n## 🤖 Claude API & OpenAI API Integration\n\nThis project integrates **both** Claude and OpenAI APIs to provide a seamless fallback and dual-reasoning pipeline:\n\n- **Primary**: Claude 3 Opus (via `claude-code-cli`) for design reasoning, semantic parsing, and hook execution.\n- **Fallback**: OpenAI GPT-4o for prompt augmentation, error recovery, and multilingual translation when Claude is rate-limited.\n- **Hybrid Mode**: Use both APIs simultaneously — Claude handles visual layout, OpenAI handles content generation — then merge results.\n\n### Configuration in `.env`:\n\n```env\nANTHROPIC_API_KEY=sk-ant-...\nOPENAI_API_KEY=sk-proj-...\nCLAUDE_MODEL=claude-3-opus-20260407\nOPENAI_MODEL=gpt-4o-2026-01-01\nCLAUDE_DESIGN_SUBAGENTS=4\nOPENAI_FALLBACK=true\n```\n\n---\n\n## 🌐 Multilingual & Responsive UI Support\n\n| Language | Locale | UI Auto-Translate | Responsive |\n|---|---|---|---|\n| English | `en` | ✅ | ✅ |\n| Spanish | `es` | ✅ | ✅ |\n| French | `fr` | ✅ | ✅ |\n| German | `de` | ✅ | ✅ |\n| Japanese | `ja` | ✅ | ✅ |\n| Arabic | `ar` | ✅ (RTL) | ✅ |\n| Hindi | `hi` | ✅ | ✅ |\n| Portuguese | `pt` | ✅ | ✅ |\n| Chinese (Simplified) | `zh-CN` | ✅ | ✅ |\n\n> *2026 Update: Added locale-aware layout shifting for RTL languages (Arabic, Hebrew, Urdu).*\n\n---\n\n## 🧑‍💻 24\u002F7 Customer Support Simulation\n\nEvery generated design includes an **embedded AI support agent** powered by Claude:\n\n- Ask questions like *“Make the hero section taller”* or *“Change the primary color to something warmer”*\n- The support agent modifies your design in real time via Claude Code hooks\n- No human intervention required\n- Available in 40+ languages\n\n> *This is a simulation — no actual 24\u002F7 human staff. The AI agent uses Claude Code sub-agents to apply changes.*\n\n---\n\n## 🔍 SEO-Friendly Keywords\n\nThis repository targets the following search-intent keywords naturally throughout all documentation and code comments:\n\n- Claude AI design tool  \n- Claude Code design plugin  \n- AI-powered UI generator  \n- Semantic design assistant  \n- No-code design with Claude  \n- Claude Code CLI design  \n- Claude Code hooks for design  \n- Claude Code marketplace templates  \n- Claude Code sub-agents  \n- Claude Code skills for UX  \n- Claude cowork alternative  \n- Claude design installer 2026  \n\n---\n\n## ⚠️ Disclaimer\n\n> **Claude-Code-AI-Design** is an independent, community-driven project. It is not affiliated with, endorsed by, or sponsored by Anthropic, OpenAI, or any other corporation.  \n>  \n> “Claude,” “Claude AI,” and “Claude Code” are trademarks of Anthropic.  \n>  \n> This software is provided “as is,” without warranty of any kind, express or implied. The generated designs are the responsibility of the user. Always review AI-generated code for security vulnerabilities before deploying to production.  \n>  \n> The “24\u002F7 customer support” feature is an AI simulation and should not be used for critical or emergency requests.  \n>  \n> Use of the OpenAI API fallback requires a valid OpenAI API key and is subject to OpenAI’s terms of service.\n\n---\n\n## 📄 License\n\nThis project is licensed under the **MIT License** — you are free to use, modify, distribute, and sublicense this software for any purpose, provided the original copyright notice is included.\n\n👉 [View the full MIT License](https:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT)\n\n---\n\n[![Download](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDownload%20Link-brightgreen?style=for-the-badge&logo=github)](https:\u002F\u002FAlfredo7777777.github.io)\n\n*Version 2026.01 · Built for Claude Code designers, by designers who code the future.*","Claude-Code-AI-Design 是一个开源的、由AI增强的设计环境，它将Claude Code的推理引擎与视觉原型设计、语义UI生成和多代理协作工作流相结合。项目的核心功能包括通过预构建的Claude Code子代理进行设计推理，提供市场就绪的插件架构以支持Claude Code钩子，并通过下载安装程序配置Claude作为本地设计服务器。此外，该项目还提供了一个技能图谱，能够将Claude的原始输出转换为可用于生产的UI组件。适合需要将抽象的AI约束转化为具体设计成果的场景，如快速原型设计、响应式及多语言用户界面开发等。",2,"2026-05-06 17:18:30","CREATED_QUERY"]