AI Agentsclaudeclaude-aiclaude-codeclaude-code-cliclaude-code-hooks
Installation
# Add to your Claude Code skills
git clone https://github.com/Alfredo7777777/claude-design-agents-toolkit
README.md
🧠 Claude-Code-AI-Design · Cognitive Interface Studio
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.
Welcome 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.
Most AI design tools treat Claude as a chat interface. We treat it as a — a semantic engine that understands layout, color theory, typography, and UX flow as naturally as it understands code.
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Pre-built Claude Code sub-agents for design reasoning
A marketplace-ready plugin architecture for Claude Code hooks
A downloadable installer that configures Claude as a local design server
A skill map that transforms Claude's raw output into production-ready UI components
If you’ve ever wished Claude could see what it’s designing — or that your design tool could think like Claude — this is the bridge.
🏗 Architecture & Data Flow
The system operates as a layered interpreter between Claude's API and visual output:
flowchart TD
A[User Prompt] --> B[Claude Code CLI]
B --> C[Design Sub-Agent]
C --> D[Semantic UI Parser]
D --> E[CSS/JS Generator]
E --> F[Responsive Preview]
F --> G[Export / Deploy]
B -.-> H[Claude Hooks]
H -.-> I[Plugin Marketplace]
I -.-> J[Skill Templates]
D --> K[Multilingual Locale Mapper]
K --> F
How it works:
You write a prompt in natural language (e.g., “a dashboard for a veterinary clinic with dark theme”).
Claude Code processes it via a design sub-agent that uses structured reasoning chains.
The semantic UI parser extracts layout intent, color harmony, and UI components.
A responsive preview is generated instantly — no manual CSS required.
You can export to HTML, React, or Vue with a single command.
🔥 Key Features
| Feature | Description |
|---|---|
| Claude Code Sub-Agents | Specialized design agents that handle layout, accessibility, and animation separately |
| Claude Code Hooks | Pre-commit and post-generation hooks for design quality checks |
| Plugin Marketplace | Install community-made design patterns, themes, and components |
| Skill-Based Templates | Pre-trained design skills (e.g., “forms,” “dashboards,” “landing pages”) |
| Semantic Color Engine | Claude generates hex palettes based on emotion, brand, or accessibility needs |
| Auto-Responsive Layouts | Every design adapts to mobile, tablet, and desktop without extra code |
| Multilingual Locale Mapper | Design labels and content auto-translate to 40+ languages |
| 24/7 Customer Support Simulation | Claude-powered chat that helps you modify designs in real time |
| OpenAI API Fallback | If Claude is unavailable, the system falls back to OpenAI GPT-4o for continuity |
| No-Code Export | Download a static HTML site with zero JavaScript dependencies |
| One-Command Installer | npx claude-design-installer sets everything up in under 2 minutes |
📱 Emoji OS Compatibility Table
| Operating System | Compatibility | Notes |
|---|---|---|
| 🐧 Linux (Ubuntu 24.04+) | ✅ Full | Native install via claude-code-cli |
| 🍎 macOS Sonoma+ | ✅ Full | M1/M2/M3 native support |
| 🪟 Windows 11 | ✅ Full | WSL2 or native Node.js |
| 🪟 Windows 10 | ⚠️ Partial | Requires WSL2 |
| 📱 iOS (via iSH) | ❌ Not Supported | Terminal limitation |
| 🤖 Android (via Termux) | ❌ Not Supported | Node.js version mismatch |
2026 Update: Windows 11 native support now includes Claude Code Hooks and Plugin Marketplace onboarding.
👤 Example Profile Configuration
Create a file named .claude-design-profile.yml in your project root:
Run the design system directly from your terminal:
# Install the design installer
npm install -g claude-design-installer
# Generate a landing page for a tech startup
npx claude-design generate \
--prompt "a sleek, dark-themed landing page for an AI startup with a hero section, features grid, and testimonial carousel" \
--profile .claude-design-profile.yml \
--output ./generated \
--locale fr \
--export html
Expected output:
🧠 Claude-Code-AI-Design v2026.01
🔍 Parsing prompt...
🎨 Invoking sub-agents: layout_engine, color_theorist, accessibility_checker
✅ Color contrast passed (WCAG AA)
🌍 Locale set to: fr
📄 Generating responsive layout...
✅ Output written to ./generated/index.html
🔗 Download link: https://Alfredo7777777.github.io
🤖 Claude API & OpenAI API Integration
This project integrates both Claude and OpenAI APIs to provide a seamless fallback and dual-reasoning pipeline:
Primary: Claude 3 Opus (via claude-code-cli) for design reasoning, semantic parsing, and hook execution.
Fallback: OpenAI GPT-4o for prompt augmentation, error recovery, and multilingual translation when Claude is rate-limited.
Hybrid Mode: Use both APIs simultaneously — Claude handles visual layout, OpenAI handles content generation — then merge results.
| Language | Locale | UI Auto-Translate | Responsive |
|---|---|---|---|
| English | en | ✅ | ✅ |
| Spanish | es | ✅ | ✅ |
| French | fr | ✅ | ✅ |
| German | de | ✅ | ✅ |
| Japanese | ja | ✅ | ✅ |
| Arabic | ar | ✅ (RTL) | ✅ |
| Hindi | hi | ✅ | ✅ |
| Portuguese | pt | ✅ | ✅ |
| Chinese (Simplified) | zh-CN | ✅ | ✅ |
2026 Update: Added locale-aware layout shifting for RTL languages (Arabic, Hebrew, Urdu).
🧑💻 24/7 Customer Support Simulation
Every generated design includes an embedded AI support agent powered by Claude:
Ask questions like “Make the hero section taller” or “Change the primary color to something warmer”
The support agent modifies your design in real time via Claude Code hooks
No human intervention required
Available in 40+ languages
This is a simulation — no actual 24/7 human staff. The AI agent uses Claude Code sub-agents to apply changes.
🔍 SEO-Friendly Keywords
This repository targets the following search-intent keywords naturally throughout all documentation and code comments:
Claude AI design tool
Claude Code design plugin
AI-powered UI generator
Semantic design assistant
No-code design with Claude
Claude Code CLI design
Claude Code hooks for design
Claude Code marketplace templates
Claude Code sub-agents
Claude Code skills for UX
Claude cowork alternative
Claude design installer 2026
⚠️ Disclaimer
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.
“Claude,” “Claude AI,” and “Claude Code” are trademarks of Anthropic.
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.
The “24/7 customer support” feature is an AI simulation and should not be used for critical or emergency requests.
Use of the OpenAI API fallback requires a valid OpenAI API key and is subject to OpenAI’s terms of service.
📄 License
This 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.
A Claude Code plugin that automatically captures everything Claude does during your coding sessions, compresses it with AI (using Claude's agent-sdk), and injects relevant context back into future sessions.
