Fit the design system
Use your design system before you add to it.
YouMap our new security settings page to the system.
Settings Security
Security
Keep your workspace and its data safe.
Two-step verificationAsk for a code on a new device.
Passkeys2 devices
ManageSecurity score3 of 4 steps done
YouMap our new security settings page to the system.
Fit report · security settings
- REUSEPage title → Text, title-md, as documented.
- COMPOSETwo-step setting → Card with a Switch inside.
- CONTRIBUTEProgress ring: nothing in the system draws circular progress.
Your callThe system owners decide whether to add it.
Illustrative example. The labels: REUSEUse what the system hasCOMPOSECombine parts that existCONTRIBUTENew; a case for the system owners
Say it your way
- “Does this new screen fit our design system?”
- “Do we need a new component for this, or a variant?”
- “Map every element in this mock to our components and tokens.”
It works through
- Reuse
- Compose
- Extend
- Contribute
- Create
- You decide
You get back
- A fit table
- A ladder decision
- Token mapping
- A contribution case
Install in one command.
It loads by itself when a request like these comes in. Free and open source, no account.
Claude Code
unzip splitfire-design-system-fit.zip -d ~/.claude/skills/ Every project on this machine. Use .claude/skills/ inside a repository to share with your team.
Codex
unzip splitfire-design-system-fit.zip -d ~/.agents/skills/ Every project. Use .agents/skills/ inside a repository instead, then restart Codex.
Claude apps
On claude.ai or the desktop app, upload the .zip in your skills settings. One zip is one skill.