UIコンポーネントインベントリエクストラクター
スケッチからすべてのコンポーネント、状態、データフィールドを特定し、後の手戻りを防ぎます。
プロンプト概要
あなたへのヒント
名前は早期に正規化し、デザインとエンジニアリングで共通言語を作る。 | データ取得箇所で検証を文書化し、QAを効率化。 | 新規コンポーネントよりバリアントを優先し、デザインシステムの肥大化を防ぐ。 | フォーカス順やARIAロールのヒントなどアクセシビリティ状態もキャプチャ。
運用チームよりNexusAi Technology解決する課題
予期せぬコンポーネントが遅れて現れ、スケジュールを大幅に狂わせる問題を解決。状態やデータ要件とともに要素を早期にインベントリ化します。
状態カバレッジマトリクス
すべてのインタラクティブ要素が全状態での挙動を定義していることを保証します。
データ契約
フィールド、型、検証ルールをリスト化しエンジニアリングと整合させます。
バリアント管理
バリアントを適切にグループ化し、システムの肥大化を抑制します。
アクセシビリティフック
フォーカス順やARIAヒントなど、関連するアクセシビリティ情報を促します。
AIプロンプト指示
役割:ラフなUIスケッチからコンポーネントインベントリを抽出し、状態とデータ契約をマッピングするデザインシステムリードとして行動してください。
このタスクの重要性:堅牢なコンポーネントインベントリは重複を防ぎ、エンジニアリングの要件を明確にし、モックアップの一貫性を保ちます。
重要な境界条件:
- プレゼンテーションコンポーネントとデータ駆動コンポーネントを区別する。
- すべての状態(デフォルト、ホバー、フォーカス、アクティブ、無効、読み込み中、空、エラー)をキャプチャする。
- 各データバインドコンポーネントに対して最小限のデータフィールドと検証を定義する。
ユーザー入力:
- スケッチの説明とスケッチ内のラベル。
- 既知のデータソースやAPI(あれば)。
- アクセシビリティとローカリゼーションの制約。
目的:
1) コンポーネントをリストアップし、分類(アトム、分子、有機体)。
2) すべてのインタラクティブな状態と遷移を定義。
3) データフィールド、検証、エラーメッセージをマッピング。
4) 再利用可能なパターンと命名の提案をフラグ付け。
分析ワークフロー:
1) スケッチを解析し候補コンポーネントを抽出。
2) 名前を一貫した命名規則に正規化。
3) 類似要素をまとめてバリアントを持つ再利用可能コンポーネントにグループ化。
4) インタラクティブ要素の状態機械を文書化。
5) 依存関係(認証、権限、ネットワーク)を特定。
必要な出力形式:
- 要約(目的、範囲、前提条件)
- コンポーネント表(名前、タイプ、状態、データ、検証、再利用性、備考)
- 主要コンポーネントの状態図(テキスト形式)
- リスクと未解決の質問
品質管理:
- すべてのインタラクティブ要素に少なくともフォーカスと無効状態が考慮されている。
- 検証ルールは具体的かつテスト可能。
- データフィールドには型と必須/任意を含む。
検証チェックリスト:
- コンポーネント名は一意かつ一貫している。
- バリアントであるべき重複コンポーネントがない。
- すべてのエラー状態にコピーガイダンスが含まれている。
最終指示:デザインとエンジニアリングに引き渡すのに適した、整理され読みやすいインベントリを出力してください。
期待される成果
要約:オンボーディング+プロジェクトリスト画面のインベントリ。メール優先認証を前提としています。 コンポーネント表(一部抜粋): - TextInput.Email | アトム | 状態:デフォルト/フォーカス/エラー | データ:email:string | 検証:RFC 5322準拠 | 再利用性:高 | 備考:フィールド下にインラインエラー表示 - Button.Primary | アトム | 状態:デフォルト/読み込み中/無効 | データ:なし | 検証:なし | 再利用性:高 | 備考:左側に進捗スピナー - ProjectCard | 分子 | 状態:デフォルト/ホバー/空 | データ:name:string, tasks:int | 検証:name ≤ 60文字 | 再利用性:中 | 備考:バッジにタスク数表示 リスクと未解決の質問: - エラー文言のトーンが未定義。 - パスワードルールとローカリゼーションポリシーが必要。
実装ステップ
Claudeでインベントリを抽出
Claudeを開き、スケッチの説明や制約を含むプロンプトを貼り付けます。コンポーネント表、状態、データフィールドを依頼してください。再利用可能な命名規則で構造化されたインベントリが得られます。
9 minChatGPTでクロスチェック
Claudeの出力をChatGPTに貼り付け、アクセシビリティ、検証、エラー文言の抜けを指摘してもらいます。状態の洗練や具体的な検証ルールの追加が期待できます。
6 minベースラインを承認
ChatGPTに最終テーブルを作成させ、ユニークIDとバリアント命名を付与してチームに共有し、モックアップ開始前に承認を得ます。
5 min
