After finishing this lesson, you will be able to confidently do the following 3 things.

• ▸✅ A one-week roadmap to complete a portfolio toy project
• ▸✅ Writing PRs and READMEs for AI-generated code
• ▸✅ Measuring token usage + identifying savings opportunities

Keep the learning objectives as a checklist, and close the lesson once you can answer all of them.

Goal: Build a company intro or SaaS landing page within 1 hour.

Tools: v0 + Cursor + Vercel

1-Hour Plan:

Example v0 Prompt:

SaaS landing page hero section:
- Headline + subtext
- CTA buttons (Get Started, Watch Demo)
- Background: gradient + animated grid
- Dark mode by default
- Use shadcn/ui components

Key Patterns:

• ▸shadcn/ui — consistent design system
• ▸Next.js Image — image optimization
• ▸Framer Motion — lightweight animations
• ▸Resend·Loops — email forms

> 💡 Don't chase perfect design. The goal is a working MVP.

Goal: REST API + DB + authentication, all in one series.

Stack: Next.js 14 API Routes / Drizzle ORM / Postgres (Neon) / JWT

2-Hour Plan:

Example Claude Code Prompt:

Following the tech stack in @CLAUDE.md:
1. drizzle schema: posts (id·title·body·userId·createdAt)
2. /api/posts:
   - GET (list with pagination)
   - POST (auth required, zod validation)
   - PUT /:id (author only)
   - DELETE /:id (author only)
3. vitest tests for each method (success, auth failure, authorization failure)
4. Auto-run in CI

Key Learnings:

• ▸API contract (specify input/output)
• ▸Authentication vs. authorization
• ▸Error handling and HTTP status codes
• ▸Production-ready security (rate limiting, input validation)

Goal: A RAG chatbot grounded in company documents.

Stack: Next.js + Anthropic API + Postgres + pgvector + Vercel AI SDK

3-Hour Plan:

Core RAG Code Flow:

// 1. Chunking (langchain·llamaindex)
const chunks = await splitter.splitDocuments(docs);

// 2. Embeddings
const vectors = await Promise.all(
  chunks.map(c => openai.embeddings.create({
    input: c.pageContent,
    model: 'text-embedding-3-small'
  }))
);

// 3. Store in pgvector
await db.insert(documents).values(/* ... */);

// 4. Search (embed query → cosine similarity)
const results = await db.execute(sql`
  SELECT * FROM documents
  ORDER BY embedding <-> ${queryEmbedding}
  LIMIT 5
`);

// 5. Send context + question to Claude
const stream = await anthropic.messages.stream({
  model: 'claude-sonnet-4-6',
  messages: [{
    role: 'user',
    content: `Evidence:
${results}

Question: ${userQuestion}`
  }],
});

Production Considerations:

• ▸Chunking strategy (semantic units, fixed size, sliding window)
• ▸Caching (Redis)
• ▸Rate limiting
• ▸Logging (questions, evidence, answers)
• ▸Evaluation (RAGAS, accuracy metrics)

1. Experience with AI Tools

• ▸"Which tools do you use? Why those?"
• ▸"How do you validate AI-generated code?"
• ▸"Explain the differences between Cursor, Claude Code, and Copilot"

2. Prompt Engineering

• ▸"What do you do when a single prompt doesn't give good results?"
• ▸"Experience with chain-of-thought prompting"
• ▸"How do you version-control your prompts?"

3. Understanding LLM Limitations

• ▸"Have you encountered hallucinations? How did you handle them?"
• ▸"Why doesn't an LLM actually think?"
• ▸"What's your strategy when the context window runs out?"

4. RAG and Agents

• ▸"Difference between RAG and fine-tuning"
• ▸"Criteria for choosing a vector DB (Pinecone vs pgvector)"
• ▸"What does it mean that MCP is like LSP?"

5. Ethics and Security

• ▸"IP issues with AI-generated code"
• ▸"Is it okay to send internal code to an external LLM?"
• ▸"Who's responsible if AI introduces a security vulnerability?"

Good Answer Patterns:

