Component Schemer

About this plugin

Component Schemer reads your component properties, values and description and creates a JSON file that can be downloaded. If your component is one of the common W3C Aria patterns, accessibility information is automatically populated.

Teams use JSON-based schemas to move from static layouts to perceptual and adaptive interfaces. JSON Schemas are blueprints that can be consumed by LLMs and Generative UI AI tools to ensure designs and products align to the teams design system components (and tokens!).

Standard LLMs often "hallucinate" code: inventing props like color="blue" when your system only supports variant="primary".

Frameworks like Vercel's AI SDK use JSON schemas to guide LLM decoding at the token level, ensuring the model's output conforms to your exact structure, data types, and enums.

The idea for the plugin was inspired by Murphy Truman's great thought leadership work around how design systems can prepare their environments for LLMs and beyond by ensuring all aspects of the ecosystem are represented as data in machine-readable formats. The Schema format was fine-tuned with reference to the great work the Design Systems team at Adobe Spectrum 2 are doing.