102.7K+Download
Skip to the usage guide
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 OpenDesignView 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.

It prescribes product-domain exploration, deliberate type and spacing scales, a consistent depth strategy and semantic tokens. It also covers tabular numbers, concentric radii, interaction states and motion appropriate to frequency. It explicitly excludes marketing pages and 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

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.
  • For complex select or date-picker behavior, the source prefers established primitives over hand-rolled controls. Its blanket statement that native controls cannot be styled should not be treated as a universal browser limitation.
  • 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.

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. Keep Common UI Motion Brief

    The source suggests 100–160ms for presses, 125–200ms for tooltips and 150–250ms for dropdowns. Its modal/drawer range extends to 500ms, so the general sub-300ms guidance is not an absolute limit.

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

  8. 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.

Editorial starter example based on the source workflow; not a recorded run.

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 check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

Download OpenDesignRead 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

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

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/Dammyjay93/interface-design --skill interface-design