Communitygithub.com

alieslami745-bot/landing-skill

指定されたFigmaデスティネーションに、完全なブリーフに基づいてランディングページをデザインします。実行ごとにBasalamまたはカスタムデザインシステムのルートを選択し、オプションでMobbin UXリファレンス、ローカルデザインシステムに基づく構成、Figmaフォントフォールバック、および2パスのポリッシュを備えています。

landing-skill とは?

このスキルは、開発者やAIエージェントユーザーが、完全なブリーフからFigmaのランディングページデザインを自動生成できるようにするものです。実行のたびに、Basalam専用のデザインシステム(バンドル済み)またはユーザー指定のカスタムデザインシステムのいずれかを使用するルートを解決します。Figmaでデザインを作成し、実装コード(HTML、CSS、Reactなど)は出力しません。必須の入力項目には、ブリーフ、デザインシステムソース、および編集可能なFigmaデスティネーションファイルとページが含まれます。オプションのMobbin MCPを使用してUXパターンをリサーチし、デザインシステムにないパターンは承認されたコンポーネントとトークンからローカルで構成します。厳格なプリフライトゲートにより、すべての前提条件が満たされるまでFigmaの変更を防ぎます。ポリッシュパスでは、デザインシステムのスタイルのみを使用し、コピーやクレームは変更しません。このスキルは、BasalamモードではバンドルされたBasalamルールとフォントを、カスタムモードではユーザー提供のFigmaライブラリまたはスキルを参照します。

対応~Claude Code~Codex CLI~Cursor
npx skills add alieslami745-bot/landing-skill

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Figmaデザインシステムランディング

概要

完全なランディングページブリーフを完成したFigmaデザインに変換します。ブリーフから必要な最小限のページ構造を推測し、各要件を承認されたデザインシステムにマッピングし、システムに単一の一致するコンポーネントがない場合にのみローカルで派生パターンを構成し、組み立て後に自動ビジュアルポリッシュパスを実行します。

このスキルはFigmaでデザインします。HTML、CSS、React、Next.js、またはその他の実装コードは書きません。ソースデザインシステムライブラリを編集または公開することは決してありません。

承認されたビジュアル言語が信頼できる情報源です。唯一の意図的な例外は次のとおりです。

  • デザインシステムフォントが利用できない場合にローカルで適用されるFigmaフォントフォールバック。
  • 承認されたデザインシステムパーツと、そのビジュアル値がデザインシステムスタイルまたは変数にバインドされたFigmaプリミティブから構築されたローカル派生構成/コンポーネント。
  • デザインシステムにもブリーフにも適切なアセットがない場合の空のアセットスロット。

すべての例外は完了レポートに表示される必要があります。

ルーティング:Basalamまたはカスタムデザインシステム

FigmaまたはMobbinの操作の前に、ランディング実行ごとにデザインシステムルートを解決します。

  • BASALAM_MODE:このパッケージにバンドルされたBasalamソースを使用します。ユーザーにデザインシステムリンクや別のデザインシステムを要求しないでください。
  • CUSTOM_DS_MODE:ユーザーが提供したデザインシステムまたはインストールされたデザインシステムスキルを使用します。
  • ROUTE_PENDING:ユーザーがランディングを要求したが、ブランドルートがまだ明示されていない。

ブリーフにランディングがBasalam用であると明示されている場合は、再度尋ねずにBASALAM_MODEを選択します。別のブランドまたは製品コンテキストを明示的に指定している場合は、CUSTOM_DS_MODEを選択します。どちらも明確でない場合は、正確に次のように尋ねます。

این لندینگ برای باسلام است؟ بله / خیر

ルートがROUTE_PENDINGの間は、FigmaまたはMobbinの変更を行わないでください。回答を現在のランディング実行に限定します。ブリーフまたはブランドが変更された場合は、再度ルートを解決します。

初回使用時のオンボーディング

ルートが判明した後、新しい会話での最初の呼び出しで、ユーザーが必要な入力をすべて提供していない場合、詳細な質問やプリフライトの前に、ルート固有の短いメッセージを1つ送信します。

  • BASALAM_MODE:

    برای شروع بفرست: ۱) brief ۲) نود/فریم مقصد در Figma ۳) assetهای لازم، در صورت وجود.

  • CUSTOM_DS_MODE:

    برای شروع بفرست: ۱) brief ۲) design system یا اسکیل آن ۳) نود/فریم مقصد در Figma ۴) assetهای لازم، در صورت وجود.

入力がすでに完全な場合は、オンボーディングをスキップしてプリフライトを実行します。ユーザーが入力を提供した後に繰り返さないでください。不足している詳細のみを収集し続け、前提条件がまだ欠けている場合は、変更なしでBLOCKEDを返します。

