Turn Drawings into Code
bridges the gap between visual design and code. Draw on your UI, describe what you want, and let AI do the rest.How it Works
Activate Overlay
Press ⌘+Shift+E to toggle Skema on top of your localhost.
Draw or Select
Circle a button, arrow to where it should move, or lasso multiple elements.
Describe the Change
Type what you want: "make this button bigger" or "add a hover effect".
Generate & Apply
AI generates the code, writes it to your files, and commits to git.
Core Features
Drawing Overlay
Scribble, circle, arrow, or highlight anything on your live localhost. No more describing layout issues, just point at what needs fixing.
Full tldraw canvas overlayLasso Select
Click any element to capture it, or draw a freeform lasso to select multiple at once. We automatically extract CSS selectors, tag names, and bounding boxes.
Multi-element selectionContext Capture
Every annotation captures a screenshot of your drawing plus all relevant DOM context. AI sees exactly what you see, including nearby styles and CSS classes.
Screenshot + DOM analysisAI Code Generation
Type what you want, hit submit, and watch Gemini generate the exact code changes. It understands your drawing, your selected elements, and your project's style patterns.
Gemini CLI integrationInstant Updates
Generated code gets written directly to your source files. No copy-pasting, no switching windows. Your hot-reloading dev server shows changes immediately.
Zero-friction workflowReady to draw your code?
Install Skema in under a minute and start annotating.
Get Started →