mcps
F G P

Recipe

Generate on-brand UI from your Figma

Pull your real colors and type from Figma, feed them to Stitch as hard constraints, refine the result in Pencil — AI screens that match your brand instead of inventing one.

for Makers and designers who want a screen designed or a 3D scene built by describing it

Hand-checked recipe · curated by Ilya Gindin

~40 minutes

to run

intermediate

difficulty

3

connectors

What you'll need

Figma Reads your real design file — exact colors, type styles, spacing — so nothing is guessed.
Required
G
Google Stitch Generates the new screens, constrained to the tokens you extracted.
Required
P
Pencil Optional — refines the generated screen as a real vector .pen file in your editor.
Optional

This recipe runs in 4 steps

  1. 1

    Pull the real tokens from Figma

    Say to your AI

    Read this Figma file and list every color style and text style with exact hex values and font sizes: [paste the Figma link].

    You'll get: Your actual palette and type scale, as values — not a guess.

  2. 2

    Generate the screen with tokens as constraints

    Say to your AI

    Design a mobile onboarding screen. Use EXACTLY these colors and type: [paste the tokens]. One headline, one illustration area, email field, primary button.

    You'll get: A Stitch screen wearing your brand, not a generic AI look.

  3. 3

    Iterate a variant

    Say to your AI

    Same tokens, same screen — darker variant, button moved to the bottom.

    You'll get: Comparable directions that all stay on-brand.

  4. 4

    Refine in Pencil

    Say to your AI

    Recreate the chosen screen as a .pen file so I can nudge spacing and export assets.

    You'll get: An editable vector version of the screen in your editor.

You're done when

AI-generated screens that pass the brand squint test — because the generator was constrained by your real Figma tokens instead of inventing hex codes.

The chain is Figma → Stitch → Pencil, about 40 minutes: read the real tokens out of your design file, hand them to the generator as hard constraints, then polish the winner as an editable vector. The result matches your brand because nothing was left for the AI to invent.

The seam that matters: extraction comes FIRST. Every generator defaults to inventing a palette; the only reliable counter is feeding it your exact hex values and type sizes up front. Figma’s connector reads them, Stitch obeys them, Pencil makes the result editable — three tools that don’t know each other, chained into one honest pipeline.

Checked 2026-07-12: all three connectors official. Figma is remote (sign in via figma.com/mcp-catalog); Stitch runs via npx proxy with Google sign-in; Pencil is IDE-native.

If something breaks

The generated screen ignores my brand
Fix: Generators invent a look unless you feed tokens as constraints. Extract from Figma first, then say 'use EXACTLY these' — order is the trick.
Figma returns a mess instead of tokens
Fix: It reads structure: named color/text styles extract cleanly. If the file has no named styles, point it at one specific frame instead of the whole file.
Stitch output is vague
Fix: One screen per ask, with named elements. 'Design my app' is too broad; 'onboarding screen with headline, field, button' lands.
I don't see Stitch to turn on
Fix: Add it with npx @_davideast/stitch-mcp proxy and sign in with your Google account.

People ask their AI

“generate UI that matches my brand”“AI design screens from my Figma tokens”“on-brand app screen generation”

Related

Figma Google Stitch design an app screen with stitch