[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-74860":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":16,"starSnapshotCount":16,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},74860,"interface-design","Dammyjay93\u002Finterface-design","Dammyjay93","Design engineering for Claude Code. Craft, memory, and enforcement for consistent UI.","https:\u002F\u002Finterface-design.dev",null,"Shell",4999,341,35,6,0,30,171,74.6,"MIT License",false,"main",true,[],"2026-06-11 04:06:11","# Interface Design\n\n\u003Cp align=\"center\">\n  \u003Cstrong>Craft · Memory · Consistency\u003C\u002Fstrong>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  Build interfaces with intention. Remember decisions across sessions. Maintain systematic consistency.\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Cem>For interface design — dashboards, apps, tools, admin panels. Not for marketing sites.\u003C\u002Fem>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"#installation\">Install\u003C\u002Fa> ·\n  \u003Ca href=\"#how-it-works\">How It Works\u003C\u002Fa> ·\n  \u003Ca href=\"https:\u002F\u002Finterface-design.dev\u002Fexamples.html\">Examples\u003C\u002Fa> ·\n  \u003Ca href=\"https:\u002F\u002Finterface-design.dev\">Website\u003C\u002Fa>\n\u003C\u002Fp>\n\n---\n\n## What This Does\n\nWhen you build UI with Claude, 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\n2. **Memory** — Save decisions to `.interface-design\u002Fsystem.md`, load automatically\n3. **Consistency** — Every component follows 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 each session\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\u002Fexamples.html](https:\u002F\u002Finterface-design.dev\u002Fexamples.html)**\n\n---\n\n## Installation\n\n### Plugin (Recommended)\n\n```bash\n# Add the marketplace\n\u002Fplugin marketplace add Dammyjay93\u002Finterface-design\n\n# Install the plugin\n\u002Fplugin menu\n```\n\nSelect `interface-design` from the menu. Restart Claude Code after.\n\nGets you:\n- Principle-based craft for every UI component\n- Automatic system.md loading every session\n- Per-component design checkpoint\n- Commands (\u002Finterface-design status, audit, extract)\n\n### Manual (Advanced)\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002FDammyjay93\u002Finterface-design.git\ncd interface-design\ncp -r .claude\u002F* ~\u002F.claude\u002F\ncp -r .claude-plugin\u002F* ~\u002F.claude-plugin\u002F\n```\n\nRestart Claude Code.\n\n---\n\n## How It Works\n\n### The Flow\n\nWhen you build UI with interface-design:\n\n**If system.md exists:**\n```\n✓ Reads skill files and principles\n✓ Loads .interface-design\u002Fsystem.md\n✓ Applies established patterns\n✓ States design choices before each component\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. States design choices before each component\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\nClaude:\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\u002Fsystem.md?\n\n[You: y]\n\n✓ System saved\n```\n\n### Example: Second Session\n\n```\nYou: \"Add a settings page\"\n\nClaude:\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\u002Fsystem.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 loads automatically at session start. Claude sees it and maintains consistency.\n\n---\n\n## Commands\n\n```bash\n\u002Finterface-design:init           # Start building with design principles\n\u002Finterface-design:status         # Show current system\n\u002Finterface-design:audit \u003Cpath>   # Check code against system\n\u002Finterface-design:extract        # Extract patterns from existing code\n```\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\u002Fexamples.html](https:\u002F\u002Finterface-design.dev\u002Fexamples.html)**\n\nFor system file templates, see `reference\u002Fexamples\u002F`:\n- **[system-precision.md](reference\u002Fexamples\u002Fsystem-precision.md)** — Dashboard\u002Fadmin interfaces\n- **[system-warmth.md](reference\u002Fexamples\u002Fsystem-warmth.md)** — Collaborative\u002Fconsumer 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 ~\u002F.claude\u002Fskills\u002Fdesign-principles\n\n# Install new plugin\n\u002Fplugin marketplace add Dammyjay93\u002Finterface-design\n\u002Fplugin menu\n```\n\nYour system.md files (if any) continue to work — just rename `.ds-engineer\u002F` to `.interface-design\u002F`.\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\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Finterface-design.dev\">Website\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FDammyjay93\u002Finterface-design\">GitHub\u003C\u002Fa>\n\u003C\u002Fp>\n","Interface Design 是一个用于构建一致用户界面的设计工程工具。它通过记忆设计决策（如间距、颜色和深度策略）并自动加载这些设置，确保跨会话的一致性。项目采用Shell语言编写，具有原则驱动的设计、自动加载系统文件以及组件间一致性保持等核心功能。适用于仪表板、应用程序、工具和管理面板等界面设计场景，但不推荐用于营销网站。该项目在GitHub上获得了4799颗星，并且遵循MIT许可协议。",2,"2026-06-11 03:51:09","high_star"]