Keeping track of your AI website project

TL;DR - Every new AI session starts with a blank slate. This unit is about building the documents that mean you never have to start from scratch - a finalized SITE PLAN.md, a component library, and a record of the creative choices that make your site yours.

Estimated time: 45-60 minutes

Outcomes & What you'll make

By the end of this unit you'll understand:

• Why documentation pays off every time you open a new AI session
• How a component library works and why it saves time later
• What a complete SITE PLAN.md looks like before you start building

What you'll make:

• A finalized SITE PLAN.md covering all sections
• A starter component library folder structure

We're just about to start building your website. AI is going to build a lot of code, very fast. To make sure we keep track of what it builds and how it fits together - we're going to set up some documentation files.

Documentation: Maintain valuable components and designs using AI

If you ever want to make changes, start over and re-build the website from scratch, or pick up where you left off after 6 months - documentation will be your life saver. In this course, we've already built a great SITE PLAN.md that explains a lot of the logic behind your site.

Since your plan is about to be translated into code, let's make sure the AI also captures explanations of what the code does. I'll refer to components from here on. (Some component examples: navigation bar, a menu button, article page)

For example, we can document:

• how components work (code-wise)
• why the components are designed a certain way
• rules for how components are used, placed, styled
• and more, all without having to repeat it.

The beautiful thing is, this lets us:

• keep track of more than just the code itself
• we can create a record of your individual taste
• the choices you made and why.

In effect, any time the AI needs to make a change - it will have the full context on how the code works, its implementation and more. Doesn't it remind you of the Skills and Harnesses chapter from Unit 2?

Idea for a setup

`/component-library/components

/component-library/ Component Library.md:
This folder contains a collection of components for use in web design. There is a table below, containing the Component Name, Use case and Pre-requisite. (e.g. dependent libraries etc.)

Each individual component file contains details on how to use them. Find the component you need below, access the file and review its individual instructions before proceeding to use it.

Component Library Maintenance.md How to create new Components, what they should contain etc. 
/component-library/components Example-component.md [What does this component do] [When to use it and why] [Dependent libraries or pre-requisites] [Adaptations or behaviours that developers may be interested in tweaking (e.g., features supported by the component that can be changed according to taste)] [Additional notes or exceptions to be aware of] [Code] [Further examples in different use cases] `

Finalize your tech stack

It’s quite possible that while planning the look, feel and features of your website - the technical demands have changed.

Before we finally move on to creating your website, we’re going to make sure once and for all, that you have all the tools you need.

Basically, have a two different LLMs assess the plan based on your use case and ideas about design etc. Share one’s assessment with the other, critique or integrate ideas from each other.

Learning reflections

• Documentation is really a record of your decisions and why you made them. Think about a past project - creative, technical, or otherwise - where that kind of record would have saved you time. What would you have written down?
• The guide talks about capturing not just code, but taste - the choices you made and why. Is that something you’d find useful outside of web design?
• You’re about to start building. What’s the one thing in your SITE PLAN.md you’re least confident about? Is there a way to test that assumption before committing?