Apply AI Design — How Non-Designers Make Prototypes Look Credible

OUTCOME — What you'll have afterward

Following this tutorial leaves you with three things.

What gets built

• One design-applied version of the prototype screen you built in the previous step
• 5–7 turns of conversation with the AI that produced it — i.e., one real feel for "refining a design through conversation"
• A reusable reference image → prompt → iteration loop you can reapply to any prototype you ever build

📖 Term: What is a prototype? A prototype is a working model built before full production. Car companies hand-build mockups before mass manufacturing; in app development, a prototype is a screen with just enough functionality that buttons respond. It doesn't have to look good. It just has to work. What's sitting on your screen right now is exactly that state.

Tutorial metadata

Why this, framed in trust

A raw-looking screen lets the viewer's brain finish its verdict before you open your mouth. Half a second. Color, spacing, typography, alignment fuse into a single impression, and the brain stamps it "looks properly built" or "thrown together" before any explanation lands. Applying design isn't about making things pretty. It's about securing trust as a currency so your feature gets a chance to be seen.

Where you are now: you've confirmed what this tutorial produces. Next we check prerequisites before starting.

PREREQUISITES — What you need

Just four things.

Required

• One conversational AI account: Claude recommended for its Artifacts v2 panel — CSS results render live and update as you iterate. ChatGPT and Gemini work on the same principle. No account? Finish pick your first AI tool first
• One working prototype: functionality doesn't have to look good. Grey buttons on default background are fine — that's what we're fixing
• Web browser + image search access: Google Images or Pinterest
• One folder for reference images: a "refs" folder on desktop is enough

📖 Term: What are Artifacts v2? Claude's Artifacts feature renders AI-produced code or design live in a side panel next to the chat. The v2 update (late 2025) added support for CSS animations and modern effects like glassmorphism rendering directly in the panel. You don't have to copy code out and run it elsewhere — request a change, watch it update in seconds. This is especially powerful when iterating on design.

Not required

• A design degree, color theory, typography training
• Professional tools like Photoshop, Illustrator, or Figma (Figma AI Make included — skip it unless you already know Figma)
• A paid stock image subscription
• Drawing ability — your job is to choose, not to draw

Environment check (1 min)

Open your prototype in one tab, Google Images in another. No prototype yet? This tutorial becomes designing in thin air — finish the prior step first.

Where you are now: prototype and AI account ready. Before clicking anything, a short WHY explains why "tell AI to make it pretty" fails. Skippable — but reading it means you'll diagnose problems instantly when the AI goes wrong.

WHY — Why "make it pretty" fails

The most common first instinct when asking an AI for design is "make it pretty." It seems simple. It almost always fails. Here are three reasons why, and what to do instead.

Reason 1 — "Pretty" has no shared definition.

At a hair salon, "just make it pretty" puts the stylist in an impossible spot. Pretty could mean short, long, layered, voluminous, sleek, wavy — definitions shift by person and occasion. The stylist interprets on your behalf, and you may walk out with a cut you didn't want.

AI behaves the same way. Say "make it pretty" and the AI reaches into its training data for a statistically safe average — common blue, common rounded buttons, common card layout. Not bad, but not what was in your head. You land in "something's off and I can't name it." Abstract requests yield abstract results.

Abstract requests return abstract results. Concrete requests return concrete ones.

Reason 2 — Design is numbers, not feelings.

When something feels "off," a trained designer decomposes that feeling into values: padding in pixels, font size in points, color lightness, corner radius. Combinations of those values produce the feeling. Non-designers can't decompose to numbers, so diagnosis stops at "something's off."

Hand the reference image to the AI, and the AI decomposes for you. It reads the image and extracts "pastel background, 16px padding, 8px corner radius, 2px grey shadow," then rewrites your prototype with those values. You don't need a designer's eye. You borrow the AI's eye.

