Component Library
A Storybook-style documentation system for your extracted components.
Overview
The Library view transforms your generated UI into a professional component documentation system. Each component gets its own page with interactive controls, prop tables, accessibility audits, and copy-paste code snippets.
Enterprise Taxonomy
Components are organized into an industry-standard 5-layer architecture following Carbon, Spectrum, and Atlassian design system standards:
Foundations
Design tokens, colors, typography, spacing, and grid definitions.
Components
Atomic UI elements organized into 6 subcategories: Actions, Forms, Navigation, Data Display, Feedback, and Overlays.
Patterns
Reusable compositions combining multiple components (e.g., search bars, card grids, data tables).
Templates
Full page layouts and wireframes (e.g., dashboard layouts, landing page structures).
Product Modules
Complete feature blocks with business logic (e.g., checkout flows, onboarding wizards).
Library Tabs
Controls
Interactive prop editor that lets you modify component properties in real-time. Change colors, text, sizes, and see the preview update instantly.
Example props:
- •
primaryColor- Main accent color (#hex) - •
label- Button text (string) - •
size- Component size (sm/md/lg)
Actions
See interactive behaviors like onClick, onHover, and other events. Useful for understanding component interactivity.
Visual Tests
Compare component states and variants side-by-side. Great for ensuring visual consistency across different configurations.
Accessibility
WCAG compliance checks for your components. See contrast ratios, ARIA attributes, and keyboard navigation support.
Usage
Copy-paste code snippets for each component. Includes HTML, CSS classes, and JavaScript for interactions.
How to Extract Components
- 1Generate your UI from video in the Preview tab
- 2Switch to the Library tab
- 3Click Extract Components
- 4AI will detect patterns and create component documentation
- 5Browse components in the sidebar, edit props in Controls
Library Toolbar
The toolbar at the top provides additional tools for working with components:
- • Grid - Toggle background grid for alignment
- • Background - Switch between dark/light/transparent
- • Ruler - Show component dimensions in pixels
- • Outline - Highlight component boundaries
- • Vision Simulator - Test accessibility (blur, grayscale, color blindness)
- • Viewport - Toggle desktop/mobile/fullscreen preview