# Interface Design for Claude Code: A Skill That Remembers Your UI Decisions

> Interface Design is a Claude Code skill that captures spacing, depth and surface decisions in a .interface-design/system.md file and reloads them in later sessions. It is aimed at product UI work, not marketing sites, and it installs through the skills CLI.

**Dammyjay93/interface-design** — Design engineering for Claude Code. Craft, memory, and enforcement for consistent UI.

- Repository: https://github.com/Dammyjay93/interface-design
- Website: https://interface-design.dev
- Stars: 5,749 · Forks: 371
- Language: Shell
- License: MIT
- Published: 2026-09-22 · Updated: 2026-09-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/dammyjay93-interface-design

## The drift problem Interface Design was built to stop

Ask a coding agent to build a dashboard, then ask it for a settings page a week later, and the two surfaces rarely agree. Button heights come out at 36px in one place and 40px in another. Padding lands on 14px, then 17px, then 22px. The README lists exactly these symptoms under its before-and-after comparison, and they are the reason the project exists. Nothing in a normal agent session persists the design decisions that were made, so every new conversation re-derives them from scratch.

Interface Design targets product UI: dashboards, apps, tools, admin panels. The README draws that boundary in its own subtitle and states plainly that it is not for marketing sites. That is a narrower audience than the name suggests, and the distinction matters, because the skill's value comes from repetition across many screens of the same application, not from a single landing page.

## How the skill loads, decides and saves a system

The mechanism is a file, not a service. When the skill runs, the agent reads the skill files and principles. If `.interface-design/system.md` already exists, the agent loads it, applies the established patterns, keeps design choices explicit, and offers to save any new patterns it introduced. If the file does not exist, the flow is longer: assess the project context, suggest a direction, ask for confirmation, build with consistent principles, then offer to save the system.

The README's first-session transcript shows what that negotiation looks like. The agent proposes a direction (borders-only depth, subtle elevation shifts, an 8px base spacing unit), asks whether it fits, and only after confirmation writes values such as a 7% to 9% to 11% lightness scale and a border color of `rgba(255,255,255,0.06)`. The second-session transcript shows the payoff: the agent reports that it loaded system.md and reuses the same depth, surface scale, border color and spacing base for a new settings page.

Two things about this design are worth naming. The system file is plain markdown, so a reviewer can read and edit it without tooling. And the whole loop depends on the agent actually invoking the skill; the README documents auto-invocation as a possibility rather than a guarantee for every agent.

## Installing the Claude Code skill and running a first session

The recommended path is the skills CLI, which detects supported agents and places the skill where each one looks for it. For Claude Code specifically, the README gives this command:

```bash
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g
```

That installs the core skill to `~/.claude/skills/interface-design`. After it lands, Claude Code can auto-invoke it when the request looks like product UI work, and you can call it directly as `/interface-design`. If you prefer Claude Code's own plugin flow, the README documents adding the marketplace and selecting the plugin from the menu, followed by a restart.

For Codex the same CLI is used with a different agent target:

```bash
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent codex -g
```

Codex skills go to `~/.agents/skills/interface-design`. The README notes that a restart or a fresh Codex thread may be needed before the skill shows up, and that you can invoke it explicitly in a prompt or let Codex pick it up on clearly product UI work.

If `npx` is not available, the manual fallback is a clone plus a copy:

```bash
git clone https://github.com/Dammyjay93/interface-design.git
cd interface-design
mkdir -p ~/.claude/skills
cp -R .claude/skills/interface-design ~/.claude/skills/
```

Restart the agent afterward. A first real use looks like the README's example: ask for a dashboard with metrics cards, answer the direction question, let the agent build, then accept the offer to save. The artifact to inspect afterwards is `.interface-design/system.md` in your project, which should contain the direction, depth, surface and spacing values you just approved.

## Where the skill model breaks down

The install instructions carry a warning worth repeating: skills run with the same permissions as your coding agent. The README says to review installed skills before use. That is not boilerplate. A skill is instructions plus files that your agent will follow, and installing one from a URL is a trust decision about that repository, not a sandboxed plugin.

The memory model has a second limit. `.interface-design/system.md` is project-local, so a system built for one codebase does not travel to the next one. Teams running several frontends will maintain several system files, and there is no documented merge or inheritance mechanism in the README.

