Back to cookbook

AI Prompt to Generate On-Brand Social Graphics Using Figma's MCP Server

0 views Updated

Make this prompt yours

Share

This AI prompt is for marketers, social media managers, and designers who need a steady stream of on-brand social graphics without re-explaining their brand's colors, type, and logo usage every time. It uses Figma's MCP Server to pull the actual design tokens, color styles, and logo components straight from a live Figma file, then turns that into a structured image-generation prompt for tools like Midjourney, DALL-E, or FLUX.

Instead of describing a brand from memory ('use our blue and a clean sans-serif'), the model reads the real hex values, font names, and spacing rules defined in the connected Figma file through MCP, so the generated image prompt references the brand's actual palette and logo placement rules rather than a rough approximation. This keeps a batch of graphics visually consistent even when they're generated days apart or by different team members.

For teams that want to go a step further and turn an existing webpage's live layout and styling into an image-gen prompt directly, Site to Prompt measures the rendered page itself rather than a screenshot, which is useful when the brand reference is a marketing site rather than a Figma file.

Prompt template

Make this prompt yours

prompt-template
295 tokens
Role: You are a brand-consistent image prompt generator for social media graphics. Context: - Brand: [BRAND_NAME] - Figma source: [FIGMA_FILE_OR_FRAME_NAME] - Design tokens to pull: primary and secondary colors, heading font, body font, logo component - Target platform and dimensions: [PLATFORM_AND_ASPECT_RATIO] - Campaign or post topic: [POST_TOPIC_OR_HEADLINE] Task: 1. Retrieve the current color styles, font names, and logo component from the specified Figma file or frame. 2. Build an image-generation prompt that specifies the exact hex values and font names pulled from Figma. 3. Describe the composition: subject, background style, where the logo and headline text should sit, and how much safe margin to leave around them. 4. Specify the aspect ratio and resolution needed for the target platform. 5. Output the final prompt as one paragraph ready to paste into an image generator, plus a short note on which Figma tokens were used. Constraints: - Use the exact hex codes and font names from Figma, not general color names. - Keep the logo and any text in a safe area away from the edges. - Do not invent brand colors or fonts that are not present in the Figma file. Output format: Image prompt: [one paragraph, ready to paste into an image generator] Tokens used: [list of colors, fonts, and logo component pulled from Figma]

Want it sharper? Optimize this prompt with Prompt Optimizer, check it with the Prompt Debugger or shorten it with the Token Optimizer.

Example input

example-input
53 tokens
Brand: Northside Coffee Co. Figma source: "Brand Kit" file, "Social Templates" frame Target platform and dimensions: Instagram feed post, 1080x1080 Campaign or post topic: Launch of a new seasonal pumpkin spice cold brew

When to use it

  • You're producing a batch of social graphics and need every image to pull from the same brand colors, fonts, and logo rules.
  • Your brand guidelines live in a Figma file and you want an image-gen prompt built from the actual design tokens instead of a written description.
  • Different team members are generating graphics and the results keep drifting from the brand's real palette.
  • You're prepping assets for a campaign and need the AI model's output to match an existing Figma component library.

Best practices

  • Point the model at the specific Figma file, page, or component (like a 'Social Templates' or 'Brand Colors' frame) through MCP rather than the whole workspace, so it pulls the right tokens.
  • Ask for exact hex codes and font names in the output, not color descriptions like 'brand blue', so the image generator has something precise to work from.
  • Reuse the same generated prompt structure across a batch of graphics and only swap the subject and headline, to keep the series visually consistent.
  • Run the finished prompt through Intelligence Score to catch vague color or layout language before sending it to the image generator.

Common mistakes

  • Describing brand colors and fonts from memory instead of pulling the current values from Figma, which drifts from the real brand kit over time.
  • Generating one graphic at a time with a slightly different prompt each time, producing a batch that doesn't look like a cohesive set.
  • Leaving out logo placement or safe-area rules, so the image generator crops or overlaps the logo in unusable ways.
  • Forgetting to specify image dimensions or aspect ratio for the target platform, resulting in graphics that need to be re-cropped before posting.

FAQs

How do I keep AI-generated social graphics consistent with my brand colors?

Pull the exact color styles and font names from your design file through an MCP connection instead of describing them from memory, and include the precise hex codes and font names in every image prompt you generate.

Can an AI model read my actual Figma file instead of me copying the colors manually?

Yes, if the model is connected through Figma's MCP server it can query the file's color styles, text styles, and components directly, which keeps the generated prompts accurate as the brand kit changes.

Why do my AI-generated graphics look different from each other even when I use the same brand?

This usually happens when each prompt describes the brand slightly differently; using the same structured prompt template with the same pulled color and font values for every graphic keeps a batch visually consistent.

What's the best aspect ratio to specify for AI-generated social graphics?

Match the target platform's native format, such as 1080x1080 for an Instagram feed post or 1080x1920 for a Story or Reel cover, and state it explicitly in the prompt so the image generator doesn't default to a square crop.

Which Cuelara tool pairs well with this prompt?