使用するタイミング

ユーザーがFigmaでデザインされたランディングページを希望し、以下を提供する場合にこのスキルを使用します。

  1. 完全なブリーフとその承認されたコンテンツ。
  2. バンドルされたソースを使用したBASALAM_MODE、または1つの明示的でアクセス可能なFigmaデザインシステムソースを使用したCUSTOM_DS_MODE。
  3. 1つの正確で編集可能なFigmaデスティネーション。

Mobbinはオプションのリサーチ支援であり、必須の入力ではありません。設定されたMobbin MCPが利用可能な場合は、読み取り専用でそれを使用して、欠落しているパターンを構成する前に近くのUXパターンを見つけます。Mobbinリサーチが実際に必要なのに、設定され承認されたMobbin MCPが利用できない場合は、Figmaの変更を行う前に一時停止し、以下に説明する接続の選択肢を提供します。ユーザーがローカル継続を選択した後、または接続されたMobbinに有用な一致がない場合は、このスキルのローカルUI/UXメソッドを続行します。

コード、コピーのみの作業、デザインシステムの作成、ソースライブラリのメンテナンス、または承認されたFigmaソースとデスティネーションがない無制約のビジュアル探索にはこのスキルを使用しないでください。

必須入力

空白、不明、TBD、曖昧、アクセス不可、または競合する値は、欠落として扱います。黙ってデスティネーションを選択したり、ビジネス上の事実を発明したりしないでください。

0. ルート

解決されたBASALAM_MODEまたはCUSTOM_DS_MODEが必要です。ルートが不明な場合は、ROUTE_PENDINGを使用し、Basalamに関する質問をし、変更を一切行わず、回答を待ちます。

1. ブリーフ

以下が必要です。

  • 製品またはサービスとオファー。
  • ターゲットオーディエンス、ユーザーの問題、認識レベル、および重要な反対意見。
  • バリュープロポジションとサポートされるベネフィット。
  • 1つのコンバージョン目標と1つのプライマリCTA。
  • 承認された事実、クレーム、証明、価格、法的テキスト、および必要な場合のセクションコピー。
  • ユーザーが指定した場合の必須および禁止セクション。
  • 言語、書記方向、要求されたブレークポイント、およびビューポートサイズ。
  • 予想される各画像、アイコン、またはイラストの意図された役割、アスペクト比、またはコンテンツニーズ。

利用可能な場合は、提供されたアセットまたは承認されたデザインシステムアセットを使用します。欠落しているビジュアルアセットは、それ自体で実行をブロックしません。以下に説明するように、最も近い許可されたマテリアルまたは明示的な空のアセットスロットで解決できます。

ブリーフが明示的に許可し、提供された事実が十分である場合にのみ、通常のインターフェースコピーを作成します。クレーム、証明、価格、推薦文、法的言語、またはビジネス上の事実を決して発明しないでください。

2. デザインシステムソース

BASALAM_MODEでは、次のパッケージ相対パスからのみバンドルされたソースを解決します。

  • references/basalam-design-system/manifest.json
  • references/basalam-design-system/BASALAM-RULES.md
  • references/basalam-design-system/kit/
  • assets/basalam-design-system/fonts/

Figmaの変更前に、マニフェスト、必要な調整ファイル、関連するコンポーネントリファレンス、およびフォントアセットを確認します。ユーザーにデザインシステムURLを要求したり、黙って別のシステムに置き換えたりしないでください。バンドルがないか、整合性チェックに失敗した場合は、正確な欠落/破損パスとともにBASALAM_DEPENDENCY_MISSINGを返し、変更を一切行いません。

CUSTOM_DS_MODEでは、読み取りアクセス権があり、識別可能な関連公開コンポーネント、バリアント、変数、テキストスタイル、サーフェス/背景スタイル、および利用可能なアイコン/アセットを備えた、明確なFigmaライブラリ/ファイルURLまたはキーが必要です。適切なアイコンまたはアセットがない場合は、ASSET_NEARESTまたはASSET_SLOTで処理されます。それ自体でソースを無効にすることはありません。複数のテーマまたはモードが存在する場合は、意図されたテーマまたはモードが必要です。

ユーザーがCUSTOM_DS_MODEでインストールされたデザインシステムスキルを指定した場合は、このスキルと一緒にロードします。スキル名は、承認されたFigmaソースを明確に解決する場合にのみ十分です。それ以外の場合は、ソースが欠落していると報告します。

バンドルされたBasalamソース

Basalamルートはポータブルです。パッケージには、ユーザーが提供したbasalam-design-systemルール、キットリファレンス、およびDanaフォントファイルのバージョン管理されたスナップショットが含まれています。このスキルパッケージを基準に解決します。個人の絶対パスを使用したり、BASALAM_MODEのために別途インストールされたbasalam-design-systemスキルを必要としたりしないでください。

