Communitygithub.com

eyoussef-builds/design-marketing-website

承認された製品定義から、独自の製品マーケティングウェブサイトを計画、デザイン、構築、または更新します。レスポンシブUI、見つけやすさ、検証可能な動作を備えた公開製品サイトやLovableへのハンドオフに使用します。

design-marketing-website とは?

このスキルは、製品マーケティングウェブサイトの計画、デザイン、構築、または更新を包括的にガイドします。特に、公開製品サイトやLovableのような外部ビルダーへのハンドオフに適しており、既存の製品定義(例:`project.md`)を尊重しながら、`marketing-site-brief.md`のような独立したデザインブリーフを作成・管理します。SaaS、マイクロSaaS、サービス、ツールなど、様々な製品タイプをサポートし、特定のフレームワークやページ数に固定されません。 このスキルは、まず実際のタスクを明確にし、既存のフレームワーク、ルート、コンポーネント、ホスティング制約を検査してから、互換性のあるアプローチを推奨します。次に、情報アーキテクチャ、コンテンツ、デザイン要件、インタラクション、発見可能性を定義した転送可能なデザインブリーフを作成します。コーディングエージェントルート(直接実装)または外部ビルダールート(Lovableなどにブリーフを供給)のいずれかに対応します。 実装後は、実際のルート、クリティカルなアクション、レスポンシブレイアウト、アクセシビリティ、メタデータ、構造化データ(JSON-LD)を検証します。必須の最終レビューでは、実際の訪問者体験を承認されたスコープと照らし合わせ、修正結果を確認し、未実施のチェックを開示します。製品の事実、商業条件、外部依存関係が未解決の場合は、黙って捏造するのではなくフラグを立てます。 このスキルは、製品とウェブサイトの整合性を維持することの重要性を強調し、継続的なメンテナンスのためのAGENTSスニペットの適応を含みます。製品の変更が認められた場合、影響マップを検査し、影響を受けるウェブサイトコンテンツ、ナビゲーション、メタデータ、構造化データ、テストを更新します。計画された機能と提供された機能を正確にマークし、実装された機能が自動的にすべての訪問者にリリースされるわけではないことを認識します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/eyoussef-builds/design-marketing-website/tree/HEAD/skills/design-marketing-website

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

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

ドキュメント

プロダクトマーケティングウェブサイトのデザイン

この特定の製品を説明するコンテンツ、ビジュアルの選択、およびインタラクションを備えたウェブサイトを作成します。SaaS、マイクロSaaS、サービス、ツール、その他の製品をサポートし、フレームワーク、固定ページ数、SaaSビジュアルテンプレートを強制しません。

実際のタスクを確立する

変更を加える前に、ユーザーのリクエスト、リポジトリの指示、承認された製品定義(project.mdなど)、および既存のマーケティングサイトを読みます。製品定義が存在しない場合は、承認された情報源からオーディエンス、提供物、利用可能な機能、サイトの目標を確立し、不足している重要な決定事項のみを質問します。タスクが、ブリーフ、コーディングエージェントの実装、外部ビルダーへのハンドオフ、または限定された更新のいずれであるかを判断します。既存の製品決定、アーキテクチャ、承認されたスコープを維持します。通常のウェブサイト編集のために探索を再開しないでください。

承認された製品定義は、製品の事実、スコープ、商業上の決定、準備状況を所有します。既存の名前と場所を維持します。別個の marketing-site-brief.md が、ウェブサイトの情報アーキテクチャ、コンテンツ/デザイン要件、インタラクション、発見可能性計画を所有します。製品定義(例:project.md)からそれを参照します。製品定義全体を複製したり、製品の事実について競合する情報源を作成したりしないでください。既存の仕様は、実装作業に対する責任を保持します。

実際のフレームワーク、ルート、レンダリング、コンポーネント、依存関係、ホスティング制約を検査します。新しいサイトの場合は、コンテンツ、レンダリング/インデックス作成のニーズ、統合、保守性、チームの制約に基づいて、互換性のあるアプローチを推奨します。最新のフレームワークを自動的に選択するのではなく、重要なトレードオフを説明します。デザインスキルは、フレームワークやランタイム依存関係ではなく、作業ガイダンスです。SaaSは製品モデルであり、Sassはスタイリングツールです。

転送可能なデザインブリーフを作成する

ブリーフを作成するときは、英語のブリーフテンプレートまたはアラビア語テンプレートを使用します。セクションを架空の事実で埋めるのではなく、プロジェクトに適応させます。有用な作業を妨げる未知の事項を特定し、妨げにならない詳細については宣言された前提で進めます。

提案する各ページに、明確な訪問者の質問、有用なコンテンツ、および次のアクションを割り当てます。薄いページや冗長なページは統合します。ページコピー、公開機能の準備状況、証拠の制限、ナビゲーション、内部リンク、プレビューラベル、フォームの動作、レスポンシブ/RTL要件、アクセシビリティ、メタデータ、JSON-LDの適用可能性、パフォーマンス、受け入れチェックを含めます。マルチページサイトには、意味のあるルートとコンテンツが必要であり、名前が変更されたアンカーや非常に類似したキーワードページが多数ある単一ページであってはなりません。

