기인 · 기억력 · 일관성

의도적으로 인터페이스를 구축하세요. 세션 간 결정을 기억하세요. 체계적인 일관성을 유지하세요.

인터페이스 디자인에는 대시보드, 앱, 도구, 관리 패널 등이 있습니다. 마케팅 사이트에는 해당되지 않습니다.

설치 · 작동 원리 · 예시 · 웹사이트

---

이것이 하는 일은

코딩 에이전트로 UI를 만들 때는 디자인 결정이 내려집니다: 간격 값, 색상, 깊이 전략, 표면 고도 등. 구조가 없으면 그 결정들이 세션 간에 분산됩니다.

인터페이스 디자인이 도움이 됩니다:

1. Craft — 원칙 기반 디자인으로, 실제 시각적 계층 구조를 갖춘 전문적이고 세련된 인터페이스를 만들어냅니다
2. 시각적 연출 — 이미지 생성 도구가 제공되면 방향 보드, UI 참고 자료, 그리고 페인트오버 비평을 살펴보세요
3. 기억 — 결정을 .interface-design/system.md에 저장한 후 스킬이 실행될 때 다시 불러오기
4. 일관성 — UI 변경은 세션 내내 동일한 원칙을 따릅니다

한 번 선택하세요. 꾸준히 적용하세요.

전후

인터페이스 설계 없이:

• 모든 세션은 처음부터 시작합니다
• 버튼 높이 드리프트 (36px, 38px, 40px…)
• 무작위 간격 값 (14px, 17px, 22px 등)

Interface Design

Craft · Memory · Consistency

Build interfaces with intention. Remember decisions across sessions. Maintain systematic consistency.

For interface design — dashboards, apps, tools, admin panels. Not for marketing sites.

Install · How It Works · Examples · Website

---

What This Does

When you build UI with a coding agent, design decisions get made: spacing values, colors, depth strategy, surface elevation. Without structure, those decisions drift across sessions.

Interface Design helps you:

1. Craft — Principle-based design that produces professional, polished interfaces with real visual hierarchy
2. Visual direction — When an image-generation tool is available, explore direction boards, UI references, and critique paintovers
3. Memory — Save decisions to .interface-design/system.md, then reload them when the skill runs
4. Consistency — UI changes follow the same principles throughout the session

Make choices once. Apply them consistently.

Before & After

Without interface-design:

• Every session starts from scratch
• Button heights drift (36px, 38px, 40px…)
• Random spacing values (14px, 17px, 22px…)
• No consistency across components

With interface-design:

• System loads automatically when the skill runs
• Direction boards and paintovers when an image-generation tool is available
• Patterns reused (Button: 36px, Card: 16px pad)
• Spacing on grid (4px, 8px, 12px, 16px)
• Consistent depth and surface treatment throughout

See the difference: interface-design.dev/examples.html

---

Installation

Recommended: skills.sh

Use the installer shown on the interface-design skills.sh page:

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

The CLI detects supported agents and installs the skill in the right place. Useful variants:

# Install globally for the current detected agent
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design -g

# Install for a specific agent
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent codex -g

# Install for all supported agents
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent '*' -g -y

# Preview available skills without installing
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --list