Your First Build Conversation
Four messages. One working flashcard app. Watch StudyDeck get born, including the moment a vague wish goes sideways and how one precise word fixes it.
Time to start your build. Say you're studying for a history exam and paper flashcards keep ending up in the laundry. You want StudyDeck: a little app that shows a question, flips to the answer, and moves to the next card.
Here are the four messages that created it. A prompt, by the way, is just a message you send the genie: your wish, written down. Prompt 1:
You: Make me a web page called StudyDeck for studying
flashcards. Show the title "StudyDeck" at the top, and below
it one white card showing this question: "What year did
World War 2 end?"
AI: Done! Save these three files in one folder: index.html,
style.css, and script.js. Then double-click index.html to
open your app.
...the three files...The screen after prompt 1: the title StudyDeck, and one white card with the question on it. (Why three files instead of one? Module 2 answers that properly. Short version: one file for the words, one for the look, one for the doing.)
Prompt 2 adds the rest of the cards and a way to move between them:
You: Add two more cards: "What is the capital of Japan?" with
the answer "Tokyo", and "Who painted the Mona Lisa?" with the
answer "Leonardo da Vinci". Also add a button under the card
labeled "Next card" that shows the next question when clicked.
AI: Done! The cards are stored in a list, and the "Next card"
button walks through them in order.The screen after prompt 2: same page, plus a "Next card" button that does exactly what the message asked. First try, no back and forth.
Prompt 2 worked on the first try. Based on how the genie operates, why?
- AIt said exactly what to add and where: the precise card text, the exact button label, and what clicking should do
- BIt was phrased politely, and the genie rewards good manners
- CIt was long, and longer prompts always work better
- DIt asked for several unrelated features at once, which keeps the genie focused
Prompt 3 brings the flip:
You: Add a "Flip" button next to "Next card". Clicking "Flip"
shows the answer side of the current card. Clicking it again
shows the question side.
AI: Done! "Flip" now switches the current card between its
question and its answer.Then prompt 4, and your first wish gone sideways. The card looked a little plain, so:
You: Make the card stand out more.
AI: Done! I gave the card a bright green background and a
large shadow so it pops.Was the wish granted? Technically, yes. A bright green flashcard absolutely stands out. But it's not what you pictured: you wanted the card white, like a real index card, with a warm border. "Stand out more" lived in your head, and the genie can't see in there. So it picked A meaning, confidently, and granted that.
No frustration needed. The fix is one message that names the exact change:
You: Undo that. Keep the card white, and give it a 2 pixel
orange border instead.
AI: Done! The card is white again with a 2 pixel orange border.And now the card looks like an index card with a warm orange frame (a pixel is one tiny dot on the screen, so 2 pixels is a thin line). That's StudyDeck version zero: three cards, Flip, Next card, and a look you chose. Four prompts, zero code written by you.
Repair the vague wish yourself. "Make the card stand out more" failed because it means a hundred different things. The fixed message names the exact look you wanted: a white card with a 2 pixel border in one specific warm color, the warm color the genie's reply named, like an index card's frame. Fill in the missing color word: ____
You: Undo that. Keep the card white, and give it a
2 pixel ____ border instead.StudyDeck v0 works. You have ideas: multiple decks, a score counter, sounds, a timer. What's the best NEXT message to send, based on how this conversation went?
- A"Add a line under the card that says 'Card 1 of 3' and counts up as I click Next card." One small, precise change you can check
- B"Add decks, a score counter, sounds, and a timer." Get all the ideas in while the genie is warmed up
- C"Start the app over from scratch, now that I know what I want."
- D"Make StudyDeck better."
- A prompt is just a message you send the genie: your wish, written down.
- StudyDeck v0 took four prompts: title and first card, more cards plus "Next card", the "Flip" button, and a look fix.
- Precise prompts worked first try because they named exact text in quotes, exact labels, and exact click behavior.
- "Make the card stand out more" went sideways: the genie granted A meaning of "stand out", not YOUR meaning.
- The repair wasn't frustration, it was precision: "keep the card white, give it a 2 pixel orange border."
- Good next steps are small and checkable, one wish per message.
Next: where do these conversations actually happen? A tour of the three kinds of tools, and why you shouldn't spend a week choosing one.