daily-ui-inspiration-capture

デイリー UI インスピレーションの収集

概要

現在のプロジェクトの日次 UI インスピレーションのワークフローを、スクリーンショットの寄せ集めや README ではなく、記事としてすぐに使える一式として実行します。現在のプロジェクトの手順書を正としますが、ユーザーが更新しない限り、以下の要件をデフォルトとして適用してください。

開始

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

収集の前に、以下を確認してください。

• 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 枚以上埋め込まれている
• 参照されている静止画、動画、モーションフレームのファイルがすべてローカルに存在する
• ライブウェブサイトの各項目に、ページ全体をスクロールして撮影したスクリーンショットと、ヒーロー、検出された、または意味のある中間セクションすべて、フッターのセクション切り抜きがある
• セクション切り抜きがページ全体の画像から作成され、上から下の順に並び、隣接するセクションの間にピクセル範囲の抜けがない
• 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 を使用します。この実行で作成または意図的に変更したファイルだけをステージングしてコミットします。