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 75+ design templates, generate personalized logos, social media posts, and app screenshots — all without leaving the terminal. This guide shows you exactly how.

Quick Setup

Add the MCP server to Claude Code with a single command:

claude mcp add designforyou --transport sse --url https://templategen.swapp1990.org/mcp/sse

This gives your AI agent access to 6 tools: browse_templates, recommend_template, get_text_fields, generate_design, edit_text, and generate_variations.

The Core Workflow

Every design task follows the same pattern:

Browse or recommend — find the right template for your use case
Generate — create a personalized design with your brand name and content
Iterate — refine the text or tweak the content
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

Logos — 30 templates across 7 subcategories (wordmark, lettermark, combination mark, abstract mark, app icon, emblem, mascot)
Instagram Posts — 10+ templates (1024x1024)
Instagram Stories — 5+ templates (768x1376)
App Store Previews — 10+ templates (768x1376)
App Splash Screens — 5+ templates (768x1376)
Fan Fiction Illustrations — 5+ templates (768x1024)

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_design 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.

Simple Text Replacement

The most reliable approach — just provide your headline and brand name:

generate_design(
  template_id: "logo_flat_bold",
  headline: "ACME",
  brand: "Acme Corp"
)

Content Edits with edit_prompt

Use edit_prompt to change what the design depicts while keeping the template's visual style. Describe what you want, not how it should look:

generate_design(
  template_id: "logo_glassmorphism",
  headline: "ACME",
  edit_prompt: "change the icon to interlocking gears"
)

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, you have two options:

Edit text only — use edit_text to fix copy without regenerating
Regenerate with tweaks — call generate_design again with a refined edit_prompt

// Fix text on an existing image
edit_text(
  image_url: "https://...generated-image.png",
  text_edits: [{ field_index: 0, text: "NEW HEADLINE" }]
)

// Or generate multiple variations at once
generate_variations(
  template_id: "logo_flat_bold",
  count: 3,
  text_overrides: { "headline": "ACME" }
)

Real-World Examples

Example: Brand a Website End-to-End

// 1. Generate favicon (app_icon subcategory — works at 16px)
generate_design(
  template_id: "logo_flat_bold",
  headline: "BRAND",
  edit_prompt: "change icon to a magic wand with sparkles, change background to violet"
)
// → Download, resize to 32px/180px/192px for favicon + apple-touch-icon

// 2. Generate OG image (combination_mark — has text + icon)
generate_design(
  template_id: "logo_horizontal_lockup",
  headline: "MyBrand",
  brand: "MyBrand"
)
// → 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_design(
  template_id: "ig_post_countdown",
  headline: "FLASH SALE",
  brand: "My Store",
  cta: "Shop Now"
)

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

Use templates as templates. The style is predefined — keep edit_prompt to one short sentence.
Pick the right subcategory: app_icon or lettermark for favicons, combination_mark for headers, wordmark for OG images.
Check min_recognizable_size before choosing a favicon template. If it says 64, it won't work at 32px.
Use headline for text, edit_prompt for content changes. Don't put brand names in edit_prompt.
Generate variations to explore styles before committing to one.

Get Started

Install the MCP server and start generating designs in seconds:

claude mcp add designforyou --transport sse --url https://templategen.swapp1990.org/mcp/sse

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