Let the AI Set Things Up

By the end of this lesson, you’ll be able to describe a project to an AI CLI tool and get back a complete, working foundation — then verify that it built what you asked for.

The Mental Model: Hiring a General Contractor

Imagine you want to renovate your kitchen. You do not need to know how to run electrical wiring, install plumbing, or frame walls. You hire a general contractor, describe what you want (“an open layout with an island, gas range, and pantry”), and they handle the implementation.

AI scaffolding works the same way. You are the homeowner with the vision. The AI is the contractor with the skills. Your job is to clearly describe what you want and then inspect the work when it is done.

What makes a good homeowner (orchestrator):

• Clear about what they want (“I need a kitchen island with seating for four”)
• Inspects the work (“Are the outlets where I asked for them?”)
• Gives feedback (“Move the pantry to the other wall”)

What they do NOT need to know:

• How to read a wiring diagram
• Building code specifications
• Plumbing pipe sizing calculations

The Liberating Truth

Here is a sentence that would have been absurd five years ago and is completely true today:

You can get started without mastering setup details. Over time, learning some setup basics will help you debug and customize faster.

Setting up a new project used to be the hardest part of development. Choose a framework, configure the build tools, set up testing, configure linting, create the folder structure, install dependencies, wire up the database… Each step required specialized knowledge and could take hours of debugging.

Now? You describe what you want, and the AI does all of it.

Scaffolding = Letting the AI Build the Foundation

“Scaffolding” means creating the initial structure of a project — the folders, configuration files, starter code, and dependencies. It is the construction equivalent of pouring the foundation and framing the walls.

Here is what scaffolding looks like with an AI CLI tool (such as Claude Code, Gemini CLI, or your preferred tool). Open your tool, navigate to the folder where you want the project, and paste a prompt like this:

Create a new web application with these specs:
- Astro framework with React components
- Tailwind CSS for styling
- Dark theme
- A homepage with a hero section
- A navigation bar with Home, About, and Contact links
- TypeScript for type safety

The AI will:

1. Create the project folder
2. Initialize package.json
3. Install all dependencies
4. Create the Astro configuration
5. Set up Tailwind with the dark theme
6. Create the layout with navigation
7. Create the homepage with hero section
8. Set up TypeScript configuration

All from one prompt. What would take a developer 30-60 minutes of setup takes 2-3 minutes.

The Key Insight

You do not need to understand:

• How Tailwind’s configuration file works
• What astro.config.mjs does internally
• How TypeScript compilation is configured
• What PostCSS is or why it is there

You need to understand:

• What you want to build (a website with specific features)
• What it should look like (dark theme, clean design)
• What technologies to use (Astro, React, Tailwind — or let the AI choose)

The AI handles the implementation details. You handle the vision and verification.

Worked Example: From Idea to Running Project

Let’s walk through a complete scaffolding interaction from start to finish.

Step 1: Write your prompt. Open your AI CLI tool (such as Claude Code, Gemini CLI, or your preferred tool) in the folder where you want the project. Be specific about what you want, not how to build it:

Create a research lab website for the Chen Computational Biology Lab with:

Pages:
- Homepage with lab mission, recent news (3 items), and featured publication
- Team page showing PI and 4 grad students with photos and bios
- Publications page with a searchable, filterable list
- Contact page with office location and a simple form

Design:
- Dark theme, professional and academic feel
- University-style navigation bar
- Mobile-friendly

Tech: Astro with Tailwind CSS
Include placeholder content that I can easily find and replace.

Step 2: Verify the output. After the AI finishes, check the structure:

ls -la

(Windows Command Prompt users: use dir instead of ls -la. In WSL, PowerShell, or Git Bash, ls works normally.)

You should see the key files: package.json, README.md, .gitignore, astro.config.mjs, and a src/ folder.

ls src/pages/

You should see files matching your four requested pages: index.astro, team.astro, publications.astro, contact.astro.

Step 3: Run it and check.

npm run dev

(Running npm commands requires Node.js. If you get “command not found,” see Module 6, Lesson 1 for install instructions — or just ask your AI tool: “How do I install Node.js on my system?”)

Open the URL printed in your terminal (for example, localhost:4321 for Astro, or localhost:5173 for Vite — the exact port depends on your framework). Click through every page. Does the navigation work? Are there four pages? Is the dark theme applied?

Step 4: Give feedback. If something is not right:

The team page is showing team members in a list. I want a grid layout
with photo cards -- 2 columns on mobile, 4 on desktop. Each card should
have a headshot, name, role, and a one-line research interest.

This is the orchestration loop: describe, verify, refine.

