01
It starts by itself
PR changes product UI. Runs in Claude Code routine or GitHub Actions.
- ↻ PR changes product UI
pull_request on UI component and style files
Dammyjay93 · 30K installsInterface Design skill
Runs by itself, every time your app screens change.
Every screen change follows your design rules.
Install the Interface Design skill and make it a habit: follow https://gethabit.dev/skills/dammyjay93/interface-design.md
- 1Copy
- 2Paste into Claude Code, Codex or Cursor
- 3It runs by itself
30K installs6K starsMIT licenceSource on GitHub ↗
Interface Design
by Dammyjay93 · 30K installs
The skill
Helps build clear, good-looking app screens.
Only when you ask.
Better design
Every screen change follows your design rules. Your app looks better each time.
↻ Runs by itselfevery time your app screens change
How the habit works.
You don't have to.
When does it start? How does it check its work? What does it remember?
One run, step by step.
Then it stops.
One pull request per run, at most two rework rounds on failed checks.
- 01
Read the system
The agent reads .interface-design/system.md and the existing tokens and components.
- 02
Explore if new
Without a system file it lists domain, color world, signature and defaults, then asks if the direction feels right.
- 03
State the checkpoint
Before each component it writes intent, hierarchy, palette, depth, surfaces, typography and spacing.
- 04
Use what exists
It prefers native HTML, then a headless primitive, then the project's own components and tokens.
- 05
Build and verify
It runs build, typecheck and tests, then checks the screen at desktop and mobile widths.
- 06
Craft tests
Swap, squint, signature and token tests must pass before showing the result.
- 07
Save patterns
It offers to save new reusable patterns to system.md, and writes them when you say yes.
What it may do.
Nothing more.
It writes only in its own folder and asks you before anything goes out.
- Writes only inUI files in the pull request, .interface-design/system.md
- Talks tono outside service
- Sendsnothing
- Your OKIt asks you before anything goes out.
Is it for you?
Use it when it fits.
Read both lists. If the left one sounds like you, the Interface Design skill helps.
Use it when
- ✓ You build a dashboard or admin panel
- ✓ Your UI looks generic and flat
- ✓ You want a design system kept across sessions
Skip it when
- – You build a marketing or landing page
- – The work is brand-only
Interface Design skill, answered.
Is it for landing pages?
No. It targets dashboards, admin panels, SaaS apps, settings and data screens. Marketing pages need another skill.
What makes it get better over time?
Each save adds decisions to system.md, and later runs hold new code to those values.
How do I install the Interface Design skill?
Copy the prompt at the top into your agent. It installs the skill from Dammyjay93/interface-design and sets up the habit. Or run npx skills add Dammyjay93/interface-design --skill interface-design.
Is the Interface Design skill free?
Yes. It is published under MIT. Habit is free too.
Interface Design. Now as a habit.
Install the Interface Design skill and make it a habit: follow https://gethabit.dev/skills/dammyjay93/interface-design.md
All Dammyjay93 skills →More design skills →
Works in
- Claude Code
- Codex
- Cursor
- ChatGPT
- Claude app
Made by Dammyjay93, published under MIT. Habit links to the original and never changes it. Is this your skill?