Browse commands

/impeccable craft

Craft

デザインを形作り、そしてビルドする。すべてを一つのフローで。

01Shapeディスカバリーインタビュー。目的、ユーザー、制約、方向性。
02参照を読み込む空間、タイポグラフィ、モーション、カラー、インタラクション。
03Build構造、階層、タイポグラフィ、カラー、ステート、モーション、レスポンシブ。
04視覚的に反復ブラウザで確認し、ブリーフに合致するまで洗練。

すべてのフェーズはスキップ不可です。ディスカバリーステップは、AI出力の大部分が失敗する場所です:コードが存在する時点で思考は固定されています。

いつ使うか

/impeccable craft はエンドツーエンドのビルドコマンドです。機能の説明を与えると、パイプライン全体を実行します:構造化されたディスカバリー、参照の読み込み、実装、視覚的な反復。ゼロから新しい機能を始め、1回の呼び出しで全ワークフローを実行したい場合に使います。

次のような場合に使ってください。

  • 新しい機能をビルドし、フルフローを使いたい。 ステップを自分で管理したくない。
  • 何を作るかは分かっているが、どう見えるべきかは分からない。 ディスカバリーフェーズにより、実装が思考を固定する前にデザイン思考を強制します。
  • デフォルトで視覚的な反復が欲しい。 craft は最初の動作バージョンを出荷するのではなく、ブラウザで結果を確認し、仕上げの品質が高くなるまで洗練します。

コードなしで考えだけが欲しい場合は、/impeccable shape を単体で使ってください。明確なビジョンがありビルドだけをしたい場合は、機能説明を添えて /impeccable を直接呼び出してください。craft はその中間に位置します:構造化、完全、意見付き。

仕組み

craft は4つのフェーズを順番に実行します。

  1. デザインを形作る。 内部的に /impeccable shape を実行します:目的、ユーザー、コンテンツ、制約、ゴールについての短いディスカバリー会話。出力は読んでフィードバックできるデザインブリーフです。
  2. 参照を読み込む。 ブリーフに基づいて適切な参照ファイル(空間、タイポグラフィ、モーション、カラー、インタラクション、レスポンシブ、UXライティング)を取り込み、コーディングを始める前にモデルが関連原則を読み込んだ状態にします。
  3. ビルド。 意図的な順序で機能を実装します:まず構造、次にスペーシングと階層、次にタイポグラフィとカラー、次にステート、次にモーション、次にレスポンシブ。すべての決定はブリーフに遡ります。
  4. 視覚的な反復。 ブラウザで結果を開き、ブリーフとアンチパターンカタログと照合し、意図に合致するまで洗練します。このステップは重要です。最初の動作バージョンが出荷バージョンになることはありません。

ディスカバリーフェーズはスキップ不可であり、それがポイントです。AI生成UIの大部分は、モデルがJSXを書き始める前にユーザーが何を達成しようとしているのか誰も聞かなかったために失敗しています。craft はその順序を逆転させます。

試してみる

/impeccable craft a pricing page for a developer tool

まず5〜10問のディスカバリーインタビューが始まります。オーディエンス、プロダクトのパーソナリティ、求める感情的トーン、アンチリファレンス、制約についての質問です。続いてデザインブリーフ。そして実装に入り、各段階でブラウザが確認されます。視覚的な仕上げフェーズでは複数回の反復が期待されます。

実行全体は思考、ビルド、洗練が含まれるため、一般的なコマンドより長くなります。それがトレードオフです:前段の構造を増やすことで、後片付けを減らします。

注意点

  • 小さな変更に使うこと。 craft は新機能向けであり、微調整向けではありません。既存のコードには /impeccable polish/impeccable critique、または特定の洗練コマンドを使ってください。
  • ディスカバリーフェーズを急ぐこと。 インタビューは「とりあえずコードを書き始める」より遅く感じられます。そうではありません。質問に慎重に答えることでより鋭いブリーフができ、より鋭いビルドができ、書き直しが減ります。
  • 視覚的な反復をスキップすること。 このフェーズには理由があります。「技術的に動く」と「正しく感じる」の差は、コードレビューではなく視覚的な仕上げで埋まります。実行させましょう。