Create a lab inventory web app where I can:
- Add reagents with name, catalog number, quantity, expiration date, and storage location
- Search and filter the inventory
- See items expiring within 30 days highlighted in amber
- Export the full inventory as CSV
Use React with Vite. Dark theme. Store data in localStorage.

Create a bioinformatics dashboard that:
- Accepts a FASTA file upload or pasted sequence
- Displays sequence length, GC content, and base composition chart
- Shows a simple quality visualization
Use React, Vite, and Chart.js. Dark theme with a clean scientific look.
Include a sample sequence for demonstration.

Create a searchable directory for public services with:
- Search bar with auto-suggest
- Filter by category (permits, licenses, vital records, benefits)
- Results showing office name, address, phone, hours
- Mobile-friendly for citizens on phones
- Accessibility: Target WCAG 2.1 AA (proper contrast, ARIA labels, keyboard nav) -- then validate with accessibility testing tools and manual keyboard/screen-reader checks
Use Astro with Tailwind. Professional, clean design.
Include 10 sample service entries as mock data.

Create an internal project status dashboard with:
- Card view showing each project with name, lead, status (on-track/at-risk/delayed), and completion percentage
- Filter by department and status
- A summary bar chart showing project counts by status
Use React with Vite. Dark theme. Mock data for 15 projects across 4 departments.

Create a Python CLI tool called csv-analyzer that:
- Accepts a CSV file path as a command-line argument
- Prints summary statistics (row count, column types, missing values)
- Generates a bar chart of the most frequent values in a chosen column
- Saves the chart as a PNG file
- Uses argparse for CLI arguments, pandas for data, matplotlib for charts
Structure: src/ folder with separate modules for loading, analysis, and visualization.

Real Examples

Example 1: Blog

Prompt:

Create a blog using Astro with:
- Markdown content in a content/ folder
- Homepage showing recent posts
- Individual post pages
- Dark theme with good typography
- Tags on posts

What the AI creates:

my-blog/
├── src/
│   ├── content/posts/
│   │   ├── first-post.md
│   │   └── second-post.md
│   ├── layouts/
│   │   └── BlogLayout.astro
│   ├── pages/
│   │   ├── index.astro
│   │   └── posts/[slug].astro
│   └── styles/global.css
├── astro.config.mjs
├── tailwind.config.mjs
└── package.json

A complete blog. Ready to customize. (Your exact file structure may differ slightly depending on the AI tool and model — verify the required pages and features are present rather than expecting identical filenames.)

Example 2: Dashboard

Prompt:

Create a data dashboard with:
- React + Vite
- A sidebar navigation
- Three pages: Overview, Analytics, Settings
- Charts using a charting library
- Mock data for demonstration
- Dark theme

Example 3: API Server

Prompt:

Create a REST API with:
- Node.js and Express
- Endpoints for users (CRUD)
- SQLite database
- Input validation
- Error handling
- Basic test suite

In each case, the AI builds the complete scaffolding and initial functionality. Your job is to refine, customize, and extend.

The Orchestrator’s Advantage

Here is why this matters so much:

Without AI scaffolding:

• “I want to build X” —> days or weeks of learning before you can start —> many people quit

With AI scaffolding:

• “I want to build X” —> AI creates a working scaffold in minutes —> you start customizing immediately —> you learn by doing

This flips the entire learning model. Instead of learning theory first and building later, you build first and learn the theory as needed. When you see the code the AI generates, you naturally start understanding patterns. When something breaks, you learn debugging. When you need a feature, you learn the relevant concept.

Setting up project memory

Right after scaffolding a project is the best time to create a project memory file — a document the AI reads automatically at the start of every session.

In Claude Code, type /init and the AI will scan your freshly scaffolded project and generate a CLAUDE.md file with an overview of the structure, key paths, and suggested conventions. Review it and adjust to match your preferences.

For other tools, create the equivalent file manually:

• Copilot: .github/copilot-instructions.md
• Cursor: .cursorrules in your project root
• Other tools: Check your tool’s documentation for the current convention. If your tool does not support automatic memory files, keep a PROJECT_NOTES.md and paste the relevant context at the start of each session.

Add your project’s purpose, naming conventions, and anything the AI should know across sessions. A few lines is enough to start. Tool-specific conventions can change between versions, so verify with your tool’s docs if something is not working.

When Things Go Wrong

Key Takeaways

• Scaffolding is letting the AI create the entire project foundation — folders, config files, starter code, dependencies — from a single prompt
• You are the homeowner, not the contractor: describe what you want, inspect the result, give feedback
• A good scaffolding prompt describes what (pages, features, design) not how (webpack config, CSS reset, TypeScript settings)
• Always verify after scaffolding: check the file structure with ls, run the project with npm run dev, and click through every page
• The orchestration loop is describe, verify, refine — repeat until it matches your vision