{
  "markdown": "# Interface Design\n\n<p align=\"center\">\n  <strong>Craft · Memory · Consistency</strong>\n</p>\n\n<p align=\"center\">\n  Build interfaces with intention. Remember decisions across sessions. Maintain systematic consistency.\n</p>\n\n<p align=\"center\">\n  <em>For interface design — dashboards, apps, tools, admin panels. Not for marketing sites.</em>\n</p>\n\n<p align=\"center\">\n  <a href=\"#installation\">Install</a> ·\n  <a href=\"#how-it-works\">How It Works</a> ·\n  <a href=\"https://interface-design.dev/examples.html\">Examples</a> ·\n  <a href=\"https://interface-design.dev\">Website</a>\n</p>\n\n---\n\n## What This Does\n\nWhen 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.\n\n**Interface Design helps you:**\n\n1. **Craft** — Principle-based design that produces professional, polished interfaces with real visual hierarchy\n2. **Visual direction** — When an image-generation tool is available, explore direction boards, UI references, and critique paintovers\n3. **Memory** — Save decisions to `.interface-design/system.md`, then reload them when the skill runs\n4. **Consistency** — UI changes follow the same principles throughout the session\n\nMake choices once. Apply them consistently.\n\n## Before & After\n\n**Without interface-design:**\n- Every session starts from scratch\n- Button heights drift (36px, 38px, 40px...)\n- Random spacing values (14px, 17px, 22px...)\n- No consistency across components\n\n**With interface-design:**\n- System loads automatically when the skill runs\n- Direction boards and paintovers when an image-generation tool is available\n- Patterns reused (Button: 36px, Card: 16px pad)\n- Spacing on grid (4px, 8px, 12px, 16px)\n- Consistent depth and surface treatment throughout\n\nSee the difference: **[interface-design.dev/examples.html](https://interface-design.dev/examples.html)**\n\n---\n\n## Installation\n\n### Recommended: skills.sh\n\nUse the installer shown on the [interface-design skills.sh page](https://www.skills.sh/dammyjay93/interface-design/interface-design):\n\n```bash\nnpx skills add https://github.com/dammyjay93/interface-design --skill interface-design\n```\n\nThe CLI detects supported agents and installs the skill in the right place. Useful variants:\n\n```bash\n# Install globally for the current detected agent\nnpx skills add https://github.com/dammyjay93/interface-design --skill interface-design -g\n\n# Install for a specific agent\nnpx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g\nnpx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent codex -g\n\n# Install for all supported agents\nnpx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent '*' -g -y\n\n# Preview available skills without installing\nnpx skills add https://github.com/dammyjay93/interface-design --skill interface-design --list\n```\n\nReview installed skills before use. Skills run with the same permissions as your coding agent.\n\n### Agent Notes\n\n#### Claude Code\n\nRecommended install:\n\n```bash\nnpx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g\n```\n\nThis installs the core skill to `~/.claude/skills/interface-design`. Claude Code can auto-invoke it when relevant, and you can invoke it directly as `/interface-design`.\n\nClaude Code plugin install is still supported if you prefer Claude Code's marketplace/plugin flow:\n\n```bash\n/plugin marketplace add Dammyjay93/interface-design\n/plugin menu\n```\n\nSelect `interface-design` from the menu, then restart Claude Code.\n\n#### Codex\n\nRecommended install:\n\n```bash\nnpx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent codex -g\n```\n\nThe skills CLI installs Codex skills to `~/.agents/skills/interface-design`, which Codex scans. Restart Codex, or start a fresh Codex thread, if the skill does not appear immediately.\n\nUse the Codex slash command when available, invoke the skill explicitly in prompts, or let Codex invoke it when the request is clearly product UI work:\n- `/interface-design`\n- `use interface-design to build this dashboard`\n- `use interface-design design-review on the settings page`\n\n#### Other Skill-Compatible Agents\n\nUse the same CLI with an agent target:\n\n```bash\nnpx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent <agent-name> -g\n```\n\n### Compatibility Matrix\n\n| Agent | Install | Skill support | Slash commands | Notes |\n|-------|---------|---------------|----------------|-------|\n| Claude Code | `npx skills add ... --agent claude-code -g` | Yes | `/interface-design` | Plugin marketplace remains supported |\n| Codex | `npx skills add ... --agent codex -g` | Yes | `/interface-design` | Slash command and natural language both work |\n| All supported agents | `npx skills add ... --agent '*' -g -y` | Depends on agent | Depends on agent | Good for multi-agent setups |\n\n### Manual Fallback\n\nIf you cannot use `npx`, copy the core skill folder manually:\n\n```bash\ngit clone https://github.com/Dammyjay93/interface-design.git\ncd interface-design\n\n# Claude Code\nmkdir -p ~/.claude/skills\ncp -R .claude/skills/interface-design ~/.claude/skills/\n\n# Codex / shared agent-skills location\nmkdir -p ~/.agents/skills\ncp -R .claude/skills/interface-design ~/.agents/skills/\n```\n\nRestart the target agent after manual installation.\n\n---\n\n## How It Works\n\n### The Flow\n\nWhen an agent uses interface-design:\n\n**If system.md exists:**\n```\n✓ Reads skill files and principles\n✓ Loads .interface-design/system.md\n✓ Applies established patterns\n✓ Keeps design choices explicit\n✓ Offers to save new patterns\n```\n\n**If no system.md:**\n```\n1. Reads skill files and principles\n2. Assesses project context\n3. Suggests direction, asks for confirmation\n4. Keeps design choices explicit while building\n5. Builds with consistent principles\n6. Offers to save system\n```\n\n### Example: First Session\n\n```\nYou: \"Build a user dashboard with metrics cards\"\n\nAgent:\nThis feels like a data-heavy dashboard — I'd suggest:\n- Depth: Borders-only (clean, technical)\n- Surfaces: Subtle elevation shifts\n- Spacing: 8px base\n\nDoes this direction fit?\n\n[You: y]\n\nDepth: borders-only\nSurfaces: 7% → 9% → 11% lightness scale\nBorders: rgba(255,255,255,0.06)\nSpacing: 8px base\n\n[Builds dashboard with consistent depth, spacing, surfaces]\n\nWant me to save these patterns to .interface-design/system.md?\n\n[You: y]\n\n✓ System saved\n```\n\n### Example: Second Session\n\n```\nYou: \"Add a settings page\"\n\nAgent:\n✓ Loaded system.md\n\nDepth: borders-only\nSurfaces: using established scale\nBorders: rgba(255,255,255,0.06)\nSpacing: 8px base\n\n[Builds settings page matching existing system]\n\nWant me to save any new patterns?\n```\n\nThe system **remembers** across sessions.\n\n---\n\n## System File\n\nAfter establishing direction, your decisions live in `.interface-design/system.md`:\n\n```markdown\n# Design System\n\n## Direction\nPersonality: Precision & Density\nFoundation: Cool (slate)\nDepth: Borders-only\n\n## Tokens\n### Spacing\nBase: 4px\nScale: 4, 8, 12, 16, 24, 32\n\n### Colors\n--foreground: slate-900\n--secondary: slate-600\n--accent: blue-600\n\n## Patterns\n### Button Primary\n- Height: 36px\n- Padding: 12px 16px\n- Radius: 6px\n- Usage: Primary actions\n\n### Card Default\n- Border: 0.5px solid\n- Padding: 16px\n- Radius: 8px\n```\n\nThis file is loaded by the interface-design skill when relevant. Claude Code and Codex use it to maintain consistency.\n\n---\n\n## Agent Usage\n\n### Claude Code\n\nWith the skills.sh install, invoke the skill directly or let Claude Code auto-invoke it:\n\n```text\n/interface-design\nuse interface-design to build this dashboard\nuse interface-design to audit this settings page\n```\n\nIf you installed through the Claude Code plugin flow, two command files in `.claude/commands` give you focused review passes:\n\n```bash\n/interface-design:design-review   # Strict craft + hierarchy review, with an approval bar\n/interface-design:design-deslop   # Fast, diff-scoped pass that strips visual slop from a branch\n```\n\n`design-review` is the design counterpart to a deep code-quality review — it judges focal point, hierarchy, typography, color, surfaces, states, and motion against the bar of a top design team, then tells you what to fix. `design-deslop` is the counterpart to a code-deslop pass — it finds the obvious tells of generated UI (generic tokens, defaulted fonts, timid palettes, identical cards, missing states, harsh borders) and cleans them up in place.\n\n### Codex Invocation\n\nCodex uses the same skill content and can invoke it through the slash command or natural language:\n\n```text\n/interface-design\nuse interface-design to build this dashboard\nuse interface-design design-review on the settings page\nuse interface-design design-deslop on this branch\n```\n\nFor visual direction work, when an image-generation tool is available the skill can produce direction boards, UI reference mockups, screenshot paintovers, and project-bound raster assets.\n\n---\n\n## Design Directions\n\nThe skill infers direction from project context, but you can customize:\n\n| Direction | Feel | Best For |\n|-----------|------|----------|\n| **Precision & Density** | Tight, technical, monochrome | Developer tools, admin dashboards |\n| **Warmth & Approachability** | Generous spacing, soft shadows | Collaborative tools, consumer apps |\n| **Sophistication & Trust** | Cool tones, layered depth | Finance, enterprise B2B |\n| **Boldness & Clarity** | High contrast, dramatic space | Modern dashboards, data-heavy apps |\n| **Utility & Function** | Muted, functional density | GitHub-style tools |\n| **Data & Analysis** | Chart-optimized, numbers-first | Analytics, BI tools |\n\n---\n\n## Examples\n\nSee live examples at **[interface-design.dev/examples.html](https://interface-design.dev/examples.html)**\n\nFor system file templates, see `reference/examples/`:\n- **[system-precision.md](reference/examples/system-precision.md)** — Dashboard/admin interfaces\n- **[system-warmth.md](reference/examples/system-warmth.md)** — Collaborative/consumer apps\n\n---\n\n## Migration from claude-design-skill\n\n**This repo was renamed from `claude-design-skill`.**\n\nAll old URLs redirect automatically.\n\n**If you installed the old skill:**\n\n```bash\n# Uninstall old\nrm -rf ~/.claude/skills/design-principles\n\n# Install the current skill\nnpx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g\n```\n\nYour system.md files (if any) continue to work. Rename `.ds-engineer/` to `.interface-design/` if you have not already.\n\n---\n\n## Philosophy\n\n**Decisions compound.** A spacing value chosen once becomes a pattern. A depth strategy becomes an identity.\n\n**Consistency beats perfection.** A coherent system with \"imperfect\" values beats a scattered interface with \"correct\" ones.\n\n**Memory enables iteration.** When you can see what you decided and why, you can evolve intentionally instead of drifting accidentally.\n\n---\n\n## License\n\nMIT — See [LICENSE](LICENSE)\n\n---\n\n<p align=\"center\">\n  <a href=\"https://interface-design.dev\">Website</a> · <a href=\"https://github.com/Dammyjay93/interface-design\">GitHub</a>\n</p>\n",
  "bytes": 11216,
  "sha": "0673dd349234afd119bda38977cdd3a4fc8837fdc67f34b39460fb5550d20739",
  "repo_slug": "dammyjay93/interface-design",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_dammyjay93_interface_design_interface_de_bf2a5766/readme"
}