使用人工智能规划应用
将想法转化为功能和计划
使用人工智能规划应用 是 CoddyKit 上的免费 Vibe Coding 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vibe Coding 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vibe Coding 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
From Idea to a Real App
Welcome to the big one: building a full-stack app entirely by talking to AI. Full-stack means three layers working together — the frontend (what users see), the backend (the logic on a server), and a database (where data lives).
Before you generate a single line of code, you plan. A clear plan is the difference between a clean build and a tangled mess. The good news: AI is an excellent planning partner. In this lesson you'll turn a one-sentence idea into a concrete feature list and a build plan.
Start With One Sentence
Every app starts as a fuzzy idea. Your first job is to compress it into one clear sentence that names who it's for and what it does.
Don't worry about being perfect. You'll refine it with AI. A weak idea sentence is "a cool app for tasks." A strong one is specific about the user and the value.
Here is my app idea in one sentence:
"A simple web app where freelancers can log their work hours per client and see a weekly total."
Act as a product mentor. Ask me 3 sharp questions that would change how we build this, then restate my idea as a crisp one-liner.Let AI Find the Core Features
Once your idea is clear, ask AI to break it into features. A feature is one thing a user can do: "add a time entry," "view weekly total," "create a client."
The trap here is asking for everything. Tell the AI to separate the must-haves (your MVP) from the nice-to-haves. You build the must-haves first.
Based on this app idea:
"A web app where freelancers log work hours per client and see a weekly total."
List the core features as short user actions. Split them into two groups:
1. MUST-HAVE for a first working version (MVP)
2. NICE-TO-HAVE for later
Keep the MVP list to 5 features or fewer.Sketch the Data Model
Apps store information, and how you organize that information is the data model. Think in terms of things (entities) and the fields they have.
For our timer app: a Client has a name. A TimeEntry has hours, a date, and belongs to a client. AI can propose this for you so the database design isn't guesswork.
Propose a simple data model for this app:
"Freelancers log hours per client and see a weekly total."
For each entity, give me:
- the entity name
- its fields and their types
- how entities relate to each other (one-to-many, etc.)
Keep it minimal — only what the MVP needs.Map the Screens
Next, list the screens (pages) a user moves through. Most small apps need only a handful: a main dashboard, a form to add data, maybe a settings page.
Listing screens early helps AI build navigation that makes sense and keeps you from inventing pages you don't need.
For the freelancer hours app, list the screens a user needs.
For each screen give:
- its name
- what the user sees there
- what actions they can take
Then describe how a user navigates between them. Keep it to 3-4 screens for the MVP.Choose a Tech Stack (With AI's Help)
The tech stack is the set of tools your app is built with. As a beginner, you don't need to memorize options — ask AI to recommend a beginner-friendly, well-supported stack and explain why.
For vibe coding, a common, AI-friendly stack is Next.js (frontend + backend in one) with a hosted database. Let the AI justify its pick so you understand the choice.
I'm a beginner building the freelancer hours app by prompting AI. Recommend ONE simple, modern tech stack for the frontend, backend, and database.
For each choice:
- name the tool
- one sentence on why it's beginner-friendly
- note if it deploys easily to Vercel
Favor tools that AI editors like Cursor and v0 support well.Turn the Plan Into a Spec File
A pro move: have AI write your whole plan into a single spec document (often a PROJECT.md or spec.md file). This becomes the shared memory you paste into any AI tool so it builds the right thing.
Tools like Cursor and Claude Code read project files automatically, so keeping a spec in your repo keeps the AI aligned across the whole build.
Combine everything we discussed into a single PROJECT.md spec for the freelancer hours app. Include sections:
## Idea
## MVP Features
## Data Model
## Screens
## Tech Stack
## Out of Scope (for now)
Write it in clean Markdown so I can save it in my repo and feed it to any AI tool.Order the Build Steps
You can't build everything at once. Ask AI for a build order — the sequence of steps that gets you to a working app fastest, with something runnable at each stage.
A good order usually goes: data model first, then a backend that reads/writes it, then a frontend that talks to the backend, then login last. Each step should leave you with something you can actually run.
Using our PROJECT.md, give me an ordered, step-by-step build plan for the freelancer hours app.
Rules:
- Each step should end with something I can run and see working.
- Start from the database/data model and build outward.
- Put authentication near the end.
- Number the steps so I can tackle them one prompt at a time.A Tiny Taste of the Data
Before any real database, you can sketch your data as plain JavaScript objects. This makes the data model feel concrete. Here's how our timer data might look as an array — exactly the shape a frontend would render.
Run it to see a weekly total computed from sample entries. This is the kind of logic AI will scale up into your real app.
const entries = [
{ client: "Acme", hours: 3, date: "2026-06-01" },
{ client: "Acme", hours: 2, date: "2026-06-02" },
{ client: "Globex", hours: 4, date: "2026-06-03" }
];
const total = entries.reduce((sum, e) => sum + e.hours, 0);
console.log("This week:", total, "hours");
const byClient = {};
for (const e of entries) {
byClient[e.client] = (byClient[e.client] || 0) + e.hours;
}
console.log("Per client:", byClient);Keep the Plan, Stay Flexible
A plan is a starting map, not a cage. As you build, you'll learn things — a feature is harder than expected, or a screen turns out unnecessary. That's normal.
When the plan changes, update your PROJECT.md and tell the AI. Keeping the spec current means every future prompt stays grounded in reality instead of an outdated dream.
We finished step 2 and decided to drop the 'export to CSV' feature for now and add a 'notes' field to each time entry.
Update the relevant sections of PROJECT.md to reflect these two changes, and show me only the sections that changed.What a Strong Plan Gives You
With a sentence-sized idea, an MVP feature list, a data model, a screen map, a stack, and an ordered build plan saved in a spec file, you're ready to build with confidence.
Every prompt from here can reference this plan, so the AI builds your app — not a generic one. Planning feels slow, but it's the fastest path to a real, working full-stack app.
Quick Check
Let's lock in the planning workflow.
Recap: Plan First, Build Smart
You learned to turn a fuzzy idea into a buildable plan with AI:
- Compress the idea into one clear sentence
- Split features into MVP vs. later
- Sketch a minimal data model and screen map
- Pick a beginner-friendly tech stack
- Save it all in a PROJECT.md spec and get an ordered build plan
Next up: wiring the frontend and backend together so your screens can actually talk to a server.
常见问题解答
「使用人工智能规划应用」课时是免费的吗？
是的 — 「使用人工智能规划应用」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vibe Coding 课程的其余内容，请升级到 CoddyKit PRO。 Vibe Coding 课程共包含 4 节课。
「使用人工智能规划应用」这节课中我会学到什么？
将想法转化为功能和计划 你通过在浏览器中直接运行的动手代码来练习 Vibe Coding，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vibe Coding 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vibe Coding 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「使用人工智能规划应用」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vibe Coding 课中编写并运行代码吗？
能。每节 Vibe Coding 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。