SaaSランディングページフォージ は何をしますか？
ユーザーのFigmaファイル内に、洗練されたレスポンシブなSaaSランディングページを作成します。ユーザーのコンテンツ、製品エビデンス、ブランドシステム、既存のFigmaシステムを唯一の真実の情報源として扱います。一般的なデザインガイダンスはこれらよりも優先されません。
まずは情報収集から
references/intake-and-planning.mdを読んでください。入力を1つのコンパクトなチェックリストで依頼し、すでに何が揃っているかを認識し、不足している必須項目とオプション項目を分けてください。
回復可能なギャップがあってもブロックしないでください。ユーザーが同意した場合、またはすでに進めるように依頼された場合は、ラベル付きの仮定とプレースホルダーを使用して続行します。製品の機能、価格、証拠、顧客ロゴ、 testimonial、指標、コンプライアンスに関する主張、またはブランドルールを決してでっち上げないでください。
ファイルを編集するには、有効なFigmaターゲットと、適切な書き込みツールを備えた接続されたMCPが必要です。どちらかが欠けている場合は、デザインブリーフとアセット計画を提供し、Figmaでの制作を開始するために必要な正確なステップを記載してください。
この順序で作業を進める
- 事前チェック: 利用可能なFigma MCPツールを確認し、提供されたターゲットを開き、編集範囲を決定し、既存のスタイル、変数、コンポーネント、グリッド、近くのフレームを棚卸しします。references/figma-mcp-workflow.mdに従ってください。
- ブリーフ: オーディエンス、オファー、主要なコンバージョン、メッセージ、証拠、アセット、制約、不足している入力、仮定を要約します。結果を実質的に変更する選択についてのみ確認を得てください。
- コンテンツアーキテクチャ: 承認されたコピーを保持し、明確なコンバージョンパスに整理します。references/conversion-and-content.mdを使用してください。コピーの変更は別途提案し、承認されたコンテンツを黙って書き換えないでください。
- クリエイティブディレクション: ブランドと製品から1つの一貫したビジュアルアイデアを導き出します。references/visual-direction.mdを使用してください。方向性が本当に未確定の場合は、最大3つの異なるオプションを提示し、構築を始める前に1つを推奨します。
- Figmaファンデーション: 適切な場合はファイルのシステムを再利用します。それ以外の場合は、変数/スタイル、グリッド、タイプ階層、スペーシング、半径、再利用可能なコンポーネントからなる小さなローカルシステムを作成します。
- ビルド: 実際のコンテンツと製品スクリーンショットを使用して、デスクトップランディングページを構成します。必要に応じて、レスポンシブなタブレット/モバイルバリアントまたは明示的なブレークポイント動作を作成します。references/responsive-and-motion.mdを使用してください。
- レビューと修正: references/design-qa.mdを実行し、ファイル内の重要な問題を修正してから、影響を受けるフレームを再検査します。
- ハンドオフ: 正確なページ/フレーム名、再利用可能なコンポーネントとスタイル、レスポンシブバリアント、モーション注釈、仮定/プレースホルダー、未解決の入力、残りのリスクを報告します。
Figma操作ルール
- 接続されたFigma MCPが実際に公開しているツールのみを使用します。ツールの証拠なしに、編集、レンダリング、または検査が成功したと主張しないでください。
- 書き込み前に検査します。書き込み後、続行する前に結果のノードまたはレンダリングを検査します。
- 無関係な作業を上書きしたり削除したりしないでください。ターゲットが曖昧な場合は、どこで作業するか尋ねるか、明確に名前付けされた作業用ページ/フレームを作成する承認をリクエストします。
- フラットな画像よりも、ネイティブの編集可能なレイヤー、オートレイアウト、コンポーネント、バリアント、変数、テキストスタイル、エフェクトを優先します。
- 製品スクリーンショットは忠実に保ちます。アスペクト比を維持し、意図的にトリミングし、存在しない機能を暗示するような方法で再描画しないでください。
- 安定した説明的な名前を使用します。「Frame 123」「Group 5」、またはレイアウト目的のない装飾的なグループ化は避けてください。
- 共有、権限、公開状態、所有権、ライブラリを変更しないでください。
- 書き込みに失敗した場合は、再試行する前にファイルを検査して、部分的な成功によって重複が作成されないようにします。
品質基準
ページは、最初のビューポート内で、製品が何をするのか、誰のためのものか、なぜ信頼できるのか、そしてどのようなアクションを取るべきかを伝える必要があります。1つの支配的なCTA、一貫性のある階層、規律のあるタイポグラフィとスペーシング、アクセス可能なコントラスト、実際の証拠のみ、そして一般的なSaaSの装飾ではなく製品に結びついたビジュアルアイデアを使用します。
モーションはオプションであり、目的を持って使用します。注意、理解、フィードバック、連続性、またはブランド表現を向上させる場合にのみ指定します。常に動きを減らす動作を含めます。
スコープ範囲
このスキルは、Figmaランディングページのデザインと実装対応のハンドオフを生成します。動作、アセット、レスポンシブルールに注釈を付ける場合がありますが、ユーザーが別途その成果物をリクエストしない限り、プロダクションフロントエンドコードを生成しません。
この複合スキルの出自と機能監査については、references/source-coverage.mdを参照してください。