design-engineering

design-engineering

このスキルはファイルではなく、グラフです。以下の本文はコンテンツマップです。必要な場合にのみ [[wikilinks]] をたどってください。それが、この仕組みの要点です。

このスキルの使い方

0. /design-engineering はライブラリというより、まずルーターです。[[skill-router]] がデザイン契約を解決し、フェーズ（未決定 → 構築 → 改善 → 確認 → 命名）を分類して、1つの担当者に作業を引き渡します。担当者は、この中のノード、サブエージェント、またはインストール済みのコンパニオンスキル（AgentsORG design、impeccable、HyperFrames、ElevenLabs、transitions-dev、shadcn CLI、diagram-design、tldraw、GSAP、better-icons、Jakub Krehel のインターフェーススキル、fun-isometric）のいずれかです。担当者は1人か2人までとし、5人にはしません。
1. まずルーティングします。[[routing-table]] は、ほとんどの単独の質問について、意図からエントリーノードへの対応を示します。2つの意図が曖昧な場合は、[[disambiguation]] に判断基準があります。複数クラスターにまたがる作業には、[[stacking-chains]] を使います。
2. それ以外の場合は、以下のMOCを確認してクラスターを選び、そのクラスター配下のアトミックノードを調べるために MOC-*.md を開きます。
3. 該当するアトミックノードだけを読みます。各ノードは単独で完結しているため、兄弟ノードを読む必要はありません。
4. UIコードをレビューする前に、[[gotchas]] と [[pov]] も読み込みます。

ユーザーがUIコードのレビューを依頼した場合は、[[review-format]] で定義された形式を使い、[[review-checklist]] に照らして確認してください。

哲学 — いつ、どこで、なぜ仕上げが重要なのか

センス、喜び、マーケティングとプロダクトUIの違いについて考える方法です。

• [[MOC-philosophy]] → [[taste-is-trained]], [[unseen-details-compound]], [[beauty-is-leverage]], [[delight-impact-curve]], [[feeling-right]], [[marketing-vs-product-ui]], [[states-are-the-work]], [[data-is-content]], [[dependency-discipline]], [[pointing-beats-describing]], [[articulate-precisely]]

モーション — 何を動かすべきか、そしてその方法

最大のクラスターです。アニメーションは現代のUIで最も過剰に使われているツールです。このクラスターでは、いつアニメーションさせるかだけでなく、いつアニメーションさせないかも説明します。

• [[MOC-motion]] → [[animation-decision-framework]], [[easing-curves]], [[duration-table]], [[spring-animations]], [[transform-opacity-only]], [[performance-discipline]], [[transform-mastery]], [[clip-path-tricks]], [[never-scale-from-zero]], [[gesture-momentum]], [[stagger-choreography]], [[prefers-reduced-motion]], [[fly-not-teleport]], [[responsive-feedback]], [[sonner-principles]], [[debugging-animations]], [[lerp-breathing]], [[morphing-icons]], [[shared-letter-morph]], [[hover-default-imperative]], [[tray-rules]], [[css-conventions]], [[frame-rate-independence]], [[animated-hit-testing]]

トランジションのテクニック — Jakub Antalik のカタログ

一般的なUIの類型に向けた標準的なトランジションに焦点を当てた、モーションの一部です。Motion MOCが原則を説明するのに対し、これらのノードでは実装方法を解説します。transitions.dev より。

• [[cross-blur-transitions]] — 不完全なクロスフェードを目立たなくするため、透明度 0↔1 と filter: blur(2px) ↔ 0 を組み合わせます。
• [[compose-subtract-asymmetry]] — 登場時には退場時より多くのプロパティを使います。消える動きが逆再生のようではなく、柔らかく感じられます。
• [[distance-falloff-propagation]] — グループ化されたホバーでは、要素ごとに lift * pow(falloff, distance) で持ち上げ量を決めます。
• [[multi-segment-shake]] — フォームエラー時のシェイクを、280ms の間に 0%、28.57%、57.14%、78.57%、100% の位置で適用します。

サウンド — インターフェースで音を鳴らすべきとき、そしてその方法

ウェブが忘れてしまった感覚です。プロダクトUIはデフォルトで無音ですが、ローンチ動画はその逆です。このクラスターでは、どちらにするかを決め、1つの素材ファミリーを設計し、モーションに同期してファイルを生成します。必要に応じて ElevenLabs を使うか、キーなしでオープンウェイトモデル／プロシージャル生成／CC0 を利用します。

