How to Use This Repo

How to Use This Repo

This repo is designed to help an AI agent, designer, engineer, or collaborator understand a brand and apply it consistently to design and front-end work.

Use it as a structured handoff system.

Step 1: Start with the company context

Begin in company/.

This folder should explain:

• who the company is
• what the brand stands for
• who the audience is
• how the brand should sound
• what the brand should avoid
• any important positioning or messaging rules

If this folder is weak, the rest of the repo will be weaker too.

Step 2: Identify the real front-end code

Use github-code/ to document the production repo and the files worth reviewing.

Do not ask an AI agent to inspect a full codebase unless it is necessary.

Instead, identify the most relevant front-end files and copy them into selected-frontend-subfolder/.

Good candidates include:

• layout files
• global CSS
• theme files
• component files
• page templates
• navigation
• buttons
• cards
• forms
• typography styles
• design-token files

Step 3: Add Figma context

Use figma/ to document the design file and what should be extracted from it.

Helpful extraction targets include:

• colors
• typography
• spacing
• layout grids
• components
• variants
• page templates
• interaction patterns
• responsive behavior

The goal is not just to link Figma. The goal is to make Figma usable as design-system evidence.

Step 4: Load assets with a manifest

Use fonts-logos-assets/ for fonts, logos, icons, images, and other brand files.

Do not rely only on folder browsing.

Use manifest.csv to describe each asset so a human or AI agent can understand what it is, when to use it, and whether it is canonical.

Step 5: Add web examples

Use web-examples/ for reference sites.

These can include:

• competitor websites
• best-in-class examples
• landing pages
• product pages
• portfolio references
• visual inspiration
• interaction examples

For each example, explain what is useful about it.

Do not just collect links. Capture why the example matters.

Step 6: Run the Claude prompts

Use claude-prompts/ to inspect the repo, extract design-system guidance, review front-end work, or generate implementation recommendations.

These prompts are the operating layer of the repo.

They turn the gathered context into useful outputs.

Step 7: Maintain working notes

Use clad-notes/ for current requirements, constraints, and decisions.

This folder should answer:

• what is still unresolved
• what the AI should prioritize
• what the design system must support
• what decisions have already been made
• what should not be changed without review

If there is a conflict, treat the requirements file as the current working spec until it is updated.

Step 8: Keep raw inputs separate

Use source-docs/ for unprocessed material.

This can include:

• screenshots
• exported docs
• rough notes
• client materials
• copied brand language
• old design references
• unstructured research

Do not treat raw inputs as final guidance until they have been processed into the structured folders.

Good operating rule

The repo should make the next action obvious.

A new collaborator should be able to open it and understand:

1. what brand this is for
2. what files matter
3. what assets are official
4. what prompts to run
5. what requirements are active
6. what output is expected

What not to do

Do not dump everything into the repo without structure.

Avoid:

• unlabeled assets
• vague reference links
• huge code folders with no guidance
• Figma links with no extraction notes
• prompts disconnected from the repo structure
• raw notes treated as final direction
• brand language with no usage guidance

Bottom line

Use this repo to turn brand context into repeatable design and front-end execution.

The better the structure, the better the AI output and the easier the human review.