アプリをダウンロード
フォルダーを選び、編集前に関連ファイルを読むようアシスタントに依頼します。作業の目的と変更範囲を明確にしてください。
ワークフロー
コーディングのワークフロー · デザイントークン
03
ワークフロー
散在する色や余白を名前付きデザイントークンに置き換えます。統合が問題を隠さないよう、ダークテーマとキーボードフォーカスを確認します。
プロジェクトフォルダーを開く
対応するエンドポイントを選択します。利用できるツールや回答品質は、設定したモデルとサーバーに依存します。
モデルを接続してテスト
変更内容とコマンド出力を確認します。結果を採用する前にプロジェクトの検証を実行してください。生成コードが自動的にテスト済みになるわけではありません。
変更を確認しテストを実行
実際の動作を期待する結果と比較します。検証に失敗した場合は、次の変更を加える前に原因を調べてください。
デザイントークン
ワークフロー
:root { --focus-ring: #2458b8; }
button:focus-visible, a:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 4px;
}適用前に確認. 変更内容とコマンド出力を確認します。結果を採用する前にプロジェクトの検証を実行してください。生成コードが自動的にテスト済みになるわけではありません。