最初にBASALAM-RULES.mdとkit/内の2つの調整ファイルを読み取り、次にブリーフに関連するコンポーネント/トークンリファレンスのみをロードします。バンドルはデザイン実行中は読み取り専用です。そのマニフェストは、出所、スナップショット日付、ファイルサイズ、およびSHA-256ハッシュを記録します。バンドルされたフォントはリソースであり、フォントを自動的にインストールする許可ではありません。Figmaでの可用性を確認し、ランタイムがDanaを認識できない場合は、文書化されたフォントポリシーを適用します。

3. Figmaデスティネーション

Figmaデザインファイルと、ノードURLまたは同等の識別子として提供され、編集アクセス権を持つ、正確な既存のデスティネーションページおよび挿入ノード/フレームが必要です。どの部分が欠けていても、置き換えファイル、ページ、またはデスティネーションを作成しないでください。

ファイルレベルのURLだけでは、この要件を満たすことはできません。デフォルトのページを選択したり、キャンバスルートを使用したり、挿入フレームを作成したりしないでください。欠落している正確なページ、挿入ノード/フレーム、および未確認の編集アクセス権を個別のギャップとして報告します。

譲れない境界

  • Figma内でのみ作業します。実装コードを出力しないでください。
  • 直接マッピングされたビジュアルコンポーネントは、明示的に承認されたデザインシステムソースに由来する必要があります。
  • ローカル派生構成は、デスティネーションファイル内でのみ許可されます。そのビジュアル子は、承認されたデザインシステムインスタンス、公開されたバリアント、変数、テキストスタイル、サーフェス/背景スタイル、アイコン、承認されたアセット、およびフレーム、オートレイアウト、テキスト、長方形、コンポーネントなどのネイティブFigmaプリミティブである場合があります。
  • ローカルプリミティブのすべてのビジュアルプロパティは、承認されたデザインシステムトークン/スタイルにバインドする必要があります。文書化されたFONT_FALLBACKファミリーオーバーライドを除いて、ハードコードされた色、グラデーション、オーバーレイ、フォントサイズ、ウェイト、行間、スペーシング、半径、シャドウ、エフェクト、または任意のビジュアル値は許可されません。
  • ローカル派生コンポーネントは、承認されたインスタンスから切り離したり、ソースライブラリに公開したり、黙って2番目のデザイン言語を作成したりしてはなりません。デスティネーション内に留まり、その出所が記録されます。
  • サードパーティライブラリ、外部アセット、手描きアイコン、コピーされたMobbinビジュアル、または外部コンポーネントを使用しないでください。
  • Mobbinの結果はUXリファレンスのみです。承認されたデザインシステムを使用して、それらの階層、インタラクションパターン、および構成を再解釈します。ブランドのスタイリングを再現したり、アセットをインポートしたりしないでください。
  • 必要なすべてのパターンがDIRECT_MAPPEDの場合は、Mobbinについて言及したり、一時停止したりしないでください。ユーザーが明示的にセットアップヘルプを要求しない限り、ユーザーに代わってMobbinをインストールまたは接続しないでください。
  • BASALAM_MODEでは、バンドルされたBasalamソースとその検証済みの出所のみを使用します。カスタムまたは無関係なデザインシステムに黙ってフォールバックしないでください。
  • プライマリデザインシステムフォントが常に優先されます。フォントフォールバックは、以下のフォントフォールバックポリシーに従ってのみ許可されます。
  • 背景のポリッシュは、既存のデザインシステムサーフェス/背景スタイルのみを使用できます。新しいグラデーション、オーバーレイ、色、または背景効果を作成しないでください。
  • ポリッシュパス中に、コピー、クレーム、セクションの順序、セクション数、CTAの意味、または提供されたアセットを変更しないでください。
  • ソースデザインシステムライブラリを編集、公開、または変更しないでください。
  • 必要な前提条件、デスティネーション、権限、コンテンツ、トークン、または有効な構築計画が欠けている間は、部分的なデザインを作成しないでください。承認された空のアセットスロットは明示的な完了例外であり、報告されていない部分ではありません。

構築モードとステータス

