Browse a shared library of working interactions, try them live, and drop one on a layer to bring it to life.
≈1,900 runnable patterns
37 starters
Drag onto any layer
Fork & configure
Team libraries
Search interactions…
AllMobileDesktopFeedbackNavigation
Toggle switch Official
Controls · Tap
Saved to drafts
Tooltip Staff pick
Feedback · Hover
Carousel Official
Media · Swipe
Pull to refresh Staff pick
Mobile · Drag
Design library
Thousands of design systems, ready to use.
Sync open-source repos and import thousands of DESIGN.md files. Apply one and your file gets its colours, type, styles and components, with matching tokens in code.
Sync GitHub & designmd.app
Add your own repos
Filter by tone, colour & style
Canvas + code in one click
Design librarySyncing…Add designs
Source
All
GitHub
designmd.app
Starters
Tone
○ Light● Dark
Colour
Search names, fonts, repos
Thousands of design systems
Aurora
Light interface, Inter type, vivid blue accents.
Inter★ 128
DARK
Nordlys
Dark interface, cyan accents, 12px corners.
Geist★ 96
Ember
Warm editorial system with serif headlines.
Fraunces★ 74
Monolith
Monochrome, tonal surfaces, sharp grid.
IBM Plex Sans★ 61
Kite
Playful violet system with soft shadows.
Nunito★ 52
Fjord
Calm teal palette for dashboards.
Source Sans★ 40
AI that understands your design.
Bring your own AI models and let agents work directly with your designs, components and code.
Login
Tighten the login screen to our design system.
✓ Read “Login” and 4 components✓ Matched tokens from Brand DSDrafting proposal…
Proposal · 3 changes
BeforeAfter
Corner radius 4 → {radius.lg} Fill #3355ff → {color/brand} Gap 12 → {space.md}
ApplyDiscard
Claude, OpenAI & Google
Reviewable proposals
Images & icons
Custom agents & skills
MCP server
Design-aware code
Every requirement traced to a screen
Every AI change previewed before it lands
Self-hosted. Your data stays yours
Close the gap between what you planned and what you shipped.