# AI Open Source Capstone class

## Unit 4: System Design Specifications and Milestone Planning

Your role as a developer is in system design, code quality, and verification.

AI is improving, but still makes very questionable system design decisions. Before beginning to code, first guide it to create a system design document (template below).

After creating a system design document, create a milestone planning document.

These assets serve a few purposes:

1. They greatly improve the AI's ability to generate code that is less prone to errors.
2. They allow you to quickly pick up where you left off.
3. They allow you to use many parallel agents to work on different areas of the plan.

### 1. Creating a system design document

System design (or architectural design) documents are used in FAANG engineering teams, and are generally required before coding.

A system design document outlines the general solution, high level architecture, and also documents the key design tradeoffs and decisions.

To try this out, invent a feature that you think would be interesting. For the in-class demo, we modified ChatBox to have a voice agent that we can talk to.

**Try it out**

1. Open one of the open source repositories in Cursor or Copilot.
2. Add the command for "[design_system.md](https://gist.githubusercontent.com/timothy1ee/fda045a15951e10c45e22ca7682b7513/raw/584cc13951190092287006689eb541518c9f71ba/design_system.md)" as a reusable prompt.
3. Open the AI panel and type "/design_system <describe what you want to design>"

### 2. Planning Milestones

Larger features generally have many components across the frontend and backend. Generate a sequence of milestones to implement the feature.

Each milestone should be relatively small and standalone. That way, it's easier for you to inspect and test the code.

It's very difficult to maintain quality control if the milestones are too large. AI is also not that good at debugging yet, and it's hard for you to help it if there's too much new code being introduced.

**Try it out**

1. Add the command for "[plan_milestones.md](https://gist.githubusercontent.com/timothy1ee/fda045a15951e10c45e22ca7682b7513/raw/d61a4e0c85d95caa986bd03353adbc8acdd7a3e7/plan_milestones.md)".
2. Open the AI panel and type "/plan_milestones for 001_xxx_design.md"

### 3. Implement a milestone

Now that we have the design and the sequence of milestones, we should do a final review of the next milestone. If we have a clear understanding of what it's doing, use the prompt below to implement the milestone.

**Try it out**

1. Choose one of the use cases you mapped out above
2. Add the command for "[implement.md](https://gist.githubusercontent.com/timothy1ee/fda045a15951e10c45e22ca7682b7513/raw/d61a4e0c85d95caa986bd03353adbc8acdd7a3e7/implement_v2.md)".
3. Open the AI panel and type "/implement milestone 1 from 001_milestones.md"

### 4. Evaluate Me

While you should always be reviewing each line of code carefully, it's too easy to skim through something you don't really understanding.

Use the AI to evaluate your understanding of the code that's been generated.

**Try it out**

1. Choose one of the use cases you mapped out above
2. Add the command for "[evaluate_me.md](https://gist.githubusercontent.com/timothy1ee/fda045a15951e10c45e22ca7682b7513/raw/d61a4e0c85d95caa986bd03353adbc8acdd7a3e7/evaluate_me.md)".
3. Open the AI panel and type "/evaluate_me"