mcpField
B
build-daily-inspiration-sites

build-daily-inspiration-sites

github.com/mengtoデザイン・UI7.1k1.3k 回インストール3 日前に更新
リポジトリ

build-daily-inspiration-sites について

検証済みの5項目のインスピレーション素材を、独立したオリジナルのSitesプロジェクト5件に変換するワークフロースキルです。Codexの個別タスクを調整し、独自性、分離ビルド、検証、コミット、非公開デプロイを定めます。

主な機能

  1. 015項目の素材マニフェスト検証
  2. 02異なる置換ブランドの定義
  3. 03個別タスクのブリーフ作成
  4. 04サイトごとの分離ワークスペース
  5. 05ビルド、コミット、デプロイの指定

活用シーン

  1. 01デザイン素材からランディングページを作成
  2. 02ビルドタスクごとに1サイトを割り当て
  3. 03検証と非公開デプロイの追跡

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mengto/skills --skill build-daily-inspiration-sites

インストール後、Claude Code で/build-daily-inspiration-sitesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
references/
thread-brief-contract.md
scripts/
validate_capture.mjs

詳細

デイリーインスピレーションサイトを構築する

既存の5項目のインスピレーションパックを、独立したオリジナルのSitesプロジェクト5件に変換します。現在のタスクから進行を調整し、作成する各タスクに、1件の構築、コミット、非公開デプロイをそれぞれ担当させます。

境界を守る

  • キャプチャは根拠とアートディレクションとして使用し、コピー元のテンプレートとしては使用しないでください。
  • ユーザーから明示的に依頼されない限り、インスピレーションを再収集しないでください。
  • マニフェストの各項目につきサイトを1件だけ作成し、各サイトにつきCodexタスクを1件だけ作成してください。
  • 1件の構築タスクに複数のサイトをまとめないでください。
  • 参照元のブランド、ロゴ、ワードマーク、コピー、人物、企業、推薦文、数値、日付、プラン、価格、URL、法的文面、インターフェースのスクリーンショット、写真、または独自の商標を再利用しないでください。
  • 全ページ画像から読み取れる上位レベルのビジュアル構成だけを引き継いでください。階層、テンポ、セクション構成、コントラスト、余白、画像の扱いが対象です。
  • 各構築タスクに添付する参照画像は1枚だけにしてください。該当項目の全ページ画像を使用してください。代表的な静止画、動画、モーションフレーム、セクションの切り抜きは添付しないでください。
  • Codexのアプリ内ブラウザーのみを使用してください。Chromeは使用しないでください。

1. キャプチャを特定して検証する

ユーザーが指定した記事パスを使用してください。指定がない場合は、現在のContentワークスペースで最新の日付が付いたarticles/YYYY-MM-DD-ui-inspiration-capture/フォルダーを選択してください。

次の条件を満たす必要があります。

  • itemCount: 5で、項目がちょうど5件のmanifest.json
  • content.md
  • 各項目に、空でないローカルのfullPageImageが1つ
  • ライブサイトの各項目にpageUrl
  • 各項目に詳細なビルダープロンプトが1つ

次を実行してください。

node <skill-dir>/scripts/validate_capture.mjs <article-dir>/manifest.json

検証に失敗した場合は停止してください。全ページ画像が見つからない場合は、別の静止画、動画、フレーム、切り抜き、ライブページのキャプチャで代用せず、欠落を報告してください。

2. オリジナリティマトリックスを作成する

タスクを作成する前に、互いに異なる5つの新しいアイデンティティを定義してください。各項目について、次を選定します。

  • 新しいブランド名とスラッグ
  • カテゴリーに合わせた新しいポジショニングステートメント
  • 新しい対象ユーザーとコンバージョン目標
  • 新しいコンテンツ語彙
  • 新しい実績、指標、プラン、価格の組み合わせ
  • コンセプトに合った新しい画像の方向性

新しい名前は、参照元のタイトルと実質的に異なるものにしてください。提案した5つの名前を相互に検索し、意図しない類似がないか確認してください。汎用的なAI名を5つ付けたり、色だけを変えたりすることは避けてください。

変換内容には一貫性を持たせてください。新しい統計値は、表示されるすべての箇所で一致している必要があります。価格、推薦文、所在地、サービス名、製品UI、フッターの詳細は、すべて新しいブランドに即したものにしてください。

3. 各項目につきビルド概要を1つ作成する

タスクを作成する前に、references/thread-brief-contract.md を読んでください。すべてのプレースホルダーに具体的な値を入力し、NEW_BRAND、TODO、その他の未解決マーカーを含む概要は決して送信しないでください。

