スキル自身の言葉で
デザインからデベロッパー向けのハンドオフ資料を生成するもので、デザインがエンジニアリングに引き渡せる段階に達し、仕様書が必要なチームを対象としています。FigmaのURLを指定するか、それができない場合は説明文やスクリーンショットで代用してください。ビジュアル仕様、インタラクション仕様、コンテンツ仕様、エッジケース、アクセシビリティを順に処理します。
出力は、概要、レイアウト、使用するデザイントークン、コンポーネント、状態とインタラクション、レスポンシブ動作、エッジケース、アニメーションとモーション、アクセシビリティに関する注記の各セクションを備えたMarkdown形式のハンドオフ仕様書です。明記された4つの原則は、想定せずにすべてを明記すること、生の値ではなくトークンを参照すること、すべての状態を示すこと、そしてその挙動の理由を説明することです。
生成されるもの
- 各トークンとその値、用途を一覧化したデザイントークンのテーブルです。
- 各コンポーネントのバリアント、props、特殊な挙動に関する注記をまとめたコンポーネントテーブルです。
- 要素、トリガー、アニメーション、時間、イージングを記録するアニメーションとモーションのテーブルです。
仕組み
- 01デザインソースを特定する
Figma URLがある場合、デザインはFigmaから取得されます。URLがない場合、スキルは文章による説明やスクリーンショットをもとに作業します。
- 02ビジュアルを明記する
正確なパディング、マージン、幅、色・タイポグラフィ・スペーシングのデザイントークン参照、レスポンシブブレークポイント、コンポーネントのバリアントと状態です。
- 03インタラクションを明記する
クリックおよびタップの挙動、ホバー状態、ジェスチャーサポート、そして時間とイージングを記録したトランジションです。
- 04コンテンツとエッジケースを網羅する
文字数制限、切り捨て、空の状態、読み込み中およびエラー状態、さらに最小・最大のコンテンツ量、より長い多言語文字列、低速な接続、データの欠落です。
- 05アクセシビリティの詳細を追加する
フォーカス順序、ARIAラベルとロール、キーボード操作、スクリーンリーダーによる読み上げです。
- 06テンプレートに沿って仕様書を生成する
結果は、そのファイルのセクションとテーブル構造を用いたMarkdown形式のハンドオフ仕様書として記述されます。