From Idea to App with AI | Workshop Resources

What's on this page

1 Your Master Prompt

2 Your App's Game Plan

3 How to Prompt

4 Example Prompts

5 Setup Checklist

6 When Things Go Wrong

The Master Prompt Template

The single most important thing from this workshop. Start here.

▼

Master Prompt Template

I want to build a [type of application] for [specific target user]. ## The Problem [Describe the specific pain point this solves. Be concrete. "Time tracking is manual and invoices are always late" is better than "improve efficiency."] ## Who Uses This - Primary user: [Role, company size, technical ability] - How they currently solve this: [Spreadsheets? Paper? Another tool?] - Why current solution fails: [What breaks? What's painful?] ## Core Features (MVP only) 1. [Feature 1 - the single most important thing] 2. [Feature 2] 3. [Feature 3] (Keep this to 3-5. Not 15. Not "everything." The minimum to be useful.) ## What It Should Feel Like - Design style: [Clean/minimal? Bold/colorful? Data-heavy?] - Reference apps: [Name 1-2 apps whose feel you like] - Navigation: [Sidebar? Top nav? Tabs?] ## Technical Preferences - Must work on: [Desktop? Mobile? Both?] - Data storage: [Real database, not just browser storage] - Authentication: [Who can log in? Just me? My team? Clients?] - [Any other constraints: "No paid services," "Must export to PDF," etc.] ## What Success Looks Like [One sentence. "I can log hours and generate a client invoice in under 2 minutes."]

Pro tip:

Spend 80% of your time on this prompt. The better you describe what you want, the better the AI builds it. Vague inputs = vague outputs.

The Quick-Start Prompt

Don't want to fill out the template yourself? Paste this into Claude and it will interview you, then build the master prompt for you.

Copy & Paste This Into Claude

