interface-designby Dammyjay93

Interface Design Skill.

A Claude Code and Codex skill for UI design: craft-first interface design for dashboards, admin panels, SaaS tools, and settings pages.

Web & UI
UI code

Download OpenDesign View usage guide

Dammyjay93/interface-design · .claude/skills/interface-design/SKILL.mdSKILL.md

--- name: interface-design description: 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. --- ## 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

Front matter and section headings read from the upstream file on 2026-09-14 · 29,304 characters in full

01 What it does

What the interface-design Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A craft-first discipline for building product UI — dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces — with the decisions a top design team would make. It forces a working brief before code: who the human is, the one verb they came to do, and what the interface should feel like in words that mean something.

From there it prescribes domain exploration (domain, color world, signature, rejected defaults), a type scale built on a ratio with weight and color doing hierarchy work, a single committed depth strategy, semantic tokens rather than hardcoded literals, and the polish and motion essentials — tabular numbers, concentric radius, sub-300ms durations, no animation on high-frequency actions. Explicitly not for landing pages, marketing sites, campaigns or brand-only work.

What it produces

A Suggest + Ask proposal naming Domain, Color world, Signature, Rejecting and Direction.
Inline rendered specimens — palette swatches, the type scale in the real typeface, stacked elevation cards, the signature as a real component — when a render tool is present; the implementation itself still lands in the codebase.
A saved .interface-design/system.md holding direction, depth strategy, hierarchy decisions and repeated component patterns, written only after the user says yes.

See the example prompt ↗

How It Works

01
Write the Working Brief
Before any code, answer who the human is, what verb they must accomplish, and what the interface should feel like — kept compact unless the direction needs confirmation.
02
Explore the Product Domain
Produce four outputs before proposing a direction: at least 5 domain concepts, 5+ colors from the physical world of the product, one signature element, and 3 obvious defaults to reject.
03
Propose and Confirm the Direction
Lead with a Suggest + Ask block naming Domain, Color world, Signature, Rejecting and Direction, then check that the direction feels right before building.
04
Render Specimens Where Possible
If the session has an inline visual-rendering tool, show the palette, type scale, elevation steps and signature as real components instead of describing them; otherwise fall back to code.
05
Build Against What Exists, Then Verify
Inspect the app, tokens, component patterns and system.md, patch the implementation, run build, typecheck or tests where available, then verify visually at desktop and mobile widths.
06
Offer to Save the Patterns
After a task, offer to record direction, depth strategy, hierarchy decisions and repeated component patterns so later sessions stay consistent.

02 Find your fit

When to Use the interface-design Skill

Use the interface-design skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Product UI work: dashboards, admin panels, SaaS apps, tools, settings pages and data interfaces.
Reviewing, auditing or refining an existing product UI, not only building new screens.
Greenfield screens, major redesigns and vague direction, where a visual reference pass can precede the code.
Holding an existing system.md to its declared values on new work.

Know the Boundaries

Landing pages, marketing sites, campaigns and brand-only work, which the file sends to a marketing or frontend design skill instead.
Generated image assets cover empty-state art and textures only — never icons, logos or charts.
Native select and date inputs cannot be styled, so they must be replaced with a headless primitive rather than hand-rolled.
Inline rendering is conditional: in CI, headless agents or plain terminals there is no widget, so the skill falls back to code, tokens and a written proposal.

What to Provide

The human, the verb and the feelThe brief has to identify who opens the interface, what they must accomplish and what it should feel like in meaningful words; if it cannot, the skill asks one concise question or states a responsible assumption and proceeds.
The existing codebaseThe existing app, design tokens, component patterns and .interface-design/system.md are inspected so controls and styles are reused rather than reinvented.
A screenshot, for paintoverWhere an image-generation tool is available, an existing screenshot can be turned into a stronger version before any code is written.

03 Inside the skill

