Design & Motion · Dammyjay93/interface-design
interface-design
Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, building, reviewing, auditing, or refining product UI where visual craft, layout hierarchy, tokens, states, visual direction, or design-system consistency matter. Not for marketing pages, landing pages, campaigns, or brand-only work.
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
The entire skill is a pure prompt knowledge source: `.claude/skills/interface-design/SKILL.md` (approx. 320 lines, 9 top-level sections) hosts all rules, with zero executable logic in the repository involved in the design workflow.
.claude/skills/interface-design/SKILL.md
This skill is self-contained: direction, visual hierarchy, design-system architecture, and the polish and motion essentials needed to ship production-grade UI all live here.
What is happening here: all "design capabilities" are front-loaded into a single, fully portable instruction file. It functions across hosts (Claude Code / Codex) using the exact same SKILL.md without relying on any runtime.
The core mechanism to counter "generic model-output SaaS templates" is explicitly calling out default values and requiring an articulated rationale for each item—setting an enforced checkpoint rather than offering stylistic suggestions.
.claude/skills/interface-design/SKILL.md
This checkpoint is mandatory. If you can't explain WHY for each, you're defaulting — stop and think.
The prompt requires declaring seven items before writing UI: Intent / Hierarchy / Palette / Depth / Surfaces / Typography / Spacing. The acceptance criterion is "whether you can explain why," turning subjective taste into an evaluable self-check.
Cross-session "design memory" does not rely on code; instead, the agent writes a plain-text `.interface-design/system.md` in the consumer project, which is read back in subsequent sessions and treated as established decisions.
.claude/skills/interface-design/SKILL.md
Always offer to save: "Want me to save these patterns for future sessions?" If yes, write to `.interface-design/system.md`:
Written content is prescribed to cover direction / depth strategy / spacing baseline / hierarchy decisions / reusable component dimensions. Writing to disk requires user consent and is pure Markdown text, without template engines or automated execution.
The warm-start path elevates system.md in the consumer project above the skill rules: if the file exists, "decisions are established" and direction is not re-derived.
.claude/skills/interface-design/SKILL.md
- **If `.interface-design/system.md` exists:** read it and apply — decisions are made.
Contrasted with cold-start (next line in the same section): domain exploration (4 outputs) -> proposal -> confirmation -> implementation -> 4 self-checks -> prompt to save to disk. This "project file as authority" pattern is also the primary injection surface of this skill.
The review aspect defines actionable pass thresholds: 8 mandatory criteria + 8 presumptive blockers, where hitting any single one results in "not approved."
.claude/commands/design-review.md
**Presumptive blockers** (unless the author justifies them against intent): no focal point · size-only or defaulted typography · monotone layout · timid or competing-accent palette · harsh or fragmented surfaces · missing states · structural hacks · an inaccessible hand-rolled control (no keyboard/focus/ARIA) where a primitive or existing component should be used. Any one present → **not approved**; leave explicit, actionable feedback and push for the crafted version.
This turns arguments over aesthetics into a checklist-based evaluation: reviews avoid listing personal taste, filtering findings by severity (Blocker / Should-fix / Note) against the gate criteria to reach a verdict.
Reviewing and modifying are intentionally decoupled: design-review judges without modifying by default, leaving changes to explicit user requests or design-deslop.
.claude/commands/design-review.md
This review **judges by default**. Report findings and a verdict; only rebuild when the user asks. Keep the review and the mutation cleanly separate.
Correspondingly, deslop restricts the scope of edits: line-level refinements strictly within the diff with behavioral invariance. Together they form a judge/fix separation of duties, preventing the reviewer from making unsolicited sweeping changes.
Rendering and image generation are entirely conditionally probed at runtime: show rather than describe if inline rendering tools exist; otherwise fall back to code and tokens. The skill itself contains zero pixel-generation capabilities.
.claude/skills/interface-design/SKILL.md
If an inline visual-rendering tool is available in the session (e.g. a `show_widget` / `visualize` tool that renders HTML or SVG inline in the conversation), prefer **showing** the design over describing it.
The latter half of the sentence clarifies the fallback: without these tools (CI / headless / pure terminal), it falls back to code + tokens + text proposals. Image generation (direction boards / UI reference / paintover / bitmap assets) likewise hinges on "if an image-generation tool is available."
The only executable repository asset is `.githooks/pre-commit`: it rewrites the version in two manifests using timestamps and runs git add, but it is not wired up in this clone and therefore does not run automatically.
.githooks/pre-commit
sed -i '' "s/\"version\": \".*\"/\"version\": \"$VERSION\"/" .claude-plugin/plugin.json
The repository lacks package.json to attach lifecycle hooks; .git/config has no core.hooksPath and .git/hooks/ contains only *.sample, meaning it will not trigger post-clone. Moreover, `sed -i ''` uses BSD/macOS syntax and fails outright on GNU sed—a remnant of the author's local workflow.
2Core Capabilities
01Product interface design and implementation (dashboards / admin / SaaS / settings pages / data interfaces)
02Rigorous design review: six lens groups + severity grading + approval gates (blocker-capable)
03AI deslopping (design-deslop): line-level anti-slop rewrites on diffs while preserving behavior
04Cross-session design system memory: reading and writing `.interface-design/system.md` in consumer projects
05Inline visual samples: truly rendering palettes / typography / components for human review (when tools are present)
06Reuse-first discipline: native HTML -> headless accessible primitives -> hand-crafted code; styling flows through system -> component -> token -> utility
07Four mandatory self-checks (Swap / Squint / Signature / Token) to filter out default-laden outputs before delivery
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| package | skills CLI（npx 第三方安装器，来自 npm registry） |
| api | 宿主内联渲染工具（具名 show_widget / visualize，条件式） |
| api | 外部出图工具（未具名，条件式；仅用于方向板/参考图，非交付物） |
| network | 项目站点域名（README 外链；仓库内无站点源码） |
| network | Claude Code marketplace JSON schema 指针（JSON 声明，非运行时请求） |
| package | 推荐给消费方项目使用的无头可访问组件库（建议，不安装） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Executes local scripts or commands: `.githooks/pre-commit` (bash): `VERSION=$(date +"%Y.%-m.%-d.%H%M")` -> `sed -i
- 网络端点: Declares external network access: The skill core (SKILL.md + two commands + reference/) makes zero network calls: no curl/wget/fetch call sites or HTTP calls in files
- 本地工作目录: File I/O and artifact output: `.githooks/pre-commit` modifies two manifests in place and runs git add (only occurs if hook is wired up).
Audit Notes: 🔵 Blue: Informational only. The skill itself consists of pure instructions (no script execution, no outbound network traffic, no credential access). The only runtime disk write is creating `.interface-design/system.md` in the consumer project with user consent, alongside conditional invocations of host rendering/imaging tools—classifying it as "Local Read/Write Only" rather than 🟢 (🟢 requires zero local writes). The only executable in the repo, `.githooks/pre-commit`, is unwired by default (no core.hooksPath, .git/hooks contains only *.sample) and merely performs a sed version rewrite + git add. The primary points to be aware of are the injection surfaces: the reviewed project's system.md takes precedence over rules, and the host rendering tool's read_me is consumed as instructions—both are intended trust boundaries rather than covert channels.
5Second-Pass Verification
- [ok] skill.path = .claude/skills/interface-design — 重读根目录与 `.claude/` 目录树：确为 `.claude/skills/interface-design/`（内含 SKILL.md 与 agents/openai.yaml），同层还有 `.claude/commands/`（design-review.md、design-deslop.md）；无 .claude/settings.json、无 hooks 目录，全仓仍为 15 个文件。
- [ok] official_desc 逐字 — 重读 SKILL.md L1-4，frontmatter 仅 name/description 两键，description 为单行长文本；与 README『What This Does』口径一致（同为『Not for marketing』）。
- [ok] external_deps：渲染/出图工具为条件式而非硬依赖 — 重读 SKILL.md L74（含 `Never assume the tool exists; check, then use it.` 与无工具时的 fallback 句）、L269（`if an image-generation tool is available`）与 design-deslop.md L18（`If a render tool (`show_widget`/`visualize`) or a screenshot is available, use it.`）。三处均为条件式，无硬依赖。
- [ok] external_deps：npx skills add / 组件库建议 — 重读 README.md L63/70/73/74/77/80/92/111/126 与 L133 兼容性表，均出现在 bash 代码块中，是给用户的安装说明；重读 SKILL.md L181 确认 Radix/React Aria 等仅为给消费方项目的选型建议，本仓无 package.json、不安装任何依赖。
- [discrepancy] security：pre-commit 是否会被自动触发 — 重读 `.githooks/pre-commit` 全 18 行与 `.git/config`：配置里只有 core/repositoryformatversion/filemode/bare/logallrefupdates、remote origin、branch main，**没有 core.hooksPath**；`.git/hooks/` 全是 *.sample。结论：clone 后不会自动执行（常见说法『克隆即触发 git hook』不成立）。附带发现脚本用 `sed -i ''`（BSD/macOS 语法），在 GNU sed 上会报错，进一步说明是作者本机工作流。
- [ok] security：凭证读取与网络外发为零 — 全仓独立扫描 env/keychain/token/secret/curl/wget/.env 等 token：唯一命中是 SKILL.md 的 `## Tokens` 标题与 marketplace.json 的 'tokens' tag（设计 token 语义，非凭证）。.githooks、.claude/、reference/、website/ 正文逐一见底，无任何凭证或网络访问点。
- [ok] security：file_writes 的两条路径 — 重读 .githooks/pre-commit L10/13/16（写 .claude-plugin 两个 JSON + git add）与 SKILL.md L303（写消费方项目 `.interface-design/system.md`）。两条写入路径都限定在各自工作目录之内，不触碰 $HOME 与系统目录。
- [discrepancy] 宣称 vs 实际：reference/ 是否随 skill 安装 — 重读 plugin.json L11-12（commands=./.claude/commands、skills=./.claude/skills）与 README.md L328-330（`For system file templates, see `reference/examples/`:`）。reference/ 位于仓库根、不在发布目录内，全仓仅 README 引用它（SKILL.md 与两个命令零引用），因此走 README 推荐的 npx 安装后这些模板不会落地，README 该指引对安装用户是悬空引用。
6Verdict & Scenarios
Best for: Ideal for teams and individuals building product interfaces from scratch or during refactors (dashboards, admin panels, SaaS, settings pages, data interfaces), especially those suffering from "generic AI output" and needing an evaluable standard to review and converge designs. Also fits workflows looking to turn design reviews into blocking quality gates (the blocker list in design-review functions directly as a checklist). For projects seeking to preserve visual decisions across sessions, the system.md mechanism serves as a low-overhead anchor.
Not for: Not suited for marketing pages, landing pages, campaigns, or brand-only work—both frontmatter and body explicitly state: `Not for marketing pages, landing pages, campaigns, or brand-only work.` Not suited for scenarios expecting the skill to generate design mockups automatically: it generates no pixels, delegating rendering and imaging entirely to host tooling availability. Not suited for contexts requiring verifiable engineering guarantees (tests, CI, type constraints): this repository has zero tests and zero builds, holding its entire value in text rules.
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload interface-design.tar.gz
sha256:
Option B · Copy Guide for Agent83166a71a36953ec…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 2f9be32068.