実装指示書

このページはプロトタイプの実装仕様をまとめたドキュメントです。

概要

画面の目的・ユーザーストーリーを記述。例: 「ユーザーとして、学習の進捗を一目で確認したい」

コンポーネント一覧を記述。プロトタイプのコンポーネントをインポートしてインライン表示も可能。

状態遷移を記述: default / hover / active / disabled / loading

記述フォーマット例:

要素	トリガー	変化	duration
CTAボタン	hover	bg: primary → primary-hover	150ms ease

この画面で使用しているトークン一覧:

--color-primary#FF8900

--color-bg#FFFFFF

--color-bg-surface#F3F3F3

--color-text#191919

--color-text-sub#7D7D7D

--color-border#E5E5E5

※ 実際のプロトタイプで使用したトークンに書き換えてください

ブレークポイントごとの変化を記述。例: sm(640px) / md(768px) / lg(1024px)

エラー状態: ここに仕様を記述

空状態（データなし）: ここに仕様を記述

ローディング: ここに仕様を記述

上限超過: ここに仕様を記述

APIエンドポイント、データ構造、既存コンポーネントへの参照など