grill-design について
grill-design は `/prototype` スキルを使って `/grilling` セッションを進めるデザインスキルです。各ラウンドのプロトタイプで機能を検討し、全体構成から個々のコンポーネントへ段階的に具体化します。
主な機能
- 01各ラウンドで5種類のプロトタイプ
- 02単一HTMLモックのリアルタイム更新
- 03ドラッグ可能な選択パネルと矢印操作
- 04ボタンによるモック状態の切り替え
- 05全体構成からコンポーネントへの段階的な検討
活用シーン
- 01全体レイアウト案の比較
- 02コンポーネント群のデザイン検討
- 03意味のある画面状態の選択
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ will-ness-ai/ skills --skill grill-designインストール後、Claude Code で/grill-designを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yaml
詳細
各質問を言葉ではなくプロトタイプで提示する、/prototype スキルを使った /grilling セッションを実行します。
- 各ラウンドでは、現在のデザインに関する質問をもとに、まったく異なる5つのプロトタイプを1つのライブモックアプリに作成します。1つの独立したHTMLファイル(Artifact tool)を使い、各ラウンドでその場で更新します。
- 右下にフローティング表示され、ドラッグで移動できるピッカーで各デザインを切り替えます。←/→キーを押すとデザインが切り替わり、モックアプリのスタイルがその場で更新されます。受信トレイの「未読あり」と「空」のように、デザインに意味のある状態がある場合は、モックの状態を切り替えるピッカーボタンも追加します。
- グリリングでは、ビジュアルデザインのツリーをたどり、各回答によって1段階ずつ掘り下げます。全体のデザインから始め、次にコンポーネントのグループ、最後に個々のコンポーネントへと進み、ユーザーが機能全体を細部まで設計できるようにします。
コメント
Markdown 対応