📖 Term: Padding and margin Padding and margin are the empty space around elements. Padding is the gap inside an element (between a button's label and its edge). Margin is the gap outside an element (between one button and the next). Beginners miss this area the most. When a screen "feels cramped," 99% of the time the cause is insufficient padding or margin. Flip it — and 70% of the "polished" impression is already done before you touch color.

Reason 3 — The 80/20 rule applies to design too.

Becoming a designer takes years. Making a prototype look credible takes four elements: color, spacing, typography, visual hierarchy. That's it. The remaining 20 points live in professional craft territory and aren't needed at MVP stage.

Nail items 1–4 via AI and you're at 80/100. Items 5–6 belong after product validation. Building brand identity before users have validated willingness to pay is like decorating a house before the blueprint exists.

Where you are now: you understand why "pretty" fails. Now the hands-on part — four steps, 20–25 minutes.

STEPS — Four-stage walkthrough

Step 1. Find a reference image (5 min)

Asking an AI for design without a reference puts you behind the starting line. Secure 1–2 visuals that capture "this kind of feel."

Fastest path — Google Images. Search in English. The global design community tags their work in English, so the pool is vastly larger.

Search formula:

[app type] [screen type] [style keyword]

A few examples:

Two style keywords worth adding in 2026: glassmorphism (blurred glass-effect backgrounds) and kinetic type (animated lettering). Appending either to your search pulls results aligned with current design sensibility.

Switch to the Images tab, scroll, and when something catches your eye — "oh, that's nice" — click and save it. Right-click → Save image, or drag to the desktop.

Pick just one. Two or more confuses the AI more than it helps.

Second-best path — Pinterest. Search "app ui design" on pinterest.com. Great curation, smart recommendations. Downside: it's a time black hole. Set a ten-minute timer before you go in.

Third path — screenshots of apps you use. You've probably thought "this screen looks great" on your phone. Screenshot it. Apps in production are the most realistic reference — live, user-tested, validated designs.

Step 2. Show the AI your reference + prototype context (5 min)

Open your AI of choice — Claude, ChatGPT, or Gemini. Start a new chat and drag the saved image into the message area. It attaches.

Bad example first:

Bad prompt:

Make it like this

The AI saw the image, but has no idea what to build. Is this a clone of the app in the image? Just copy the color? Just copy the layout?

Good prompt formula — attachment + purpose + elements:

Using the attached image's design style, create the [specific screen]
of [app you're building].

The screen should contain [required elements 1, 2, 3].

Match the color palette, spacing, and corner radius of the attached image.

Concrete example:

Using the attached image's design style, create the main screen
of a habit tracker app.

The screen should contain:
- today's date at the top
- three habit cards listed, one per today's habit
- each card with a checkbox, habit name, and progress
- an "Add Habit" button at the bottom

Match the color palette, spacing, and corner radius of the attached image.
Write this in HTML + CSS.

The three elements:

1. Attachment — Image attached, labeled "to reference"
2. Purpose — Specific screen of a specific app
3. Elements — Required details as a bullet list

Press enter. A few seconds later the result arrives. Claude Artifacts v2 renders it in the side panel immediately. ChatGPT or Gemini return code — copy into a .html file and open in a browser.

If you're using Canva AI or Framer AI

Both remain solid options in 2026. Canva AI excels at producing social cards, presentation slides, and app mockup images quickly from a text prompt. Framer AI generates responsive web pages from a single sentence. That said, the core loop of this tutorial — reference image → value extraction → iterative refinement — runs fastest in Claude + HTML/CSS. Use both approaches depending on the task; they complement rather than replace each other.

Step 3. Refine through conversation (10 min)

The first result won't be perfect. More accurate: it shouldn't be. The first output is a rough block of marble; sculpting begins from here.

Find what's off — something will be — and translate that feeling into words. The single most important rule: change one thing at a time. Dump "color's off, buttons are small, spacing's tight" in one message and the AI touches all three, breaking one while fixing another. One at a time.

Practical patterns for revision requests:

Color:

The colors feel dull. Match the lighter pastel tone from the reference image.

Background and card background are too similar — I can't tell them apart. Lighten the card slightly.

Glassmorphism (2026 trend):

Add a glass effect to the cards: backdrop-filter blur(10px) with a semi-transparent background.

Spacing:

The gap between cards is too tight — it feels cramped. Open it up to about 16px.
There's not enough inner padding on the cards. Increase to 20px.

Typography:

The font feels rigid. Switch to something softer with rounder letterforms.
The headline feels unimportant. Increase font size by 1.5x.

Functional visuals:

When a habit is checked, make the check turn green and fade the card background slightly.
Add today's date at the top with a short encouragement like "Let's go!"

Repeat this process five times. Exactly five matters. By the fifth round the result looks like a different app from where you started, and beyond that the probability of degrading the design climbs. Don't fall into perfectionism — the fifth revision is the optimal stop.

Something interesting happens during this. Your eye gets trained. At first it was "something's off and I can't name it." By the third revision you distinguish "ah, color," "ah, spacing," "ah, alignment." Talking to the AI is design taste practice. You don't have to draw or have a degree. The loop itself teaches you to tell good from less-good.

Step 4. Publish and gather feedback (5 min)

Sitting alone thinking doesn't advance the work. Real humans reacting is the next step.

On Claude Artifacts, click the top menu and select "Publish" or "Share." A unique URL generates. On ChatGPT or Gemini, drop the HTML into a GitHub Gist or CodePen.

📖 Term: What does "publish" mean here? Publish means converting something visible only on your screen into a public URL anyone can visit. Send the link — the recipient opens your app in a browser, no install required. This "share via one link" mechanic is the core accelerator of MVPs. Show → they try it → you get a reaction → you fix. The cycle runs in minutes, not days.

Send the link wherever. Pick 3–5 people — friends, family, colleagues, ideally someone close to your target user.

This is a prototype of a habit tracker I'm building.
Take 30 seconds and tell me your first impression — nothing polished,
just what comes to mind. Design or feature, anything.

Avoid leading questions like "does the design look good?" The answer is "yeah, looks fine" every time. Open questions pull far more signal.

When a reply comes back, hand it to the AI:

A friend said "I wish the colors were a bit stronger."
How should I revise that?

AI proposes, you approve, change lands. Publish again, send again, receive again. The faster the loop, the better the result.

Where you are now: reference found, prompt sent, five revisions done, shareable link created. Next we verify.

VERIFICATION — What "done" looks like

If you can answer "yes" to all five of the following, this tutorial is complete.

1. [ ] The reference image is saved in a folder. One or two images from Google, Pinterest, or screenshots — should be sitting in a folder on your desktop
2. [ ] 5–7 turns of conversation are stacked up. Initial prompt + 5 revisions + wrap-up ≈ 7 turns. Scroll up in the chat and they should all be visible
3. [ ] Placing the before and after side by side makes a clear difference. It should feel like "same app, but a different app." If the change is minor, your revision requests were probably too abstract
4. [ ] You have one shareable URL. A link someone else can click to try your app
5. [ ] You sent it to at least one person and got a reaction. One sentence counts. The core is exiting the solo-deliberation phase

If any is "no," identify where you stopped. The most common stall is at Step 4 — "I'll publish once it's more finished." In that case, send it in its current state. The point isn't to send when it's finished; it's to send precisely because it isn't.

The moment you think "I should wait until it's done" is exactly the moment sending pays the most.

VARIATIONS — Situational remixes

Variation 1 — Dark mode version. Five minutes. Ask: "Create a dark mode version — black background, grey-tone text, keep the accent color." Doubles the "real product" feeling.

Variation 2 — Sibling screens. One main screen is narrow. Build settings, login, empty-state in the same style and the product feels three-dimensional. "In the same design style, create the login screen — email, password, login button, 'Sign up' link."

Variation 3 — Illustrations and icons. Fastest add. unDraw (undraw.co), Storyset, and Lottie Files all offer free illustrations. Match the tone, feed it to the AI alongside the reference. For custom UI-matched images, Nano Banana Pro generates them cheaply and fast — a practical alternative to DALL-E 3 for this stage of work.

Variation 4 — Artist style reference. Use art instead of a design screenshot — a Mondrian-style app, ukiyo-e, Bauhaus. Creative experiment, surprisingly polished more often than you'd expect.

Variation 5 — Motion design (2026 addition). CSS animations are far more accessible now. Ask the AI: "When the checkbox is clicked, animate the card fading out smoothly — CSS transition 0.3s ease." One micro-interaction like this significantly elevates the "finished product" impression at MVP stage.

TROUBLE — Where people get stuck

❓ The AI isn't reflecting the reference image

The image is probably too small. Thumbnails (under 200px) don't give the AI enough detail. Re-save at original resolution (800px+). Also add "match the color palette and layout precisely" — the AI pushes harder when explicitly instructed.

❓ I'm only getting code back, no visible screen

On Claude, add "build this as an Artifact" and it renders in the side panel. ChatGPT and Gemini lack that feature — copy the code into a .html file and open in a browser. Or paste into codesandbox.io/s/new and it runs instantly.

❓ After five revisions things are getting worse

Accumulated context made the AI lose track. Fix: copy the code from the 3rd revision (last version you liked), open a fresh chat, paste the code, and resume: "build on this and make the following change." Throw away the old context and restart from the good state.

❓ My design looks too similar to the reference — copyright issue?

Following the structure, tone, and feel of a reference isn't a copyright violation. Designers globally reference each other's work. What you can't do is copy logos, icons, and photographs directly — replace those with your own or free resources.

❓ I sent it to 3 people and the reactions are lukewarm

The most common MVP reaction is "yeah, looks okay." This is effectively negative feedback — they couldn't bring themselves to say it's bad. Ask specifics: "Where did your eye go in the first 30 seconds?" "Which button did you want to click?" "Which button did you not click, and why?" These carry 10x the signal.

❓ Perfectionism won't let me stop at five revisions

This stage's goal isn't a finished product — it's a screen that can be validated. Polishing belongs after users confirm willingness to pay. Pre-validation perfectionism is, with high probability, wasted time. If the urge for a 6th revision hits, route that hand to the Publish button instead.

NEXT — What's next

Thirty minutes ago you may have been holding a screen that functioned but looked like a homework submission. Right now you have a reference image, a five-turn conversation, and a shareable link. Small-looking difference, but the first-impression layer is completely different now.

This tutorial is chapter 2-3 of the SPIN series:

1. 2-1. Idea to prototype ✓
2. 2-2. Attach features ✓
3. 2-3. Apply design ✓ (you are here)
4. 2-4. Ship as a real service — app builders (tutorial in progress)
5. 2-5. Land your first 10 users — validation stage (tutorial in progress)

What you've built is still a picture. Pretty, but data doesn't persist — refresh and everything disappears. Not a real service yet. Next we breathe life into this shell: turn it into an actual deployed service via an app builder, something anyone can reach on the web, with real saved data.

The best use of this tutorial right now is sending the link you just created to 5 people. Not a finished design — an unfinished one. Unfinished is exactly what makes feedback meaningful. Once the first wheel starts turning, not stopping is the easiest thing.