• [[MOC-sound]] → [[sound-decision-framework]], [[sound-motion-sync]], [[sound-palette]], [[sound-spec]], [[sound-playback-web]], [[sound-generation-elevenlabs]], [[sound-generation-open-source]], [[launch-video-sound]], [[launch-video-music]], [[sound-from-motion]], [[designed-sfx-anatomy]], [[earshot-reconciliation]], [[sound-licensing]]

ローンチ動画 — ローンチ動画の企画、編集、採点、レビュー

レンダリングされた動画は、それ自体がひとつの表現面です。表現の方向性を定め、ビートのタイミングを決め、言葉と UI デモを設定し、つなぎ目とカットを作り、サウンドを配置し、その方向性に照らしてレビューします。HyperFrames は制作を担います。このクラスターでは方向性、ビート、言葉、サウンドを決め、[[hyperframes-reconciliation]] では HyperFrames プロジェクト内のつなぎ目を調整します。

• [[MOC-launch-video]] → [[launch-video-registers]], [[launch-video-structure]], [[launch-video-type]], [[launch-video-ui-demo]], [[launch-video-motion]], [[launch-video-seams]], [[launch-video-cuts]], [[launch-video-review]], [[hyperframes-reconciliation]], [[launch-video-formats]], [[cinetic-reconciliation]]

SVG — 作成、アニメーション、モーフィング、ベクター化

インターフェースでもある唯一の画像形式です。トークンシステム上で作成し、その形式に合ったエンジンで動かし、コマンド数のルールに沿ってモーフィングし、フラットなクリップを編集可能なマスコットに変換します。

• [[MOC-svg]] → [[svg-creation]], [[svg-animation]], [[svg-path-morphing]], [[video-to-vector-pipeline]], [[isometric-stickers]], [[fun-isometric-reconciliation]]

図 — 図版、キャンバス、そもそも描くべきかどうか

図は、何かを伝えるうえで最もコストのかかる方法です。図を載せる価値があるか、次に誰がそれを使うかを判断します。そのうえで、完成した図版（Cathryn Lavery の diagram-design）を描くか、ライブキャンバス（tldraw のデスクトップスキルまたは MCP アプリ）を編集します。プロジェクトの仕様を図版に反映し、コネクターのルールに沿ってレビューします。

• [[MOC-diagram]] → [[diagram-decision]], [[diagram-craft]], [[diagram-design-reconciliation]], [[tldraw-canvas]]

タイポグラフィ — テキストに人間らしさを加える

AI 時代のフォントのデフォルト設定は、ひと目でわかります。より良い選択肢と、それを取り巻くルールについて説明します。

• [[MOC-typography]] → [[typography-humanity]], [[line-length-tracking]], [[type-scale-and-rhythm]], [[line-behavior]]

表層 — 色、シャドウ、角丸、ダークモード、不完全さ

多くのガイドライン集が省略する「背景」の選択肢です。雰囲気を形作るうえで重要な役割を果たします。

• [[MOC-surface]] → [[color-monochromatic]], [[color-scales-oklch]], [[dark-mode]], [[shadows-whisper]], [[depth-and-nesting]], [[border-radius]], [[visual-imperfection]], [[contrast-and-color-scheme]], [[z-index-strategy]], [[color-token-tiers]], [[palette-step-roles]], [[gradient-interpolation]]

レイアウト — ページ単位のグリッド、ビューポート、固定表示のクローム、状態としての URL、マーケティング向け画面

コンポーネントではなく、コンテナーに焦点を当てます。マーケティングではビューポートごとに設計する考え方が特に効果的です。プロダクトアプリでは URL に基づく状態管理が役立ちます。

• [[MOC-layout]] → [[viewport-custom-design]], [[sticky-and-scroll-tells]], [[url-as-state]], [[marketing-surface-rules]], [[page-frame]], [[scroll-anchoring]], [[grouping-by-space]], [[growth-and-overflow]], [[logical-properties-rtl]]

コンポーネント — ボタン、ホバー、状態、カード、フォーム、アバター、アイコン、アクセシビリティ、コピー、API

ユーザーが実際に触れる基本要素です。その振る舞いに、作り込みの技が表れます。

