Module 4: Lab - Building a Startup Name Generator

In this lab, you will build a "Startup Name Generator." Users will type an industry into a text box, click a button, and see a list of 10 creative company names generated by AI.

We will walk through how to build this using the different tools we covered in Module 2. By the end, you will have a live, working app on the internet.

Before touching any tool, write your PRD. Here's an example:

Problem: Founders waste hours brainstorming company names. They need quick inspiration.

User: Early-stage startup founders and indie hackers.

Core Features: (1) Text input for industry/description, (2) Generate button that produces 10 creative names, (3) Copy-to-clipboard button for each name.

Anti-Features: No user accounts, no save history, no social sharing. Keep it simple.

Design: Dark theme, modern, clean. Single-page app. Mobile-responsive.

Copy this PRD and paste it as your very first prompt in whichever tool you choose below.

Cursor and Windsurf are AI-native editors forked from VS Code, with built-in chat, inline editing, and multi-file awareness.

1. Setup: Open Cursor (or Windsurf) and create a new Next.js project: npx create-next-app@latest name-generator
2. The Initial Prompt: Open the AI chat panel (Cmd+L in Cursor) and paste your PRD along with the build instructions. "Create a startup name generator. It needs a text input field for 'industry' and a 'Generate' button. When clicked, call an API route that uses OpenAI to generate 10 creative names. Display them in a grid. Use a dark theme with neon green accents. Add copy-to-clipboard for each name."
3. Use Composer/Cascade: For multi-file changes, use Cursor's Composer mode or Windsurf's Cascade flow. These let the AI edit multiple files simultaneously rather than one at a time.
4. Iterate: Test the app locally with npm run dev. If names are generic, refine: "Update the system prompt to act like a branding agency. Names should be one word, memorable, and modern."
5. Publish: Deploy to Vercel: npx vercel. Your app is live.

Lovable is highly visual and excellent for front-end design. It produces beautiful UIs quickly.

1. Setup: Go to Lovable.dev and start a new project.
2. Design the UI First: Ask the AI to build the visual interface before adding logic. This is the key principle with visual builders, design before logic. "Build a dark-themed page. Center a title that says 'Name Generator'. Below it, add a wide text input field with placeholder text 'Enter your industry (e.g., fintech, health, gaming)' and a purple gradient button that says 'Generate'. Below that, create a 2-column grid layout to hold 10 cards. Each card should have the name in bold and a small copy icon in the corner."
3. Add the Logic: Once the design looks good, add the AI functionality. "When I click the Generate button, take the text from the input field, use an AI API to generate 10 startup names based on that text, and display one name inside each card in the grid below. Show a loading spinner while generating."
4. Iterate on Quality: If the names look boring, refine the prompt: "Tell the AI generating the names to act like a high-end branding agency. Names should be catchy, unique, and between 1-2 words."
5. Add Polish: "Add a subtle animation where each name card fades in one by one with a 100ms delay. Add a toast notification that says 'Copied!' when the copy button is clicked."
6. Publish: Use Lovable's built-in deploy feature to put the site online.

For autonomous, terminal-based agents that handle multi-file architectures with minimal supervision.

1. Setup: Open your terminal. With Claude Code: claude. With Antigravity: start a new conversation. Create the project: npx create-next-app@latest name-generator
2. The Initial Prompt: Describe the full project. These agents read your entire codebase, so give them the big picture. "Build a startup name generator app. Create a frontend with a text input and submit button, a backend API route at /api/generate that calls OpenAI to produce 10 names, and display them in a grid with copy-to-clipboard. Use App Router, TypeScript, dark theme."
3. Let the agent work: Unlike editors, these agents will create multiple files, install dependencies, and run the dev server. Review the changes when prompted.
4. Debug: Paste errors directly. The agent can read terminal output, fix code, and re-run tests autonomously.
5. Publish: npx vercel or let the agent handle it.

Replit gives you a full cloud development environment with built-in hosting.

1. Setup: Go to Replit and create a new "Next.js" template project.
2. The Initial Prompt: Ask the Replit AI to generate the core files. "Create a Next.js application for a name generator. I need a frontend page with a text input and a submit button. I also need a backend API route that takes the industry text, calls an LLM to generate 10 names, and returns them as a JSON list."
3. Debug: If the code fails to run, you will see a red error message in the console. Copy the entire error message, paste it into the chat, and say: "I received this error. Fix it."
4. Publish: Click the "Deploy" button in the top right corner of the Replit interface.