Author a Catalog

Begin with a small, coherent set of components. A useful catalog is not the largest collection; it is a reliable design vocabulary for a particular product or visual system.

Authoring sequence

1. Choose production-ready React components.
2. Make their content props serializable and structured.
3. Register sections and elements under a unique source prefix.
4. Generate field definitions from TypeScript props.
5. Add only the overrides types cannot express.
6. Test editing and published rendering.
7. Add concise usage guidance and starter templates.

Section quality checklist

A section should:

• look complete with defaults;
• respond correctly at supported widths;
• expose only meaningful content controls;
• remain on-brand across reasonable input;
• avoid hidden data fetching;
• handle empty or optional content safely.

Design guardrails in the component

Do not ask a prompt to preserve constraints that the component can guarantee.

Keep typography scale, spacing, grid behavior, maximum item counts, and layout variants inside the component contract. Let fields expose deliberate choices rather than raw styling freedom.

Test with imperfect content

Try short and long text, missing optional fields, reordered arrays, different element choices, and unsupported proposals. The component should remain useful without relying on a perfect AI response.