create-ds-component-page

Automate design system component page creation in Figma by parsing user prompts to explore UI libraries, generate showcases, apply token-aware styling, and save artifacts. It follows a CAPTURE-driven workflow to deliver ready-to-ship component pages.

Token binding maps colors and spacing to design tokens during component page generation. It ensures local asset handling for dependable captures and saves .figma.tsx wrappers to maintain connections between Figma visuals and code contexts.

You can generate UI library component pages for shadcn/ui, MUI, and Chakra. The workflow parses your intent, explores the specified library, suggests properties, and creates showcases for components like Button, Card, and Badge.

The best way to map component properties uses dual layout strategies: per-property items for display sections and cross-product masters for variant generation. This approach coordinates property instance swapping and master promotion on the Figma page.

You do not need an existing Figma page because the workflow manages page creation and reuse automatically. It parses your prompt, generates the showcase, captures it to Figma, post-processes the layout, and saves the resulting artifacts.

Automated Figma component captures require local assets to ensure dependable rendering during the capture path. The workflow explicitly handles token-aware styling and asset localization to prevent missing visual elements in the final page.