Your First Prototype in an Hour — Shape Ideas Like Clay

OUTCOME — What you'll have afterward

Following this tutorial leaves you with three things in hand after sixty minutes.

What gets built

• A working prototype running in your browser — buttons actually click, inputs actually respond, results actually appear
• A shareable link you can send to someone else — one Publish click produces the URL
• A gut read of "this might work" or "I should drop this" — a decision basis you didn't have sixty minutes ago

📖 Term: What is a prototype? A prototype is not a finished product. It's the minimum working version that tests whether an idea makes sense. Same concept as an architect's scale model before the actual building, or a carmaker's test vehicle before mass production. The question isn't "is this pretty?" — it's "does this idea hold water?" A model of a house without wallpaper or furniture, but where you can feel the room sizes and walk the layout — that's what a prototype is.

Tutorial metadata

Item	Value
Time	60 min (fast: 30, unhurried: 90)
Level	Beginner
Tools	One Claude.ai account + web browser
Coding knowledge	None required
Terminal	None
Payment	Free tier works (Pro is more comfortable)

Why learn this now — the era of zero-cost failure

Validating a single idea used to take weeks, usually months. Write a brief, hand off to designer, hand off to developer, wait for the result, review. Time and money evaporated in the meantime. So people grew cautious. If they weren't sure, they didn't start. That has fundamentally changed. Claude Artifacts v2 ships live preview, persistent state, and an editable canvas. v0.dev, bolt.new, and Replit Agent generate near-complete apps in minutes. Finishing a prototype in sixty minutes is no longer ambitious — it is the baseline. The cost of failure is sixty minutes. With almost nothing to lose, attempts scale to infinity. More attempts means higher odds.

Where you are now: you understand what this tutorial produces. Next we confirm prerequisites before starting the sixty-minute clock.

---

PREREQUISITES — What you need

Just two things are strictly required.

Required

• A Claude.ai account: if you don't have one, go to claude.ai and sign in with Google. One minute done. The free tier can complete this entire tutorial
• A current web browser: Chrome, Safari, Firefox, or Edge. Artifacts runs inside the browser

Nice to have (not required)

• Claude Pro ($20/month): daily limits are generous enough to support 20–30 conversational exchanges in an hour. The Max plan ($100/month) unlocks Claude Code and Plan Mode for more complex builds. Free tier may throttle and force you to wait for resets
• One-line idea for yourself: knowing what you'll build in advance speeds up the start. If you don't have one yet, that's fine — Step 1 handles it

📖 Term: What is Claude Artifacts v2? Artifacts is a workspace inside Claude. You chat on the left, and on the right a live panel renders whatever the AI is building. v2 adds live preview, persistent state (data survives a refresh), and an editable canvas (you can modify the code directly). Web pages, app screens, calculators, games, charts, interactive visualizations — almost anything. Say "change the button to blue" and three seconds later it's blue. Say "remove this feature" and three seconds later it's gone. The output gets sculpted through conversation. It's digital clay.

Environment check (1 min)

Open claude.ai, start a new conversation, and type this in the input box.

Build me a simple calculator app

Within 3–10 seconds a panel should open on the right with a calculator inside. Click the number buttons; if addition works, you're ready. If the right panel doesn't open, check your account settings to make sure Artifacts is enabled (it is by default).

Where you are now: account and environment ready. Next, a short WHY section on why prototypes beat ideas. You can skip it and still finish, but it gives you the argument to hand a skeptical coworker who asks "do we really have to prototype this?"

---

WHY — Why "prototype first, not idea first"

This inverts the usual order. The normal assumption is: let the idea mature, then build. In front of AI tools, that order runs backward.

Reason 1 — Ideas in your head usually lie.

Ideas in your head always look plausible. Users press this button, flow to that screen, and the next feature naturally fits — because it's imaginary. Build it and the illusion breaks. You can't tell what the first button should be, the second screen looks empty, and once you click around you realize some feature is useless. What you couldn't see in your head appears the moment it renders. An idea isn't a blueprint — it's a conversation partner. You can only ask "what do you really want?" after building. Before building, you can't even ask the question.

An idea in your head isn't a blueprint. It's a conversation partner. Before you build, you can't even ask the question.

Reason 2 — Showing isn't telling.

