How to Generate Designs with AI Using the DesignForYou MCP Server

DesignForYou is an AI design tool that works inside your AI coding agent. Using the MCP (Model Context Protocol) server, Claude Code and other AI assistants can browse 119 design templates, generate personalized logos, social media posts, and app screenshots — all without leaving the terminal. This guide shows you exactly how.

Setup Instructions

General

The DesignForYou MCP server is a hosted remote MCP server. It supports Streamable HTTP with OAuth at this address:

https://designforyou.swapp1990.org/mcp/v2/

Use the URL exactly as shown, including the trailing slash. In Codex, the slashless /mcp/v2 URL can complete OAuth but fail MCP startup.

After setup, your AI agent gets access to these tools: browse_templates, recommend_template, get_text_fields, generate, and get_credits.

Claude Code

Add the MCP server:

claude mcp add --transport http designforyou https://designforyou.swapp1990.org/mcp/v2/

Open Claude Code and run:

/mcp

Follow the browser authentication flow, then ask Claude Code:

Use the DesignForYou MCP server and call browse_templates with category "logos".

Cursor, VS Code, Windsurf, Zed, and Other Clients

Use Streamable HTTP with this URL:

https://designforyou.swapp1990.org/mcp/v2/

If your client does not support remote MCP or OAuth directly, use mcp-remote as a local bridge:

{
  "mcpServers": {
    "designforyou": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://designforyou.swapp1990.org/mcp/v2/"]
    }
  }
}

Troubleshooting

If OAuth succeeds but the MCP server still says startup incomplete, check the configured URL first. Codex must use https://designforyou.swapp1990.org/mcp/v2/ with the trailing slash.

If tools do not appear after changing the MCP config, restart the AI client and reconnect the server.

The Core Workflow

Every design task follows the same pattern:

  1. Browse or recommend — find the right template for your use case
  2. Generate — create a personalized design with your brand name and content
  3. Iterate — refine the text or tweak the content
  4. Use — apply the image URL in your code, website, or app

Step 1: Browse Templates

The browse_templates tool lets you explore the full catalog. Filter by category and subcategory:

browse_templates(category: "logo")
browse_templates(category: "logo", subcategory: "lettermark")
browse_templates(category: "instagram")
browse_templates(category: "app-store")

Available Categories

Smart Template Selection with recommend_template

Instead of browsing manually, ask the AI to recommend templates based on your use case. It returns ranked results with reasoning and inline previews:

recommend_template(use_case: "favicon for a dark-themed tech website", needs: ["favicon"])
recommend_template(use_case: "social sharing image for luxury brand", needs: ["og-image"])

Step 2: Generate a Design

The generate tool creates a personalized image from a template. The template defines the visual style (glassmorphism, flat bold, art deco, neon glow) — you customize the content with one plain-language description.

Simple Text Replacement

The most reliable approach — name the template and describe the design you want:

generate(
  template_id: "logo_flat_bold",
  description: "logo for Acme Corp, bold flat icon with the ACME name, confident blue palette"
)

Content Edits with edit_prompt

Describe what you want, not how it should be rendered. The selected template already carries the visual style:

generate(
  template_id: "logo_glassmorphism",
  description: "glassmorphism logo for ACME with interlocking gears, premium SaaS feel"
)

What Makes a Good Edit Prompt

Do Don't
"change the icon to a star" "create a minimalist flat icon with a star on blue..."
"make the background darker" Full paragraph describing an entire design
"use blue instead of red" Describing visual effects already in the template

Step 3: Iterate and Refine

If the first result is close but not perfect, keep the same session and refine it:

generate(
  template_id: "logo_flat_bold",
  description: "make the icon simpler and the ACME wordmark easier to read",
  session_id: "previous-session-id"
)

Real-World Examples

Example: Brand a Website End-to-End

// 1. Generate favicon (app_icon subcategory — works at 16px)
generate(
  template_id: "logo_flat_bold",
  description: "app icon for MyBrand, magic wand with sparkles, violet background, recognizable at small size"
)
// → Download, resize to 32px/180px/192px for favicon + apple-touch-icon

// 2. Generate OG image (combination_mark — has text + icon)
generate(
  template_id: "logo_horizontal_lockup",
  description: "horizontal logo lockup for MyBrand with icon and wordmark, clean website header style"
)
// → Use as og:image meta tag

// 3. Apply to website HTML
// <link rel="icon" href="/favicon-32.png">
// <img src="/branding/navbar-icon.png"> (in navbar)
// <meta property="og:image" content="https://...og-image.png">

Example: Generate an Instagram Post

browse_templates(category: "instagram")
// Pick a template from the results

generate(
  template_id: "ig_post_countdown",
  description: "Instagram countdown post for My Store. Headline: FLASH SALE. CTA: Shop Now. Energetic retail style."
)

Template Metadata Reference

Every template includes metadata to help AI agents make smart choices:

Field Description
subcategory Logo type: lettermark, app_icon, combination_mark, etc.
best_for Recommended use cases: favicon, navbar, og-image, etc.
has_icon Whether the template has a standalone icon/symbol
has_text Whether the template includes visible text
min_recognizable_size Smallest px size where the design works (16 = good for favicon)
background dark, light, or transparent

Tips for Best Results

  1. Use templates as templates. The style is predefined — keep edit_prompt to one short sentence.
  2. Pick the right subcategory: app_icon or lettermark for favicons, combination_mark for headers, wordmark for OG images.
  3. Check min_recognizable_size before choosing a favicon template. If it says 64, it won't work at 32px.
  4. Use headline for text, edit_prompt for content changes. Don't put brand names in edit_prompt.
  5. Generate variants intentionally when a template supports them, for example expression names for sprite sheets or time-of-day variants for backgrounds.

Get Started

Install the MCP server and start generating designs in seconds:

claude mcp add --transport http designforyou https://designforyou.swapp1990.org/mcp/v2/

Or browse templates on the website to see all available designs.