design-engineer

デザインエンジニア

概要

このスキルを使って、粗削りなフロントエンドや、単に動くだけのフロントエンドを、細部まで丁寧に設計されたリリース可能なインターフェースに仕上げます。まずアプリを確認し、スタック固有の規約を維持したうえで、ありきたりな装飾を加えるのではなく、実際のプロダクトの画面を改善します。

クイックスタート

1. 対象がドキュメントサイト、プロダクトのランディングページ、コンポーネントライブラリ、スタジオアプリ、ダッシュボード、または技術系の OSS サイトの場合は、references/design-language.md を読みます。Jakub Krehel と Emil Kowalski のスキルリファレンス、または Sales CRM の例については、デザインの実践リファレンス を読みます。
2. コンポーネントライブラリの構築、再利用可能なプリミティブの追加、または既存ソースからのパッケージ／コンポーネントのパターン調査を行う場合は、references/implementation-patterns.md を読みます。コンポーネントの参照先を探す、ライブラリを比較する、またはローカルの UI キットにないパターンを実装する場合は、UI コンポーネント を読みます。
3. ナビゲーション、コマンドパレット、テーブル、フォーム、コピー操作、読み込み／空／エラー状態、ダイアログ、チャート、またはモバイルのフローを変更する前に、references/interaction-language.md を読みます。
4. デザインエンジニアリング用ツール、デザインからコードへのワークフロー、信頼できる情報源の方針、アセットの入手先、またはインスピレーションライブラリを選ぶ際は、references/design-tools.md を読みます。
5. アニメーション、トランジション、ローダー、ステータスインジケーター、またはアイコンを追加する前に、references/motion-and-icons.md を読みます。
6. 実際のワークフローを改善する、最小限で一貫したデザイン変更を実装します。
7. 利用可能であれば、アプリの型チェック／ビルド／テストを実行し、デスクトップとモバイルのブラウザーで編集した画面を目視確認します。

ワークフロー

1. 画面を理解する

• 画面がドキュメント／プロダクトサイト、業務アプリ、ダッシュボード、エディター、コンポーネントライブラリ、認証画面、またはインタラクティブなデモのどれに当たるかを特定します。
• スタイルを変更する前に、主要なルート／コンポーネントと、そのローカルなプリミティブを開きます。
• 既存のライブラリやパターンを優先します。ローカルの UI コンポーネント、cn ヘルパー、Tailwind トークン、shadcn/Radix プリミティブ、lucide アイコン、ドキュメント／テーマ用パッケージ、インストール済みのモーションライブラリ、既存のデータ／読み込みフローなどです。
• 不足している UI 要素がある場合は、コンポーネントリファレンスから適切なソースを見つけ、最新のドキュメントを確認したうえで、ローカルのシステムに合う最小限の有用なコンポーネントを取り入れます。レジストリのコードをインポートする前に、基盤となるプリミティブと依存関係のバージョンを確認します。
• ユーザーが参考リポジトリ、URL、スクリーンショット、またはファイルを指定した場合は、そのソースを直接確認します。現在のタスクでユーザーが提示していない、非公開またはローカルの参考例のパスには依存しないでください。

2. デザインの方向性を定める

• 一般的なトレンドではなく、プロダクトの目的に基づいて方向性を選びます。
• ドキュメントや OSS のウェブサイトでは、初期表示範囲でプロダクトの特徴が伝わること、使いやすいインストール／コード関連の機能、明快なナビゲーション、検索、サンプル、そして関連する場合はエージェント／AI が読み取りやすい機能を重視します。
• スタジオ／ダッシュボード／生産性アプリでは、情報密度、見渡しやすさ、安定したコントロール、キーボード操作、コマンドパレット／検索、明確な読み込み／空／エラー状態を重視し、マーケティング向けの構成よりも控えめな視覚的階層を優先します。
• トークンで視覚表現のルールを定義します。背景、前景、控えめなテキスト、境界線、アクセント、角丸、影、間隔、文字サイズのスケール、モーションの時間／イージングを設定します。

3. うまくいく場合だけでなく、すべての状態を設計する

UI を完成とする前に、想定される状態を網羅します。

• 読み込み、スケルトン、保留中、楽観的な状態
• 次のアクションがわかる有用な空状態
• エラーおよびアクセス拒否／未認証状態
• 成功／確認のフィードバック
• 該当する場合は、ホバー、フォーカス可視、押下、無効、選択、アクティブなルート、ドラッグ／並べ替えの状態
• モバイルナビゲーション、長いテキスト、オーバーフロー、幅の狭いカード、タッチ対象

