アノテーション駆動型UI：Figmaでテンプレートをデザインし、Claudeに座標を抽出させる方法

Zinecore（90年代/Y2K風のジン制作アプリ。ホットピンク、太い輪郭、吹き出し、riot grrrlのフライヤー、MySpace風ページ）を開発しているデベロッパーは、コードで写真スロットをプログラム的に定義するという明白なアプローチでは、すべてのテンプレートが退屈なグリッドに制約されることに気づきました。その回避策：Figmaでテンプレートをデザインし（一部はAI生成後、手作業で修正）、フラットなPNGとしてエクスポートし、別レイヤーに色付きの長方形を描く。赤は写真スロット、青はテキスト。デザイン画像と注釈画像の両方をClaudeに送ります。

Claudeは座標を抽出し、編集可能なエリア定義を生成し、タップターゲットを設定します。結果：カスタムレイアウトエンジンを構築するのに数週間かかるところが、半日の作業で完了。新しいテンプレートを追加するには、デザインして四角形を描くだけでよく、コード変更は不要です。デザインツールシステム全体がこの注釈パイプラインになっています。

より広いパターン：ペーパーファーストデザイン

デベロッパーはワークフローの転換を強調しています：

• Claudeに何も見せる前に、すべてのデザイン思考を紙で行う。
• 画面を手描きでスケッチし、フルカラーパレットを選び、タイプ階層を決定する。
• 気に入ったアプリをスクリーンショットし、それぞれから盗みたい特定の要素に注釈を付ける。
• Claudeに制約を渡し、実装を依頼する。

逆のアプローチ（「アプリをデザインして、90年代風にして」）では、3日間かけて微調整しても、まだ一般的なものにしかなりません。Claudeは特定のビジョンを忠実に実装するのは得意ですが、あなたの代わりにビジョンを持つのは苦手です。デザインを自分の仕事、実装をClaudeの仕事ととらえると、出力の質が飛躍的に向上します。

地味な詳細

• 視覚的な問題を「これ、変だから直して」ではなく、重み、階層、リズムで説明する。
• 「温かみのあるピンク」と言う代わりに、実際の参考写真から16進カラーコードを貼り付ける。
• どのアプリの余白を真似たいのか具体的に指定し、単に雰囲気を言うだけにしない。

アプリ（App StoreのZinecore）は具体的な成果ですが、ペーパーファーストの注釈手法こそが応用可能な部分です。