内部カバレッジマップと最終レポートでこれらの用語を使用します。

  • DIRECT_MAPPED:既存の承認されたデザインシステムコンポーネント/バリアントが使用されています。
  • DS_COMPOSED:承認されたDSパーツとトークンバインドされたFigmaプリミティブから、デスティネーションにローカル構成またはローカル再利用可能コンポーネントが構築されています。
  • ASSET_NEAREST:デザインシステムまたはブリーフから最も近い許可されたアセットが使用されています。
  • ASSET_SLOT:適切なアセットが存在しません。DSレイアウト/サーフェスルールを使用して、空の代替スロットが作成されます。
  • FONT_FALLBACK:プライマリDSフォントが利用できず、DSタイポグラフィメトリクスを維持しながら、アクセス可能なFigmaフォントが適用されます。
  • POLISH_COMMITTED:自動ポリッシュがQAに合格しました。
  • ASSEMBLY_DELIVERED_POLISH_ROLLED_BACK:アセンブリは有効ですが、ポリッシュが2回の試行後に失敗し、削除されました。
  • AWAITING_MOBBIN_CHOICE:リファレンスリサーチが必要であり、Mobbinが接続されておらず、ユーザーが接続するかローカルで続行するかを選択していません。変更は発生していません。
  • MOBBIN_SKIPPED_BY_USER:ユーザーは、Mobbinが利用できないことが判明した後、ローカルUI/UXメソッドを選択しました。
  • ROUTE_PENDING:ランディングブランドルートが不明であり、Basalamの質問が回答を待っています。変更は発生していません。
  • BASALAM_MODE:このランディング実行にはバンドルされたBasalamソースが選択されています。
  • CUSTOM_DS_MODE:このランディング実行にはユーザー提供のデザインシステムソースが選択されています。
  • BASALAM_DEPENDENCY_MISSING:バンドルされたBasalamソースまたはその整合性要件が欠落しているか無効です。変更は発生していません。
  • BLOCKED:前提条件または必要な構築ルールを満たすことができません。

DS_COMPOSED、ASSET_SLOT、およびFONT_FALLBACKは許可された文書化された例外です。AWAITING_MOBBIN_CHOICEとROUTE_PENDINGは一時的な一時停止であり、BLOCKEDではありません。BASALAM_DEPENDENCY_MISSINGは、変更を一切行わないプリフライト停止です。これらのステータスは、任意のカスタムスタイリングを許可しません。

アトミックプリフライトゲート

変更を伴うFigma操作の前に、1つの完全な読み取り専用プリフライトを実行します。ファイル、ページ、フレーム、ノード、コンポーネント、インスタンス、プレースホルダー、または部分的なセクションを作成することは、変更と見なされます。

Figmaの読み取りまたは書き込み操作の前に、figma:figma-generate-designとfigma:figma-useをロードします。BASALAM_MODEでは、バンドルされたBasalamルールをロードし、コンポーネントを解決する前にそのマニフェストを確認します。CUSTOM_DS_MODEでは、ソースを解決する前に、指定されたデザインシステムスキルをロードします。

以下のすべてを一緒に検証します。

  1. ルートが解決されている。BASALAM_MODEでは、バンドルされたマニフェスト、必要なリファレンス、およびフォントアセットが存在し有効である。CUSTOM_DS_MODEでは、ユーザー提供のデザインシステムソースが明示的で到達可能である。
  2. ブリーフに必要な事実、承認されたコンテンツ、CTA、言語/方向、およびブレークポイント要件が含まれている。
  3. デスティネーションファイル、ページ、挿入ノード、ファイルタイプ、および編集権限が有効である。
  4. ランディング構造をビジネス上の事実を発明せずに推測できる。
  5. 選択されたすべてのセクション、ブレークポイント、および必要な状態がDIRECT_MAPPEDであるか、有効なDS_COMPOSED計画がある。
  6. すべてのDS_COMPOSED計画を、新しいトークン、スタイル、コンポーネントライブラリの編集、または外部アセットなしで、承認されたDSパーツとトークンバインドされたネイティブFigmaプリミティブから構築できる。
  7. 予想されるすべてのアセットに、提供/承認されたアセット、ASSET_NEAREST、またはASSET_SLOTのいずれかの結果がある。
  8. プライマリDSフォントが、必要なすべてのスクリプト、ウェイト、およびスタイルで利用可能である。または、有効なアクセス可能なFigmaフォールバック候補が特定されている。
  9. Mobbinリサーチが必要かどうかを判断する。必要なすべてのパターンがDIRECT_MAPPEDの場合は、MOBBIN_NOT_NEEDEDを記録する。それ以外の場合は、MOBBIN_USED、MOBBIN_SKIPPED_BY_USER、MOBBIN_ERROR、MOBBIN_NO_MATCH、またはLOCAL_UX_METHODを記録する。Mobbinが必要だが利用できず、ユーザーがまだパスを選択していない場合は、READYを返す前に、以下のMobbin接続の選択肢を使用する。

変更前にカバレッジテーブルを作成します。

| 要件 | セクションの目的 | 構築モード | DSの子/プリミティブ | トークン/スタイル | コンテンツソース | アセットステータス | フォント

...

関連スキル