Site to Prompt — measures a live rendered webpage and turns its real layout and styling into an image-generation prompt, useful when your brand reference is a marketing site rather than a Figma file.

Found this prompt useful? Share it.

Share

More in Image Gen

Image Gen

AI Prompt to Autofill Branded Designs Using Canva's MCP Server

This prompt is for marketers, designers, and agency teams who need to turn a spreadsheet or list of records into a batch of finished, on bra…

ROLE: You are an AI assistant with access to Canva's MCP server tools for brand template autofill and design export.

CONTEXT:
- Brand template ID: [BRAND_TEMPLATE_ID]
- Data source: [DATA_SOURCE, e.g. "attached CSV of 40 product rows"]
- Output format needed: [EXPORT_FORMAT, e.g. PNG, PDF, JPG]
- Brand constraints: [BRAND_CONSTRAINTS, e.g. "do not alter logo placement or brand colors"]

TASK:
1. Retrieve the brand template's dataset for [BRAND_TEMPLATE_ID] and list every field name, type, and whether it is required.
2. Map each field in [DATA_SOURCE] to the matching template field. Flag any data field with no matching template slot, and any required template field with no matching data.
3. For each record in [DATA_SOURCE], run an autofill job using the mapped data.
4. Check the status of every autofill job until each one reports success or failure. Report failures with the specific error and which record caused it.
5. For each successfully autofilled design, export it in [EXPORT_FORMAT] and return the final download link.

CONSTRAINTS:
- Do not invent field values that are not present in [DATA_SOURCE].
- Do not export a design that failed autofill.
- Preserve [BRAND_CONSTRAINTS] exactly; do not suggest layout or color changes.

OUTPUT FORMAT:
Return a table with columns: Record ID, Autofill Status, Design ID, Export Link, Notes (for any errors or unmapped fields).

Make this prompt yours

Image Gen

AI Prompt to Generate YouTube Thumbnail Concepts That Boost Click-Through Rate

This AI prompt for YouTube thumbnail concepts helps creators, editors, and channel managers turn a video's topic into several distinct thumb…

Role: You are a YouTube thumbnail strategist who designs concepts optimized for click-through rate, then hands off render-ready descriptions to an image generator.

Context:
- Video topic: [VIDEO TOPIC]
- Target audience: [TARGET AUDIENCE]
- Channel style or niche: [CHANNEL STYLE, e.g. tech reviews, true crime, cooking]
- Video tone: [TONE, e.g. urgent, lighthearted, educational]
- Number of concepts needed: [NUMBER OF CONCEPTS]

Task:
1. Propose [NUMBER OF CONCEPTS] distinct thumbnail concepts for this video.
2. For each concept, specify:
   - The emotional hook it relies on (curiosity, shock, humor, urgency, etc.)
   - The focal subject and what it's doing or expressing
   - Exact text overlay wording (3-4 words maximum)
   - Color palette and contrast approach
   - One sentence on why this concept would stop a scroll for [TARGET AUDIENCE]
3. Convert each concept into a detailed image-generation prompt describing composition, lighting, camera angle, and text placement, written so it can be pasted directly into an image model.

Constraints:
- Each of the [NUMBER OF CONCEPTS] concepts must use a different emotional hook or composition approach — no near-duplicates.
- Keep text overlays short enough to read clearly at thumbnail size on a mobile screen.
- Avoid copyrighted characters, logos, or real public figures in the generated image prompts.

Output format:
Return a numbered list of concepts. For each: a "Concept" line summarizing the idea, a "Why it works" line, and a "Image prompt" line containing the full render-ready description.

Make this prompt yours

Image Gen

AI Prompt to Generate a Brand Mood Board From a Style Description

An AI prompt for a brand mood board turns a short description of a brand's personality, audience, and tone into a cohesive set of visual dir…

Role: You are a brand visual identity assistant helping me build a mood board concept.

Context:
- Brand name: [BRAND NAME]
- Brand personality in 4-6 adjectives: [ADJECTIVES, e.g. warm, tactile, unpolished, confident]
- Target audience: [AUDIENCE DESCRIPTION]
- Industry or product category: [INDUSTRY]
- Primary color palette (if known): [COLOR NAMES OR HEX CODES]
- Reference brands or styles to lean toward or away from: [REFERENCE BRANDS]

Task:
Describe a cohesive 4-image mood board for this brand, where every image shares the same color palette, lighting style, and texture language. For each image, describe:
1. A hero concept image that captures the brand's core feeling
2. A material or texture close-up that reinforces the tone
3. A color-and-typography pairing suggestion
4. A lifestyle or in-context scene showing the audience interacting with the brand

Constraints:
- Keep the palette and lighting description consistent across all 4 descriptions
- Avoid generic stock-photo language; be specific about color names, materials, and composition
- Do not include any brand logos, text, or watermarks in the described imagery

Output format:
Return the 4 image descriptions as a numbered list, each 2-3 sentences long, followed by a short "shared visual system" summary (palette, lighting, texture) that ties them together.

Make this prompt yours