1仕組みと動作原理
スキル全体が純粋なプロンプトのナレッジソースで構成されています。`.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.
ここでの意図：「デザイン能力」を丸ごと移行可能な1つの指示ファイルにすべて集約し、ランタイムに依存することなく同一のSKILL.mdによってホスト環境（Claude Code / Codex）をまたいで機能させています。
「画一的な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の7項目を宣言することを要求します。判定基準は「理由を説明できるかどうか」であり、曖昧なセンスを判定可能なセルフチェックへと変換しています。
セッションをまたぐ「デザイン記憶」をコードに頼るのではなく、利用側プロジェクト内にエージェントがプレーンテキストの`.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`:
書き込まれる内容は、方向性 / 深度戦略 / スペーシング基準 / 階層の決定 / 再利用可能なコンポーネント寸法に規定されています。ディスクへの書き込みにはユーザーの同意が必要であり、テンプレートエンジンや自動実行を伴わないMarkdownテキストです。
ウォームスタートパスは、利用側プロジェクト内のsystem.mdをスキルのルールよりも上位に位置付けます。ファイルが存在すれば「決定済み」と見なし、方向性の再検討は行いません。
.claude/skills/interface-design/SKILL.md
- **If `.interface-design/system.md` exists:** read it and apply — decisions are made.
コールドスタートは対照的です（同段落の次行）：ドメイン探索（4つの出力）→ 提案 → 確認 → 実装 → 4つのセルフチェック → 保存の確認。この「プロジェクトファイル＝最高権威」とする構成は、同時に本スキルの主要なインジェクションサーフェスでもあります。
レビュー側には実行可能な合格基準が設定されています。8つの必須条件に加え、いずれか1つでも該当すれば承認されない8つの即時却下項目（Presumptive blockers）が存在します。
.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の役割分担を形成し、「レビュー時の不用意な大規模修正」を防止します。
レンダリングおよび画像生成能力は、すべてランタイム時に検出される条件付き機能です。インラインレンダリングツールがあれば言葉で説明する代わりに「実物で提示」し、なければコードとトークンのみにフォールバックします。スキル自体にはピクセル生成機能はありません。
.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 / ヘッドレス / 純粋なターミナル）では、code + tokens + テキスト提案に縮退します。画像生成（方向性ボード / UIリファレンス / ペイントオーバー / ビットマップアセット）も同様に「画像生成ツールが利用可能な場合」を前提としています。
リポジトリ内で唯一実行可能なアセットは`.githooks/pre-commit`です。タイムスタンプで2つのマニフェストのバージョンを書き換えてgit addを行いますが、本クローンではフックとして設定されていないため自動実行されません。
.githooks/pre-commit
sed -i '' "s/\"version\": \".*\"/\"version\": \"$VERSION\"/" .claude-plugin/plugin.json
リポジトリにはライフサイクルフックを登録するpackage.jsonがなく、.git/configにcore.hooksPathの指定もなく、.git/hooks/内も*.sampleのみであるため、クローン直後にはトリガーされません。また`sed -i ''`はBSD/macOS構文であり、GNU sedではエラーとなるため、作者のローカル環境向けワークフローの残骸と見られます。
2コア機能
01プロダクトインターフェースの設計と実装（ダッシュボード / 管理画面 / SaaS / 設定ページ / データインターフェース）
02厳格なデザインレビュー：6つのレンズグループ + 深刻度分類 + 承認ゲート（ブロッキング対応）
03AI特有の質の低さの排除（design-deslop）：動作を変えることなく、diffに対する行レベルのアンチスロップ書き換えを実施
04セッションをまたぐデザインシステム記憶：利用側プロジェクトの`.interface-design/system.md`の読み書き
05インラインビジュアルサンプル：パレット / フォントサイズ / コンポーネントを実際にレンダリングして提示（ツール提供時）
06再利用優先の規律：ネイティブHTML → ヘッドレスでアクセシブルなプリミティブ → 初めて手書き実装へ移行。スタイリングは system → component → token → utility の順で適用
07納品前にデフォルト設定の出力を除外する4つの必須セルフチェック（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.md + 2つのコマンド + reference/）はネットワーク呼び出しを一切行わない：ファイル内にcurl/wget/fetchやHTTP呼び出しの記述なし
- 本地工作目录: ファイルの読み書きと成果物の出力: `.githooks/pre-commit` が2つのマニフェストをインプレースで書き換え、git add を実行（フックが構成されている場合のみ発生）
監査ノート： 🔵 青：留意事項の把握で十分。スキル本体は純粋な指示セットです（スクリプト実行なし、外部ネットワーク送信なし、認証情報の読み取りなし）。実行時のディスク書き込みは、ユーザーの同意を得た上で利用側プロジェクトに`.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結論
最適な用途： ダッシュボード、管理画面、SaaS、設定画面、データインターフェースなど、プロダクト型インターフェースをゼロから構築またはリファクタリング中のチームや個人に最適です。特に「AIの出力がどれも代わり映えしない」という課題を抱え、レビューと収束のための判定基準を求めている現場に適しています。また、デザインレビューをブロック可能な品質ゲートとして運用したいワークフローにも適しています（design-reviewのブロッカー一覧をそのままチェックリストとして利用可能）。セッションをまたいで同一のビジュアル決定を引き継ぎたいプロジェクトにとって、system.mdの仕組みは低コストな着地点となります。
不向きな用途： マーケティングページ、ランディングページ、キャンペーン、純粋なブランドデザイン案件には適していません。frontmatterおよび本文に明示的に対象外と記載されています（`Not for marketing pages, landing pages, campaigns, or brand-only work.`）。スキルがデザインカンプの画像を自動生成することを期待するユースケースには適していません（ピクセル自体は生成せず、レンダリングや画像生成はホストツールが提供されているかに依存します）。検証可能なエンジニアリング保証（テスト、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.