• [[MOC-components]] → [[hover-states-subtle]], [[empty-loading-states]], [[icon-systems]], [[cards-design]], [[forms-validation]], [[forms-behavior]], [[touch-and-focus]], [[ui-polish-pass]], [[component-api-design]], [[avatar-systems]], [[interaction-personality]], [[accessibility-baseline]], [[optimistic-updates]], [[copy-voice]], [[dashboard-tells]], [[screen-reader-announcements]], [[keyboard-patterns]], [[wcag-thresholds]], [[strings-and-locale]], [[destructive-actions]]

アンチパターン — AI 生成 UI を見分けるポイント

「AI のデフォルト」に見えるものと、その代わりにすべきことを扱います。何かを足すのではなく削ることがテーマなので、高い価値があります。

• [[MOC-anti-patterns]] → [[ai-default-tells]], [[unslop-pass]], [[content-authenticity]], [[copy-tells]], [[code-tells]], [[screenshot-critique]]

Meta — レビューフォーマット、design.md、Agentation、評価、インストーラーごとのファイル

手順のルールと、増え続けるファイルです。UI コードレビューを行う際は、[[review-format]] が必須です。

• [[skill-router]] — /design-engineering が最初に行うこと：契約を解決し、フェーズを分類して、ノード、サブエージェント、またはインストール済みのコンパニオン（AgentsORG design、impeccable、HyperFrames、ElevenLabs、transitions-dev、shadcn CLI、diagram-design、tldraw、GSAP、better-icons、fun-isometric）のいずれか1つに引き継ぎます。
• [[routing-table]] — 意図 → エントリーノードのルーター。4つの姿勢（構築／評価／決定／命名）を扱います。単一の質問に取り組む際は、ほかの何よりも先にこれを開きます。
• [[prototype-picker]] — まだ決まっていませんか？ライブピッカーの背後に、実質的に異なる3〜5個のバージョンを用意し、コントロールに番号を付けてから、決定を書き留めてハーネスを削除します。
• [[build-a-tool]] — 2回続けて「近づいているが、まだ違う」となりましたか？再プロンプトをやめ、差を診断し、成果物を生成する小さなツールを作ります。
• [[vibe-to-generator]] — 雰囲気しかなく、仕様がありませんか？視覚言語をルールとして調査し、シード付きのジェネレーターと調整項目、保存ボタンを作ります。
• [[design-system-docs]] — エージェントが従える DESIGN.md やドキュメントフォルダーを書く方法：コードを調査し、使用場面／代替案、閉じたバリアントセット、正しい例／誤った例を記載し、プロンプトで検証します。
• [[skill-writing-rules]] — プロセスを定式化し、理由を書き、厳密にし、すべての行に価値を持たせ、各スキルを1つの側面に絞り、実行してテストします。ここにあるすべてのノードと [[pov]] に適用されます。
• [[design-benchmarks]] — DesignBench の生成／編集／修正タスクと、Design Arena のペアごとの投票、そして両方を取り入れたこのスキル独自の評価スイートです。
• [[disambiguation]] — 混同されやすい質問（モーションに関する4つの質問、ダークモードの担当者3人、レイアウトシフトの担当者2人）と、それぞれを担当するノードです。
• [[stacking-chains]] — 複数ステップの作業（新しい画面、見栄え改善、デザインシステム、マーケティングサイト、a11y パス）向けの、順序付きノードチェーンです。
• [[review-format]] — UI の評価に必要な出力形式（Before | After | Why の Markdown 表）です。
• [[review-checklist]] — UI レビューを承認する前に照合する、26行の監査チェックリストです。
• [[change-scoped-review]] — 画面ではなく差分をレビューします：スコープ、影響範囲、各ハンクの削除側、そして各指摘に「新規」「リグレッション」「既存」のステータスを付けます。
• [[stress-scenarios]] — 一時的なハーネスで、コンポーネントに到達し得るすべてのシナリオ（長さ、形状、数量、コンテナー、状態）を確認し、切り替え機能の背後にプロダクトの状態を用意します。
• [[reading-others-interfaces]] — 他者のサイトやエフェクトがどのように作られたかを読み解く方法：指示ではなく証拠として扱い、測定／導出／推測を区別し、描画順にレイヤーを並べ、手順を言葉で記述します。
• [[interfaces-reconciliation]] — Jakub Krehel の interfaces スキルをコンパニオンとして扱います：インストール時に各作業を誰が担当するか、そして12個の価値観の対立をどう解決するかを示します。
• [[design-vocabulary]] — 各デザイン現象を正確に表す言葉と、このスキルでさらに掘り下げる場所です。[[articulate-precisely]] の語彙集で、Index（Emil Kowalski と Glenn Carstens-Peters）が元になっています。
• [[using-design-file]] — プロジェクトの .design 契約（スキーマ design.v1）を使用する方法です。機械可読なトークン、コミット済みの意図、実行可能なポリシーを記述し、このスキルのデフォルトより優先されます。
• [[using-design-md]] — プロジェクトの DESIGN.md（Google Labs 仕様）を使用する方法です。トークンは規範であり、文章は文脈を示します。
• [[agentation-workflow]] — クリックして注釈を付けるデザインレビュー用に、Agentation をインストールして使用します。2セッション構成の「批評してから修正する」ワークフローです。
• [[cross-model-testing]] — GPT、Claude Opus、Claude Sonnet を使い、説明やルーティングの変更をテストする方法です。
• [[gotchas]] — エージェントがつまずくたびに追記される、実際に起きた失敗です。
• [[pov]] — デフォルトに優先する、作者／インストーラーの意見や好みの判断です。フォークする際に編集してください。
• [[animations-dev-curriculum]] — Emil のコースへの外部リンクです。内容を重複させないでください。

