I made a screen in 58 minutes from scratch

## What happens on the way out

In 58 minutes on this route, you can make a working UI screen:

• auto Layout and components in Figma
• mobile-friendly
• real content instead of Lorem ipsum
• design-ready

Suitable for any one interface state: onboarding, dashboard, product card, form, error screen.

## Why 58 minutes, not 5 minutes

Honestly, you can get a picture in 5 minutes. At 58, it's a work screen.

Between “AI generated something similar” and “it can be transferred to development” lies work. You need to deal with the structure, components, states, real text. VibeDesign speeds up each stage, but does not remove them.

58 minutes is a realistic time for a designer who understands the task and knows how to work with the result of the generation.

## Workflow stack

Three tools, no more.

Google Stitch or Figma Make is a primary layout based on the description. Stitch is easy to start from scratch in the browser, Figma Make – if you already have a file and need to iterate directly in it.

Claude - make a prompt for the generator, write real text for the screen, disassemble the structure of the components. Not for drawing, for thinking.

Figma - final assembly, Auto Layout, components, transfer to development.

Optional: Reve 2.0 or Midjourney – if you need illustrations or stubs for images.

## Step 1: Formulation of the task – 5 minutes (0:00–0:05)

The main mistake is to start generating without understanding the task. AI will do something beautiful, but not that.

Before starting, answer three questions in writing – directly in notes or in a chat with Claude:

What kind of screen is it? Not "part of the app," but specifically, "onboarding screen step 2/4 - the user selects their goals.".

**What is the user doing on this screen? ** One main action: “Selects 1-3 targets from the list and presses ‘Next’.”.

Who is the user, what context? Mobile app for tracking habits, audience 25-40 years old, bright theme, minimalist style.

Three answers are the basis of the first prompt. There's nothing else to invent.

## Step 2: Generating the base 10 minutes (0:05–0:15)

Ask Claude to write a prompt for Stitch - don't write it from scratch yourself:

Make a prompt to generate a UI screen in Google Stitch.

Screen: Onboarding, step 2 of 4 – selecting the user’s goals.
The user selects 1-3 goals from 6 options
(health, productivity, sleep, sports, nutrition, meditation)
presses "Next."
Application: Habit tracker, mobile, iOS.
Style: light theme, minimalist, accent color – indigo.
Font: Inter.

Claude will return the ready-made industrial. Here's what we're going to get:

Mobile onboarding screen, step 2 of 4. Goal selection.
User selects 1–3 goals from 6 options: Health, Productivity,
Sleep, Sport, Nutrition, Meditation.
Each goal is a card with icon and label.
Selected state: filled indigo background, white text.
Progress indicator at top (2/4 dots).
"Continue" button at bottom — disabled until at least one
goal selected.
Light theme. Inter font. iOS safe area. Clean, minimal.

You start Stitch, you put in a prompt. In 20-30 seconds, the first version. It will be 70% correct. It's normal - beyond iteration.

## Step 3. Iterations – 15 minutes (0:15–0:30)

Don't rewrite the prompt from scratch. Let's make some quick point corrections:

Grid correction:

The cards are too large, all 6 are not visible on the screen.
Make a grid 2×3, the cards are compact:
Icon on top, name on the bottom, minimal indentations.

** Edit the button:**

The "Next" button must be inactive by default.
Gray, disabled. It is activated after selecting at least one target.

** Heading correction:**

The headline is too small. Increase to 24px bold.
Add a subtitle below:
"You can choose a few" - 14px, gray, regular.

** Step indicator:**

Replace the progress bar with dots: 4 pieces, the second painted over.
Standard pattern for onboarding, center level on top.

Three or four of these edits, and the screen is already close. Next, final assembly.

## Step 4. Assembly in Figma – 15 minutes (0:30–0:45)

Stitch gives you an image or basic code. Figma is the final assembly.

If you are working in Figma Make - the screen is already in your file, go straight to the components. If Stitch – export the result and recreate the structure in Figma: it is faster than building from scratch, because there is a clear visual task.

Auto Layout. Configure it on the main containers. The 2×3 grid cards are the Frame with Auto Layout and the 12px gap. It takes 3 minutes, but then any edit - seconds.

Components. Make a goal card with two options: Default and Selected. Do not create 6 separate cards – one component. You need to change the icon in all cards - rule in one place.

**Replace Lorem ipsum with the real names: Health, Productivity, Sleep and so on. The real text immediately shows problems with transferability and length, which are not visible on the stubs.

States. Show two screen states: no target selected (button inactive) and one selected (button active). This is the minimum for an understandable handoff.

## Step 5. Final check – 13 minutes (0:45–0:58)

Go through the checklist before showing or transmitting:

** Structure:

• One clear call to action
• All component states are shown: default, selected, disabled
• Real content, not Lorem ipsum

** Technical details:**

• Safe area for iOS is observed (indentation from the bottom under the navigation gesture)
• Fonts from the connected library, not local
• Figma style colors, not arbitrary HEX

Mobile version:

• At least 44×44px – tap target
• Text at least 14px
• All cards are visible without scrolling

** Quick intelligibility test: * Close the file, open it in a minute and watch the first 5 seconds. If you don’t know what to do, there’s something wrong with the hierarchy.

## Time analysis

The first two times can take 75-85 minutes. After five screens, get on pace.

## Common Mistakes That Eat Time

**Too detailed first prompt. If you’re writing a 20-line prompt with precise sizes and colors, you’re doing the work that AI should be doing. Give the structure and mood, specify the details with iterations.

** Reworking instead of editing. If you don’t like the first result, don’t regenerate from scratch. Give a specific edit: "Make the cards more compact." Generation from scratch takes 3 times longer than point refinement.

Missing components. Many transfer the result from Stitch to Figma as a band and don't make the components. The first edit “change the icons in all cards” turns into 20 minutes of manual work.

Screen without states.** Screen without error state, download or blank list is half design. The developer will still ask. Better answer in advance.

Generation instead of thinking in the first step. AI does not know your user. He doesn't know why Meditation should stand in front of Sport in a particular app. You know that. The first 5 minutes are your job, not AI.

## How to scale to a whole float

58 minutes is one screen. For a flow of 5-7 screens, multiply by 5 is not necessary.

After the first screen, you already have a component library, styles and a working prompt template. The second screen takes 30-35 minutes. The third is 20-25. From the fourth generation we use only for non-standard sections, the rest – right in Figma with finished components.

Full onboarding of 5 steps – 2.5-3 hours instead of a full day. That's the real number.

## Outcome

VibeDesign does not remove design. It removes routine: empty canvas, search for references, primary arrangement of elements. You still think about the user, build a hierarchy, make components and check states.

It’s just that you’re starting not from scratch, but with 70% of the finished base.

** Shortened route:**

1. Three answers to three questions - task, action, context (5 min)
2. Start Stitch or Figma Make (10 minutes)
3. Three to four iterations (15 min)
4. Auto Layout and components in Figma, real text (15 min)
5. Checklist, two states, tap targets (13 mins)

The first screen can be done today.