interface-design Skill: Craft-First Design for Dashboards and SaaS Screens

Makes your agent design dashboards, admin panels and SaaS screens deliberately, and saves its design system for later sessions.

Installs: 31.6K; on skills.sh
Stars: 5.9K; on GitHub
Files: 1; besides SKILL.md
Updated: Jun 2026; last repo commit

interface-design makes your agent treat product UI as a set of decisions instead of defaults. Before it writes code it works out who the user is, what they must do and how the screen should feel, names one signature element and rejects three default choices. It then builds with a type scale, a spacing grid, one depth strategy and every interaction state, and offers to save the result to .interface-design/system.md so later sessions reuse it. It is for tools and apps, not for landing pages or marketing sites.

Good for

Developers building dashboards, admin panels and settings pages
Design engineers who want consistent spacing, tokens and states
Founders shipping an internal tool without a designer
Claude Code and Codex users who already run skills

Install interface-design

Claude Code

Copy this prompt.

Install the interface-design skill in Claude Code. Run this command:

npx skills add https://github.com/dammyjay93/interface-design --skill interface-design

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, building, reviewing, auditing, or refining product UI where visual craft, layout hierarchy, tokens, states, visual direction, or design-system consistency matter. Not for marketing pages, landing pages, campaigns, or brand-only work.

Sections in SKILL.md

Scope
One focal point per view
Type scale is a ratio, and weight beats size
Density is a decision, expressed in px
Spatial rhythm — breathe unevenly
Proportions speak
Distribution and restraint (the "expensive" look)
Subtle Layering (the backbone)
Infinite Expression
Color Lives Somewhere
Controls: native → primitive → hand-roll
Styling: system → component → token → utility
Static polish
Motion
Communication
Execution discipline

Key facts

Author: Damola Akinleye (dammyjay93)
License: MIT
Installs on skills.sh: 31,559 (Nov 2, 2026)
GitHub stars: 5,896 (Nov 2, 2026)
Last commit: Jun 20, 2026
What installs: 2 files including SKILL.md: an agents/openai.yaml display file; no scripts
Writes: .interface-design/system.md in your project, after it asks
Not for: Landing pages, marketing sites, campaigns, brand-only work
skills.sh audits: Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass

What it includes

Asks who the user is, what they must do and how it should feel
Words like "clean and modern" do not count. If the prompt is too vague it asks one concise question.
Intent first
Lists domain concepts, colors, a signature and the defaults to avoid
At least 5 domain concepts, 5 colors from the product's world, one signature element and 3 obvious defaults.
Product domain exploration
One focal point, a type scale ratio and a chosen density
Uses size, weight and color together. Names spacing values in pixels.
Visual hierarchy and composition
Quiet surface layers and low-opacity borders
Applies the squint test: blur your eyes and the hierarchy should still read without harsh lines.
Craft foundations
States intent, hierarchy, palette, depth, surfaces, type and spacing before each component
SKILL.md calls this checkpoint mandatory every time UI code is written.
Component checkpoint
Prefers native HTML, then a headless primitive, then hand-rolling
Also tells the agent to use your design system and semantic tokens instead of hard-coded values.
Read · Use what exists
Tokens, a 4 or 8 px spacing base, one depth strategy, a radius scale
Also covers four levels of text hierarchy and dark mode.
Design system essentials
Concentric radius, tabular numbers, 44 px hit areas, motion under 300 ms
Respects prefers-reduced-motion and animates only transform and opacity.
Polish and motion
Shows palettes and components inline if a render tool exists
SKILL.md says to check for such a tool and fall back to code and text if there is none.
Render it when you can
Proposes a direction, then asks "Does that direction feel right?"
Domain, color world, signature, rejected defaults and direction, before building.
Suggest + Ask
Swap, squint, signature and token tests before it shows you the result
If a test fails the agent iterates first.
The checks
Offers to save direction, depth, spacing and component patterns
Writes the file only if you say yes. Later runs read it and hold to it.
Write · Save to .interface-design/system.md
Strict craft and hierarchy review with an approval bar
Listed in SKILL.md. The command file sits in the repo's .claude/commands folder, outside the skill folder.
Read · /interface-design:design-review
Fast, diff-scoped pass that strips visual slop from a branch
Listed in SKILL.md. The command file sits in the repo's .claude/commands folder, outside the skill folder.
Write · /interface-design:design-deslop

From the official docs

Permissions

Low risk

It edits your UI code and can write a design-system file into the repo. Read the diff before you commit.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It edits your UI code
It is a build and review skill, so expect changes to components and styles. Read the diff before you keep it. github.com
It writes a design-system file
After a task it offers to save patterns to .interface-design/system.md and later runs apply it. Say no if you do not want a new file in the repo. github.com
It may run build, typecheck and tests
SKILL.md says to run the relevant build, typecheck or tests when available. Those run with your agent's normal permissions. github.com
It may use an image-generation tool
For big redesigns it may call an image-generation tool if one is connected, and the reference image is not the deliverable. Skip that step if you do not want it. github.com

Technical details

Scopes	Your project's UI code and design tokens One optional file: .interface-design/system.md

Questions

What does interface-design do?

It makes your agent design product UI, such as dashboards and settings pages, from the user and task outward instead of from a generic template. It pins down hierarchy, spacing, depth and states, then offers to save those decisions so the next session stays consistent.

How do I install interface-design in Claude Code?

Use the install box above. The README recommends the skills CLI, which installs the skill folder, and says Claude Code can then invoke it as /interface-design.

Does interface-design work in the Claude app or Codex?

Codex yes, per the README: the skills CLI has a Codex target, and you can invoke it as /interface-design. The README does not mention the Claude app, but the install box has an upload tab you can try.

Does interface-design need an API key?

No. It bundles no scripts and SKILL.md names no key. If an image-generation tool is connected it may use it for reference images, and that tool has its own account.

Is interface-design safe?

It writes UI code and can write one file, .interface-design/system.md, after it asks. SKILL.md also tells it to run your build, typecheck and tests when available. The README adds: "Review installed skills before use. Skills run with the same permissions as your coding agent."

Do I get the design-review and design-deslop commands?

They are listed in SKILL.md and live in the repo's commands folder, not in the skill folder. The README says the skills CLI installs the core skill, and it describes a plugin route for Claude Code. You can also ask for a design review in plain words.

Is it good for a landing page?

No. SKILL.md says it is not for landing pages, marketing sites, campaigns or brand-only work, and points to a marketing or frontend design skill for those.

Information

updated Nov 2, 2026

Repository: dammyjay93/interface-design
Folder: .claude/skills/interface-design

dammyjay93/interface-design skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

interface-design SKILL.md · github.com
dammyjay93/interface-design README · github.com
interface-design plugin.json · github.com