各概要には、次の内容を含める必要があります。

  • マニフェスト項目の正確なタイトルと作成者
  • manifest.json と content.md の絶対パス
  • 項目の絶対パス fullPageImage を使用した、インラインのローカル画像添付を厳密に1つ。フェンスで囲まない Markdown の画像構文を使います。![Full-page reference — <REFERENCE_TITLE>](<ABSOLUTE_FULL_PAGE_IMAGE_PATH>)
  • 新しいブランド名、カテゴリー、対象者、提供内容、コンバージョン目標
  • 独自性に関する明確な境界と、漏れのない置き換え対象のリスト
  • sites:sites-building と sites:sites-hosting を使用する要件
  • セマンティックな構造を備えた、1ルートの HTML ランディングページ。Sites のスターターを使って app/page.tsx から描画してもかまいません
  • レスポンシブ対応、アクセシビリティ、動きの軽減、インタラクションに関するすべての要件
  • ビルドの検証、限定的なコミット、非公開デプロイ、最終 URL に関する要件

Markdown 画像は、作成したタスク内で添付ファイルとして表示される必要があります。フルページ画像のパスをプレーンテキストで示したり、ほかの画像や動画を添付したりしないでください。タスク作成画面でローカルの Markdown 画像を表示できない場合は、パスだけを渡す方法に切り替えず、その時点で停止して問題を報告してください。

コーディングを始める前に、添付されたフルページ画像を確認するよう各タスクに指示してください。詳細なプロンプトについては、マニフェストまたは記事の内容を項目ごとの唯一の信頼できる情報源としてください。静的なフルページ画像だけでは、元の動きやインタラクションの挙動、実装手法はわかりません。これらを推測したり、断定したりしないでください。

4. Codex のタスクを5つ個別に作成する

ユーザーが個別のタスクまたはスレッドを明示的に依頼した場合に限り、Codex のスレッドツールを使用してください。

  1. 記事の日付に加え、参照タイトルまたは提案するブランド名を使って最近のタスクを検索してください。一致するタスクがすでにある場合は、重複して作成せず、既存のタスクを再利用してください。
  2. 新しい独立した Sites プロジェクトには、プロジェクト未割り当ての対象と、一意のディレクトリ名を優先してください。
  3. ユーザーが既存のリポジトリ内にソースを置くよう求めている場合は、まずプロジェクトを一覧表示し、各ビルド用に個別のワークツリーを作成してください。
  4. 5つのタスクすべてに完全な概要を記載して作成してください。
  5. Build <Brand> landing page のように、各タスクにわかりやすいタイトルを付けてください。
  6. 5つのタスクがすべてアクティブであることを確認してください。スレッドの待機/ステータスツールを使用し、待機できない場合はタスクリストを確認方法として使用してください。

Content チェックアウトで5つのサイトを同時に編集しないでください。キャプチャファイルは読み取り専用の証拠であり、各ビルドはそれぞれのタスクワークスペース内だけに書き込みます。

5. Sites の引き渡しを完了させる

作成した各タスクには、次の要件を課してください。

  • 直ちに Sites を初期化する
  • ヒーローのモックアップではなく、1ルートの完全なランディングページを作成する
  • セマンティックな構造と、適切なライセンスを持つオリジナルのメディアを使用する
  • モデルが生成した SVG イラストを使用しない
  • 必須の本番ビルドを実行し、失敗があれば修正する
  • 検証済みのサイトソースのみをコミットする
  • ビルドの成功後、Sites を通じて非公開で公開する
  • 共有アクセスまたは公開アクセスしか利用できない場合は、Sites の承認ルールに従う
  • デプロイ URL、ソースの場所、コミット、変更内容の簡潔な概要を返す

これらはバックグラウンドタスクであるため、実際の問題の解決に必要な場合を除き、インタラクティブなブラウザプレビューは省略してください。公開作業と通常の Sites の引き渡しは引き続き行ってください。

6. 起動状況を報告する

参照元と置き換え先ブランド、および現在のタスク状況の対応関係を簡潔に示してください。アプリで必要な場合は、新規タスクごとに作成タスクのディレクティブを1つ出力してください。

5つのタスクがそれぞれ次の成果物を作成することを明確に伝えてください。

  • オリジナルのランディングページを1つ
  • 分離されたソースワークスペースを1つ
  • 検証済みコミットを1つ
  • 非公開の Sites デプロイを1つ

タスクからビルドとデプロイの成功が報告されるまで、サイトが完成したと主張しないでください。

完了チェック

  • マニフェスト項目がちょうど5件検証されています。
  • 各項目について、空でないフルページ画像がちょうど1枚検証されています。
  • 置き換え先の異なるアイデンティティがちょうど5つ定義されています。
  • 一意なタスクがちょうど5件作成、または意図的に再利用されています。
  • すべてのタスクに、レンダリング済みのフルページ画像添付ファイルがちょうど1つ含まれており、パスのみの画像受け渡しはありません。
  • すべてのブリーフで、元のアイデンティティ、言語、数値、画像がすべて置き換えられています。
  • すべてのタスクで、Sites のビルド、検証、コミット、プライベートデプロイが必要です。
  • ユーザーは、作成された各タスクを個別に開くことができます。

コメント