作業の進め方
Hueは、別のデザイン言語スキルを生成するメタスキルです。ブランド、URL、コードベース、スクリーンショット、説明文、リミックス対象の既存スキルから開始できます。観察されたデザイン上の事実と導出された選択を区別し、決定事項を design-model.yaml に記録して、下流のドキュメントとプレビューをそのモデルから生成します。
出力は色とフォントだけではありません。ソースは、コンポーネント一覧、アイコンのフォールバックの根拠、ヒーローステージの構成、ライトとダークのトークン、プラットフォームマッピング、4つのビジュアルデモを扱います。検証と視覚的なレビューも必須です。確認したソースにはフォントの入手元に関する一貫しない指針が含まれているため、すべての推奨を互換性があるものとみなさず、正確なフォントのライセンスと入手可否を確認してください。
想定される成果物
- design-model.yaml を信頼できる唯一の情報源とする、再利用可能なデザインスキル。
- トークン、コンポーネント、プラットフォームマッピングのリファレンスファイル。
- ダッシュボード、コンポーネントライブラリ、ランディングページ、アプリ画面のHTMLプレビュー。
ブリーフからレビューまで
- 01入力を分析する
可能な場合はソースや計算済みスタイルから実際の値を取得し、スクリーンショットやテキスト取得による確度の低い観察結果にはその旨を明記します。
- 02方向性を確認する
より大きなファイル群を生成する前に、美的解釈とコアトークンを確認します。
- 03まずモデルを構築する
プリミティブ、セマンティックロール、コンポーネント、アイコンのフォールバック、ヒーローステージの決定事項をYAMLに記録します。
- 04生成と検証
モデルからリファレンスとプレビューを生成し、付属のバリデーターを実行して、両モードでレンダリング結果を確認します。