Saying "I'm thinking of building something like this" keeps the other person in listening mode. Sending "here, try it" puts their hands on it. Reactions pour out: "I can't find this button," "oh, this is nice," "why does this behave like that?" Feedback that would never surface from description alone flows freely in front of a prototype. Words rely on the listener's imagination. Prototypes borrow their fingers. Once fingers have confirmed something, the head finds it hard to doubt.

📖 Term: Idea vs. feature An idea answers "what should we build?" A feature answers "how does it actually work?" "An AI service that summarizes text" is an idea. "A button that takes pasted text and returns a three-line summary plus five keywords" is a feature. Prototyping is the act of translating ideas into sets of features. That translation is where your real wants surface. What felt vague as "I need AI summary" becomes concrete as "I actually want five bullets, not three sentences" — but only after building.

Reason 3 — Prototype ≠ MVP.

People conflate these. An MVP is "the smallest version a real customer pays for and uses." A prototype is the stage before that — no money collected, no data saved, fine if it evaporates tomorrow. It exists to check direction. Confusing the two leads to over-investing in prototypes, or abandoning good ideas because a prototype wasn't polished. Prototyping is map-reading. MVP is driving. Don't spend three months on a map.

Dimension	Prototype	MVP (Minimum Viable Product)
Purpose	Does the idea hold water?	Will real customers pay?
Users	You + 5 friends	Early customers in the real market
Data persistence	Not required	Required (accounts, transactions)
Payments	None	Yes (the critical validation metric)
Build time	1 hour to 1 day	1 week to 1 month
Cost of failure	Near zero	Medium (weeks already invested)
Tools	Claude Artifacts v2, v0.dev, bolt.new	Lovable, Bolt, Replit Agent, developer collab

If the prototype gives you "this could work" conviction, step up to MVP. If it doesn't, drop it and try another idea. Both are progress. Both beat standing still.

Where you are now: you know why prototypes matter and how they differ from MVPs. Now start the sixty-minute clock and do the work. Four stages: Define 10 + Generate 20 + Iterate 20 + Package 10.

---

STEPS — The 60-minute workflow

Step 1. Define (10 min) — Tighten the idea into one sentence

This is where most people trip. If the idea lives as "something like this," the AI will return "something like this" back. Artifacts can only build as precisely as it can read. Spend ten minutes compressing the idea into one sentence.

Scope formula — Who + does what + what comes out

When [who] does [input],
the prototype returns [output].

Four real examples:

Example 1 — Text summarizer
"When a user pastes long text,
the app returns a 3-line summary plus 5 keywords."

Example 2 — Landing page
"When a visitor lands on the page, they see
one value proposition, a demo image, and an email signup form."

Example 3 — Todo list
"When a user types a task and hits Enter,
the list adds it and a checkbox toggles completion."

Example 4 — Simple calculator
"When a user taps numbers and operators,
the result updates live at the top of the screen."

Explicitly exclude — narrow scope keeps you inside 60 minutes

