Phase 7 · Design-to-code seam
Day 18 · Components That Document Themselves
Day 18

Components That Document Themselves

~60 min

Goal — Make components self-describing so their documentation is generated, not hand-written.

By the end — A component that carries its own metadata and a doc page generated from it — one that cannot silently fall out of date.

1See why docs drift

Hand-written documentation goes stale the moment the code changes and nobody updates the doc. The fix is to generate docs from the code itself.

Ask Claude
Explain why manually written component docs drift out of date, and how generating them from the code fixes it.

2Make a component describe itself

The component now carries its own facts, next to its code.

Ask Claude
Take a component in the project and give it a small metadata description — its name, purpose, and options.

3Generate documentation from it

Because the docs are built from the metadata, they cannot silently fall out of date.

Ask Claude
Generate a simple documentation page for that component from its metadata, and explain how this stays in sync automatically.

4Understand the principle

This is how real design systems keep dozens of components documented without an army of writers.

Ask Claude
Summarize the idea of a "self-describing component" and why it matters for a design system.

5Commit the seam work

Save the tokens seam and the self-describing component together.

Open the Terminal app.

Run in the terminal
git add . && git commit -m "Build the tokens seam and self-describing component" && git push

Recap — You gave a component its own metadata and generated its docs from it, so the documentation stays true to the code by construction.

Day 17Day 19