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.

Editable illustration examples

Register optional serializable presets on an illustration or element to let users load complete example content into its existing fields:

{
  id: 'conversation',
  // component, fields and other metadata…
  defaultProps: { preset: 'support' },
  presets: [{
    id: 'support',
    name: 'Support conversation',
    props: {
      preset: 'support',
      messages: [
        { author: 'Alex', role: 'person', body: 'Can you check this record?' },
        { author: 'Agent', role: 'agent', body: 'Here is the latest result.' },
      ],
    },
  }],
}

The preset ID corresponds to the component's preset prop. Keep presentation settings, such as a channel or frame choice, outside preset props if loading a new example should preserve them. The component still resolves preset-only references at render time; this metadata supplies complete content for authoring.

The illustration picker and inspector expose Load example and keep all loaded content editable through ordinary fields. Loading an example replaces keys owned by any example, removing stale content while retaining independent presentation props. Existing preset-only references display their resolved content; the first edit saves the complete editable props without discarding untouched array items. Explicit custom values, including empty arrays, override example defaults.

materializeElementProps and applyElementPreset expose these operations for custom host editors. Presets are included in catalog detail operations and registry metadata. Hosts building manifests from runtime catalogs should copy presets alongside defaultProps and fields.