This workshop is built and optimized for Mac. If you are on Windows, please read this carefully.
The honest truth: Windows will create extra friction at almost every step. Some tools will not install the same way. Some commands will fail. You will spend 10-50x more time troubleshooting setup issues than Mac users.
This is not gatekeeping. This is protecting your time.
If you are serious about building with AI, if you want to keep up with the biggest technological shift of our lifetime, the single best investment you can make is a Mac.
Minimum specs:
MacBook Pro or MacBook Air
M1 chip or newer (M1, M2, M3, M4)
16GB RAM (32GB is the new recommended minimum)
512GB storage
A refurbished M1 MacBook Pro costs $600-800. That is the cost of keeping up with AI. Your computer is no longer just a tool, it is becoming a full-time employee. It needs the resources to do the work.
Windows users CAN follow along. Every step includes Windows instructions where they differ. But expect additional troubleshooting, and lean heavily on the Screenshot Survival Loop (page 5) when things break.
You have been warned. Let's build.
Every app you will ever build follows these exact 12 steps. No exceptions. Bookmark this page.
Think of building an app like opening a restaurant. Here is the entire journey:
Even a vague one is enough.
I want to open a restaurant.
You do not need a detailed plan yet. "I want a tool that tracks my customers" or "I want an app that generates social media posts" is enough to start.
Start a brainstorming conversation.
Sit down with a business consultant to talk through the concept.
Go to claude.ai and start a new conversation. This is your planning partner, different from Claude Code in VS Code. This one is your advisor, brainstormer, and troubleshooter.
Use the Golden Research Prompt (see Golden Prompts Library).
Go look at other successful restaurants for inspiration, what's on their menu, how they set up their kitchen.
Claude will search for existing GitHub repositories, Python libraries, CLIs, and APIs that already do something similar to your idea. Why build from scratch when 50% of your app may already exist?
Claude generates a Product Requirements Document, your blueprint.
Write the menu and design the kitchen layout before buying a single ingredient.
The PRD describes what your app does, what features it has, and how it should work. Claude writes this for you based on your conversation. It is the blueprint the developer follows.
Save it as a Markdown (.md) file into your project folder.
Print the blueprints and hand them to your contractor.
Markdown files are small, formatted text files that Claude can read perfectly. Download your PRD and place it in the project folder on your computer.
Open your project folder in VS Code. Start Claude.
Unlock the kitchen doors and let the chef in.
VS Code is your workspace, where Claude does all the building. Open your project folder here and launch Claude Code to get started.
Hand Claude your PRD file and the Superpowers framework URL.
Hand the chef the menu, the recipes, and the kitchen rules.
The Superpowers framework (https://github.com/obra/superpowers) gives Claude a professional development workflow, it plans before building, tests as it goes, and reviews its own work. Always use it.
Watch Claude work. Approve permissions. Click "yes."
The chef is cooking. You're the owner watching through the kitchen window, tasting as you go.
Claude will install software, create files, write code, and build your app. It will ask for permission along the way, say yes. This is the "whack-a-mole" phase. Just keep clicking yes.
Type "run server" to see it in your browser.
Taste-test the food before opening night.
When Claude finishes building, you tell it to run the server. It gives you a URL (like localhost:3000). Click it. Your app opens in your browser. Test every button and feature.
Something will break. That is normal. That is the process.
A customer sends food back. The chef fixes the dish. Repeat until perfect.
When something doesn't work: take a screenshot of the error, paste it to Claude, and say "fix this." Claude fixes it. You test again. This loop IS software development. Professional developers do this hundreds of times per project.
Back up your code to the cloud.
Lock your recipe book in a safe deposit box. If the restaurant burns down, your recipes survive.
Tell Claude: "Push to GitHub at [your repository URL]." Your code is now safely backed up. Also say: "Write a good README file", this documents everything your app does.
Your app goes live on the internet.
Grand opening. The doors are open. Customers can walk in.
Connect your GitHub to Railway.app. Add your API keys in the Variables section. Railway builds your app and gives you a public URL. Anyone in the world can now use your app.
Before we install anything, read this page. It will save you hours of frustration.
You are the restaurant owner. Claude is the chef. You never need to cook, you just need to know what you want on the menu.
Every single time something breaks or you do not understand what is happening, do this:
Take a screenshot of what you see on your screen
Paste it to Claude (in the browser or in VS Code)
Describe the problem in plain English ("this button doesn't work" or just "fix this")
Claude will tell you exactly what to do
This solves 90% of all problems you will ever encounter. It is not optional. It is your superpower.
Press Cmd + Shift + 5 to open the screenshot toolbar
Click Options → change "Save To" to Clipboard
Press Escape to close the toolbar
Now press Cmd + Shift + 4 anytime to take a screenshot
Click and drag to select the area you want
The screenshot is saved to your clipboard
Go to Claude and press Cmd + V to paste it
You only change the Clipboard setting once. After that, Cmd+Shift+4 captures and Cmd+V pastes.
Press Win + Shift + S to open the Snipping Tool
Click and drag to select the area you want
A notification appears, click it and then click the Copy button
Go to Claude and press Ctrl + V to paste it
Checkpoint: Take a screenshot of anything on your screen right now. Paste it into a Claude conversation. If Claude responds to what it sees, you have mastered the most important skill in this entire workshop.
| Role | Who | What They Do |
|---|---|---|
| Restaurant Owner | You | Decide what to build. Describe what you want. Test results. Make decisions. |
| Head Chef | Claude Code (in VS Code) | Writes code. Builds features. Fixes bugs. Does all the technical work. |
| Business Consultant | Claude (in the browser) | Helps you plan. Brainstorms ideas. Troubleshoots problems. Teaches you concepts. |
| The Kitchen | VS Code | Your workspace. Where Claude does the building. Where your files live. |
| Recipe Backup | GitHub | Cloud backup of your code. Never lose your work. |
| The Building | Railway | Hosts your app on the internet 24/7. Gives you a public URL. |
You never write code. You never need to understand code. You describe what you want, and Claude builds it.
Complete each step before moving to the next. Check them off as you go.
You do not need to memorize these. Come back to this page when you see a word you do not understand.
| Term | What It Is | Restaurant Analogy |
|---|---|---|
| Claude | An AI made by Anthropic. Your developer and advisor. | Your head chef and business consultant |
| Claude Code | Claude that lives inside VS Code. It can build things on your computer. | The chef who works IN your kitchen |
| VS Code | A free app by Microsoft. Your workspace for building. | The kitchen where all the work happens |
| Terminal | A text-command window inside your computer. How computers worked before mice existed. | The kitchen intercom, you speak, the kitchen executes |
| Warp | A modern, prettier terminal app (advanced, covered later). | A high-end kitchen intercom system |
| GitHub | Cloud storage for code. Like Dropbox but for developers. | Your recipe binder in a safe deposit box |
| Railway | A service that hosts your app on the internet 24/7. | The physical restaurant building on a busy street |
| OpenRouter | A service that gives your app an AI brain. Routes requests to different AI models. | A food distributor that delivers specialty ingredients from any farm |
| Super Whisper / Wispr Flow | Voice-to-text apps. You talk, text appears. | A stenographer who writes down everything you say |
| Homebrew | A software installer for Mac. One-time setup. | The restaurant supply store, where you get kitchen equipment |
| Term | What It Is | Restaurant Analogy |
|---|---|---|
| PRD | Product Requirements Document. Your app's blueprint. | The menu + kitchen layout plans |
| API | Application Programming Interface. A way for apps to talk to each other. | A waiter, takes your order to the kitchen, brings food back |
| API Key | A password that lets your app use an external service. | The waiter's name badge, proves they work at your restaurant |
| .env file | A secret file that stores your API keys. Never share it. | The secret recipe book locked in the office safe |
| Localhost | Your app running on YOUR computer only. Not on the internet yet. | Cooking at home to taste-test before the grand opening |
| Deploy | Making your app available on the internet. | Grand opening day, doors open to the public |
| Server | A computer that serves your app to users. | The building itself, keeps the lights on 24/7 |
| Bash | A language for giving text commands to your computer. | Orders written on the kitchen ticket board |
| JSON | A way computers exchange data. Looks like organized text with colons and brackets. | A standardized order ticket, like a mini Excel row |
| Markdown (.md) | A formatted text file with headers, bold, and bullet points. Small and clean. | A formatted recipe card |
| Bug | Something that doesn't work as expected. | A customer sends food back |
| Debug | Finding and fixing bugs. | The chef fixes the dish based on feedback |
| Token | The unit AI uses to process text. Like words but smaller. | Ingredients, every dish uses some, bigger dishes use more |
| Repository (repo) | A project folder on GitHub. | One restaurant's complete recipe collection |
| Commit | Saving a snapshot of your code with a note about what changed. | Dating today's menu version with a changelog |
| Push | Uploading your latest code to GitHub. | Sending the updated menu to all franchise locations |
| README | A document that explains what your app does and how to set it up. | The "About Us" page on your restaurant's website |
| Domain | Your app's website address (like myapp.com). | The sign above the door with your restaurant name |
| Superpowers | A framework that gives Claude professional development workflows. | Your kitchen's standard operating procedures manual |
Every app you will ever build follows the 12-step roadmap on page 3. But before we get to building, there are two important concepts.
Before you create the plan (PRD), always run this research step in your browser Claude conversation:
I want to build [describe your app idea]. Before we start coding, I need you to research what already exists. Look for: - GitHub repositories that do something similar - Python libraries or npm packages we can use - CLI tools that handle part of this - APIs and services we can connect to Find the best starting points so we do not build from scratch. I want to stand on the shoulders of giants. Give me a summary of what you find and recommend the best approach.
This saves you hours. Claude will find existing work that gets you 50% of the way there before you write a single prompt.
Imagine hiring a construction crew and saying "build me something nice" with no blueprints. They start building. You look at it a week later and say "that's not what I wanted." They tear it down and start over. Expensive. Slow. Frustrating.
Now imagine handing them detailed blueprints first. Every room. Every measurement. Every material. They build exactly what you envisioned. Fast. Efficient. Right the first time.
That is why we always create a PRD before building. Claude is the construction crew. The PRD is the blueprint. Always plan first.
Claude in the browser is smart. It can answer questions, write text, and help you think. But it CANNOT touch your computer. It cannot create files, install software, or build anything.
Claude Code in VS Code lives on your computer. It CAN create files, install software, run commands, build apps, and do real work. It is the difference between talking to an advisor on the phone versus having a developer sit down at your computer and build.
| Claude (Browser) | Claude Code (VS Code) |
|---|---|
| Can answer questions | Yes |
| Can write text | Yes |
| Can create files on your computer | No |
| Can install software | No |
| Can build apps | No |
| Can run your app | No |
| Best for | Planning, research, troubleshooting |
Use both. Browser Claude is your advisor. VS Code Claude is your builder.
Before anything else, you need to set up your personal AI assistant in a browser tab. This is different from Claude Code in VS Code. This one is your teacher and your guide. When you get stuck, this is where you go for help.
Go to claude.ai in your browser and start a new conversation
Click the Projects tab on the left side
Create a new project called "Business"
Give it this description: "All business documents and coaching"
Click Create Project
Upload this workbook file (the PDF or .docx) into the project
Copy the prompt below and paste it into that conversation
Keep this tab open for the ENTIRE workshop
You are my coding partner and personal tutor. I am not a software engineer, so I want you to break everything down on a fifth grade level, step by step. When I ask about code or building: explain what I need to do and why we are doing it so I can learn the concepts too. When I get stuck: I will send you screenshots. Guide me step by step in detail what I need to do. Use a restaurant as an analogy to teach me software engineering principles. My app is a restaurant, I am the owner, Claude Code is the chef, and VS Code is the kitchen. Keep explanations short and clear. No jargon unless you explain it first.
That is it. You are ready. Claude will guide you through everything else.
Why a Project Folder? Project folders in Claude retain memory over time. Every conversation inside this project builds on the previous ones. Claude gets smarter about YOUR situation the more you use it.
You only do this once. After today, your computer is fully set up and you can build apps forever.
"All of this is a one-time thing. You will never have to do this again."
You are installing a tool that lets you talk instead of type. This makes you 4x faster when giving Claude instructions.
How to install a voice-to-text tool
How to use a hotkey to start/stop dictation
Why voice is better than typing for AI work
When you give Claude instructions, you need to describe a LOT of details. Typing those takes forever. Talking takes seconds. And Claude understands natural speech perfectly. From this point forward, no more typing long messages. You talk. The computer types for you.
Mac:
Download Super Whisper from superwhisper.com
Install it (drag to Applications folder)
Open Super Whisper and follow the setup
Set your hotkey (the default is usually fine)
Press and hold the hotkey to dictate
Release the hotkey and text appears wherever your cursor is
Windows:
Download Wispr Flow from wispr.com (or Super Whisper if available for Windows)
Install and follow setup instructions
Set your hotkey
Press and hold to dictate, release to stop
Press your hotkey and say: "Hello, this is a test of my voice to text." If the words appear on screen, you are ready.
| Problem | Fix |
|---|---|
| No text appears when I talk | Check that the app is running (look for the icon in your menu bar) |
| Wrong words appear | Speak slower and more clearly. The AI will improve over time. |
| Hotkey doesn't work | Go to the app settings and change the hotkey to something that doesn't conflict |
| Microphone not detected | Go to System Preferences (Mac) or Settings (Windows) > Privacy > Microphone > enable the app |
You are installing your workspace (VS Code) and your AI developer (Claude Code). Together, these are where all app building happens.
How to install VS Code
How to install the Claude Code extension
How to log in to Claude inside VS Code
How to give Claude permissions to work
Step 1: Install VS Code
Mac:
Go to code.visualstudio.com
Click the Download for Mac button
Open the downloaded file and drag VS Code to your Applications folder
Open VS Code from Applications
Windows:
Go to code.visualstudio.com
Click the Download for Windows button
Run the installer. Click Next through all steps.
Open VS Code from your Start menu
Step 2: Install Claude Code Extension
Open VS Code
Click the Extensions icon on the left sidebar (looks like 4 squares)
Search for "Claude"
Find Claude Code by Anthropic and click Install
After installation, you will see a Claude icon in your sidebar
Step 3: Log In to Claude
Click the Claude icon in the VS Code sidebar
Click Create or Log In
It will open your browser to authorize
Log in with your Claude account (the same one from claude.ai)
You may see an authorization code, copy it and paste it back in VS Code
Follow any remaining prompts
Step 4: Set Permissions (Important)
When Claude asks to run commands or edit files, you have options:
In the bottom-right corner of VS Code, find where it says "Ask before edits"
Click it and change to "Edit automatically"
When Claude asks to run bash commands, click Yes and choose "All projects"
This lets Claude work without asking you for permission at every single step.
In the Claude panel inside VS Code, type: hello world
If Claude responds with a greeting, you are fully set up.
| Problem | Fix |
|---|---|
| Can't find the Claude extension | Make sure you're searching in the Extensions marketplace (the 4-squares icon) |
| Authorization won't complete | Try closing VS Code completely and reopening it, then try again |
| Claude says "not installed" | You may need to install Claude Code via terminal. Take a screenshot of the error and paste it to your browser Coding Partner. |
| "Permission denied" errors | Make sure you changed the setting to "Edit automatically" and allowed "All projects" |
An organized folder structure on your computer where all your apps will live.
How to create a master folder for all projects
How to create individual project folders
How to open a folder in VS Code
Step 1: Create Your Master Folder
Mac:
Open Finder
Go to your Desktop (or Documents, pick one and stick with it)
Right-click > New Folder
Name it: All Coding Projects
Windows:
Open File Explorer
Go to your Desktop (or Documents)
Right-click > New > Folder
Name it: All Coding Projects
Step 2: Create Project Folders Inside
Inside "All Coding Projects," create these folders:
Website (for your website project)
CRM (for your AI CRM app)
Content-Generator (for your social media content app)
Step 3: Open a Folder in VS Code
Open VS Code
Go to File > Open Folder
Navigate to your All Coding Projects folder and select the project folder you want to work on
Click Open
Now VS Code shows your project folder in the sidebar, and Claude Code has access to all files in that folder.
You should see your folder name at the top of the VS Code sidebar with an empty folder underneath. If yes, you are ready to build.
This is where it gets fun. The setup is done. You are now a vibe coder. Let's build.
A tool that copies any existing website so you can use it as a starting point for your own. This is the fastest way to build a website, start from someone else's design and customize it.
How to give Claude a build prompt
How to approve permissions (the "whack-a-mole" phase)
What bash commands look like (you never write them, Claude does)
How to view your app locally
The build → test → fix → repeat cycle
Every business owner needs a website. Instead of paying $5,000 to a designer or wrestling with Wix and Squarespace, you can clone the design of a site you like and customize it in minutes. No more drag-and-drop builders. They are obsolete.
Step 1: Open your Website folder in VS Code
File > Open Folder > select your Website folder
Open the Claude panel
Step 2: Give Claude the golden prompt
Paste this into Claude:
I need you to install httrack (a website copier tool) on my computer and then use it to download a complete copy of this website: [PASTE THE WEBSITE URL HERE] Save the downloaded website files into this project folder. After downloading, help me understand what files were created and how to view the website locally.
Step 3: Approve Permissions
Claude will start running commands. It will ask for permission to:
Install Homebrew (Mac) or use npm/pip (Windows), click Yes, All Projects
Run bash commands, click Yes, All Projects
Install httrack or similar tools, click Yes
This is the "whack-a-mole" phase. Just keep clicking yes.
What's happening behind the scenes: Claude is using text commands (bash) to install software on your computer. This is how developers install things, not by downloading from websites, but by typing commands. Claude handles all of this for you.
Step 4: View Your Cloned Website
When Claude finishes, tell it: "run server" or "show me the website locally"
Claude will give you a URL (like http://localhost:8080). Hold Cmd (Mac) or Ctrl (Windows) and click the URL. Your cloned website opens in the browser.
You should see a copy of the website you chose, running in your browser. If yes, congratulations. You just did your first vibe code project.
| Problem | Fix |
|---|---|
| "Homebrew not found" (Mac) | Claude will install it for you, just click Yes when it asks. Takes a few minutes. |
| "Permission denied" in terminal | Your computer needs your password. Type it (nothing appears, that's normal) and press Enter. |
| The website looks broken | Some websites have protections against copying. Try a simpler website. |
| Claude says "httrack not available" | Tell Claude: "Use wget --mirror instead" or "Find an alternative website copier" |
Change the text on the cloned website to match YOUR business
Update colors and images
Tell Claude: "Replace all references to [old business name] with [your business name]"
A Customer Relationship Manager, a tool for tracking your contacts, leads, and business opportunities. With an AI chatbot built in that can create records, search contacts, and answer questions about your data just by chatting with it.
How to plan an app using a PRD
How to use the Superpowers framework
How API keys work
How to configure a .env file
How to test and debug an app
CRM software like Salesforce costs $25-300 per user per month. You are about to build your own for free, with AI features those companies charge extra for. And you own it. No monthly fees. No limits.
Step 1: Plan the CRM in Your Browser
Do this in your Claude browser conversation, NOT in VS Code.
I want to build an AI-powered CRM (Customer Relationship Manager) for my business. I need it to: - Store contacts with name, email, phone, and company - Track business opportunities/deals with dollar amounts - Have an AI chat feature where I can type 'create a contact for Bruce Wayne at Wayne Enterprises' and it actually creates the record - Show a dashboard with my top deals Research what already exists on GitHub, repositories, templates, or libraries we can build from. Then create a detailed PRD (Product Requirements Document) as a markdown file I can download.
Claude will research and create your PRD. When it's ready:
Ask Claude to format it as a markdown file
Copy the content
Save it as a file called CRM-PRD.md in your CRM folder
Step 2: Prepare Your CRM Folder
Open VS Code
File > Open Folder > select your CRM folder
Make sure your CRM-PRD.md file is in this folder (drag it in from Finder/File Explorer)
Step 3: Launch Claude and Give It the Plan
In the Claude panel inside VS Code, paste this:
Read the CRM-PRD.md file in this folder. That is the plan for what we are building. Use the Superpowers framework from https://github.com/obra/superpowers Build this CRM step by step. Start with the core feature, storing contacts and opportunities. Get that working first before adding the AI chat feature. Use OpenRouter for the AI model. I will add my API key to the .env file.
Claude will start building. This takes 5-15 minutes depending on your computer.
Step 4: Get Your OpenRouter API Key
While Claude builds, set up your AI brain:
Go to openrouter.ai and create an account
Click your profile icon in the top right corner
Click Credits and add $5 credit with your card ($5 lasts months, each request costs $0.0009)
Click API Keys in the left menu
Click Create Key
Name it: CRM
Set Credit Limit: $3 per month
Set Expiration: 90 days
Click Create
Copy the key that appears (it starts with sk-or-)
Important: You will only see this key once. Copy it and save it somewhere safe.
Step 5: Add Your API Key
In VS Code, look in the sidebar for a file named .env or .env.example
If it says .env.example, right-click it and rename it to .env (delete the .example part)
Click on the .env file to open it
Find the line that says OPENROUTER_API_KEY=
Paste your key right after the = sign with no spaces
Press Cmd+S (Mac) or Ctrl+S (Windows) to save
The white dot on the file tab disappears when it is saved
Step 6: Launch and Test
Tell Claude: "run server"
Claude runs the app and shows you a URL like localhost:3000. Hold Cmd (Mac) or Ctrl (Windows) and click the URL.
Your CRM opens in the browser. Now test:
Add a test contact using the form
Open the AI chat and type: "Hello"
If you get a response, your OpenRouter key is working
Step 7: Test the AI Chat Feature
Now the exciting part. In the AI chat, type:
Create a contact for Bruce Wayne at Wayne Enterprises with an opportunity for $1,000,000
If it creates the record, your CRM is working. If it fails (and it might), take a screenshot of the error and paste it back to Claude with "fix this."
The Bug Loop: This is the nature of software development. You test a feature. It breaks. You screenshot the error. Claude fixes it. You test again. This IS the process. Every professional developer does this all day.
| Problem | Fix |
|---|---|
| "API key not found" | Check your .env file, no spaces after the = sign, and file is saved (no white dot) |
| AI chat says "error" | Take a screenshot, paste to Claude, say "fix this" |
| App won't load | Tell Claude: "run server" or "restart server" |
| Records not saving | Tell Claude: "The records are not saving to the database. Fix this." |
| Blank white page | Check the terminal output for error messages. Screenshot and send to Claude. |
Change the CRM name and branding to match your business
Add custom fields (like "Industry" or "Lead Source")
Ask Claude: "Add a feature that shows my top 3 deals on the dashboard"
Planning before building saves massive time (the PRD)
API keys go in the .env file, always
Testing → breaking → fixing IS the developer process
The Superpowers framework keeps Claude organized and professional
An app that generates text posts, images, and short videos for any social media platform. It connects to OpenRouter for text and kie.ai for images and video.
How to build faster (less hand-holding this time)
How to use multiple API keys in one app
How image and video generation APIs work
Content creation tools like Jasper cost $49-129/month. You are building your own, with the same AI models, for pennies. And you can customize it exactly for your business.
Step 1: Set Up Your Folder
Open VS Code
File > Open Folder > select your Content-Generator folder
Step 2: Build the App
This one is faster because we are including the plan directly in the build prompt. Paste this into Claude:
Build me a Social Media Content Generator web app. Use the Superpowers framework from https://github.com/obra/superpowers Features: - Dropdown to select platform (TikTok, Instagram, LinkedIn, Twitter/X, Facebook) - Text input for the content topic or idea - Generate button that creates a full post (text + hashtags) optimized for the selected platform - Image generation using kie.ai API (Nano Banana Pro model) - Clean, modern UI with dark theme Tech stack: Python Flask backend, HTML/CSS/JS frontend API Keys: OpenRouter for text generation, kie.ai for image generation Store keys in a .env file Build the text generation first. Get that working. Then add image generation.
Step 3: Get Your kie.ai API Key
Go to kie.ai and create an account
Add $5 credit
Find the API Keys section in your account
Click Create Key
Name it: Content Generator
Click Create and copy the key
Step 4: Add Both API Keys
Your Content Generator needs two keys. Open the .env file in VS Code:
OPENROUTER_API_KEY=your-openrouter-key-here
KIE_API_KEY=your-kie-key-hereSave with Cmd+S (Mac) or Ctrl+S (Windows).
Step 5: Launch and Test
Tell Claude: "run server"
Click the localhost URL
Pick a platform from the dropdown
Type a content idea (e.g., "5 reasons small businesses need AI")
Click Generate
Wait about 30-45 seconds for the image to generate
If you see a post and an image, everything is working
| Problem | Fix |
|---|---|
| Text generates but no image | Check your kie.ai API key in the .env file |
| "Invalid API key" error | Make sure there are no spaces in the .env file and it's saved |
| Image takes forever | Image generation takes 30-60 seconds. Be patient. If over 2 minutes, screenshot the error. |
| App crashes on generate | Screenshot the terminal error and send to Claude |
Add your brand colors and logo
Create preset prompts for your specific industry
Add a "Schedule" button that connects to Late API for automated posting
Ask Claude: "Add a batch mode that generates 7 posts at once for a full week"
Notice how much faster this build went? That is because your setup is done. Every app gets easier.
Multiple API keys go in the same .env file
Image generation is slow but cheap ($0.003 per image)
You now have a tool that replaces $50-100/month in SaaS subscriptions
Right now your apps only work on your computer (localhost). These steps put them on the internet so anyone with the URL can use them.
You are backing up your code to GitHub (cloud storage) and deploying your app on Railway (hosting service) so it has a public URL anyone can access.
How to create a GitHub repository
How to push code to GitHub using Claude
How to deploy on Railway
How to add environment variables to a hosted app
How to generate a public URL
An app on your computer is useful. An app on the internet is a business. Deployment is how you go from "cool project" to "product that makes money."
Step 1: Create a GitHub Repository
Go to github.com and log in
Click the + icon in the top right corner
Click New Repository
Name it the same as your app (example: crm or content-generator)
Add a short description
Set visibility to Private
Click Create Repository
Copy the repository URL (looks like https://github.com/yourusername/crm.git)
Step 2: Push Your Code to GitHub
In VS Code, tell Claude:
Push this project to GitHub at [PASTE YOUR REPO URL HERE]. Also write a good README file that explains what this app does, all its features, and how to set it up.
Claude will:
Package up all your code
Connect to your GitHub account (may ask you to log in once)
Upload everything
Create a professional README file
If GitHub asks for authorization, follow the prompts. This is a one-time login.
Step 3: Deploy on Railway
Go to railway.app
Click Deploy and sign up with your GitHub account (this links them together)
Once signed in, click New Project
Choose Deploy from GitHub Repo
Select your app from the list
Railway starts building your app (takes about 90 seconds)
Step 4: Add Your API Keys to Railway
Your app needs the same API keys on Railway that it has locally:
Click on Variables in your Railway project
Click Raw Editor
Go to VS Code and open your .env file
Copy everything from the .env file (all the API keys)
Paste it into Railway's raw editor
Click Update Variables
Click Deploy to rebuild with the new variables
Step 5: Generate Your Public URL
In Railway, click on your app service
Go to Settings
Scroll down to Networking
Click Generate Domain
If it asks for a port, type 8080 (or whatever port your app uses)
Railway generates a URL like crm-production.up.railway.app
Click the URL, your app is now live on the internet
| Problem | Fix |
|---|---|
| GitHub push fails | Claude may need to log in. Follow the authorization prompts. |
| Railway build fails | Click on the build log to see the error. Screenshot it and send to Claude: "My Railway deployment failed. Here's the error." |
| App loads but features don't work | You probably forgot to add environment variables. Go to Variables > Raw Editor and add your .env contents. |
| "No service" or blank page | Make sure you generated a domain in Settings > Networking |
| Railway free tier exceeded | Upgrade to the $5/month plan. It supports dozens of apps. |
| Port error | Tell Claude: "Railway is asking for a port. What port does my app use?" |
Every time you make changes in VS Code:
Tell Claude: "Push the changes to GitHub"
Railway automatically detects the update and rebuilds
Wait 60-90 seconds
Your live app is updated
If something works on localhost but breaks on Railway:
Go to your Railway project
Click on your app service
Click Logs on the left side
Change the time window to Last 1 Hour
Click Download > Plain Text
Go to your Coding Partner in the browser
Paste the log file contents
Type: "Analyze this error log and give me a short summary of what is wrong so I can fix it in Claude Code."
GitHub = backup. Railway = hosting. Always use both.
API keys go in TWO places: local .env file AND Railway Variables
Deployment fails are normal. Screenshot the error, send to Claude, fix, redeploy.
After the first deployment, updates are automatic, just push to GitHub.
You are going to transform your apps from "ugly but functional" to "professional and polished" using AI-generated design mockups.
How to use GenSpark for UI/UX research and design
How to generate mockups with Nano Banana Pro
How to give Claude a design to implement
The iteration process for visual design
When you first build an app with Claude, it works but looks basic. Maybe even ugly. That is normal, Claude is a great developer but an average designer. To make your apps look professional, you need a UI/UX designer. Instead of paying $5,000 for one, you will use AI.
Step 1: Take Screenshots of Your Current App
Open each page of your app in the browser and take screenshots of:
The main dashboard
Any forms or input pages
The settings page
Any other pages
Step 2: Generate Design Mockups
Go to genspark.ai (or use Claude in the browser with kie.ai).
Paste this prompt:
You are a UI/UX designer. I have an app that [describe what it does]. Here are screenshots of the current design [paste screenshots]. I want you to: 1. Research what are the common UI/UX designs for this type of app 2. Have full creative control to design beautiful mockups 3. Generate 3 different design options using Nano Banana Pro Make it modern, clean, and professional. Think of it like redesigning a restaurant, same great food, but now the dining room looks amazing.
Step 3: Iterate
You will like some mockups and hate others. That is normal. The success is in the iterations.
Pick the one you like best
Tell the AI: "I like option 2. Generate 3 more variations in that style."
Keep going until you love it
Download the final mockups as images
Step 4: Give the Mockups to Claude
In VS Code, tell Claude:
I have new UI/UX mockups for this app. Here are the design images [paste/attach the mockup images]. Update the frontend to match these designs as closely as possible. Keep all existing functionality, only change the appearance.
Claude will update all the CSS and HTML to match your new designs.
Step 5: Also Get the Design Description
Ask GenSpark/Claude to also create a markdown file with:
Color codes used
Font choices
Layout descriptions
Spacing and sizing details
Create a markdown file with all the design specifications, colors, fonts, spacing, layout details, so my developer can implement this exactly.
This gives Claude extra detail to work with.
Figma is obsolete for this workflow. Nano Banana Pro replaces graphic designers for mockups.
The iteration process is where great design happens. Version 1 will not be perfect. Version 5 might be.
Always keep functionality working, change looks without breaking features.
Save your design specs as a markdown file for future projects.
These are reusable prompts you will use over and over. Save them somewhere. They work for any project.
I want to build [describe your app]. Before we start, research what already exists, GitHub repositories, Python libraries, CLIs, and APIs that do something similar. Find the best starting points so we don't build from scratch. I want to stand on the shoulders of giants.
Based on our research, create a detailed PRD (Product Requirements Document) as a markdown file. Include: app overview, features list, tech stack recommendations, data model, and user flows. Make it detailed enough for a developer to build from.
Read the [PRD file name] in this folder. Use the Superpowers framework from https://github.com/obra/superpowers. Build this step by step. Start with the core feature, get it working, then add features one at a time.
The Quick Build Prompt (when you want it done fast): "Build me a [describe app] with these features: [list features]. Use the Superpowers framework from https://github.com/obra/superpowers. Tech stack: Python Flask, HTML/CSS/JS frontend. Store API keys in .env file.
Run server" or "Start the server" or "Launch the app
[paste screenshot] "Fix this.
[paste screenshot] "When I click [button/feature], this error appears. The expected behavior is [what should happen]. Fix it.
Stop the server, fix the error, and restart.
Push this project to GitHub at [paste repo URL]. Write a good README file that explains the app, its features, and setup instructions.
Push the latest changes to GitHub.
You are a UI/UX designer. Research common designs for [type of app]. I want you to generate 3 design mockups using Nano Banana Pro. Modern, clean, professional.
Add a new feature to this app: [describe feature]. Keep everything else working. Test it after building.
Update all branding in this app. Business name: [your name]. Colors: [your colors]. Logo: [attach logo]. Apply consistently across all pages.
You just built real tools that businesses pay for every month. Here is how to turn that into income.
When you tested your CRM, you saw the cost in OpenRouter:
Each AI request cost: $0.0009 (less than 1/10th of a penny)
A full day of testing cost: $0.01 or less
Now consider what companies charge for the same AI features:
ChatGPT Plus: $20/month
Jasper AI: $49/month
Go High Level (with AI): $97-297/month
The markup is 2,000% or more. And it is still pennies for the end user.
The most profitable business model in AI right now:
Build an app where users consume tokens
The more they use the app, the more tokens they burn
You mark up the token cost and charge a monthly fee
Your cost per user: pennies. Their payment to you: $29-199/month.
Target: Small businesses, real estate agents, coaches, consultants
Offer: "I built a custom AI-powered CRM. It does what Salesforce does for $25/user/month, but I'll set it up for you for $500 + $49/month hosting."
Your cost: Pennies in AI tokens + $5/month Railway hosting
Their alternative: $300+/month for Salesforce with no AI chat
Target: Business owners, marketers, agencies
Offer: "Generate unlimited social media posts with AI images for $29/month"
Your cost: ~$0.003 per generated post
Their alternative: $49-129/month for Jasper or similar tools
Target: Businesses that want custom AI tools
Offer: "I'll build you a custom AI-powered app for your specific business needs. $2,000-10,000 per project."
Your cost: Your time + pennies in tokens
Your secret weapon: You use Claude to build it. They think you are a developer.
| Day | Action |
|---|---|
| Day 1 | Finish your apps. Fix remaining bugs. Both deployed and working. |
| Day 2 | Set up TikTok business account. Find 30 competitors + 30 viral videos. |
| Day 3 | Record and post your first 3 videos. Hook + Value + CTA. |
| Day 4 | Go live for the first time. 15-30 minutes. Show what you built. |
| Day 5 | Customize your apps. UI/UX mockups with GenSpark. Professional look. |
| Day 6 | Batch record next week's content. 21 videos. Schedule with Late API. |
| Day 7 | Review analytics. What got views? Plan next week. Repeat forever. |
You have the product. Now you need customers. This is the fastest free method available today.
Put on your Chief Marketing Officer hat. Here is the truth:
Do NOT hide in building. The biggest mistake vibe coders make is spending weeks perfecting their app and never getting it in front of customers. Your app does not need to be perfect. It needs traffic.
Everything about your business is a traffic problem. You do not have enough people seeing what you offer. Fix that, and money follows.
Post 3 times a day. Volume trains the algorithm and creates enough impressions to hit your 2% conversion target.
Go live once a day. Live streams are where trust is built and sales are closed. This is your "pop-up shop."
Never miss a day. Missing a day seriously hurts your account's algorithmic momentum. You have to restart the 30-day warmup clock.
TikTok is the fastest and cheapest platform to grow right now. Here is why:
The algorithm actively FINDS your audience for you, you don't need followers first
One viral video can bring 10,000 new followers overnight
98% of people who discover you on live streams have NEVER seen you before, fresh potential customers every time
TikTok has built-in tools (Service Plus) for collecting leads during live streams for free
Short-form content takes minutes to create, not hours
"I don't use TikTok" is not a business strategy. It is leaving money on the table.
Volume = How much you post. This trains the algorithm that you are active and consistent. Minimum: 3 posts per day.
Value = How helpful each post is. One clear tip per video. Not a lecture. One useful thing the viewer can use immediately.
Step 1: DO NOT be original. Your first 50 videos are practice. You are learning a new skill (content creation). Bad form is expected. Just get the reps in.
Step 2: Find 30 competitors and 30 viral videos.
Go to TikTok and search what your target customer would search
Filter for videos with over 100,000 likes (these have millions of views)
Save 30 of these viral videos
For each creator, go to their profile and sort by Most Popular
Save the top-performing formats
Step 3: Copy the FORMAT and the HOOK. Not the content.
If they're in a car, you're in a car
If they have space above their head, you have space above your head
If they change camera angles every sentence, you do too
The hook (first 3-5 seconds) is what makes people stop scrolling, model it exactly
Step 4: Replace their content with YOUR expertise.
Same hook structure, your words
Give ONE useful tip (value)
End with a call to action: "Comment [WORD] below"
Always the same word, this trains the algorithm
Hook (0-3 seconds): Stop the scroll. Something surprising, specific, or bold.
Example: "ChatGPT tips you didn't know, part 7"
Value (3-45 seconds): ONE useful tip. Show, don't just tell.
Call to Action (last 5 seconds): "Comment [WORD] below to get the free guide."
No fancy equipment. No editing software. Everything in the TikTok app:
Press the + button to create
Change timer to 60 seconds (top right)
Press and hold the record button to record a scene
Release to stop that scene
If you mess up, press the X to delete the last scene
Record your hook as Scene 1. Your tip as Scene 2. Your CTA as Scene 3.
Change camera angles between scenes, our brains crave novelty
Everything is filmed at THIS level (eye level). Go higher or lower for visual interest.
Preview by clicking the checkmark
Add captions using TikTok's built-in auto-caption feature
Post
The goal: Get ONE solid sentence per scene. Everyone re-records multiple times. That is normal.
Your live stream is a pop-up shop. You show up, set up, welcome people, give value, and ask for the sale.
Time block it: Same time every day (e.g., 5 PM)
Keep it under 1 hour
Structure it like a Vegas show, not a hangout:
Open: Hook them in the first 60 seconds
Value: Teach something useful for 15-20 minutes
Engage: Answer questions, talk to viewers
Offer: Present what you sell (naturally, not pushy)
Close: CTA, "Comment [WORD] if you want [offer]"
Service Plus is a built-in feature that lets you collect leads during live streams. It is free.
Set your account to Business Profile (Settings > Account)
Get your business verified on TikTok (upload your business license)
Once verified, Service Plus is unlocked on your live streams
Create a simple contact form with your name and a call to action
During your live stream, tap the + button and select your form
The form pops up for your viewers to fill out their name and email
After the stream, download your leads as a CSV file
Import the CSV into Kit (convertkit.com) to start your email follow-up
Once you are creating content consistently, automate the distribution with Late API (late.com):
Schedule and publish across every social media channel
One API call = post to TikTok, Instagram, YouTube, LinkedIn, Twitter, and more
$50/month for unlimited posts across 50 social media sets (accounts)
Claude can automate the posting through the API, you never log into each platform manually
Remember: You are a developer now. API means "I can automate this."
Learning purgatory is when you spend all your time building and perfecting and never shipping to market. You are in a never-ending loop of learning without earning.
Signs you are in learning purgatory:
You have been "working on your app" for weeks with no customers
You keep adding features instead of posting content
You tell yourself "it's not ready yet"
You have not posted on TikTok today
The cure: Post content today. Not tomorrow. Today. Ship your app, even if it is ugly. Get it in front of humans. Validate that people want what you are building. Then iterate based on real feedback.
This section is for students who have completed the workshop and want to level up. If you are still working through the modules above, skip this section and come back later.
Warp is a modern terminal application, a prettier, more powerful version of the terminal built into your Mac. Think of it as upgrading from a basic kitchen intercom to a professional command center.
Why upgrade? Warp has features that make working with Claude Code faster:
Split panes (work on multiple projects at once)
Tab management with colors and names
Better command history
AI-assisted command suggestions
Go to warp.dev
Download and install
Open Warp and complete the setup
Claude Code can also run as a command-line tool directly in the terminal (not just as a VS Code extension). This is the more advanced way to use Claude:
Open Warp
Type: `npm install -g @anthropic-ai/claude-code` and press Enter
Once installed, navigate to your project folder: `cd ~/Desktop/All\ Coding\ Projects/CRM`
Type `claude` and press Enter
Log in when prompted
For advanced users who don't want to play "whack-a-mole" with permissions:
claude --dangerously-skip-permissionsThis gives Claude full autonomy, it will not ask for permission for anything. It just builds. This is powerful but comes with a trade-off: Claude can edit and run anything without confirmation.
Only use this when:
You are comfortable with what Claude is doing
You are in a project folder (not your whole computer)
You trust the prompts you are giving
| Command | What It Does |
|---|---|
| `cd [folder path]` | Navigate to your project folder |
| `claude` | Start Claude Code |
| `claude --dangerously-skip-permissions` | Start Claude Code with full autonomy |
That is it. Claude handles everything else.
| Use VS Code When... | Use Warp When... |
|---|---|
| You are a beginner | You are comfortable with the workflow |
| You want to see files visually | You want maximum speed |
| You want the sidebar and file browser | You want to run multiple projects in tabs |
| You are still learning | You want God Mode |
Based on real questions from real students.
Q: Can I build on Windows?
A: Yes, but expect extra friction. Mac is strongly recommended. See the Windows disclaimer on page 2.
Q: How much does it cost to run AI in my app?
A: Pennies. Literally. Each AI request through OpenRouter costs about $0.0009. A $5 credit lasts months of normal usage.
Q: Can I turn my ChatGPT custom GPTs into real apps?
A: Yes! Export your conversations and custom GPT configurations from ChatGPT. Give them to Claude in a folder. Tell Claude: "Turn this custom GPT into a real web application." Claude will build it as a standalone app.
Q: Do I need to memorize code?
A: Never. You will never write, read, or memorize a single line of code. Claude writes all of it. Your job is to describe what you want and test the results.
Q: What if I don't have a website yet?
A: Module 4 teaches you how to build one. You can either clone an existing site and customize it, or build from scratch with Claude.
Q: Can I replace Go High Level / Wix / Squarespace / WordPress?
A: Yes. That is literally what this workshop teaches you to do. No more drag-and-drop builders. No more monthly fees for limited platforms. You build exactly what you want.
Q: How do I get my conversation back if I close VS Code?
A: Open VS Code, click the Claude icon, then click the clock icon (history). All your previous sessions are listed by timestamp. Click any one to return to that conversation.
Q: Where do API keys go?
A: Always TWO places: (1) Your local .env file in the project folder, and (2) Railway Variables section for your deployed app. Both must have the same keys.
Q: What's the minimum computer I need?
A: Mac with M1 chip or newer, 16GB RAM, 512GB storage. A refurbished MacBook Pro M1 costs $600-800. For Windows, you need at minimum 16GB RAM and an SSD drive.
Q: What if my app looks ugly?
A: That is normal! Claude is a great developer but average at design. Module 8 shows you how to use GenSpark and Nano Banana Pro to create professional mockups and then have Claude implement them.
Q: Can I put anything in a folder and have Claude work on it?
A: Yes. Documents, spreadsheets, transcripts, PDFs, dump them in a folder, open it in VS Code, and tell Claude what to do. Summarize, organize, transform, build an app from the data. If you can put it in a folder, Claude can do the work.
Q: How do I create custom skills for Claude?
A: A skill is like a custom GPT, a markdown file with instructions, sometimes connected to APIs. Put it in a folder, and Claude can follow those instructions anytime. Start simple: create a markdown file with step-by-step instructions for a task you repeat often.
| Tool | URL | Cost | Purpose |
|---|---|---|---|
| Claude | claude.ai | $20/month (Pro) | Your AI assistant and developer |
| VS Code | code.visualstudio.com | Free | Your workspace |
| GitHub | github.com | Free | Code backup |
| Railway | railway.app | $5/month | App hosting |
| OpenRouter | openrouter.ai | $5 credit (lasts months) | AI brain for your apps |
| kie.ai | $5 credit | Image/video generation | |
| Super Whisper | superwhisper.com | Free tier available | Voice to text (Mac) |
| Wispr Flow | wispr.com | Free tier available | Voice to text (Windows) |
| GenSpark | genspark.ai | Free tier available | UI/UX design + research |
| Late | late.com | Free-$50/month | Social media scheduling API |
| Hostinger | hostinger.com | $2/month | Website hosting (static sites) |
| Warp | warp.dev | Free | Advanced terminal (optional) |
| Notion | notion.so | Free | Your digital notebook |
| Wistia | wistia.com | Free (10 videos) | Video hosting with analytics |
Join the Simple Tech Skills community for project sharing and support
Watch the workshop recordings in the Google Drive folder
Start building your own custom app ideas using the 12-step process
Practice content creation daily, consistency beats perfection
The Doctor AI Academy is where you go deeper:
Build enterprise-grade apps
Create automation workflows
Advanced Claude Code techniques
1-on-1 coaching and support
Community of builders sharing projects and tools
Simple Tech Skills Corp | Doctor AI | Jonathan Acuna
simpletechskills.com | hello@simpletechskills.com
"Work less, earn more with AI"
DOCTOR AI
Build An App Workshop, Student Workbook 5.0
© 2026 Jonathan Acuna. All Rights Reserved.
This workbook and all its contents, including text, prompts, frameworks,
infographics, and instructional materials, are the intellectual property
of Jonathan Acuna and Simple Tech Skills Corp.
No part of this publication may be copied, reproduced, distributed,
transmitted, displayed, published, adapted, or stored in a retrieval
system in any form or by any means, electronic, mechanical,
photocopying, recording, or otherwise, without the prior written
permission of the copyright owner.
Unauthorized reproduction, sharing, or distribution of this material
is strictly prohibited and may result in civil and criminal penalties.
For licensing inquiries or permission requests, contact:
hello@simpletechskills.com
simpletechskills.com
Simple Tech Skills Corp | Doctor AI Academy
First Edition, March 2026
"Work less, earn more with AI"