Мастерство · Память · Стабильность

Создавайте интерфейсы с намерением. Помните о решениях на протяжении сессий. Поддерживайте системную последовательность.

Для дизайна интерфейсов — дашборды, приложения, инструменты, панели администратора. Не для маркетинговых сайтов.

Установка · Как это работает · Примеры · Веб-сайт

---

Что это делает

Когда вы создаёте интерфейс с помощью программирующего агента, принимаются дизайнерские решения: значения интервалов, цвета, стратегия глубины, высота поверхности. Без структуры эти решения меняются между сессиями.

Дизайн интерфейса помогает вам:

1. Craft — принципиальный дизайн, создающий профессиональные, отточенные интерфейсы с реальной визуальной иерархией
2. Визуальное направление — Когда доступен инструмент для генерации изображений, изучайте направленные доски, отсылки к интерфейсу и критические окраски
3. Память — Сохраняйте решения в .interface-design/system.md, затем перезагружайте их при запуске навыка
4. Согласованность — изменения интерфейса следуют одним и тем же принципам на протяжении всей сессии

Сделайте выбор один раз. Применяйте его последовательно.

До и после

Без дизайна интерфейса:

• Каждая сессия начинается с нуля
• Дрейф высоты кнопок (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