component studio — visual design selector
Workspace/Component library
Local workspace
150 live components

Your next interface, in pieces.

Search a larger, production-minded library. Try a component, tune its states, and add the exact direction to your board.

150 components. One clear handoff.8 families · live states · exact tokens
Accent

Explore the collection

150 componentsInteract with the previews · + keeps the look
Hand-built live examples · not AI-extracted
Configuration playground

Make it yours

LIVE PLAYGROUND
Pick by looking

Swap a component

Where the direction started

Your original reference

Original screenshot of a dark documentation page with navigation, example cards, demo areas, and guidance callouts.

Original image: 303 × 2,048 pixels. The gallery contains hand-built component examples, not automatic extraction of this image. Use it to choose the look and behavior you actually want.

From visual choices to clear instructions

Give your agent the actual design.

Your selections, not a vague description.

SCREENS.html · chosen screen + alternativesCOMPONENTS.html · saved board referencesdesign-contract.json · exact settingsAGENT_BRIEF.md · implementation directionproject.component-studio.json · keep editing

Send the extracted pack with this prompt

    

The agent needs the actual files, not just the prompt. The pack includes your original reference and a live HTML board with all selected states.

Motion system

Choose motion visually, then fine-tune only when needed.

Project analytics

The same component, rendered with your selected motion character.