daily-ui-inspiration-capture

毎日の UI インスピレーション収集

概要

現在のプロジェクトにおける毎日の UI インスピレーション収集ワークフローを、スクリーンショットの寄せ集めや README ではなく、記事として使える一式として実行します。現在のプロジェクトのランブックを信頼できる情報源として扱いますが、ユーザーが契約内容を更新しない限り、以下をデフォルトとします。

このスキルを使う場合

• ユーザーが、定期的な毎日の UI インスピレーション収集を articles/YYYY-MM-DD-ui-inspiration-capture/ に実行、更新、またはパッケージ化するよう依頼した場合
• ページ全体のスクロールスクリーンショット、セクションごとの切り抜き、動きのあるフレーム画像を含め、公開中のランディングページ／製品リファレンスを正確に 5 件収集するタスク
• 単なるスクリーンショットの寄せ集めや README ではなく、AI ビルダー向けのプロンプトを含む manifest.json と content.md の記事一式を作成するタスク
• コミット前に、過去の articles/*-ui-inspiration-capture/manifest.json の実行結果と重複がないか確認したい場合
• 既存の収集一式が出力仕様（項目数、ページ全体／セクションの証拠、動きのあるフレーム、README.md がないこと）に合致しているかを検証する場合
• 対象外：単発のスクリーンショット、無関係なコンテンツ／記事の作業、README.md の生成。これらはこのワークフローの仕様範囲外のため、プロジェクト独自の規約に従ってください

開始

ユーザーが指定したコンテンツ／記事プロジェクトを使います。プロジェクトが指定されていない場合は、現在のワークスペースを使用し、使用したディレクトリを明示してください。

収集を始める前に、以下を読みます。

• AGENTS.md（存在する場合、またはプロンプトで提供された場合）
• scripts/ui-inspiration-capture-guidelines.md（存在する場合）
• 現在の形式を把握するため、最新の articles/*-ui-inspiration-capture/content.md と manifest.json を 1～2 件

早い段階で git status --short を確認してください。このリポジトリには変更が残っていることがよくあります。変更は、依頼された日付の一式またはスキルファイルに限定してください。

ブラウザーを使う場合は、Codex アプリ内ブラウザーのみを使用してください。Chrome は使わないでください。情報源の検証がブロックされた場合は、Codex ブラウザーで得られる最善の証拠、またはローカルアセットを使い、その理由を説明してください。

出力仕様

日付入りフォルダーを作成します。

articles/YYYY-MM-DD-ui-inspiration-capture/

フォルダーには、最低限以下を含めます。

• content.md
• manifest.json
• ローカルの静止画像
• ローカルの動画ファイル、または項目ごとの明確な動画代替理由
• 公開中のウェブサイトの各リファレンスについて、ページ全体のスクロールスクリーンショット 1 枚
• ページ全体のスクリーンショットから切り抜いた、ヒーロー、意味のある中間セクションすべて、フッターのセクション別画像
• 動画のキャプチャに成功した場合は、動きのあるフレーム画像

README.md は作成しないでください。

最終的なリファレンスを正確に 5 件収集してください。新しい 5 件のモーションスタディ用ワークフローは、旧来の 20 枚の画像ギャラリー方式に優先します。

実際に閲覧・検証できるランディングページや製品セクションを優先してください。Framer Marketplace は有力な情報源です。Dribbble は可能な範囲で試してください。WAF にブロックされた場合やアセットの質が低い場合は、無理に脆弱な回避策を使わず、より良い Framer の候補や直接閲覧できるページの候補で仕上げてください。

選定

最終候補を選ぶ前に、過去の articles/*-ui-inspiration-capture/manifest.json ファイルを読み込みます。

過去の収集結果にある正規化済みのタイトル、ソース URL、画像 URL と重複する候補は除外してください。フィードが古く感じられる場合は、検索語を切り替えてください。

• website hero
• saas landing page
• product website
• web design hero
• recent web design
• recent product design

ファーストビューが明確で、セクションを検証でき、タイポグラフィが優れ、製品やブランドの特徴が明確で、動きを感じられる可能性があるリファレンスを優先してください。雰囲気だけの曖昧なサムネイルは避けてください。

キャプチャ

各リファレンスについて：

1. 代表的な静止画を1枚、ローカルに保存します。
2. 可能であれば、実際のランディングページまたはプレビューの短い動画をローカルに保存します。
3. ゆっくりとしたスクロール、明確なホバーまたはクリック状態、固定ナビゲーションの挙動、表示アニメーション、視差効果、マーキーのループ、カルーセル、カーソルエフェクト、レスポンシブ対応やスクロール連動の変化を含めます。
4. キャプチャツールでスクリーンショットやモーションフレームを撮影する前にビューポートまたはセクションまでスクロールする場合は、表示アニメーション、遅延読み込みメディア、固定状態の変化、スクロールでトリガーされる遷移が完了するよう、撮影前に2秒待ちます。
5. ブラウザーでレンダリングできる場合は、ランディングページ全体をスクロールしたスクリーンショットを、縦長の1枚の画像として保存します。ヒーローの最初のピクセルからフッターの最後のピクセルまでを含めます。
6. その全ページ画像から、セクションごとのスクリーンショットを切り出します。切り出し画像は全ページ画像に対して連続しており、欠損がないものにします。セクション間のピクセルを欠落させたり、任意のビューポート画像で代用したりせず、固定要素のために避けられない場合を除き、重複もさせないでください。
7. ページにある意味のあるセクションの数だけ、セクション画像を保存します。最低限、ヒーロー、ページ順に並べた主要な中間セクションすべて、フッターを含めます。内容が明確でない中間セクションには、正確な視覚的順序を保ったまま section-02、section-03 などのラベルを付けます。
8. 動画の保存に成功した場合は、動きの進行を示すフレームを最低4枚抽出します。冒頭のヒーロー、ホバーまたは静止状態、スクロール時の遷移、下部または後半のセクションを含めます。
9. ライブキャプチャがブロックされる、ページが壊れている、ログインが必要、または品質が低い場合は、最適なローカル代替素材を保存し、代替した理由を記録します。

すべてのメディアは、日付付きの記事フォルダー内に保存します。必要に応じて motion-frames/ などのサブフォルダーを使用します。

記事の構成

content.md は、制作者がすぐに活用できるキャプチャ内容にします。

• 冒頭に日付と簡潔なパターンの概要を記載します。
• 作成した場合は、つなぎ合わせたモーションスタディ動画を冒頭近くに埋め込みます。
• 5件のリファレンスそれぞれについて、項目の見出しの近くに静止画を配置します。
• ローカル動画を埋め込むか、代替した理由を記載します。
• 最近のキャプチャで確立された記事構成に合わせます。### Full-Page And Section Evidence を使用し、全ページスクリーンショットを通常の Markdown 画像として配置した後に、#### Section Crops を置き、ヒーローからフッターの順に各セクション画像を通常の Markdown 画像として配置します。
• ブロックの名称を Local Evidence に変更しないでください。また、テキストリンク、ファイル名の一覧、Markdown テーブル、生の HTML グリッド、全ページ画像やセクション画像ブロックの切り出し座標を示すキャプションは使用しないでください。切り出し座標は manifest.json に記録します。
• 長いプロンプトの前に、動きの進行を示すフレームを配置します。
• 効果的な点、視覚的なパターン、具体的な動きについてのメモを記載します。
• ページをテンプレートではなくリファレンスとして扱う、長めの AI ビルダー向けプロンプトを含めます。
• プロンプトが効果的な理由を説明する短い注記を追加します。

プロンプトには、レイアウト、セクション、コンポーネント、タイポグラフィ、余白、色、画像の扱い、アニメーションのタイミング、スクロール演出、レスポンシブ時の挙動、インタラクション状態、避けるべきことについて、具体的な指示を記載します。

マニフェストの構成

JSON を使用します。記事レベルのメタデータとして、以下を含めます。

• title
• date
• captureMethod
• itemCount
• dedupeAgainst
• 存在する場合は motionStudyVideo
• items

各項目には、以下のようなフィールドを含めます。

• title
• creator
• sourceUrl
• pageUrl
• imageUrl
• imageFile
• videoFile または videoFallbackReason
• fullPageImage
• セクションラベル、ファイルパス、元となる全ページ画像、利用可能な場合は y-start、y-end、height を含む sectionImages
• motionFrames
• captureType
• viewport
• why
• pattern
• interactionNotes
• animationNotes
• prompt

検証

コミットする前に重複チェッカーを実行します。

node scripts/check-ui-inspiration-duplicates.mjs articles/YYYY-MM-DD-ui-inspiration-capture/manifest.json

以下を確認します。

• duplicateCount が 0 であること
• manifest.json に項目がちょうど 5 件あること
• content.md に代表的な静止画が 5 枚以上埋め込まれていること
• 参照されている静止画、動画、モーションフレームのファイルがすべてローカルに存在すること
• ライブウェブサイトの各項目に、ページ全体をスクロールして撮影したスクリーンショットが 1 枚あり、ヒーロー、検出されたすべての意味のある中間セクション、フッターのセクション切り抜きがあること
• セクション切り抜きがページ全体の画像から作成され、上から下の順に並び、隣接するセクション間のピクセル範囲が欠けていないこと
• content.md がライブウェブサイトの各項目について、確立されたページ全体画像／セクション切り抜きの構成に従っていること：### Full-Page And Section Evidence、レンダリングされたページ全体の Markdown 画像、#### Section Crops、上から下の順に並んだレンダリング済みセクション切り抜きの Markdown 画像。テキストリンク、ファイル名の一覧、Markdown テーブル、生の HTML グリッド、Local Evidence 見出し、切り抜き座標のキャプションは含めないこと
• 各項目にローカル動画、または明確な代替理由があること
• 動画の撮影に成功した場合、少なくとも 4 枚のモーションフレームが含まれていること
• README.md が存在しないこと

articles/ARTICLES_INDEX.md に未コミットの変更がなく、競合もない場合は、現在のリポジトリの慣例に合致するときに限り、見つけやすさを高める行を 1 行だけ追加します。すでに変更されているか競合している場合は変更せず、締めくくりの報告でその旨に触れます。

articles/ は無視対象になっていることが多いため、対象の日付フォルダーには git add -f を使用します。この作業で作成または意図的に変更したファイルのみをステージしてコミットします。

参考資料

• 上流ソース：MengTo/Skills — daily-ui-inspiration-capture
• agents/openai.yaml — 同梱されたエージェントインターフェースのメタデータ