🎯 Who This Guide Is For

You already know how to code, but the moment someone says "UI/UX" you feel like it's a different world entirely. Here's the good news: AI made it possible for any developer to build professional interfaces — on one condition: you know exactly what you want, and you understand basic UI rules well enough to judge the output.

This guide won't teach you the "perfect prompt," and it won't teach design fundamentals from zero. It teaches you the mechanism — how to run two tools together (Claude + Stitch) to do a week's worth of work in a few hours.

🧩 The Idea in One Line

Instead of going straight to Stitch and typing "build me a dashboard" and getting a random, inconsistent result on every page — you first let Claude build you a design.md file (the complete Design System), then Stitch builds every page committed to that same identity. That's the whole secret.

Claude (conversation + design.md)  →  Stitch (Design System + pages)  →  Figma / code (manual polish)

🛠️ Tools You'll Need (All Free)

Tool Role Claude (or ChatGPT / Gemini) Analyzes your brand identity, has a conversation with you, writes the prompt files and design.md Stitch (by Google) Actually builds the UI from the files Claude prepared Figma Final polish + delivery Logo + initial content Your base inputs for the AI

Note: you can swap Claude for any LLM you prefer. The value is in the mechanism, not the specific tool.

📍 Phase 1 — Analysis & Prep (with Claude)

This is the most important phase, and it's the one most people skip — jumping straight to the building tool instead. That's where things fall apart.

Step 1: Open a conversation with Claude (not a "perfect" prompt)

Upload your logo + describe the project naturally:

"I want to build a website for a tech team. I want you to analyze what pages I need, analyze the brand identity from the logo, and help me write the prompts. I'll be using Google's Stitch to build the UI — work according to professional UI/UX principles."

Important: you don't need a perfect prompt here. It's a conversation — Claude analyzes the logo, asks you questions, and arrives at a result with you. The more you already know about UI, UX, and user flows, the smoother the conversation gets and the fewer questions you'll need answered.

Step 2: Answer its questions with clear decisions

Claude will ask things like:

  • What's the main goal? (Lead generation? Showcasing services?)

  • Site language? → RTL for Arabic

  • How many pages, and which ones?

  • Is the pricing page a single price or multiple tiers? Is the contact page a form or a booking flow?

💡 When you already know what you want (because you understand UI), you answer fast and shorten the back-and-forth. That's exactly what separates you from a beginner here.

Step 3: Have Claude write you two files

At the end of the conversation, ask for:

a) A design.md file — the most important file, by far 🏆

This is the complete Design System: colors, typography, RTL rules, spacing, every visual detail. Why does it matter this much? Because Stitch will rely on it for every single page — so it won't invent a new design, font, or color scheme each time. Every new page follows the same rules = a unified identity.

Let Claude research and write this file (don't write it yourself). Just clarify your needs: RTL, a language-toggle button, specific motion/interaction details, anything UI-specific you care about.

b) A prompt file for each page

A .md file listing each page name with its detailed prompt underneath — ready to copy straight into Stitch, page by page.

📍 Phase 2 — Building the Design System (in Stitch)

Step 4: Correct Stitch settings

  1. Open Stitch and select Web (not App) — since you're building a website.

  2. Pick your model: Flash is faster, but Pro usually gives more accurate results.

  3. Find the "Use design.md" button → click Start with your design.

There's an option for pre-made designs — we don't want that. We want our own custom design.

Step 5: Paste your design.md

Copy the content of design.md from Claude → paste it into the designated field in Stitch. Upload your logo too (preferably a transparent, high-res version, since it'll be reused across every page).

Step 6: Continue → let it build

Click Continue and ask it to Create Design System. Stitch will take a moment and build out the full Design System: fonts, colors, icons, every rule. This becomes the foundation every page is built on.

📍 Phase 3 — Building the Pages (Stitch + per-page prompts)

Step 7: Build each page from its prompt file

Go back to your prompt file from Claude. Copy the first page's prompt → paste it into Stitch's input field → hit Enter.

💡 Powerful feature: Stitch can work on multiple tasks in parallel. You can send the first page's prompt, then the second, then the third — and they'll all build at the same time. The result comes out consistent with no conflicts.

Review each prompt before sending it to make sure the details are 100% complete.

Step 8: Iterative editing — this is where the craft happens

The first result is rarely the final one. You have a few options:

Precise editing (Edit): Double-click the element you want to change → select the specific part → talk to Stitch (Edit): "Arabic looks better here, move the logo to the right instead of the left."

Redesigning an entire section: Select the section (e.g. the homepage) → "Redesign this completely." Stitch will give you a different take.

Merging the best of two versions (the strongest technique): Have Claude write you multiple prompts with different creative directions for the same page. Build two versions, then take the best section from each and combine them:

"This pricing section here is better than that one, and this hero is stronger than that one — combine them and you get a better result."

⚠️ Note from experience: if you don't provide enough detail (images, precise content), you'll get a generic result. The more detail in the prompt, the more professional the output. English in the prompt also tends to give more accurate results than Arabic — even when the site itself is Arabic RTL.

📍 Phase 4 — Export (Figma or code)

Once you're done editing and have your final pages, head to Export. You have two options:

Option 1: Export to Figma via MCP (newest method)

If you have a Figma MCP connection set up, Claude can reach Figma directly and build the design there. Or simply: click Confirm to export to Figma. You may occasionally get an error — just refresh the page and try again, and it'll go through.

Option 2: View Code (for developers)

This is your edge as a developer: on any page, click View Code → it gives you the code directly (HTML + Tailwind + some CSS). Copy it and start working right away.

You can also request a mobile version: Generate Mobile Adaptive Version — it converts the page into a mobile version, or adjusts the same version to be responsive.

📍 Phase 5 — Final Polish in Figma (where the real work happens)

This is where you must know UI/UX — this is the moment that separates a developer who uses AI from one who depends on it.

Open Figma → new page → Ctrl+V (Paste here) → the page gets pasted in.

Then you start working with your own judgment:

  • Fix any missing fonts (Figma sometimes swaps fonts) and adjust the typography.

  • Even out spacing so everything feels consistent.

  • Work on each page inside its own group — drag it aside and work on it at your own pace.

  • Pick your strongest page (the base look), then copy its navbar and hero across the rest of the pages so everything stays unified.

  • Keep refining until you reach the final shape, then deliver the complete Figma file.

⚖️ The Golden Rules (Summary)

  1. AI provides the structure — the craft is in editing it with your own eye, not by accident.

  2. design.md is the heart of it all — it's what keeps every page consistent instead of chaotic.

  3. Have a conversation with the AI, don't fire off a rigid prompt — dialogue gets you a more accurate result.

  4. Your UI knowledge is your speed — the more you know, the fewer questions you need and the faster you judge the output.

  5. Detail in the prompt = quality of the result. An empty prompt gives you an empty result.

  6. The first version is never the final one — merge, edit, redesign.

🧱 Basic UI/UX Rules You Need to Know

So you can actually judge the output and edit it well, instead of just accepting whatever comes out:

  • Clear contrast: text needs to be clearly readable against its background.

  • Consistent spacing: a fixed spacing system (an 8px scale, for example) makes everything look intentional.

  • One focal point per page (Visual Hierarchy): one primary CTA, not ten competing ones.

  • Limited typography: one or two fonts, with clear size roles (heading / body / caption).

  • Proper RTL: for Arabic, the logo, direction, and icons all need to flip correctly — not just the text.

This guide is part of my portfolio — @alsaeyd.tech