There is also a scope mismatch risk. The skill is scoped to interface design for dashboards, apps, tools and admin panels, and the README excludes marketing sites outright. Pointing it at a campaign page means paying the setup conversation for a surface that will not be revisited often enough to benefit from a saved system. Finally, the README documents auto-invocation as agent-dependent, so a workflow that assumes the skill always engages is assuming something the documentation does not promise.

## Interface Design versus a written design system or a component library

The obvious alternative is a design system document that a human maintains, or a component library with tokens baked into code. Both encode the same decisions, and both are read by people and build tools rather than by an agent mid-session.

The difference is who applies the rules. A token file enforces values at build time and fails loudly when someone hardcodes a hex color. Interface Design enforces nothing at build time; it persuades the agent during generation, then records the result in markdown. That makes it useful precisely where a token file has no reach, which is the moment an agent decides between 8px and 12px padding. It also means the enforcement is softer. Nothing stops an agent from ignoring system.md, and nothing in the README describes a check that would catch that.

A component library and this skill are not mutually exclusive. The library supplies the components; the skill supplies the conversation about which spacing base, depth strategy and surface scale those components should express.

## Maintenance cost, licence and versioning

The repository is not archived, and the last push was on 2026-06-20. The most recent release listed is v2026.6.12.1248 from 2026-06-12, following v2026.6.12 earlier the same day and v2026.2.8 in February 2026. That is a release cadence measured in months, not weeks, and the version strings encode dates rather than semantic major and minor numbers, so you cannot read compatibility from the tag alone.

The licence is MIT, which permits commercial use and modification. The practical implication for a skill is that you can fork it and adjust the principles to your own house style; the README's manual fallback already shows the copy step that a fork would replace. This is a description of the licence text, not legal advice.

Upgrade cost is low in the way that matters here. The installed artifact is a folder of skill files, and your accumulated decisions live in `.interface-design/system.md` inside your own project, outside the installed skill. Reinstalling or updating the skill does not overwrite that file, so a new version can change the principles the agent reasons from without erasing the system you already agreed to.

## Conclusion

Adopt Interface Design if you build dashboards, admin panels or internal tools with Claude Code or Codex and keep re-specifying the same spacing and depth choices. Skip it for marketing sites, which the README explicitly excludes, and for teams that do not want a skill running with the same permissions as the coding agent. Before trusting it, install with npx skills add, run one session, and open .interface-design/system.md to confirm the recorded values match what you actually agreed to.

## FAQ

### What is Interface Design for Claude Code?

It is a skill that gives a coding agent principle-based UI direction, saves the resulting design decisions to .interface-design/system.md, and reloads them in later sessions so spacing, depth and surface choices stay consistent. The README scopes it to dashboards, apps, tools and admin panels rather than marketing sites.

### How do I install the Interface Design skill?

The recommended route is the skills CLI with an agent target, for example npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g, which places the skill in ~/.claude/skills/interface-design. A manual fallback is to clone the repository and copy .claude/skills/interface-design into your agent's skills directory, then restart the agent.

### Does Interface Design remember decisions between sessions?

Yes, if you accept the offer to save. Decisions are written to .interface-design/system.md, and the README's second-session example shows the agent reporting that it loaded system.md and reused the established depth, surface scale, border color and spacing base. The file is project-local, so it does not carry over to a different codebase.

### Is Interface Design safe to install?

The README states that skills run with the same permissions as your coding agent and advises reviewing installed skills before use. That means the install is a trust decision about the repository, not a sandboxed plugin. The project is MIT licensed and the repository is not archived.

### Which agents support the Interface Design skill?

The README documents Claude Code, Codex and a generic agent target, and its compatibility matrix lists slash command support for Claude Code and Codex. For other agents it uses the same CLI with --agent <agent-name>, and notes that skill and slash command support depends on the agent.

## Sources

- [Dammyjay93/interface-design on GitHub](https://github.com/Dammyjay93/interface-design)
- [License: MIT](https://github.com/Dammyjay93/interface-design/blob/main/LICENSE)
- [Project website](https://interface-design.dev)
- [README](https://github.com/Dammyjay93/interface-design/blob/main/README.md)
- [Releases](https://github.com/Dammyjay93/interface-design/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/dammyjay93-interface-design