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外部依赖
| 类型 | 依赖 |
|---|---|
| package | skills CLI（npx 第三方安装器，来自 npm registry） |
| api | 宿主内联渲染工具（具名 show_widget / visualize，条件式） |
| api | 外部出图工具（未具名，条件式；仅用于方向板/参考图，非交付物） |
| network | 项目站点域名（README 外链；仓库内无站点源码） |
| network | Claude Code marketplace JSON schema 指针（JSON 声明，非运行时请求） |
| package | 推荐给消费方项目使用的无头可访问组件库（建议，不安装） |
4风险提醒 风险提醒：蓝色 · 知晓即可
风险提醒：蓝色 · 知晓即可
- 被审仓库自带的 system.md 可豁免评审结论（注入/绕过面） — SKILL.md 要求 system.md 存在即 `read it and apply — decisions are made`，design-review.md L91 与 design-deslop 同类条款把其中决定的事项排除在缺陷/slop 之外。任何被审项目只要放入该文件，就能让评审对其中声明的值不作追问；skill 没有来源校验、大小限制或冲突策略。
- 『自动加载 / 自动记忆』是提示词层面的期望，不是机制 — README L32/L46 的 Memory 与『System loads automatically』由 SKILL.md L288/L303 的 prompt 指令实现（读文件、offer to save），没有代码或 hook 保障；在没有 system.md 或 agent 未读的会话里，一致性承诺不成立。
- reference/ 模板不随 skill 安装，README 指引悬空 — plugin.json 只发布 `./.claude/skills`，而 system.md 模板与两份示例位于仓库根 reference/；README L328 的指向对走 npx 安装的用户拿不到文件。
- 不可验证的兼容性与质量宣称 — README L129-135 的 Compatibility Matrix 无测试或 CI 支撑；仓库无 package.json、无 workflows。
- 仓库内残留第三方平台标识 — website/.vercel/project.json 把 Vercel projectId 与 orgId 提交进公开仓库（且 .vercel/README.txt 自述不应分享该目录）；无 .gitignore 阻止。
- 运行时写文件属常规能力，但会落在用户仓库根目录 — `.interface-design/system.md` 由 agent 在消费方项目写出（经用户同意），位置在工作目录内、内容为 Markdown；对本 skill 属正常行为，但审计时需知晓会新增目录。
🔵 蓝：知晓即可。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、类型约束）的场合：本仓零测试零构建，全部价值在文本规则。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 interface-design.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent83166a71a36953ec…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库Dammyjay93 / Dammyjay93/interface-design
原始 GitHubDammyjay93/interface-design ↗
Stars5698
最近推送2026-06-20
本 skill commit
2f9be32068许可MIT（仓库根 LICENSE：L1 'MIT License'、L3 'Copyright (c) 2026 Damola Akinleye'）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。