kmshihab7878 AIDesigner MCP — Frontend Design Generation
Overview
AIDesigner is a design engine connected via MCP (HTTP server at api.aidesigner.ai).
It reads your entire repo context — framework, Tailwind/CSS tokens, existing components,
routes — and generates production-ready HTML that matches your project's look and feel.
Why use this instead of writing HTML manually: The MCP server has full context of your design system. It produces inline-Tailwind HTML that respects existing tokens, spacing, and component patterns. Iterate with natural language instead of CSS tweaking.
MCP Server
- Type: HTTP (remote)
- URL:
https://api.aidesigner.ai/api/v1/mcp - Auth: OAuth (browser sign-in via
/mcpin Claude Code) - Config location:
.mcp.jsonin project root (project-level) or~/.claude.json(user-level)
Tools
| Tool | Purpose | Key Params |
|---|---|---|
generate_design |
Create new HTML/CSS from prompt | prompt, viewport, mode, url |
refine_design |
Iterate on previous design | run_id_or_html, feedback, viewport |
get_credit_status |
Check account balance | (none) |
whoami |
Verify auth connection | (none) |
generate_design Parameters
| Param | Type | Required | Description |
|---|---|---|---|
prompt |
string | yes | Detailed natural-language design description |
repo_context |
object | auto | Injected by MCP — never override |
viewport |
"desktop" / "mobile" | no | Default: desktop (1440px) |
mode |
"none" / "inspire" / "clone" / "enhance" | no | Default: none (pure prompt) |
url |
string | no | Reference URL for inspire/clone/enhance modes |
refine_design Parameters
| Param | Type | Required | Description |
|---|---|---|---|
run_id_or_html |
string | yes | Previous run ID or full HTML string |
feedback |
string | yes | Natural language changes |
repo_context |
object | auto | Injected by MCP |
viewport |
"desktop" / "mobile" | no | Target viewport |
When to Use
- Every UI task: When user asks for a new page, component, or redesign
- Iteration: "Make the hero section more premium", "use our brand colors"
- Reference-based design: Clone or get inspired by competitor sites
- Mobile variants: Generate desktop first, then refine for mobile viewport
Workflow
- Check credits:
get_credit_status(if doing many generations) - Generate: Call
generate_designwith specific, detailed prompt - Iterate: Call
refine_designwith feedback on the previous run - Adopt: Run
npx @aidesigner/agent-skills adopt --id <run-id>for porting guidance - Port: Review
.aidesigner/runs/<run-id>/design.htmland integrate into components
Prompt Best Practices
- Always include "match our existing design system / project styles"
- Be specific: "hero section with gradient background, 48px heading, CTA button" not "make a landing page"
- For mobile: explicitly say "mobile viewport" or set viewport parameter
- Reference existing pages: "match the style of our dashboard page"
Artifact Storage
Generated designs save to .aidesigner/runs/{run-id}/:
design.html— the generated outputrepo-context.json— captured project contextrequest.json— original requestsummary.json— generation summarypreview.png— rendered preview
Add to .gitignore: .aidesigner/*
Setup
# One-time init (run in project root)
npx -y @aidesigner/agent-skills init
# Then in Claude Code:
# /mcp → select "aidesigner" → OAuth sign-in
# Verify
npx @aidesigner/agent-skills doctor --all
Agent Binding
Best-fit agents:
- frontend-architect (L2): Primary consumer — generates pages and components
- ux-designer (L3): Design iteration and refinement
- rapid-prototyper (L5): Quick UI prototyping
- mobile-app-builder (L3): Mobile viewport generation
Cost Warning
Each generation consumes credits. Check get_credit_status before batch operations.
Prefer refine_design over new generate_design calls when iterating.
Integration with DESIGN.md
If the project has a DESIGN.md (Google Stitch standard), reference it in prompts:
"Follow the design system defined in DESIGN.md" — the MCP already reads repo context,
but explicit reference ensures the AI agent passes the right tokens.