• Login / signup (requires data persistence, outside Artifacts' range)
• Payments (requires external APIs)
• Multi-screen navigation (5+ screens explode complexity fast)
• Real-time chat / push notifications (requires a server)

A prototype proves one core feature works. Leave the rest imagined.

Where you are now: scope is one sentence. Hand that sentence to Claude next.

Step 2. Generate (20 min) — Pull the first prototype

On claude.ai start a new conversation and paste this template. Claude Sonnet 4.6 is the default model; switch to Claude Opus 4.7 if your feature involves complex logic.

Build me a web app to this spec.

Scope: [your one-sentence scope from Step 1]

User flow:
1. [first action — e.g., paste text into input box]
2. [second action — e.g., click "Summarize" button]
3. [result — e.g., 3-line summary and 5 keywords appear]

Style: simple, white background, one big button. Mobile-friendly.
Tech: single HTML file. Minimize external libraries.

Real example (text summarizer):

Build me a web app to this spec.

Scope: when a user pastes long text,
the app returns a 3-line summary plus 5 keywords.

User flow:
1. User pastes an article into the top textarea
2. User clicks the "Summarize" button below
3. A results area shows "Summary" (3 lines) + "Keywords" (5)

Style: white background, orange accent, one big button, mobile-friendly.
Tech: single HTML file. No AI API for now — take the first 3 sentences
as summary and extract the 5 most frequent nouns as keywords.

Hit Enter and wait 3–10 seconds. The Artifacts panel opens on the right. There's a working app in front of you.

Mindset for the first output — this is the turning point

The first output is not perfect. That's normal. A sculptor doesn't expect an angel after one hammer strike, and you shouldn't expect a finished product after one prompt. Colors will feel off, button placement will be awkward, the summary will be crude. Don't close the window here. This is where the real work starts.

📖 Term: MVP (Minimum Viable Product) The step after prototyping. If a prototype validates "does the idea hold water," an MVP validates "do real customers pay for it." MVPs need data persistence, user accounts, payment handling, error cases. This tutorial builds a prototype, not an MVP. MVPs move to tools like Lovable, bolt.new, or Replit Agent, or into developer collaboration.

Step 3. Iterate (20 min) — Sculpt through conversation

With the first output on screen, refine through dialogue. This is where Artifacts v2 really shines — the editable canvas lets you tweak code directly, and every conversational request lands in three seconds.

Common revision patterns

— Add a feature
"Add a 'shorter — one sentence' button
that re-summarizes into a single sentence."

— Remove a feature
"Drop the keywords. Keep just the summary."

— Restyle
"Change the button color to orange (#C96442).
Widen the padding too."

— UX polish
"The input box feels cramped. Double its height.
Placeholder text: 'Paste a long article here'."

— Behavior tweak
"The summary is too long. Cap each line at 50 characters.
Make sure numbers and proper nouns are preserved."

Rhythm of iteration — one thing at a time

A common beginner mistake is stacking requests.

Bad:
"Change the button to blue, shorten the summary text,
add icons next to keywords, and make mobile buttons bigger."

The AI processing four things at once will miss one or two, and you won't be able to tell which. Instead, split them.

Good:
(1) "Change the button to blue." → confirm
(2) "Shorten the summary text." → confirm
(3) "Prefix keywords with #." → confirm

Three three-second cycles is nine seconds. Negligibly slower than batching, and far more stable.

What iteration teaches you — what you actually wanted

Something interesting happens. What started as "just a summary app" gets concrete as you iterate. "Oh, I actually prefer five bullets to three sentences." "I didn't need keywords." "I want a copy-to-clipboard button on the result." The tool draws out the thinking. Same as shaping clay — the form surfaces through touch. That's the real gift of prototyping.

Step 4. Package (10 min) — Share and gather feedback

After twenty minutes of iteration, when it feels "good enough to show someone," move to packaging.

Pull a share link

In the Artifacts panel, the three-dot (···) menu lives at the top right. Click "Publish" and a unique URL is generated. The recipient doesn't need a Claude account — they just use your prototype. Click buttons, type inputs, see results.

Send to 5 friends — feedback template

Try this for 10 minutes and answer honestly:

1. Can you tell what this app does in 3 seconds?
2. On the first screen, is it obvious what to do?
3. After actually using it, do you feel "oh, this is useful"?
4. Would you pay for it? How much?
5. Would you recommend it? To whom?

Not "looks fine" — be specific.

"What do you think?" gets "looks fine" — they're being polite. Specific questions get real feedback.

Where you are now: sixty minutes in. You have a prototype, a share link, and feedback coming in. Next step: verify the work was done right.

---

VERIFICATION — What "done" looks like

If four of the five check out, you've completed this tutorial.

1. [ ] A working prototype runs in your browser. Buttons respond, inputs process, results come back
2. [ ] The Step 1 one-sentence scope matches the prototype. If scope shifted during the build, you've rewritten it as a new one-sentence version
3. [ ] You pulled at least one Publish share link. Opening it in a new incognito window still shows a working app
4. [ ] You sent at least three revision requests through dialogue. There is no "one-shot complete." Sculpting through conversation is the skill that has to land in your hands
5. [ ] You've arrived at either "this could work" or "drop this." Both are correct. The entire point of prototyping is removing ambiguity

If two or more are "no," the most common cause is Step 1 (scope). A vague scope makes Step 2 wander off, and forty minutes vanish. Go back to the one-sentence formula — "who + does what + what comes out" — and tighten it. Then retry Step 2; most blockers dissolve.

---

VARIATIONS — Other idea templates

Variation 1 — Landing page prototype

Build a product landing page.
One headline, three value-proposition sentences,
a "Get started" button, an email signup form.
White background, orange accent, mobile-responsive.

Build the landing page for a service you're working on in thirty minutes, then ask a friend "can you tell what this does?" Core-message fit gets validated right there.

Variation 2 — v0.dev or bolt.new for a richer prototype

When Artifacts' single-HTML-file scope isn't enough, take the same one-sentence scope to v0.dev or bolt.new. They generate React components or full Next.js apps. Use these when you need simple state management or a multi-page layout.

v0.dev prompt example:
"Build a notes app with auto-tagging.
When the user types a note, suggest 3 relevant tags.
Example: 'Prep for tomorrow's team meeting' → #work #meeting #todo
Tags should be clickable as filters."

Variation 3 — Interactive calculator or tool

Build a loan interest calculator.
Inputs: principal, rate, term → outputs: monthly payment, total interest.
Use sliders for the inputs; numbers update live as the user drags.

Build calculators or converters tied to your actual work, and they turn into real internal tools immediately.

Variation 4 — Game or learning tool

Build an English vocabulary flashcard app.
Preload 10 words (apple, banana, cat, ...).
Card UI: click to flip and reveal the meaning.
"Next" button and "Check" button that counts correct answers.

Learning tools for kids or yourself ship fast this way. What you used to manage in a spreadsheet becomes much more fun as a prototype.

---

TROUBLE — Common stuck points

❓ The Artifacts panel doesn't open Some prompts make Claude reply in plain text without opening Artifacts. Ask explicitly: "Build this as a working HTML file and show it in Artifacts." That usually opens the panel.

❓ Data disappears on refresh Artifacts v2 supports persistent state, but closing the browser tab or ending the session resets it. Persistence belongs to the MVP stage, not the prototype stage. Once the prototype gives you conviction, move to Lovable, bolt.new, or Replit Agent.

❓ Revision requests don't take Two common causes. First, too much requested at once — split into single asks. Second, the request is vague — not "make it prettier" but "change button color to #C96442 and widen padding to 20px."

❓ Free-tier limit hit Claude free tier resets every few hours. Wait it out, or upgrade to Pro ($20/month). If you need Claude Code and Plan Mode for more complex work, consider the Max plan ($100/month). Three prototypes per month and you've broken even on Pro.

❓ Stuck on something complex Apps with 5+ screens, login, payments, or persistence don't fit Artifacts cleanly. Cut scope. Reduce to "one core feature on a single no-login screen," then plan to rebuild as an MVP using v0.dev or bolt.new.

❓ "It's not perfect yet — can I really show this?" This hesitation is the biggest enemy. A prototype can't be perfect. If it were, it wouldn't be a prototype. Be honest: "still rough, but can you give 30 seconds of honest feedback?" Most people are glad to help.

---

NEXT — Sixty minutes later, in your hands

An hour ago you might have been paralyzed by "will this even work?" Now you have a working prototype, a share link, and feedback rolling in. The gap is much bigger than sixty minutes. The quality of your next decision is entirely different.

This tutorial is the Shape phase of the SPIN series. The path continues:

1. Pick a tool — Pick Your First AI Tool ✓
2. Prototype ✓ (just completed)
3. Add design — how to dress up a prototype (tutorial in prep)
4. Move to MVP — ship on Lovable/bolt.new (tutorial in prep)

The one piece of advice that matters most: build one more prototype every day this week. Sixty minutes a day, seven prototypes by week's end. By then one of them will feel like "this could actually be real." That's where it really begins. Once the first wheel rolls, it's easier to keep it rolling than to start another.

간단한 계산기 앱 만들어줘

[누가]이 [입력]을 넣으면
[프로토타입]이 [출력]을 돌려준다.

예시 1 — 텍스트 요약 앱
"사용자가 긴 글을 붙여넣으면, 앱이 3줄 요약과 키워드 5개를 돌려준다."

예시 2 — 랜딩 페이지
"방문자가 페이지에 들어오면, 제품 가치 한 문장 + 데모 이미지 + 이메일 구독 폼이 보인다."

예시 3 — 할 일 목록 앱
"사용자가 할 일을 입력하고 Enter를 누르면, 목록에 추가되고 체크박스로 완료 처리가 된다."

예시 4 — 간단한 계산기
"사용자가 숫자와 연산자를 누르면, 화면 상단에 계산 결과가 실시간으로 뜬다."

아래 스펙대로 웹 앱을 하나 만들어줘.

스코프: [1단계에서 정리한 한 문장]

사용자 흐름:
1. [첫 번째 행동 — 예: 입력창에 텍스트를 붙여넣는다]
2. [두 번째 행동 — 예: "요약하기" 버튼을 누른다]
3. [세 번째 결과 — 예: 3줄 요약과 키워드 5개가 표시된다]

스타일: 심플, 흰 배경, 큰 버튼 하나. 모바일에서도 보기 좋게.
기술: 단일 HTML 파일로 작동하게. 외부 라이브러리는 최소화.

아래 스펙대로 웹 앱을 하나 만들어줘.

스코프: 사용자가 긴 글을 붙여넣으면,
3줄 요약과 키워드 5개를 돌려주는 웹 앱.

사용자 흐름:
1. 상단 큰 텍스트창에 기사를 붙여넣는다
2. 아래 "요약하기" 버튼을 누른다
3. 결과 영역에 "요약" 3줄 + "키워드" 5개가 나타난다

스타일: 흰 배경, 오렌지 포인트 컬러, 큰 버튼 하나, 모바일 친화적.
기술: 단일 HTML 파일. AI 호출 없이 우선은
입력 텍스트에서 첫 3문장을 요약으로,
가장 자주 나온 명사 5개를 키워드로 보여주는 수준이면 충분.

— 기능 추가
"'한 문장으로 더 짧게' 버튼 하나 추가해줘,
누르면 요약을 한 문장으로 다시 생성해주는 거야."

— 기능 제거
"키워드 기능은 빼줘. 요약만 남겨두자."

— 디자인 수정
"버튼 색을 오렌지(#C96442)로 바꿔줘.
여백도 좀 더 넓게."

— UX 개선
"입력창이 너무 작아. 높이를 두 배로 늘려줘.
그리고 placeholder에 '여기에 긴 글을 붙여넣으세요'라고 써줘."

— 동작 수정
"요약 결과가 너무 길어. 각 줄을 최대 50자로 제한해줘.
그리고 숫자나 고유명사가 있으면 꼭 포함시켜줘."

나쁜 예:
"버튼 색 파란색으로 바꾸고, 요약 글자 줄이고,
키워드 아이콘 추가하고, 모바일에서 버튼 크게 해줘."

좋은 예:
(1차) "버튼 색 파란색으로 바꿔줘." → 확인
(2차) "요약 글자 좀 작게." → 확인
(3차) "키워드 옆에 # 기호 붙여줘." → 확인

이거 10분만 써보고 솔직하게 답해줘:

1. 이 앱 뭐 하는 앱인지 3초 안에 알겠어?
2. 첫 화면에서 뭘 해야 할지 바로 알겠어?
3. 실제로 한 번 써보고 "어, 이거 유용한데?"라는 느낌 있어?
4. 돈 내고 쓸 것 같아? 얼마까지?
5. 친구에게 추천하겠어? 누구한테?

"괜찮아 보여" 말고 구체적으로 부탁해.

제품 소개 랜딩 페이지 만들어줘.
헤드라인 한 줄, 가치 제안 세 문장,
"지금 시작하기" 버튼, 이메일 구독 폼.
흰 배경, 오렌지 포인트, 모바일 반응형.

v0.dev 프롬프트 예:
"Build a notes app with auto-tagging.
When the user types a note, suggest 3 relevant tags.
Example: 'Prep for tomorrow's team meeting' → #work #meeting #todo
Tags should be clickable as filters."

대출 이자 계산기 만들어줘.
원금, 이율, 기간 입력 → 월 상환액과 총 이자 계산.
슬라이더로 조절할 수 있게 하고,
조절할 때마다 실시간으로 숫자가 바뀌게.

영어 단어 암기 플래시카드 앱 만들어줘.
단어 10개 (예: apple, banana, cat...) 미리 넣어두고,
클릭하면 뜻이 뒤집히는 카드 UI.
"다음" 버튼과 "체크" 버튼으로 맞춘 개수 카운트.