fuse-design
NewUI Designer. Generates HTML/CSS via Gemini Design MCP. 7-phase pipeline with state tracking. Identity System, UX copy, page layouts, motion system, design audit. Anti-AI-Slop, WCAG 2.2.
Summary
Fuse Design is a UI/UX design skill that integrates with Gemini Design MCP to generate production-ready HTML/CSS through a structured 7-phase pipeline.
- 2 accessibility, anti-AI-slop quality, and includes identity systems, UX copy, page layouts, and motion design, making it ideal for developers who want design-driven code without leaving Claude Code.
Overview
!version !plugins !agents !skills !License: MIT !platform !Windows
A plugin ecosystem that turns Claude Code into a supervised, multi-agent development environment. Expert agents write code, hooks enforce quality in real-time, skills inject framework-specific knowledge, and intelligent cartography auto-maps plugins and projects — so Claude never guesses, never duplicates, and always follows your architecture.
What It Does
Without plugins: Claude Code writes code based on its training data. It can hallucinate APIs, duplicate existing code, ignore your project structure, and produce inconsistent quality.
With Fusengine plugins:
- •Expert agents detect your project type (Next.js, Laravel, React, Astro, Swift...) and load framework-specific documentation via MCP servers before writing a single line
- •82 hooks intercept every Write/Edit/Bash call in real-time to enforce file size limits (<100 lines), block code duplication (DRY), require SOLID references, and validate security
- •125 skills inject copy-paste-ready templates, architecture patterns, and best practices directly into agent context — no hallucination needed
- •APEX workflow structures every task through Analyze → Plan → Execute (TDD) → Review → Validate — preventing the "just write code and hope" approach
- •Sniper validation runs a 7-phase quality check after every modification: explore → research → grep usages → lint → fix → zero errors
Quick Install
# Add marketplace
/plugin marketplace add fusengine/agents
# Install all plugins
/plugin install fuse-ai-pilot fuse-commit-pro fuse-laravel fuse-nextjs fuse-react fuse-astro fuse-swift-apple-expert fuse-solid fuse-tailwindcss fuse-design fuse-prompt-engineer fuse-shadcn-ui fuse-security fuse-changelog
# Setup (hooks + API keys + MCP servers)
~/.claude/plugins/marketplaces/fusengine-plugins/setup.sh # macOS / Linux
~\.claude\plugins\marketplaces\fusengine-plugins\setup.ps1 # WindowsStatusline (optional):
bun --cwd ~/.claude/plugins/marketplaces/fusengine-plugins/plugins/core-guards/statusline run configHow It Works
User prompt → Hook detects project type → Expert agent activated
→ Hook loads SOLID references → Agent reads docs via MCP
→ Hook blocks if DRY violation → Agent writes code
→ Hook checks file size → Sniper validates quality
→ Hook blocks secrets → Commit with version bumpEvery step is intercepted. Claude cannot skip research, cannot duplicate code, cannot exceed file size limits, and cannot commit without security validation.
Plugins
Development — Framework Expert Agents
Each plugin provides an expert agent that auto-activates when it detects the framework in your project. The agent has access to official documentation via MCP servers and follows SOLID principles enforced by hooks.
| Plugin | Detects | What the agent does |
|---|---|---|
| fuse-nextjs | next.config.* | App Router, RSC, Prisma 7, Better Auth, proxy.ts patterns |
| fuse-laravel | composer.json + artisan | Eloquent, Livewire, Blade, queues, Sanctum, Stripe Connect |
| fuse-react | package.json + React | React 19 hooks, TanStack Router/Form, Zustand stores |
| fuse-astro | astro.config.* | Islands, Content Layer, Actions, SEO, Starlight, i18n |
| fuse-swift-apple-expert | Package.swift | SwiftUI, concurrency, all Apple platforms (iOS → visionOS) |
| fuse-tailwindcss | tailwind.config.* | v4.1 CSS-first config, @theme, @utility, OKLCH colors |
| fuse-design | Any UI task | Gemini Design MCP + shadcn/ui + WCAG 2.2 accessibility |
| fuse-shadcn-ui | components.json | Radix/Base UI detection, registry, theming, migration |
Quality & Security — Automated Enforcement
| Plugin | What it enforces |
|---|---|
| fuse-ai-pilot | APEX workflow orchestration, 7-phase sniper validation, DRY detection via jscpd, 4-level cache (60-75% token savings) |
| fuse-security | OWASP Top 10 scanning, CVE research via NVD/OSV.dev, dependency audit, secrets detection, auth patterns audit |
| fuse-solid | Files < 100 lines, interface separation, JSDoc mandatory — auto-detected for TypeScript, PHP, Swift, Go, Java, Ruby, Rust |
Productivity — Automation
| Plugin | What it automates |
|---|---|
| fuse-commit-pro | Conventional commits with security check, auto version bump, CHANGELOG, git tag — blocks secrets from commits |
| fuse-prompt-engineer | Prompt creation with CoT/Few-Shot/Meta-Prompting, A/B testing, 50+ template library, agent design |
| fuse-cartographer | Intelligent cartography: auto-generates navigable maps of plugins and projects at SessionStart with merge-preserving enrichment — agents navigate via linked index trees, /map --enrich completes descriptions from source frontmatter |
| fuse-changelog | Monitors Claude Code updates, detects breaking changes in plugins, gathers community feedback via Exa |
Core (auto-installed, always active)
| Plugin | What it guards |
|---|---|
| core-guards | Blocks git push --force, rm -rf, npm install without lock, enforces SOLID file limits, tracks session state, DRY duplication blocking — also bundles token-optimization hooks (MCP verbosity caps, MCP + WebFetch disk cache, SessionStart cleanup) |
| claude-rules | Injects APEX/SOLID/DRY rules into every prompt so Claude never forgets the methodology |
Key Features
| Feature | How it prevents mistakes |
|---|---|
| APEX Workflow | Forces Analyze before coding — no more "let me just write this real quick" |
| [Agent Teams](docs/workflow/agent-teams.md) | Parallel agents with exclusive file ownership — no merge conflicts |
| DRY Detection | Blocks Write/Edit if function/class name already exists — forces import or shared extraction |
| SOLID Hooks | Denies file save if >100 lines or missing SOLID reference read |
| Sniper Validation | 7-phase post-edit check: explore → research → grep → lint → fix → zero errors |
| [4-Level Cache](docs/reference/cache-system.md) | Caches exploration, docs, lessons, tests — 60-75% token savings |
| Token-efficient by default | Caps MCP verbosity (Context7/Exa numResults≤3, tokens≤2000), disk cache for MCP results + WebFetch with TTL (48h / 24h) and ripgrep lookup, auto-cleanup at SessionStart — typically saves ~150-200 KB per research-heavy session |
| 28 MCP Servers | Context7, Exa, Astro docs, Gemini Design, shadcn, Playwright, and more |
| Smart Commits | Security scan before commit, auto version bump, CHANGELOG, shields.io badge sync |
Documentation
| Section | Content |
|---|---|
| Getting Started | Installation, configuration, first steps |
| Workflow | APEX methodology, agents, skills, commands |
| Plugins | Per-plugin documentation and skills |
| Reference | Architecture, hooks, MCP servers, cache system |
License
MIT
Install & Usage
/plugin marketplace add <org/repo>Add the configuration to /plugin install fuse-design@<marketplace>
/pluginUse Cases
Usage Examples
/fuse-design Generate a landing page hero section with a gradient background, headline, CTA button, and a floating illustration. Make it WCAG 2.2 AA compliant.
/fuse-design Create a design audit of my current app's color contrast and typography scale. Output a report with suggested fixes in HTML/CSS.
Design a motion system for a dashboard sidebar: hover effects on menu items, smooth expand/collapse, and a loading spinner animation.
Security Audits
Frequently Asked Questions
What is fuse-design?
Fuse Design is a UI/UX design skill that integrates with Gemini Design MCP to generate production-ready HTML/CSS through a structured 7-phase pipeline. It enforces WCAG 2.2 accessibility, anti-AI-slop quality, and includes identity systems, UX copy, page layouts, and motion design, making it ideal for developers who want design-driven code without leaving Claude Code.
How to install fuse-design?
To install fuse-design: add a marketplace (/plugin marketplace add <org/repo>), then add the config to /plugin install fuse-design@<marketplace>. Finally, /plugin in Claude Code.
What is fuse-design best for?
fuse-design is a plugin categorized under Development. It is designed for: design, mcp, ui-ux, design-director, identity-system, multi-stack, react, nextjs. Created by Fusengine.
What can I use fuse-design for?
fuse-design is useful for: Generate a complete brand identity system including color palette, typography, and logo variations for a new SaaS product.; Create responsive page layouts with WCAG 2.2 compliant HTML/CSS for a marketing website.; Design and export a motion system with micro-interactions and transitions for a React component library.; Audit an existing UI for accessibility issues and generate a fix report with corrected code.; Produce UX copy for onboarding flows and error states that matches the brand voice.; Build a multi-step form with state tracking and validation using the 7-phase pipeline..