{"id":50725841,"url":"https://github.com/helloruru/all-good-ui","last_synced_at":"2026-06-10T04:01:21.325Z","repository":{"id":345724709,"uuid":"1187026795","full_name":"HelloRuru/ALL-GOOD-UI","owner":"HelloRuru","description":"All-Good-UI (Miranda) — A sharp-tongued UI expert skill for Claude Code. Synthesized from Impeccable, Taste Skill, Superdesign, UI Skills, Better Icons \u0026 Design Plugin.","archived":false,"fork":false,"pushed_at":"2026-05-11T12:54:12.000Z","size":171,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-11T14:39:19.997Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HelloRuru.png","metadata":{"files":{"readme":"README.ja.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-20T08:59:31.000Z","updated_at":"2026-05-11T12:54:55.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/HelloRuru/ALL-GOOD-UI","commit_stats":null,"previous_names":["helloruru/all-good-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/HelloRuru/ALL-GOOD-UI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelloRuru%2FALL-GOOD-UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelloRuru%2FALL-GOOD-UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelloRuru%2FALL-GOOD-UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelloRuru%2FALL-GOOD-UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HelloRuru","download_url":"https://codeload.github.com/HelloRuru/ALL-GOOD-UI/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelloRuru%2FALL-GOOD-UI/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34136112,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-10T04:01:20.484Z","updated_at":"2026-06-10T04:01:21.308Z","avatar_url":"https://github.com/HelloRuru.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eAll-Good-UI\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eMiranda（ミランダ）— 毒舌な UI エキスパートスキル、Claude Code 専用。\u003c/strong\u003e\u003cbr\u003e\n  あらゆる欠陥を見抜き、自ら修正し、本番対応の UI に仕上げます。\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/version-v2.0-D4A5A5?style=flat-square\" alt=\"Version 2.0\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/license-MIT-D4A5A5?style=flat-square\" alt=\"MIT License\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/claude_code-skill-B8A9C9?style=flat-square\" alt=\"Claude Code Skill\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/dependencies-zero-A8B5A0?style=flat-square\" alt=\"Zero Dependencies\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/discovery-structured-E8B4B8?style=flat-square\" alt=\"Structured Discovery\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003csub\u003ev2.0 — 構造化ディスカバリーカード、3 階層 DS 検出、5 次元テイスト評価、open-design メソドロジー統合。\u003c/sub\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"README.md\"\u003eEnglish\u003c/a\u003e \u0026nbsp;|\u0026nbsp; \u003ca href=\"README.zh-TW.md\"\u003e繁體中文\u003c/a\u003e \u0026nbsp;|\u0026nbsp; \u003cb\u003e日本語\u003c/b\u003e\n\u003c/p\u003e\n\n---\n\n## 課題\n\n- AI が作った UI は AI が作ったように見える——完璧な対称性、汎用カード、無難な配色、個性ゼロ\n- デザインルールが頭の中にしかない——ページを作るたびに結果がバラバラ\n- アクセシビリティ、SEO、レスポンシブ、アニメーション性能——毎回手動チェックするには多すぎる\n- リリースした後で、モバイルでコントラストが崩れていて、ボタンにフォーカスリングがないことに気づく\n\n---\n\n## :mega: ミランダの呼び方\n\n3 つの方法があります。やりやすい方法を選んでください。\n\n### 1. 名前で呼ぶ\n\n```text\nMiranda, build me a landing page.\nミランダ、ランディングページを作って。\n```\n\n### 2. UI 関連の作業を頼む——自動的に登場します\n\n```text\nHelp me fix this page layout.\nこのレイアウトを直して。\nCheck my site's accessibility.\nアクセシビリティをチェックして。\n```\n\nUI に関するリクエストであればミランダが自動的に起動します。名前を呼ぶ必要はありません——彼女は常にデザイン作業を待ち構えています。\n\n### 3. スラッシュコマンド\n\n```text\n/all-good-ui\n```\n\n### トリガー一覧\n\n| English | 日本語 |\n| :------ | :----- |\n| \"Miranda\" | 「ミランダ」 |\n| \"build a page\" / \"make a page\" / \"landing page\" | 「ページを作って」「LP を作って」 |\n| \"fix this\" / \"fix the design\" | 「これを直して」「デザインがダサい」 |\n| \"check this\" / \"audit\" | 「チェックして」「監査して」 |\n| \"redesign\" / \"design system\" | 「デザインシステムを作って」 |\n| \"show me options\" / \"show me versions\" | 「いくつかバリエーションを見せて」 |\n| \"be the boss\" / \"just advise\" | 「ボスモードで」「アドバイザーモードで」 |\n| \"deploy check\" | 「デプロイ前チェック」 |\n| \"too much AI\" / \"looks like AI\" | 「AI っぽすぎる」 |\n| \"quick start\" / \"full interview\" | 「クイックスタート」「フルインタビュー」 |\n\n---\n\n## :movie_camera: ミランダの動作例（v2.0 フロー）\n\nインストール後、会話を始めるだけです。ミランダがすぐに主導権を握り、構造化された 9 フェーズのフローを実行します——余計な雑談なし：\n\n```text\nあなた：  コーヒーショップのランディングページが欲しいんだけど。\n\nミランダ：  呼んだ？私は Miranda。まず 30 秒もらうわよ。\n\n            ┌──────────────────────────────────────────────────────────┐\n            │  ディスカバリーカード — 各行 1 つ選んで返して。              │\n            ├──────────────────────────────────────────────────────────┤\n            │  言語：       [ ] English  [ ] 中文  [ ] 日本語             │\n            │  1. 表面：    [ ] LP  [ ] dashboard  [ ] mobile  [ ] deck   │\n            │               [ ] e-guide  [ ] blog  [x] その他：           │\n            │               コーヒーショップ LP  ← プロンプトから推定        │\n            │  2. オーディエンス：[ ] B2B  [ ] B2C  [ ] 社内  [ ] 個人      │\n            │  3. トーン：  [ ] エディトリアル  [ ] ミニマル                │\n            │               [ ] テックユーティリティ  [ ] ソフトウォーム      │\n            │               [ ] ブルータリスト                              │\n            │  4. ブランド：[ ] 完全 DS あり  [ ] ロゴ+色のみ  [ ] ゼロから │\n            │  5. 規模：    [ ] 単一ページ  [ ] 5-10 ページ  [ ] サイト全体 │\n            └──────────────────────────────────────────────────────────┘\n\nあなた：  日本語。B2C。エディトリアル。ゼロから。単一ページ。\n\nミランダ：  ブランド = ゼロ → ディレクションピッカーへ。1 文字選んで。\n\n            A. Editorial      — Iowan Old Style セリフ、墨色 #111111、\n                                単一アクセント #B8472A\n            B. Modern Minimal — Inter サンセリフ、ニュートラル、\n                                アクセント #2563EB\n            C. Tech Utility   — JetBrains Mono、ターミナルパレット\n            D. Soft Warm      — GenSenRounded、ブラッシュ + セージ\n            E. Brutalist      — モノスペースのみ、硬いボーダー、生 HTML 感\n\nあなた：  A。\n\nミランダ：  ロック完了。Pre-flight 実行中...\n            ┌─ ステップ 1：3 階層 DS 検証 → プロジェクトファイルなし、新規スタート\n            ├─ ステップ 2：grep + hex 正規化 → まだなし（白紙）\n            ├─ ステップ 3：brand-spec.md を書き込み → ディレクション A から token ロック\n            └─ ステップ 4：契約の読み上げ →「セリフ見出し + サンセリフ本文、\n                                            墨対紙パレット、単一アクセント #B8472A、\n                                            ベース角丸 4px」\n\n            まずワイヤーフレーム — グレーブロック、30 秒、リダイレクト安く。\n\n            [emits グレーブロック wireframe HTML]\n\nあなた：  OK、進めて。\n\nミランダ：  チーム派遣。各エージェント = 1 つの TodoWrite 項目。\n\n            ┌─ Emily（エミリー／ビジュアルリード）：token・タイポ・パレット\n            ├─ Serena（セレーナ／アートディレクター）：アイコン + マイクロインタラクション\n            ├─ Jocelyn（ジョスリン／レイアウト）：レスポンシブグリッド + a11y\n            └─ Andy（アンディ／SEO \u0026 デプロイ）：meta、OG、JSON-LD\n\nミランダ：  ビルド完了。Victor がデュアル監査を実行中（18 項目技術 + 5 次元テイスト）...\n\n            ┌─ 技術監査：17/18 合格。1 件のコントラスト修正をサイレント適用。\n            └─ テイスト評価：\n                哲学一貫性    8/10  Strong  — エディトリアル方向が全体で保持\n                視覚階層      9/10  Strong  — 表示タイポが勝ち、mono キャプションが\n                                              キャプションとして読める\n                細部実行      7/10  Strong  — token 一貫、はぐれ hex なし\n                機能性        9/10  Strong  — a11y フルパス、フォーム検証あり\n                革新性        5/10  Functional — 非対称エディトリアルは OK だが\n                                                  表示タイポをもっと攻めてもよい\n\n            KEEP   — エディトリアルタイポグラフィシステム\n            FIX    — （なし、サイレント適用済み）\n            QUICK  — mono キャプション + kicker eyebrow ペアリングで革新性 +2\n\n            デプロイ準備完了。brand-spec.md を .miranda/ に保存、次セッションで継承。\n```\n\n---\n\n## ソリューション\n\nAll-Good-UI がインストールするのは **Miranda（ミランダ）**、完璧な審美眼と凡庸さへの容赦ないシニア UI エキスパートです。5 名の専門サブエージェントを率い、並行で作業します。\n\n### :busts_in_silhouette: チーム\n\n| 名前 | 役割 | 担当 |\n| :--- | :--- | :--- |\n| **Miranda（ミランダ）** | クリエイティブディレクター | チーム統括、ユーザーインタビュー、デザイン判断、成果統合 |\n| **Emily（エミリー）** | ビジュアルリード | タイポグラフィ、カラーシステム、スペーシング、視覚的階層、ダークモード |\n| **Serena（セレーナ）** | アートディレクター | アイコン、アニメーション、トランジション、マイクロインタラクション、装飾要素 |\n| **Victor（ヴィクター）** | シニアオーディター | 品質監査、AI っぽさ検出、アンチパターンスキャン、最終調整 |\n| **Jocelyn（ジョスリン）** | レイアウトエンジニア | レスポンシブデザイン、グリッドシステム、アクセシビリティ、キーボードナビゲーション |\n| **Andy（アンディ）** | SEO \u0026 デプロイ | SEO / AIO / GEO / SGE メタデータ、構造化データ、Core Web Vitals、デプロイ前チェック |\n\n### :sparkles: ミランダにできること（v2.0）\n\n| 機能 | 説明 |\n| :--- | :--- |\n| **ディスカバリーカード** | 30 秒の構造化ラジオフォームが 30 分のリダイレクトを置き換える。オープンエンドなインタビューはなし。 |\n| **ディレクションピッカー** | ブランドがない場合、5 つの固定スタイル方向を提示——1 文字選べば token がロック。フリースタイルなパレット生成なし。 |\n| **Pre-flight プロトコル** | サブエージェント派遣前に必須：DS ファイルを 3 階層で検証、hex 使用状況を grep + 正規化、`brand-spec.md` を書き出し、契約を読み上げて確認。 |\n| **ワイヤーフレームファースト** | 完全ビルド前にグレーブロックレイアウトを提示——破棄安く、リダイレクト安く。部分モジュール／修正タスク／30 行未満の表面では自動スキップ。 |\n| **複数バリアント比較** | 3〜5 つのデザイン方向を生成、ミックス＆マッチ可能（「A のレイアウト + C のスペーシング」）。 |\n| **18 項目技術監査** | アクセシビリティ、AI っぽさ、パフォーマンス、レスポンシブ、SEO——ビルドごとに自動実行。 |\n| **5 次元テイスト評価** | 哲学／階層／細部／機能／革新性、各 0-10 点で証拠付き、Keep / Fix / Quick-win 3 段階のアクションリスト。 |\n| **重大度に応じた自動修正** | 致命的な問題は自動修正、好みの問題と革新性の判断はあなたに報告。 |\n| **`brand-spec.md` アーティファクト** | ロック済みのデザイン契約をプロジェクトに保存、次セッションで再質問せず継承可能。 |\n| **本番対応の成果物** | そのままデプロイ可能。SEO、a11y、パフォーマンス対応済み。 |\n\n---\n\n## :package: インストール\n\n**ステップ 1** -- Claude Code のスキルディレクトリにクローン：\n\n```bash\ngit clone https://github.com/HelloRuru/ALL-GOOD-UI.git ~/.claude/skills/all-good-ui\n```\n\n**ステップ 2** -- 自動トリガーフックを登録。ミランダの名前や UI 関連キーワードで自動起動するようにします：\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eクリックしてフック設定を表示\u003c/strong\u003e\u003c/summary\u003e\n\n`~/.claude/settings.json` の `\"hooks\"` セクションに追加：\n\n```json\n{\n  \"hooks\": {\n    \"UserPromptSubmit\": [\n      {\n        \"matcher\": \"*\",\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"node \\\"~/.claude/skills/all-good-ui/hooks/miranda-trigger.js\\\"\"\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\n必要に応じて `~` を実際のホームディレクトリパスに置き換えてください。\n\n\u003c/details\u003e\n\n**ステップ 3** -- 完了。「ミランダ」と言うか、UI に関する質問をすれば、彼女が対応します。\n\n**ステップ 4（任意）** -- [Claude Teams Go](https://github.com/HelloRuru/claude-teams-go) と組み合わせて、構造化されたマルチエージェントオーケストレーションを実現：\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eクリックして展開\u003c/strong\u003e\u003c/summary\u003e\n\nTeams Go は Claude Code 向けのブループリントベースのワークフローエンジンです。ミランダの 5 名のサブエージェントを、品質ゲートとリトライロジックを備えた協調チームとして派遣できます。\n\n```bash\ngit clone https://github.com/HelloRuru/claude-teams-go.git ~/claude-teams-go\n```\n\n付属のブループリントをコピー：\n\n```bash\ncp ~/.claude/skills/all-good-ui/hooks/miranda-blueprint.md ~/claude-teams-go/blueprints/\n```\n\nセットアップの詳細は [Claude Teams Go README](https://github.com/HelloRuru/claude-teams-go) を参照してください。\n\n\u003c/details\u003e\n\n**ステップ 5（任意）** -- Better Icons MCP をインストールして 200,000 以上のアイコン検索を利用：\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eクリックして展開\u003c/strong\u003e\u003c/summary\u003e\n\n`~/.claude/settings.json` に追加：\n\n```json\n{\n  \"mcpServers\": {\n    \"better-icons\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"better-icons\"]\n    }\n  }\n}\n```\n\n\u003c/details\u003e\n\n---\n\n## :brain: ミランダの仕組み\n\nミランダは自動的に起動し、構造化された 9 フェーズのワークフローに従います：\n\n**フェーズ 0：検出** -- プロジェクトをスキャンし、フレームワーク、パッケージマネージャー、スタイリングシステム、既存のデザイントークンを特定します。\n\n**フェーズ 1：ディスカバリーカード** -- 5 行のラジオカード（表面／オーディエンス／トーン／ブランド／規模）。Pre-fill ルールは厳格（あなたの現在のメッセージから引用するのみ；CLAUDE.md や記憶には触れない）。User-dismiss 逃避口：「任せる」と言えばミランダは追及をやめ、推測部分を `[unconfirmed]` タグ付きで進めます。\n\n**フェーズ 1.5：ディレクションピッカー** -- ブランド = 「ゼロから」または「ロゴ+色のみ」のときに発動。5 つの固定方向（Editorial / Modern Minimal / Tech Utility / Soft Warm / Brutalist）。1 文字選べば token ロック。フリースタイルなし。\n\n**フェーズ 1.8：Pre-flight プロトコル** -- 順序通り 4 ステップ：(1) 3 階層 DS 検証——専用トークンファイル／CSS variables／markdown ドキュメント；(2) hex 値を `tr` + `awk` で正規化、上位 20 件を重複排除しグループ化（brand / neutral / dark / state）；(3) ロック済み token と出典を `brand-spec.md` に書き込み；(4) 契約を 3〜5 行で読み上げ。\n\n**フェーズ 1.9：ワイヤーフレームパス** -- 完全ビルド前にグレーブロックレイアウトを提示。表面が部分モジュール、既存ページのリデザイン、または 30 行未満の HTML の場合は自動スキップ。\n\n**フェーズ 2：ビルド** -- 実際の Agent ツール呼び出しで並行派遣。各サブエージェント = 1 つの TodoWrite 項目、`in_progress` → `completed` をリアルタイムでストリーミングし、途中でリダイレクト可能。\n\n**フェーズ 3a：18 項目技術監査** -- Victor がアクセシビリティ、AI っぽさ、パフォーマンス、レスポンシブ、SEO、視覚的一貫性などをチェック。項目 1-6 の失敗は自動修正（ルール 37）。\n\n**フェーズ 3b：5 次元テイスト評価** -- 同一の Victor パスで哲学／階層／細部／機能／革新性を各 0-10 点で評価、Keep / Fix / Quick-win リストを出力。\n\n**フェーズ 4-5：重大度対応 + 納品** -- 致命的な問題はサイレント修正、好みレベルと革新性の問題は報告。`brand-spec.md` はビルドと共にプロジェクトに残り、次セッションへ継承。\n\n---\n\n## :shield: 2 つのモード\n\n| モード | 使い分け | 動作 |\n| :----- | :------- | :--- |\n| **ボスモード** | 既存のデザインシステムがない、またはミランダに主導させたい場合 | ミランダが全デザイン判断を行う。意見が食い違えば、彼女の基準が優先される。 |\n| **アドバイザーモード** | 自分のブランド／デザインシステムがある場合 | ミランダはあなたの制約を尊重しつつ、客観的に問題のある箇所（コントラスト、a11y、パフォーマンス）は指摘する。 |\n\n---\n\n## :open_file_folder: ファイル構成\n\n```text\nall-good-ui/\n  SKILL.md                        # メインエントリ——ペルソナ、9 フェーズワークフロー、チーム、ルール\n  hooks/\n    miranda-trigger.js             # UserPromptSubmit 自動トリガー hook\n    miranda-blueprint.md           # Claude Teams Go ブループリント（オプション）\n  reference/\n    typography.md                  # フォントスタック、サイズ、行間、読み込み\n    color.md                       # カラーシステム、コントラスト、ダークモード、配色理論\n    spacing.md                     # 4pt グリッド、スペーシングスケール、視覚的リズム\n    motion.md                      # アニメーションタイミング、イージング、パフォーマンス、スプリング\n    interaction.md                 # 8 つの状態、フォーム、フォーカス、ローディング、エラー\n    responsive.md                  # モバイルファースト、ブレークポイント、コンテナクエリ\n    accessibility.md               # WCAG AA、ARIA、キーボード、フォーカス管理\n    metadata-seo.md                # SEO / AIO / GEO / SGE、構造化データ、OG\n    anti-patterns.md               # AI っぽさチェックリスト、デザインアンチパターン\n    css-structure.md               # デザイン token、ファイル順序、セレクタールール\n  workflow/\n    audit.md                       # 18 項目技術監査 + 5 次元テイスト評価\n    design-lab.md                  # 複数バリアント生成と比較\n    icons.md                       # アイコン選定 + Better Icons MCP 連携\n\n# プロジェクトごとに自動生成（この repo には含まれない）：\n{your-project}/\n  .miranda/\n    brand-spec.md                  # Pre-flight フェーズ 1.8 でロックされた DS 契約\n```\n\n---\n\n## :speech_balloon: コマンド\n\n| English | 日本語 | 機能 |\n| :------ | :----- | :--- |\n| \"Check this\" | 「チェックして」 | Victor がフル監査を実行（18 項目技術 + 5 次元テイスト） |\n| \"Build a page\" | 「ページを作って」 | フェーズ 1 からフルビルド |\n| \"Fix this\" | 「これを直して」 | ミランダが診断して修正 |\n| \"Show me options\" | 「バリエーションを見せて」 | 3〜5 つのバリアントを生成して比較 |\n| \"Be the boss\" | 「ボスモードで」 | ボスモードに切り替え |\n| \"Just advise\" | 「アドバイザーモードで」 | アドバイザーモードに切り替え |\n| \"Set up my design system\" | 「デザインシステムを作って」 | フェーズ 1.5 ディレクションピッカー + 1.8 brand-spec |\n| \"Wireframe first\" | 「ワイヤーフレームから」 | フェーズ 1.9 グレーブロックパスへスキップ |\n| \"Just do it\" / \"you decide\" | 「任せる」「これ以上聞かないで」 | User-dismiss 逃避口——ミランダは推測を `[unconfirmed]` タグで進める |\n| \"Deploy check\" | 「デプロイ前チェック」 | Andy がデプロイ前監査を実行 |\n| \"Too much AI\" | 「AI っぽすぎる」 | Victor が AI っぽさパターン + テイスト評価をスキャン |\n\n---\n\n## :wrench: カスタマイズ\n\n| 変更したいもの | 場所 |\n| :------------- | :--- |\n| ミランダの性格 | `SKILL.md` \u003e Persona セクション |\n| チームメンバー | `SKILL.md` \u003e The Team セクション |\n| タイポグラフィルール | `reference/typography.md` |\n| カラーシステム | `reference/color.md` |\n| 「致命的」の基準 | `SKILL.md` \u003e Phase 4: Severity-Based Action |\n| 監査チェックリスト | `workflow/audit.md` |\n| アイコンの好み | `workflow/icons.md` |\n\n---\n\n## :bulb: デザイン哲学\n\n**なぜルールだけでなくペルソナを使うのか？**\nドキュメントに書かれたルールは読み飛ばされる。意見を持ったキャラクターなら実際に守られる。ミランダは問題を列挙するだけでなく、態度を込めて修正する。だからアウトプットに印象が残り、一貫性が保たれる。\n\n**なぜ構造化ディスカバリーカード（v2.0）か？**\nオープンエンドのインタビューは 30 分のリダイレクトコストを生む。5 行のラジオカードなら 30 秒。間違った方向のコストは「会話 1 ラウンド」であるべきで、「完成したビルド」ではない。open-design の「RULE 1 — form before code」から借用。\n\n**なぜフリースタイルパレットではなくディレクションピッカーか？**\nユーザーにブランドがないとき、自由にパレットを発明するのは AI スロップの最大の源。5 つの固定方向（Editorial / Minimal / Tech Utility / Soft Warm / Brutalist）は、推測ではなく確定的な答えをミランダに与える。\n\n**なぜ 3 階層 DS 検出か？**\nデザインシステムは 3 種類の形で存在する：専用 token ファイル、スタイルシート全体に散らばる CSS variables、CLAUDE.md やプロジェクトドキュメントの散文。最初の 1 種類だけ確認していると、実際の DS コミットメントを見逃して不必要にフリースタイルへフォールバックする。\n\n**なぜビルド前にワイヤーフレームか？**\n破棄したワイヤーフレームのコストは 1 ターン。破棄した 1000 行のビルドのコストはあなたの一晩。グレーブロックはレイアウトの欠陥を露わにする——色とタイポは目をそらしてしまう。既存レイアウトがすでにワイヤーフレームとして機能する場合は自動スキップ。\n\n**なぜサブエージェントを使うのか？**\nデザインは多くの領域に同時に関わる——色、レイアウト、アクセシビリティ、SEO。専門のエージェントを並行で走らせる方が、1 回のパスですべてをこなすより速く、徹底的になる。各派遣は TodoWrite 項目に対応するので、途中でリダイレクト可能。\n\n**なぜ技術監査に加えて 5 次元テイスト評価か？**\n技術的な合否はコードが動くかどうかを教えてくれる。良いかどうかは教えてくれない。哲学／階層／細部／機能／革新性を各 0-10 点で評価することで、ビルドが「忘れられる」のか「記憶される」のかを証拠付きで判定できる。\n\n**なぜ「AI っぽさ検出」が必要なのか？**\nAI が作った UI の最大の特徴は、AI が作ったように見えること。完璧な対称性、汎用的な 3 カラムカード、無難なブルーグレーのパレット。ミランダのチームはこれらのパターンを特定し、意図的に壊す。\n\n---\n\n## :warning: 既知の監査の盲点\n\nミランダの監査は鋭いが万能ではない。「P0 修正」を自動適用させる前に、これらの罠を確認すること：\n\n| 症状 | 真相 | 検証方法 |\n| :--- | :--- | :------- |\n| ほぼ同じ hex 値が「色のドリフト」と判定される | 意図的なダークモード明色化（例：`#D4A0A4` は `#D4A5A5` のダークモード明色化版） | 該当 hex を `grep` — `dark-mode.css` / `*-dark.css` のみに存在すればドリフトではなく意図的 |\n| Tier A パターンで DS token が見つからない | プロジェクトが DS を `dark-mode.css`、`theme-*.css`、`*-tokens.css`（非標準名）に保存している可能性 | フェーズ 1.5 ディレクションピッカーに戻る前に、それらのパターンを手動で Glob |\n| top 20 に `#fff` と `#ffffff` の両方が現れる | 旧バージョンの正規化バグ — v2.0 で `tr 'a-f' 'A-F'` ステップにより修正済 | v2.0 パイプラインを再実行；1 つの `#FFFFFF` エントリにマージされるはず |\n\n**鉄則**：フェーズ 4 でミランダがサイレント修正を行う前に Fix リストを一瞥すること。色 token に触れるものは 5 秒の `grep` チェックに値する。\n\n---\n\n## :pray: インスピレーション \u0026 クレジット\n\n\u003e **すべてのコンテンツはゼロから書き下ろしました。** ソースコードのコピーはありません。ミランダのデザイン知識は、以下のプロジェクトが教える原則から合成されたものです。\n\n| プロジェクト | 着想を得たコンセプト | リンク |\n| :----------- | :------------------- | :----- |\n| Impeccable | デザインサイエンス、アンチパターン、7 ドメイン参照システム | [Website](https://impeccable.style/) |\n| Taste Skill | 審美基準、AI っぽさ検出、スタイルプリセット | [GitHub](https://github.com/Leonxlnx/taste-skill) |\n| Superdesign | 自動検出、バリアント生成、デザインシステムスキャフォールディング | [Website](https://app.superdesign.dev/) |\n| UI Skills | ベースライン UI、アクセシビリティ、メタデータ、モーションパフォーマンス | [Website](https://www.ui-skills.com/) |\n| Better Icons | MCP 経由で 200k 以上のアイコン検索 | [GitHub](https://github.com/better-auth/better-icons) |\n| Design Plugin | 複数バリアント比較、フィードバック収集ワークフロー | [GitHub](https://github.com/0xdesign/design-plugin) |\n| **open-design**（v2.0） | ディスカバリーカード + ディレクションピッカー + Pre-flight プロトコル + 5 次元評価メソドロジー——ミランダ v2.0 を形作る 6 つの中核アイデア | [GitHub](https://github.com/fishtvlvoe/open-design) |\n\n---\n\n## 要件\n\n- [Claude Code](https://claude.ai/claude-code)（CLI または VS Code 拡張機能）\n- Node.js 18+（Better Icons MCP を使用する場合のみ）\n\n## ライセンス\n\nMIT -- 詳細は [LICENSE](LICENSE) を参照。\n\n---\n\n\u003cp align=\"center\"\u003e\n  Made by \u003ca href=\"https://ohruru.com\"\u003eHelloRuru\u003c/a\u003e -- 良い UI に説明は要らない。\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelloruru%2Fall-good-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhelloruru%2Fall-good-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelloruru%2Fall-good-ui/lists"}