Stitchのデザイントークンをテーマ変数に即時マッピングして開発時間を短縮する方法
makedream14 मई 2026
0
Computing/Software
Comments (0)
Log in to leave a comment
No posts yet
makedreammakedreamLog in to leave a comment
No posts yet
個人でサービスを開発するエンジニアにとって、デザインは常に悩みの種です。AIで画面を生成しても、いざコードに移そうとすると、カラー値を一つずつコピーしているうちに疲れ果ててしまうことがよくあります。Google LabsのStitchとAnthropicのClaudeを組み合わせて使えば、この退屈なプロセスを自動化できます。単に見た目が美しい図面ではなく、実際に動作する製品を作るための技術的な手順をまとめました。
StitchはGemini 2.5 Proを使用して、自然語をDESIGN.mdというファイルに変換します。ここにはブランドカラーやフォントサイズなどの約束事が含まれます。人間が一つずつスタイルを適用するのは時間の無駄です。デザインシステムの変更事項をコードに直接流し込む必要があります。
npx @_davideast/stitch-mcp initを実行してプロジェクトを連携させます。DESIGN.mdを読み込ませ、tailwind.config.jsを更新するように指示します。このプロセスを経ることで、手動でのスタイリング時間が80%以上短縮されます。開発者はヘキサコードの数値を合わせる代わりに、ビジネスロジックの構築により多くの時間を使うことができます。デザインが変更されてもコマンド一行でコードベース全体に反映されるため、一貫性の維持も容易です。
静的な画面に生命を吹き込む段階では、Claude Designのインタラクティブ・コメントが有用です。Claudeは内部で動作するコードを直接レンダリングするためです。特にローディングスピナーやフォーム送信後のフィードバックなど、見落としがちな例外状況を定義する際に真価を発揮します。
Stitchで作成したUIをClaude Designにアップロードし、特定のボタンをクリックしてみてください。「ホバリングすると1.05倍に拡大し、クリックするとローディング状態に変化した後、2秒後に成功メッセージを表示して」とコメントを残すだけです。ClaudeはFramer MotionベースのReactコードを出力します。このコードをコピーしてプロジェクトに貼り付けるだけで完了です。視覚的な意図と論理的な構造が一度に解決されるわけです。
StitchのNano Bananaモデルで作成した画像は品質は高いですが、背景が不透明なラスターファイルです。実際のサービスにそのまま公開するには容量も大きく、背景の削除も必要です。差分マッティング（Difference Matting）技法を活用すれば、微細な影まで活かした透過画像を得ることができます。
自動化スクリプトを書いて処理するのが最もスマートです。
cwebpでエンコードしてWebPフォーマットに変換します。オリジナルより容量が30%以上削減されます。/public/assetsフォルダに送るシェルスクリプトをデプロイパイプラインに接続します。これによりサイトの読み込み速度が向上し、サーバー費用も節約できます。一つずつPhotoshopを開いて背景を切り抜く重労働から解放されるのです。
AIが作成したコードは、時としてすべてのロジックが一つのファイルに固まっているスパゲッティ状態である場合が多いです。今は動いていても、後で修正しようとすると頭の痛い問題になります。そのため、視覚要素とロジックを分離するリファクタリングが不可欠です。
まず、ボタンやカードなどの要素を/components/uiフォルダに個別に切り出します。そして、すべてのコンポーネントにTypeScriptのinterface Propsを記述してください。ハードコーディングされたテキストはchildrenで受け取るように修正します。最後に、AIに対して「すべての色はテーマ変数のみを使用し、直接的なカラーコードは使用しないで」と命じてコードを整理します。
このような作業は、初期のリリース速度を大幅に低下させることなく、将来負担すべき技術的負債を未然に防ぐ保険のようなものです。結局、一人起業家の実力はAIツールをいかに使いこなすかではなく、断片化されたツールを一つの滑らかなパイプラインとして編み上げる設計能力にかかっています。