• ▸✅ Real hands-on experience (specific tools and projects)
• ▸✅ Awareness of trade-offs (when it's suitable vs. unsuitable)
• ▸✅ Emphasize verification ability (testing, code review)
• ▸❌ "AI does everything for me, so it's convenient" (weak on verification responsibility)
• ▸❌ "I don't use it at all" (out of touch with the trend)

> 💡 Key message: Code made by AI is still your responsibility. Direction, verification, and architecture belong to humans.

That Question the Interviewer Will Ask

> "This PR code — didn't AI write all of it?"

Don't panic. Every interviewer asks this. Preparing your answer is what determines whether you pass.

❌ Bad Answers

> "Yes, AI wrote it. I just wrote the prompts."

→ Gets stuck on the follow-up: "So what did you actually do?" Risk of rejection.

> "I didn't use AI. I did everything myself..."

→ A git log showing large changes in a short time exposes the lie. Immediate rejection.

✅ Good Answer — 3 Beats

1. Be honest + emphasize verification

> "Yes, I actively used Cursor and Claude Code. AI handled the generation quickly, but:
>
> 1. Verification was done by me — unit test coverage at 80% with Vitest, E2E tests written with Playwright.
> 2. Trade-off decisions were also mine — for example, when choosing between Drizzle vs Prisma, I prioritized Drizzle's smaller bundle size and more accurate TypeScript inference.
> 3. Architecture decisions — AI initially suggested a REST API, but I switched to a WebSocket + SSE hybrid due to real-time notification requirements."

→ The interviewer mentally categorizes you as "this person knows how to control AI."

2. Explicitly state what AI couldn't do

> "Three problems I found in the code AI initially generated:
>
> 1. N+1 query — when fetching User → Orders → Items. Resolved with a single JOIN using Drizzle with.
> 2. Race condition — negative balance during concurrent payments. Added a PostgreSQL row-level lock.
> 3. XSS vulnerability — dangerouslySetInnerHTML used as-is. Introduced DOMPurify."

→ Proves problem-finding ability. Human judgment is superior to AI.

3. Reproducible workflow

> "I included CLAUDE.md and spec.md in git so it's reproducible. Even a new team member can collaborate with AI using the same context.
>
> I also version-control the prompts themselves — frequently used prompt templates are saved in a prompts/ folder."

→ Emphasizes team collaboration + reproducibility. Shows the mindset of someone who can work in a team.

Interview Practical Q&A — Model Answers

Q1: Have you encountered a hallucination?

> "v0 used a non-existent shadcn component (<Slider3D>). I caught it while cross-referencing the official docs, and since then I explicitly specify available component names in the prompt.
>
> Claude also recommended npm install zod-extras, which I confirmed doesn't exist using npm view. In practice, it could be replaced with zod's superRefine."

Q2: Strategy when context runs out?

> "1) First, add the missing parts to CLAUDE.md
> 2) If still insufficient, specify the relevant files and attach them to the prompt (@src/auth.ts)
> 3) For truly large tasks, write the spec first to save context in follow-up conversations"

Q3: SPEC-Driven vs Vibe — when to use which?

> "Prototypes that can be done within an hour: Vibe.
> Risky areas like multi-person collaboration, payments, and authentication: SPEC.
>
> Decision criteria: Will having a spec speed up debugging for whoever touches this code later? → If YES, write a SPEC."

Q4: Security and IP of AI-generated code?

> "1) Security: SQL and authentication code generated by AI must pass an OWASP Top 10 check. Enforce parameterized queries, bcrypt, and HTTPS.
>
> 2) IP: Sending company code to an external LLM is a legal issue. Recommend using Copilot Business or an in-house LLM.
>
> 3) Licensing: Risk of accidentally reproducing GPL-licensed code from training data. Write core algorithms from scratch or use licensed libraries."

Summary

• ▸Honestly acknowledge AI usage
• ▸Emphasize that verification, decisions, and architecture are your role
• ▸Specifically point out what AI couldn't do
• ▸Include CLAUDE.md and spec.md in git for reproducibility

[1-Hour Project] Landing Page — Token-Saving Tips

Key: The v0 → Cursor flow is the most efficient.

⚠️ Don't do this: "Rebuild this landing page with a different design" — full rewrite = token bomb

[2-Hour Project] CRUD API — Token-Saving Tips

Key: spec.md first, then one endpoint at a time.

⚠️ Don't do this: "Build the entire CRUD API at once" — outputting everything at once costs 5000+ tokens and makes verifying each endpoint difficult

[3-Hour Project] RAG Chatbot — Token-Saving Tips

Key: Most complex → Use Spec-Kit + validate step by step (mandatory).

⚠️ Don't do this: "Build the RAG chatbot from start to finish" — starting without a spec means rewriting 5 times. A true token bomb.

Summary

All 3 projects share the same principles:
1. Separate the stages — don't do everything at once
2. Specify files and scope — "only the X function in @auth.ts"
3. Spec first — the bigger the project, the more effective this is
4. Validate frequently — git commit + tests

Knowing the concepts from this lesson lets you give AI specific instructions. Instead of a vague "fix this," you make requests with vocabulary — that's the starting point for saving tokens.

• ▸"Organize this toy project into a portfolio-ready PR (README + demo GIF + retrospective)"
• ▸"Analyze the token usage for this task + tell me the savings opportunities"

Why This Reduces Tokens

Without knowing the concepts, you have to ask "What does that mean?" again after getting a response from AI. That re-asking eats tokens. Learn the concepts once and conversations finish in a single round.