Workspace
The workspace is the editing environment for creating, cloning, and modifying components.
Layout
- Live preview — the component rendered in real time, with viewport and theme toggles
- Code editor — Monaco-based editor with syntax highlighting; edit any file directly and the preview updates immediately
- AI assistant — prompt composer with model selection, image attachments, and chat history
Diffs, versions, and drafts
AI changes arrive as a diff you can review per file, then accept or revert. Accepted changes are saved as versions — the timeline lets you inspect and restore any previous version. Unsaved work is kept as a local draft, and the workspace offers recovery if you close the tab mid-edit.
Component tests
Run the built-in compliance tests from the toolbar. Vanilla components are checked for accessibility (WCAG contrast, ARIA, focus states), best practices, design-system token usage, and typography; React components get React-specific accessibility, best-practice, pattern, and performance suites.
Results distinguish errors (real problems that fail the suite) from warnings (style guidance that doesn't block).
Fixing failing tests
The Fix button repairs failures in two stages:
- Deterministic fixes run first — instant and free. Mechanical issues (missing attributes, comment cleanup, viewport/meta problems) are corrected exactly, and out-of-range colors are mathematically adjusted to meet WCAG contrast while keeping their hue.
- AI fixes handle the rest. Each attempt is verified by re-running the tests; attempts that make things worse are discarded automatically.
Design system switcher
Apply a design system from the toolbar: Quick apply swaps the component's design-tokens.css instantly, while AI re-theme restyles the component more deeply to match the target system.