UIを言葉で説明する

Welcome to Designing UIs by Prompt. Here's the magic of vibe coding: you don't need to be a designer or learn complex software like Figma to get a beautiful interface. You describe the look and feel in plain English, and tools like v0 and Lovable generate a real, working UI.

In this lesson you'll learn how to turn a vague idea in your head ("a clean, modern landing page") into a precise prompt that AI can actually build.

A great UI prompt usually answers four questions: What is it (a page, a card, a form)? Who is it for? What vibe should it have? And what content goes in it?

Vague prompts get vague results. Specific prompts get the design you imagined. Compare the two example prompts below.

The single most powerful word in a UI prompt is the adjective. Words like minimal, playful, brutalist, elegant, retro, corporate, futuristic instantly steer the entire design.

Don't just say "nice" — that means nothing to an AI. Pick 2-3 concrete vibe words and stack them. Tools like v0 and Lovable respond strongly to this.

A pro trick: reference apps and brands the AI already knows. Saying "like Stripe" or "like Airbnb" packs a thousand design decisions into two words.

This works because models like the ones behind v0 and Lovable have seen these well-known designs. Use them as shortcuts, then customize.

Beyond vibe, you can describe structure. Use spatial words the AI understands: top, hero, two-column, grid, sidebar, sticky header, footer.

Think of it like sketching with sentences. Walk top to bottom through the page.

You can hand the AI a color direction without picking exact hex codes. Say things like "warm earthy tones" or "a deep blue primary with a coral accent."

For fonts, describe the feeling: "a friendly rounded sans-serif" or "a serious serif for a law firm." You'll fine-tune exact values later — for now, set the mood.

Most modern UI tools (v0, Lovable, Bolt) let you upload a screenshot or sketch. A picture removes ambiguity instantly.

Even a rough phone photo of a napkin sketch works. Pair the image with words: "Build this layout, but make it modern and use my brand colors." This is the fastest way to get exactly what you pictured.

Under the hood, the AI is writing real HTML. You don't have to read it, but recognizing the shape helps you describe what you want. A 'hero' section is often just a heading and a button inside a container.

Here's the kind of simple markup a UI prompt produces.

Your first generated screen is a starting point, not the final answer. The real skill is refining with follow-up prompts: "make the hero taller," "swap the button to the right," "more whitespace."

Treat it like a conversation with a designer. Small, specific nudges beat re-describing the whole page from scratch.

Keep a fill-in-the-blank template handy so you never stare at a blank box. Combine purpose, audience, vibe, structure, and colors into one block and let the tool do the rest.

Open v0.dev or Lovable, paste a filled-in template, and watch a real UI appear in seconds. Then practice the iteration loop: generate, look, nudge, repeat.

The more concrete your words, the less you'll have to fix afterward. This single skill — describing UIs precisely — powers everything in this course.

Which prompt is most likely to produce the UI you imagined?

You learned to turn a fuzzy look-and-feel into a precise prompt. The recipe: state what it is and who it's for, name a concrete vibe (with reference apps as shortcuts), describe the layout top to bottom, hint at colors and fonts, and optionally attach a sketch.

Then you iterate with small follow-up nudges instead of restarting. Next up: generating individual components like buttons, cards, and forms on demand.