You are an expert app architect helping a non-technical business owner turn their idea into a clear, detailed specification that an AI coding tool can use to build a working application. Your job is to interview me about my app idea. Ask me one question at a time. Keep your questions conversational and jargon-free. After each answer, acknowledge what I said and ask the next question. Here are the topics you need to cover (in roughly this order): 1. THE BIG PICTURE - What do I want to build? What type of app is it? (Don't let me get away with vague answers. Push for specifics.) 2. THE PROBLEM - What pain point does this solve? How am I (or my team/customers) currently handling this? What breaks or frustrates people about the current way? 3. THE USERS - Who exactly will use this? What's their role? How technical are they? How many users are we talking about? 4. CORE FEATURES - What are the 3-5 most important things this app needs to do on day one? (If I list more than 5, push back and make me prioritize. Help me separate "must have" from "nice to have.") 5. LOOK AND FEEL - What should it feel like? Are there apps I already use and like the design of? Should it feel data-heavy or minimal? What kind of navigation makes sense? 6. TECHNICAL NEEDS - Does it need to work on mobile? Does it need user logins? Does it need to handle payments, send emails, generate PDFs, or integrate with anything? Any hard constraints? 7. SUCCESS CRITERIA - How will I know this app is "done enough" to be useful? What's the one thing I should be able to do with it that I can't do today? After you've gathered all of this, compile everything into a structured master prompt using this exact format: --- I want to build a [type of application] for [specific target user]. ## The Problem [Filled in from our conversation] ## Who Uses This - Primary user: [Role, company size, technical ability] - How they currently solve this: [Current method] - Why current solution fails: [Pain points] ## Core Features (MVP only) 1. [Feature 1] 2. [Feature 2] 3. [Feature 3] ## What It Should Feel Like - Design style: [From our conversation] - Reference apps: [Any mentioned] - Navigation: [Chosen approach] ## Technical Preferences - [All technical needs discussed] ## What Success Looks Like [One sentence from our conversation] --- Present the completed master prompt and ask me to review it. If I want changes, adjust it. When I approve it, tell me this prompt is ready to paste into Claude Code or any AI coding tool to start building. Start by asking me: "What's the app idea? Give me the elevator pitch - what does it do and why do you need it?"

How to use this:

Open claude.ai (free), paste this prompt, and answer the questions. In about 5 minutes you'll have a polished master prompt ready to build from.

Your App's Game Plan

Phases, permissions, CLAUDE.md, guardrails, and AI behavior rules.

▼

Why You Need This

AI can build fast. That's the good news. The bad news? It'll build the wrong thing just as fast as the right thing. Without a game plan, you'll end up three hours deep with an app that looks great but falls apart the second a real person uses it.

You don't need a 50-page document. You need clarity on five things before you start building.

1. Build in Phases (Not All at Once)

This is the single biggest mistake people make. They try to build the whole vision on day one. Don't. Break it into phases.

Example: Phased Approach

Phase 1 (Week 1): Walk The absolute minimum to be useful. For a time tracker: log hours, assign to projects, see a weekly view. Nothing else. Use it yourself for a week. Phase 2 (Week 2-3): Run Add the next layer based on what you learned. Invoicing, PDF export, client management. Only build what Phase 1 proved you actually need. Phase 3 (Month 2): Sprint Polish, dashboard, team features, integrations. By now you know exactly what matters because you've been using it.

The rule:

If you can't use Phase 1 by itself, your Phase 1 is too small. If Phase 1 has more than 5 features, it's too big.

2. Define Your Users and Permissions

Who can log in? What can they see? What can they do? This sounds obvious, but if you don't tell the AI, it will either build everything wide open (anyone can see everything) or skip login entirely.

Ask yourself:

Questions to Answer

- Who needs to log in? Just me? My team? My clients? - Can everyone see everything, or do some people see only their own data? - Who can delete things? Who can only view? - Do clients need access, or is this internal only? - Does anyone need "admin" level control?

If you skip this:

You'll build an app where any user can see every client's data, delete anyone's records, and there's no audit trail. That's not a software problem. That's a lawsuit waiting to happen.

3. Use Real Data, Not Demo Data

The AI will create fake sample data to make the app look good. "Acme Corp," "Jane Doe," 100 hours logged. It looks impressive in a demo. It tells you nothing about whether the app works for your business.

As soon as you have a working Phase 1, put YOUR data in it. Your clients. Your projects. Your actual hours. You'll immediately discover things that don't work. That's the point.

Tell the AI this explicitly:

"Use a real database to store data. Don't use mock data or browser storage. I need to be able to close the browser and come back to my data."

4. Give Your Project a Brain (the CLAUDE.md file)

This is a trick that separates amateurs from people who actually ship working software with AI.

Create a file called CLAUDE.md in your project folder. This is your project's instruction manual. Every time the AI starts a new session, it reads this file first and remembers everything.

What Goes in CLAUDE.md

# [Your App Name] ## What This App Does [One paragraph summary - paste your master prompt's problem statement here] ## Tech Stack [After building Phase 1, the AI will have chosen technologies. Write them down here so future sessions stay consistent.] - Frontend: [e.g., React, Next.js] - Backend: [e.g., Node.js, Python] - Database: [e.g., SQLite, PostgreSQL] ## Key Decisions Made - [Date]: Decided to use [X] because [reason] - [Date]: Changed [Y] from [old] to [new] because [reason] ## Current Phase Phase [X] - [Description] ## What's Working - [Feature 1] - done and tested - [Feature 2] - done and tested ## Known Issues - [Bug or limitation 1] - [Bug or limitation 2] ## Rules for the AI - Before making changes, explain what you plan to do and wait for approval. - Only change what I specifically ask. Don't refactor or "improve" other things. - Never use hardcoded or mock data. Everything comes from the database. - All pages must require login. No public pages. - Never delete data. Use soft deletes (mark as inactive, don't remove). - Follow existing patterns in the codebase. New features should match the current style. - Keep dependencies minimal. Ask before adding new libraries. - After changes, verify the app runs and test what you built. - Always use the existing database schema. Don't create new tables without asking.

Update this file every time you finish a session. It takes 2 minutes and saves you hours of re-explaining context to the AI later.

5. The Non-Negotiable Guardrails

These are things the AI won't think about unless you tell it to. Include them in your master prompt or CLAUDE.md file.

Every page requires login

Tell the AI: "No page should be accessible without logging in first." Otherwise it'll build pages anyone on the internet can see.

Never delete data permanently

Tell the AI: "When a user deletes something, mark it as inactive. Don't remove it from the database." This saves you when someone accidentally deletes something important.

Use a real database

Tell the AI: "Store all data in a database. Don't use localStorage or browser storage." Without this, your data disappears when you clear your browser.

No secrets in the code

Tell the AI: "Store passwords, API keys, and secrets in environment variables, never in the code files." This is security 101, but the AI will take shortcuts if you don't say this.

Back up your work with Git

Git is a tool that tracks every change to your project. Think of it as "save points" in a video game. You don't need to learn Git. Just tell Claude Code these phrases:

Git Commands in Plain English

To create a save point: "Commit the current working state to Git with the message 'added time tracking feature'" To go back to a save point: "Show me the recent Git commits" then "Revert to commit [the one you want]" To see what changed: "Show me what files changed since the last commit"

Claude Code handles all the Git commands for you. You just describe what you want in English. Do this after every feature that's working. You'll thank yourself later.

Don't trust it blindly

The AI will tell you things work when they don't. Always click through the app yourself. Try to break it. Enter weird data. Leave fields blank. If you can break it, your users will break it.

The honest truth:

AI can get you 80% of the way to a working app. That last 20%, security, edge cases, deployment, performance under real load, is where experience matters. For internal tools and prototypes, the 80% might be enough. For anything customer-facing or handling real money, get an experienced technical person involved before going live.

6. Keeping the AI Under Control

The guardrails above protect your project. These rules protect you from the AI itself. Without them, it will "help" you in ways that create more problems than they solve.

Make it explain before it builds

The AI will happily rewrite half your app without telling you what it's doing. Force it to show its hand first.

Add to CLAUDE.md

Before making any changes, tell me: 1. What you're going to change 2. Which files you'll modify 3. What might break Wait for my approval before writing any code.

Lock it to the task at hand

You ask for a "Save" button and the AI decides to also refactor the navigation, rename variables, and "improve" the layout. This is the #1 frustration. Stop it before it starts.

Add to CLAUDE.md

Only change what I specifically ask you to change. Do not refactor, rename, reorganize, restyle, or "improve" anything I didn't mention. If you think something else should change, tell me about it and let me decide.

No fake data, no shortcuts

The AI loves to hardcode data to make things look good. A chart that shows up but pulls from fake numbers. A list that looks populated but isn't connected to the database. Looks great in a demo. Completely useless in real life.

Add to CLAUDE.md

Never use hardcoded or mock data. All data displayed in the app must come from the database. If there's no data yet, show an empty state with a message like "No entries yet" instead of fake examples.

Make it handle the ugly stuff

The AI builds the "happy path," where everything goes perfectly. Real users don't follow the happy path. They leave fields empty, enter text where numbers go, click Submit twice, and use it on their phone. Tell the AI to plan for this.

Add to CLAUDE.md

Every form must validate inputs before saving. Show clear error messages when something is wrong. Handle empty fields, wrong data types, and duplicate entries. The app should never crash or show a blank screen because of bad input.

Don't let it add complexity you don't need

The AI will install 10 libraries when 2 would work. Each library is a future thing that can break, need updates, or cause conflicts. Keep it simple.

Add to CLAUDE.md

Keep dependencies minimal. Before adding any new library or package, tell me why it's needed and whether we can accomplish the same thing with what we already have. Prefer simple solutions over clever ones.

Force it to follow your patterns

If the app uses one style of navigation, one color scheme, one way of building pages, the AI should follow that. Otherwise you end up with an app that looks like three different people built it.

Add to CLAUDE.md

Follow the existing patterns in the codebase. Match the current design style, component structure, and naming conventions. New features should look and feel like they belong with everything else already built. If you're unsure about the pattern, ask me.

Make it verify its own work

Don't just take the AI's word for it. Tell it to check itself.

Add to CLAUDE.md

After making changes, verify that the app still starts and runs without errors. Test the feature you just built and confirm it works. Also check that existing features still work. Report what you tested and the results.

The all-in-one version:

Every rule above is designed to be copied into your CLAUDE.md file. You don't have to use all of them on day one. Start with "explain before you build" and "lock it to the task." Add the rest as you run into problems. The more rules you give the AI, the more predictable it behaves.

The Prompting Framework

5 rules for writing effective follow-up prompts.

▼

React to what you see

Look at what the AI built. What's right? What's wrong? What's missing? Your next prompt is your reaction.

One thing at a time

Don't ask for 10 changes in one prompt. Add one feature, fix one issue, or adjust one behavior. This keeps the AI focused and the results predictable.

Describe the outcome, not the implementation

"Users should be able to start and stop a timer with one click" is better than "add a JavaScript setInterval function for timing." You're the product person. Let the AI be the engineer.

Give context about why

"Add a notes field to time entries so employees can describe what they worked on for client transparency" is better than "add a notes field." The why helps the AI make better design decisions.

Reference what exists

"On the time entry form we already have, add a dropdown for selecting the project" is better than describing the whole form again. Build on what's there.

Common mistake:

Don't start over when something goes wrong. Tell the AI what's broken and ask it to fix that specific thing. Starting from scratch throws away everything that was working.

Example Prompts from Today's Workshop

The 4 prompts used to build the Time Tracker app live.

▼

Step 1: Foundation

After filling out the master prompt template, the first prompt establishes the entire application.

Prompt 1: Master Prompt

I want to build a time tracking and invoicing web application for my consulting business. ## The Problem I run a consulting firm with 5-10 contractors. Right now we track time in spreadsheets and manually create invoices in Word. Hours get lost, invoices go out late, and I have no visibility into how time is being spent across projects. ## Who Uses This - Primary user: Me (business owner) and my team of contractors - Currently using: Google Sheets for time tracking, Word for invoices - Why it fails: People forget to log time, no timer, invoices take 30+ min to create manually ## Core Features (MVP) 1. Time entry with start/stop timer and manual entry 2. Project and client management 3. Invoice generation from tracked time ## What It Should Feel Like - Design: Clean, professional, minimal. Think Stripe's dashboard. - Navigation: Sidebar with main sections - Colors: Neutral with one accent color ## Technical Preferences - Must work on desktop and mobile browsers - Use a real database (SQLite is fine for now) - Authentication: Simple login for my team - Must be able to export invoices to PDF ## What Success Looks Like I can see all hours logged this week and generate a client invoice in under 2 minutes.

Step 2: Enhance Time Tracking

After seeing the basic app, the next prompt adds depth to the core feature.

Prompt 2: Time Tracking

The time entry system needs more depth. Add these capabilities: - A one-click timer that runs in the background. When I start a timer, I select the project and optionally add a description. When I stop it, the entry is automatically saved. - A weekly timesheet view that shows all entries in a grid (days across the top, projects down the side) so I can see the full picture at a glance. - The ability to edit or delete past entries in case someone logs something wrong. - Show running totals: hours this week, hours this month, hours per project.

Step 3: Invoicing

Adding real business value by turning tracked time into money.

Prompt 3: Invoicing

Add invoicing capabilities: - Let me select a client and a date range, then pull in all unbilled time entries for that period. - Show line items grouped by project with: description, hours, hourly rate, and line total. - Include fields for: my company info, client info, invoice number (auto-increment), payment terms, and due date. - Generate a professional-looking invoice that I can export to PDF. - After generating an invoice, mark those time entries as "billed" so they don't show up on future invoices. - Keep a list of all past invoices with status (draft, sent, paid).

Step 4: Polish and Dashboard

Making it feel like a real product, not a prototype.

Prompt 4: Dashboard & Polish

Add a dashboard as the landing page after login: - Total hours this week and this month (with comparison to last period) - Revenue this month (from invoices) - Outstanding invoices (total amount unpaid) - A chart showing hours per project for the current month - Recent activity feed (last 10 time entries across the team) Also make sure the entire app is responsive and works well on mobile. The sidebar should collapse into a hamburger menu on small screens.

Getting Started: Your Setup Checklist

Step-by-step install guide for Windows and Mac. About 15 minutes.

▼

Create a Claude account

Go to claude.ai and sign up. The free tier lets you brainstorm and draft your master prompt. To use Claude Code (the building tool), you'll need the Pro plan ($20/month) or Max plan ($100/month for heavy use).

Install VS Code

Download from code.visualstudio.com. Click the big blue button, open the downloaded file, and drag it to your Applications folder. Free.

Install Node.js (required for Claude Code)

Go to nodejs.org and click the big green LTS button. Open the downloaded file and follow the installer. Click "Continue" through each step. This gives you Node.js and npm (the tool that installs Claude Code).

Install Claude Code

Open Terminal (press Cmd + Space, type "Terminal", hit Enter). Then paste this command and press Enter:

npm install -g @anthropic-ai/claude-code

Wait for it to finish. You'll see some text scroll by. When you get your cursor back, it's done.

Install Git (save-point system)

Git is probably already on your Mac. To check, open Terminal and type git --version and hit Enter. If it shows a version number, you're good. If it asks you to install "command line developer tools," click Install and wait. That's it.

Create a project folder and start building

Create a new folder on your Desktop (right-click > New Folder, name it something like "my-app"). Open VS Code, go to File > Open Folder, and select that folder. Then open the terminal inside VS Code (View > Terminal) and type:

claude

It will ask you to log in the first time. After that, paste your master prompt and go.

Create a Claude account

Install VS Code

Download from code.visualstudio.com. Click the big blue button, run the installer, and click "Next" through each step. Check the box that says "Add to PATH" if you see it. Free.

Install Node.js (required for Claude Code)

Go to nodejs.org and click the big green LTS button. Run the downloaded file and click "Next" through the installer, accepting defaults. This gives you Node.js and npm (the tool that installs Claude Code).

Important:

After installing, close and reopen any terminal/command prompt windows. The install won't be recognized until you do this.

Install Git (save-point system)

Download from git-scm.com/download/win. Run the installer. Click "Next" on every screen without changing anything. The defaults are fine. This also installs "Git Bash," a terminal that works better with Claude Code on Windows.

Install Claude Code

Open PowerShell (click the Start menu, type "PowerShell", click it). Then paste this command and press Enter:

npm install -g @anthropic-ai/claude-code

Wait for it to finish. You'll see text scroll by. When you get your cursor back with no red error text, it's done.

If you see an error about "execution policy":

Run this command first, then try the install again:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Create a project folder and start building

Create a new folder (right-click on Desktop > New > Folder, name it "my-app"). Open VS Code, go to File > Open Folder, and select that folder. Then open the terminal inside VS Code (View > Terminal) and type:

claude

It will ask you to log in the first time. After that, paste your master prompt and go.

Stuck on setup?

Ask Claude itself. Go to claude.ai (free) and type: "I'm trying to install Claude Code on [Mac/Windows]. Walk me through it step by step." It will guide you through whatever goes wrong.

What About GitHub?

You'll hear "GitHub" come up a lot. Here's the simple version: Git is the save-point system on your computer. GitHub is a website where you can store a backup of your project in the cloud. Think of Git as saving to your hard drive, and GitHub as saving to Dropbox.

You don't need GitHub to get started. But when you're ready, it gives you two things: a cloud backup of your entire project (in case your computer dies), and a way to share your project with a developer if you ever bring one on to help.

To set it up, just tell Claude Code: "Create a GitHub repository for this project and push the code." It will walk you through connecting your account.

github.com (free for personal projects)

What Everything Costs

Free Claude.ai chat (brainstorming, master prompt writing) VS Code (your workspace) Node.js (required for Claude Code) $20/month Claude Pro subscription (includes Claude Code access) Good for getting started and lighter projects. $100/month Claude Max subscription (higher usage limits) Worth it if you're building daily or on larger projects. $0-20 per project API usage costs vary based on how much you build. A simple app like today's demo might cost $5-10 total.

When Things Go Wrong (And They Will)

Copy-paste fixes for the 6 most common problems.

▼

"The app won't start"

This is the most common problem and the easiest to fix. Copy the error message (the red text in your terminal) and paste it to Claude Code. Say: "The app won't start. Here's the error." Nine times out of ten, it fixes itself.

What to Say

The app won't start. Here's the error I'm seeing: [paste the error message here] Fix this without changing any features that are currently working.

"Something that was working just broke"

This happens when the AI changes something it shouldn't have. First line of defense: Git. If you've been committing after each working change (like we talked about in the guardrails), you can go back.

What to Say

The [specific feature] was working before but now it's broken. I didn't ask you to change that. Undo whatever you changed to that feature and keep the other changes you made.

Prevention:

Before asking for a new feature, tell the AI: "Before you make changes, commit the current working state to Git." This creates a save point you can always return to.

"The AI keeps making the same mistake"

If you've asked it to fix something two or three times and it keeps doing the same wrong thing, the problem is almost always that you're being too vague. Get specific.

Bad vs. Good

Bad: "The layout is wrong. Fix it." Good: "The sidebar is overlapping the main content area on screens smaller than 1200px wide. The sidebar should collapse into a hamburger menu on screens under 768px."

"I'm stuck in a loop and nothing is working"

Sometimes the conversation context gets so long and tangled that the AI loses the plot. When this happens, start a fresh conversation. Don't start the project over. Just start a new chat session.

What to Say in a Fresh Session

I'm picking up an existing project. Read the CLAUDE.md file and the codebase to understand where things stand. Then I'll tell you what I need fixed.

This is why the CLAUDE.md file matters. It gives the AI instant context without you having to re-explain everything.

"The AI changed a bunch of stuff I didn't ask for"

This is common and frustrating. The AI sometimes "improves" things you didn't ask it to touch. Prevent this by being explicit in your prompts.

Add This to Your CLAUDE.md Rules

- Only change what I specifically ask you to change. Do not refactor, rename, reorganize, or "improve" anything else without asking me first.

"I have no idea what just happened"

The AI will sometimes spit out a wall of technical output. You don't need to understand all of it. Ask it to explain.

What to Say

Explain what you just did in plain English. What changed? What should I test to make sure it's working?

The nuclear option:

If everything is truly broken and you can't recover, you can revert to any previous save point with Git. Type git log --oneline to see your save points, then ask the AI: "Revert the project back to commit [the code from the save point you want]." Everything goes back to that exact state.

Want to Talk Through Your App Idea?

No pitch. No pressure. Just a conversation about what you're trying to build and whether AI-assisted development is the right fit.

Book a Free Call