4. クラフトのルールを適用する

• メイン画面はすぐに使える状態にしてください。依頼された成果物でない限り、アプリの作業をマーケティング用のランディングページに置き換えないでください。
• 可能な限り、実際のコンテンツ、製品の実際の機能、アプリの実際のデータ形状を使用してください。
• 明示的な寸法、グリッドトラック、最小値／最大値の制約、アスペクト比、オーバーフローの挙動を指定して、レイアウトを安定させてください。
• 認識しやすいツール操作にはアイコンを使用してください。lucide-react がある場合は優先して使い、ローカルのピクセルアイコンやカスタムアイコンは、すでにそのビジュアル言語が存在する場合に限って使ってください。
• カードは、繰り返し表示される項目、ウィジェット、モーダル、または本当に枠で囲む必要のあるツールにのみ使用してください。カードの中にカードを配置するのは避けてください。
• コードベースですでに控えめに使われている場合を除き、装飾的な球体、単調なグラデーション、ボケ背景、一般的なガラス風パネルは避けてください。
• モバイルとデスクトップの両方で、テキストがコンテナ内に収まるようにしてください。文字を過度に小さくする前に、レイアウトを調整してください。
• prefers-reduced-motion を尊重し、待ち時間を隠したり、内容の理解を妨げたりするアニメーションは避けてください。

5. デザイナー兼エンジニアの視点で検証する

完了する前に、次のことを行ってください。

• リポジトリで標準的なフォーマッター、リンター、型チェック、ビルド、テストのコマンドを実行してください。
• 可能であればフロントエンドアプリの開発サーバーを起動し、編集したルートをブラウザーで確認してください。
• デスクトップとモバイルの幅で、要素の重なり、テキストの切れ、コントラストの不足、スクロールの不具合、空白のキャンバス、コンソールエラー、読み込みの停滞がないか確認してください。
• 3D やキャンバスを多用する作業では、キャンバスが空白でなく、適切に配置され、レスポンシブで、操作できることを確認してください。
• 変更したファイルと実施した検証をまとめてください。

同梱リソース

• scripts/design_audit.py：技術スタック、UI ファイル、モーション／アイコン、色、角丸、ビジュアル上のリスクの兆候を簡易スキャンするプロジェクトスキャナーです。
• references/design-language.md：ドキュメント、OSS サイト、ダッシュボード、スタジオアプリ向けの汎用的な技術プロダクトのデザイン言語です。
• references/design-craft.md：better-ui と emil-design-eng による出典付きのガイダンス、および高密度な業務用インターフェース向けの調査済み Sales CRM の参考例です。
• references/implementation-patterns.md：洗練されたアプリやコンポーネントライブラリを構築するための、パッケージとコンポーネントの実装パターンです。
• references/ui-components.md：Designeer と補完的なライブラリから厳選したコンポーネントソースです。フォーム、ナビゲーション、データ、アップロード、モーション、マーケティング、AI インターフェース向けのタスク別レシピも含まれています。
• references/interaction-language.md：ナビゲーション、コマンド、コピー、フォーム、テーブル、チャート、状態、ダイアログ、モバイル向けのインタラクション文法です。
• references/design-tools.md：デザイナー兼エンジニア向けのツールディレクトリと選択ガイドです。
• references/motion-and-icons.md：モーションの語彙、ローダー／アイコンの選択肢、アニメーションの実装ルールです。

リクエストの例

• 「$design-engineer を使って、このドキュメントのホームページを洗練され、技術的な信頼感のある印象にしてください。」
• 「このダッシュボードを、情報密度が高く、本番環境で使えるスタジオアプリのように磨き上げてください。」
• 「このテーブルの読み込み中、空、エラーの各状態を改善してください。」
• 「アプリが騒がしくならないように、上品なモーションとステータスローダーを追加してください。」
• 「この OSS ドキュメントサイトをレスポンシブにし、ビジュアルに一貫性を持たせてください。」
• 「Designeer でコンポーネントを見つけ、このアプリに合わせてファイルアップローダー、検索可能なコンボボックス、アクティビティパネルを調整してください。」
• 「Jakub Krehel と Emil Kowalski の参考例を使って、この CRM のテーブル、フィルター、マイクロインタラクションを磨き上げてください。」