设计 · 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 高权限 · 分级授权与审计V1 已固定执行命令联网读写文件Dual-pass Audit
管控等级描述 skill 的能力与建议配套的管控措施，不代表质量或安全认证，也不表示可用或不可用。是否使用由用户和管理者决定。不同 agent 宿主对权限的约束各不相同，请勿假定宿主一定会提供安全兜底。第三方 skill 版权归原作者，使用风险由使用者自行承担。
1实现原理 · 为什么它能做到
整个 skill 是一份纯提示词知识源：`.claude/skills/interface-design/SKILL.md`（约 320 行、9 个一级章节）承载全部规则，仓库内没有任何可执行逻辑参与设计流程。
.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.
这里在做什么：把『设计能力』全部前置到一份可整目录搬走的指令文件里，跨宿主（Claude Code / Codex）靠同一份 SKILL.md 生效，不依赖任何运行时。
对抗『模型输出千篇一律 SaaS 模板』的核心机制是把默认值显式点名并要求逐项自述意图——不是给风格建议，而是设一个强制检查点。
.claude/skills/interface-design/SKILL.md
This checkpoint is mandatory. If you can't explain WHY for each, you're defaulting — stop and think.
上文要求写 UI 前先声明 Intent / Hierarchy / Palette / Depth / Surfaces / Typography / Spacing 七项；判定标准是『能不能说明为什么』，属于把模糊品味变成可判定的自检。
跨会话『设计记忆』不靠代码，而是让 agent 在消费方项目里写一份纯文本 `.interface-design/system.md`，下次读回即视为既定决策。
.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`:
写入内容被规定为 direction/depth 策略/间距基准/层级决策/可复用组件尺寸；落盘需要用户同意，且是 Markdown 文本，没有模板引擎或自动执行。
热启动路径把消费方项目里的 system.md 抬到规则之上：文件存在即『决策已定』，不再重新推演方向。
.claude/skills/interface-design/SKILL.md
- **If `.interface-design/system.md` exists:** read it and apply — decisions are made.
冷启动与之相对（同段下一行）：领域探索四产出 → 提案 → 确认 → 实现 → 四项自检 → 询问是否落盘。这条『项目文件即权威』同时也是本 skill 的主要注入面。
评审侧给出可执行的通过门槛：8 条必要条件 + 8 类一票否决项（Presumptive blockers），命中任一即 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.
这是把『好看与否』的争论转成清单式判定：评审不是列个人口味，而是按严重度（Blocker / Should-fix / Note）过滤后对照门槛出结论。
评审与修改被刻意分离：design-review 默认只判不改，改动交给用户显式要求或 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.
deslop 侧对应地限定改动幅度：只做 diff 内的小改、行为不变。两者构成 judge / fix 分工，避免『评审顺手大改』。
渲染与出图能力全部是运行时可探测的条件式能力：有内联渲染工具就『展示』而不是描述，没有就退回代码与 token；skill 自己不含任何像素生成能力。
.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.
同句后段写明兜底：无该工具（CI / headless / 纯终端）时退回 code + tokens + 文字提案；出图（方向板/UI reference/paintover/位图资产）同样以『if an image-generation tool is available』为前提。
唯一可执行的仓库资产是 `.githooks/pre-commit`：用时间戳改写两个 manifest 的 version 并 git add，但在本 clone 中并未接线，因此不会自动运行。
.githooks/pre-commit
sed -i '' "s/\"version\": \".*\"/\"version\": \"$VERSION\"/" .claude-plugin/plugin.json
仓库无 package.json 可挂生命周期钩子；.git/config 无 core.hooksPath、.git/hooks/ 仅 *.sample，故 clone 后不触发。且 `sed -i ''` 是 BSD/macOS 语法，在 GNU sed 上会直接失败——属作者本机工作流残留。
2核心能力
01产品界面设计与实现（仪表盘 / admin / SaaS / 设置页 / 数据界面）
02严格设计评审：六组 lens + 严重度分级 + 审批门槛（可阻断）
03AI 味清除（design-deslop）：对 diff 做行级反 slop 改写，要求行为不变
04跨会话设计系统记忆：读写消费方项目的 `.interface-design/system.md`
05内联可视化样张：把色板 / 字号 / 组件真渲染出来给人看（有工具时）
06复用优先纪律：原生 HTML → 无头可访问原语 → 才手写；样式走 system → component → token → utility
07四项强制自检（Swap / Squint / Signature / Token）在交付前筛掉默认值产物
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| package | skills CLI（npx 第三方安装器，来自 npm registry） |
| api | 宿主内联渲染工具（具名 show_widget / visualize，条件式） |
| api | 外部出图工具（未具名，条件式；仅用于方向板/参考图，非交付物） |
| network | 项目站点域名（README 外链；仓库内无站点源码） |
| network | Claude Code marketplace JSON schema 指针（JSON 声明，非运行时请求） |
| package | 推荐给消费方项目使用的无头可访问组件库（建议，不安装） |
4管控建议与判定依据
建议配套管控措施
面向 Agent
分级或逐次授权，建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据（文件路径与关键语句摘要）
- scripts/: 执行本地脚本或命令: `.githooks/pre-commit`（bash）：`VERSION=$(date +"%Y.%-m.%-d.%H%M")` → `sed -i
- 网络端点: 声明外部网络访问: skill 本体（SKILL.md + 两个命令 + reference/）零网络调用：文件内无 curl/wget/fetch 调用点，也无 HTT
- 本地工作目录: 文件读写与工件输出: `.githooks/pre-commit` 就地改写两个 manifest 并 git add（仅当 hook 被接线才发生）。
审计说明： 🔵 蓝：知晓即可。skill 本体为纯指令（无脚本执行、无网络外发、无凭证读取），运行期唯一写盘动作是经用户同意后在消费方项目写 `.interface-design/system.md`，另有条件式调用宿主渲染/出图工具——按统一分档属『仅本地读写』而非 🟢（🟢 要求无本地写入）。仓库内唯一可执行文件 `.githooks/pre-commit` 默认不接线（无 core.hooksPath、.git/hooks 仅 *.sample），且只做版本号 sed 改写 + git add。需要知晓的点是注入面：被审项目自带的 system.md 被抬到规则之上、以及宿主渲染工具的 read_me 会被当指令消费——二者均属设计意图内的信任，不是隐蔽通道。
5第二遍独立确认
- [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 该指引对安装用户是悬空引用。
6结论
适合： 适合正在从零或重构中构建产品型界面（仪表盘、admin、SaaS、设置页、数据界面）的团队与个人，尤其是有『AI 产出千篇一律』痛点、需要一份可判定标准来评审与收敛的场合；也适合想把设计评审做成可阻断门禁的工作流（design-review 的 blocker 清单可直接当 check list）。对希望跨会话延续同一套视觉决策的项目，system.md 机制是低成本落点。
不适合： 不适合营销页 / landing page / campaign / 品牌视觉项目——frontmatter 与正文都明确划在范围外（`Not for marketing pages, landing pages, campaigns, or brand-only work.`）。不适合期望 skill 自动产出设计稿图片的场景：它不生成像素，渲染与出图都依赖宿主是否提供对应工具。不适合需要可验证工程保障（测试、CI、类型约束）的场合：本仓零测试零构建，全部价值在文本规则。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload interface-design.tar.gz
sha256:
Option B · Copy Guide for Agent83166a71a36953ec…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 2f9be32068.