ワークフローサブエージェント — 兄弟ディレクトリ agents/

このファイルの隣にある agents/ には、用途を絞った 10 個のサブエージェントがいます。ユーザーの依頼が特定のワークフローに合致する場合に、そのうちの 1 つを起動します。各サブエージェントはグラフの自分専用の一部分を読み込み、構造化された結果をメインエージェントに返します。

• [[ui-reviewer]] — UI スニペットに対して [[review-format]] テーブル + [[review-checklist]] の監査を実行します。
• [[motion-auditor]] — motion クラスター + transitions.dev ノードに照らして、アニメーション/トランジションを批評します。
• [[anti-pattern-scanner]] — AI のデフォルト的な兆候と、コンテンツの真正性の見落としをスキャンします。
• [[agentation-fix-loop]] — [[agentation-workflow]] のセッション 2 にあたる修正側です。MCP アノテーションを読み取り、修正を適用します。
• [[design-md-consumer]] — プロジェクトの DESIGN.md を読み取り、[[using-design-md]] に従ってそのトークンを生成された UI に通します。
• [[pov-curator]] — 実際の失敗の後で、インストーラーが [[pov]] をフォークし [[gotchas]] に追記するのを支援します。
• [[sound-designer]] — サウンドクラスターをエンドツーエンドで実行します。決定、パレット、生成（製品ファミリーには scripts/sound-family.mjs、モーションから派生した動画ステムには scripts/sound-sheet.mjs）、仕様、配線。サウンドマップを返します。
• [[svg-creator]] — SVG アセットを作成またはリファクタリングします。グリッド、名前付きグループ、トークンカラー、適切なフラグを付けた SVGO、アクセシブル名。
• [[svg-animator]] — SVG をアニメーション化するか、フレームからベクターのフリップブックを構築します（scripts/svg-flipbook.mjs）。エンジンはファイルの場所に応じて選択されます。
• [[launch-film-analyst]] — 参考となるローンチフィルムまたは自分のレンダリングをネイティブ fps で測定し、[[launch-video-review]] ルーブリックとフィルムごとの JSON を返します。

完全なディレクトリと選択ガイドについては agents/README.md を参照してください。

アイデンティティ — SOUL.md

このリポジトリはルートに SOUL.md も同梱しています。これは、このスキルで動作するあらゆるエージェントのための声、スタンス、そして嗜好の系譜です。AGENTS.md は「何を/どのように」であり、SOUL.md は「誰が/なぜ」です。使用しているハーネスが自動注入しない場合は、セッションごとに一度読んでください。

コストチェック

上記のすべての文は、毎回のセッションでトークンを消費します。文を追加しようとしている自分に気づいたら、自問してください: これがなくてもエージェントは間違えるだろうか? 間違えないなら、削除してください。間違えるなら、それはここではなくアトミックノードに属します。

— HKTITAN、2026年。