Agentic Design loop.png

A context-file system for running AI agents inside a product design process. The files below are written out in full for a product, Craftfolio, a website builder for small service businesses.

Setup

  1. Create respective files in an AI IDE. (eg. VScode + Claude)
  2. In product-context.md, replace Craftfolio with your product. Write the central tension line first; the other sections depend on it.
  3. In design-rules.md, delete the example rules. Write your first three from the last three things your team rejected in a design review, with the reason each was rejected.
  4. Leave claude.md mostly as-is. It only defines process, so little of it is product-specific.
  5. Add 15 minutes to your weekly design review to check whether any critique from that week should become a rule.

How the system works

The agent reads three files before every task. Each file has one job and one owner: claude.md defines how the agent operates on any task, design-rules.md holds the constraints and the reasoning behind them, product-context.md states who the user is and what the current priority is. Splitting them this way means each file changes at its own rate — claude.md rarely, design-rules.md weekly, product-context.md monthly — and a single owner is accountable for keeping each one current.

The checklist connects critique back into the files. When the same critique comes up more than twice, it gets written into design-rules.md with its reasoning attached. The reasoning is what makes the rule transfer: a bare instruction only covers the case it came from, while a rule plus its reason lets the agent apply the constraint to situations the rule never mentioned. Over time the agent's output shifts because the files it reads have accumulated your team's actual decisions.

1 · The 4-Step Design Loop (checklist)

Run this on every project.

Step 1 — Brief

The agent reads the files before generating. Context given in the chat window isn't available to the next task; context in files is.

Step 2 — Generate