認識可能なビジュアルの方向性を定義します:オーディエンスと個性、参照原則、タイポグラフィ、カラー/スペーシングトークン、構成、アセット、モーション、意図的な制約。すべての製品に同じヒーロー/カード/グラデーション/ダッシュボードの公式を適用しないでください。別の製品のブランドをコピーしたり、顧客の証拠を捏造したりしないでください。別のツールが首尾一貫してデザインを実行できるように、推論を含めます。

フレームワーク、オプションのデザインスキル、またはビルダーを選択するときは、デザインツールの選択を読んでください。呼び出す前に、利用可能なデザインスキルを検査します。タスクに必要な最小限の有用な組み合わせを選択し、重複を説明し、実際のホスト互換性を維持します。名前付きスキルがインストールされているふりをしないでください。オプションの外部スキルは、アートディレクションやレビューを改善する可能性がありますが、このワークフローはそれらがなくても機能します。ブリーフに名前が表示されているという理由だけで、サードパーティパッケージをダウンロード、インストール、または実行しないでください。オプションのスキルがPRODUCT.mdやDESIGN.mdなどのファイルを作成する場合は、承認された参照の下で派生ツール出力または作業用デザインノートとして明示的にマッピングします。競合する製品/マーケティング権限を黙って導入しないでください。ランチャー、イニシャライザ、フック、またはネットワーク対応ヘルパーを実行する前に、現在のエントリポイントと互換性を検査します。デザインスキルがMarkdownのみであると想定しないでください。

同じブリーフを直接構築するかハンドオフする

  • コーディングエージェントルート: 承認されたウェブサイトブリーフを既存のプロジェクト規則で実装します。共有基盤、代表的なページ、機能的なナビゲーションを構築し、その後、他のページと状態を完了します。製品IDの一部である場合は、既存のデザインシステムを使用します。タスクベースの理由なしにそれを置き換えないでください。
  • 外部ビルダールート(Lovableなど): ツールの実際にサポートされている入力を使用して、同じサニタイズされたブリーフと必要なアセットを提供します。製品の事実を維持し、実際のインタラクションをプレビューと区別する、スコープが限定された指示を提供します。ツールは、名前が言及されているという理由だけでローカルファイルを読み取ることはできません。特定のインポート/エクスポート、フレームワーク、または同期動作を約束する前に、現在のドキュメントを確認します。マージする前に、受信したコードと統合要件を確認します。想定によってアプリケーションを上書きしたり、そのバックエンドを移動したりしないでください。

どちらのルートでも、実際に生成された結果を確認し、観察された問題を制限されたパスで修正します。ツールの回答を事前に作成したり、その完了メッセージから成功を主張したりしないでください。ブリーフを承認することは、選択したワークフロー外での公開、支出、サービスのプロビジョニング、または依存関係のインストールを意味するものではありません。タスクによってすでに承認されている日常的な元に戻せる編集は、繰り返し承認を必要としません。

動作と発見可能性を検証する

実装と最終レビューには、受け入れガイドを使用します。実際のルートと重要なアクション、該当する場合はアラビア語/ラテン語の方向性、モバイル/デスクトップレイアウト、キーボードの使用、意味のあるローディング/エラー/成功状態、およびプロダクション向けメタデータをテストします。フロントエンドのデモと実際に保存された送信を区別します。実際の登録を主張する前に実際のレコードを確認し、インデックス作成制御とは別にプライベートデータを保護します。

表示されているページと現在の検索資格に適した構造化データを選択します。スキーマを埋めるために、レビュー、価格、組織、可用性、評価を捏造しないでください。構文と該当する検索要件を検証します。有効なJSON-LDは、リッチリザルトやランキングを保証するものではありません。llms.txt、フレームワークの選択、または自動SEOスコアを可視性の保証として扱わないでください。

実際に実行されたチェック、環境/バージョン、観察された失敗、テストされていない領域を報告します。スクリーンショットは、そのビューポートでの外観を証明しますが、機能的なストレージ、プロダクションインデックス作成、またはフィールドパフォーマンスを証明するものではありません。

必須の最終レビュー

ブリーフ、ハンドオフ、またはウェブサイトが完了したと主張する前に、要求されたモードに対して最終レビューを実行します。実際の訪問者エクスペリエンスまたは転送可能なブリーフを、承認されたスコープおよび参照方向と比較します。発見事項を修正し、影響を受ける出力を再チェックし、簡潔な証拠を記録し、欠落しているチェックを開示します。ファイルの存在、生成されたスクリーンショット、およびグリーンビルドだけでは、有用なウェブサイトを確立するものではありません。

製品とウェブサイトの整合性を保つ

タスクに継続的なメンテナンスが含まれる場合は、英語のAGENTSスニペットまたはアラビア語のスニペットをプロジェクトの実際のパスに適応させます。承認された製品変更の場合は、影響マップを検査し、承認されたリポジトリ作業内で影響を受けるウェブサイトコンテンツ、ナビゲーション、メタデータ、構造化データ、テストを更新します。計画された機能と提供された機能を正確にマークします。実装された機能は、すべての訪問者に自動的にリリースされるわけではありません。

製品の事実、商業条件、または外部依存関係が未解決の場合は、黙って捏造するのではなく、決定にフラグを立てます。ウェブサイトが別の場所にある場合は、変更されたと主張するのではなく、必要な正確なフォローアップを特定します。リポジトリの編集とデプロイメントおよび公開は別物として扱います。

関連スキル