概要
https://uxdesign.cc/figma-make-prompts-with-real-examples-2ece15d0fce6
詳細内容
## Figma Makeプロンプトの実例集：抽象的なアドバイスを脱し、設計の意図を正確に伝える手法
https://uxdesign.cc/figma-make-prompts-with-real-examples-2ece15d0fce6
**Original Title**: Figma Make prompts, with real examples
実例に基づいた3つのアプローチ（PRD、GPTアシスタント、TOKENフレームワーク）を比較し、Figma Makeで意図通りのプロトタイプを生成するための具体的なプロンプティング技術を解説する。
**Content Type**: 📖 Tutorial & Guide
**Language**: en
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 88/100 | **Annex Potential**: 85/100 | **Overall**: 84/100
**Topics**: [[Figma Make, AIプロンプト, プロトタイピング, PRD, 要件定義]]
本稿は、FigmaのAI生成機能「Figma Make」において、意図通りのプロトタイプを出力させるための具体的なプロンプティング手法を、実例とともに解説している。多くのガイドが「明確に記述する」といった抽象的な助言に留まる中、著者は実際に動作したプロンプト全文を公開し、エンジニアやデザイナーが即座に活用できる知見を提示した。
著者は、効果的なプロンプト作成のために3つのアプローチを比較・検討している。第一に「PRD（製品要件定義書）」をそのままプロンプトとして使用する方法。これは、画面の振る舞いや制約を論理的に定義するため、最も高い制御性と一貫した結果をもたらすが、作成には相応の準備コストがかかる。第二に「Make Prompt Assistant」のようなカスタムGPTを活用し、ラフなアイデアを構造化プロンプトへ変換する方法。これは初動のスピードを重視する際に有効だが、細部の意図がAIによって推測・補完されるというトレードオフがある。第三に「TOKEN（Task, Output, Key elements, Expected behaviors, Notable constraints）」というフレームワークだ。これはプロンプト実行前のチェックリストとして機能し、インタラクションや制約事項の抜け漏れを最小限に抑える。
実戦的な検証として、著者はEコマースの検索・フィルタリング画面の生成を試みた。その結果、一つの長大なプロンプトで複雑な機能を完結させる「ワンパス生成」の難しさが浮き彫りになった。AIはプロンプトが長くなるほど詳細を無視する傾向があり、フィルタの挙動やホバー状態などで不整合が発生する場合がある。
ウェブアプリケーションエンジニアにとって、この知見が重要な理由は二点ある。一つは、AIによるプロトタイピングが、単なる「見た目の生成」から「PRDに基づいたロジックの構築」へとシフトしている点だ。もう一つは、Figma Makeがクレジット制（従量課金）へ移行する中で、プロンプトの「リラン（再実行）」を減らすことが、そのまま開発コストの最適化に直結する点である。AIへの指示を「思考のアーティファクト」として構造化するスキルは、もはやUIデザインの領域を超え、エンジニアリングにおける要件定義の精度と表裏一体となっている。