Build a project from a description
From idea to working app in one prompt
⏱ Est. ~8 min
01 · Read
Let's build something real. So far you've created single files and made small edits. But Claude Code can handle a lot more — you can hand it a full project description and watch it build the whole thing.
The secret to good results is being specific enough. The more details you give about features, behavior, and design, the closer Claude gets to what you want on the first try.
We're going to build a bookmark manager — a simple web app to save, view, and delete bookmarks. No server — everything runs in the browser with localStorage.
02 · Prompt template
Give Claude a detailed project description. Notice how specific this prompt is — listing each feature, describing behavior, and specifying the technical approach.
Make me a simple bookmark manager web app:
- An HTML page with a form for adding bookmarks (URL and title)
- JavaScript that saves bookmarks to localStorage
- A list that displays all saved bookmarks
- Each bookmark has a delete button
- Clean, modern CSS styling
- All as a single-page app (no server needed)
03 · Real-machine exercise
Open the HTML file Claude built in a browser to try it. Add a few bookmarks, refresh to confirm they persist, and test the delete buttons.
open index.html
04 · Checklist
Test the bookmark manager thoroughly. Check off each feature once you've verified it works.
- I can add a bookmark with URL and title
- Bookmarks show up in the list
- Delete button removes a bookmark
- Bookmarks persist after refresh
05 · Quiz
What makes a prompt more effective for Claude Code?
- Fewer words is better
- Writing in code instead of natural language
- Asking everything at once
- Being specific about features, tech stack, and structure
06 · Fill in the blank
When asking Claude Code to build a project, giving a _____ description with concrete features produces much better output than vague requests.
07 · Read
You just built a complete working web app by describing it in natural language. Think about how long this would take by hand — setting up the HTML structure, writing the JavaScript for localStorage, handling form submission, building delete logic, styling everything with CSS.
With Claude Code, the first version takes seconds. If something's not quite right, you iterate: ask Claude to fix it, add features, change the design.
This is the power of AI-assisted development. You bring the ideas and judgment; Claude brings the speed.
Key points
- Detailed prompts produce better output — list every feature you want
- Always test the output yourself before continuing
- When something's wrong, describe the problem and ask Claude to fix it
- Claude builds in seconds what would take much longer by hand
08 · Quiz
You want Claude Code to build a to-do list app. Which prompt produces the best result on the first try?
- Build a to-do list web app with an input field to add tasks, a list displaying all tasks, a checkbox to mark complete, a delete button on each task, and localStorage so tasks persist after refresh
- Build a to-do app
- Make something useful with JavaScript
- Build a to-do app with all the features
09 · Fill in the blank
After Claude builds a project, always _____ the output yourself before continuing.
Other lessons in this chapter
⚠ The full interactive experience needs JavaScript. Please enable it and reload.
※ This is an independent Traditional Chinese teaching project — not an official Anthropic product. Claude™ is a trademark of Anthropic, PBC.