MK-226
select the target platform for your design system. this choice affects dimensions, typography, interaction patterns, and accessibility handling.
fonts & type scale
icon library
color scales, backgrounds & content
buttons & icon buttons
form controls & fields
status tags & alerts
cards & tables
page scaffolding & grid
Controls how tightly components are packed within sections.
Vertical rhythm between full page sections (hero, features, CTA, footer, etc.).
Controls content density and side margins. Compact keeps tighter margins for more content; spacious gives breathing room.
Controls how tightly components are packed. Compact suits data-heavy dashboards; spacious suits KPI or marketing layouts.
live preview of your design system in context.
coming soonclick on a component to
edit its properties
Total columns in the layout area. Column 1 is reserved for filters/controls when applicable.
960px · 1200px · 1440px · no constraint
sm 640px · md 768px · lg 1024px · xl 1280px
Mobile-first strategy — columns collapse to single column below sm.
Figma Make
Copy the contents of the instruction file and replace the original content of guidelines.md with the new instructions.
Claude Code
Add the instruction file to your project directory and ask Claude Code to refer to the instruction file before creating UI.
Cursor
Add the instruction file to your project directory and add a system instruction to follow the instruction file for creating UI.
Lovable
Click on + in the compose window and select knowledge. Paste the contents of the instruction file in the text area provided.
Bolt
Click on the settings icon next to preview, select knowledge and paste the contents of the instructions file in the text area provided.