Rules the interface-design Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Run the pre-code Checkpoint
Before writing any UI code, even small additions, state Intent, Hierarchy, Palette, Depth, Surfaces, Typography and Spacing — and be able to say why for each one.
Native, Then Primitive, Then hand-roll
Never build a div with an onClick where the platform already offers a button or link; stateful controls such as select, combobox, dialog, popover, tooltip, tabs and date picker come from a battle-tested headless primitive.
Tokens Over Hardcoded Literals
Bind styling to semantic tokens — bg-card, border-border, text-muted-foreground — rather than bg-white, border-gray-200 or text-gray-500, which break theming and dark mode.
Step Type by a Ratio, Not by Feel
Pick one ratio and step it: about 1.2 for dense or calm UI, 1.25 for most product UI, 1.333 for expressive, starting from a 14 to 16px body and rounding to whole pixels on the spacing grid.
Commit to Exactly One Depth Strategy
Choose borders-only, subtle shadows, layered shadows or surface-color shifts and hold it everywhere; mixing strategies is listed under Avoid.
Keep UI Motion Under 300ms
Button press 100 to 160ms, tooltips and popovers 125 to 200ms, dropdowns 150 to 250ms, with a custom ease-out rather than the weak built-in curves or ease-in.
No Animation on Repeated Actions
Anything done 100+ times a day — keyboard shortcuts, the command palette — gets no animation at all, because it makes them feel slow; modals, drawers and toasts still get standard animation.
Never Animate from Scale Zero
Entrances start at scale 0.95 with opacity 0, because nothing appears from nothing.

04 Put it to work

Install interface-design in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add interface-design to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

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

Generic skills CLI form for .claude/skills/interface-design/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Build the settings page for [product], a SaaS tool. [The person] opens it to [task], and it should feel [feel], not like a generic admin panel. Our tokens and components live in [existing design system], so reuse those. The focal element is [focal element], and it needs loading, empty and error states.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Swap test — swap the typeface for the usual one and the layout for a standard template; wherever nothing would feel different is where you defaulted.
Squint test — blur your eyes; hierarchy should still read, and nothing should jump out harshly.
Signature test — point to five specific elements where the signature appears; the overall feel does not count.
Token test — read the CSS variables aloud and ask whether they belong to this product's world or to any project.
Look at the result in the inline render tool, a local browser or screenshots at desktop and mobile widths.
Fix overlap, broken spacing, blank states, unreadable text, missing assets and generic composition before presenting anything.

In OpenDesign import interface-design from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Dammyjay93
Repository: github.com/Dammyjay93/interface-design Branch main
Skill file: .claude/skills/interface-design/SKILL.md Content checksum recorded at verification; commit 2f9be32
License: MIT From LICENSE.
Repository stars: 5,692 GitHub snapshot taken 2026-09-14 for the whole Dammyjay93/interface-design repository. Not a rating or usage count for interface-design.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

ScopeUse for dashboards, admin panels, SaaS apps, tools, settings pages; not for landing or marketing work.
Intent FirstAnswer who the human is, what they must accomplish, what it should feel like.
Product Domain ExplorationProduce domain concepts, color world, a signature and 3 rejected defaults first.
Render It When You CanConditionally render specimens when proposing, component-building or critiquing, keeping reasoning in prose.
Visual H

The Skill's Own Description

“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.”

Front-matter description from SKILL.md. The full file is about 29,304 characters. Read the full file on GitHub.

Interface Design

Run interface-design on a Real UI Design Task.

Download OpenDesign, import interface-design from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills

Terminal

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

What the interface-design Skill Does in Claude Code and Codex

In the Skill's Own Terms

How It Works

When to Use the interface-design Skill

Good Fit

Know the Boundaries

What to Provide

Rules the interface-design Skill Gives Claude Code and Codex

Run the pre-code Checkpoint

Native, Then Primitive, Then hand-roll

Tokens Over Hardcoded Literals

Step Type by a Ratio, Not by Feel

Commit to Exactly One Depth Strategy

Keep UI Motion Under 300ms

No Animation on Repeated Actions

Never Animate from Scale Zero