daily-ui-inspiration-capture

name	daily-ui-inspiration-capture
description	创建一份周期性的每日 UI 灵感采集。当用户要求运行、刷新、打包或校验带日期的 UI 灵感集时使用，尤其针对 `articles/YYYY-MM-DD-ui-inspiration-capture/` 产物、Framer/Dribbble 落地页灵感、动效研究截图/视频、AI-builder 提示词、重复检查，或把项目操作手册转成可重复的工作流程。

每日 UI 灵感采集

概览

把当前项目的每日 UI 灵感工作流程当作一个可直接成文的成品集来跑，而不是一堆截图或一个 README。把当前生效的项目操作手册当作事实来源，但除非用户更新，否则以下契约为默认。

开始

从用户指定的内容/文章项目开始工作。如果没有指定项目，使用当前 workspace 并说明你用了哪个目录。

采集前，阅读：

• AGENTS.md（如存在或在提示中提供）
• scripts/ui-inspiration-capture-guidelines.md（如存在）
• 最新的一两个 articles/*-ui-inspiration-capture/content.md 和 manifest.json 文件，以了解当前形态

尽早检查 git status --short。这个仓库经常是脏的；把改动限定在请求的带日期集或 skill 文件上。

任何浏览器工作只用 Codex 内置浏览器。不要用 Chrome。如果某个来源阻止检查，使用可得的最佳 Codex 浏览器证据或本地资产回退，并说明原因。

输出契约

创建一个带日期的文件夹：

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

该文件夹至少应包含：

• content.md
• manifest.json
• 本地静态图片
• 本地视频文件，或清晰的逐项视频回退原因
• 每个 live 网站参考的一张整页滚动截图
• 从该整页截图切出的逐板块裁剪，覆盖 hero、每个有意义的中间板块，以及页脚
• 视频采集成功时的动效帧图片

不要创建 README.md。

恰好采集 5 个最终参考。较新的 5 参考动效研究工作流程取代了旧的 20 图画廊做法。

优先选择可 live、可检查的落地页和产品板块。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. 在本地保存一张有代表性的静态图片。
2. 尽可能采集实际落地页或预览的一段短本地视频。
3. 包含缓慢滚动、明显的 hover 或 click 状态、sticky 导航行为、reveal 动画、parallax、marquee 循环、carousel、光标效果，以及响应式或滚动驱动的变化。
4. 每当采集工具在截图或动效帧之前滚动到某个视口或板块时，采集前等待 2 秒，好让 reveal 动画、懒加载媒体、sticky 状态变化和滚动触发的过渡有时间完成。
5. 当浏览器能渲染时，保存一张整页滚动截图作为一张长图。它应从 hero 的第一个像素一直到页脚的最后一个像素。
6. 从那张整页图切出逐板块截图。这些裁剪相对整页图必须是连续且无损的：板块之间不缺像素，不用任意的仅视口替代，除非 sticky 元素使重叠不可避免，否则不重叠。
7. 页面有多少个有意义的板块，就保存多少张板块图。至少包含 hero、按页面顺序排列的每个主要中间板块，以及页脚。把不清晰的中间板块标注为 section-02、section-03 等，同时保留确切的视觉顺序。
8. 视频成功时，至少提取 4 个动效演进帧：hero 开场、hover 或稳定状态、滚动过渡，以及更靠下或更靠后的板块。
9. 如果 live 采集被阻挡、损坏、需登录或质量低，保存可得的最佳本地回退资产，并记录回退原因。

把所有媒体放在带日期的文章文件夹内。有帮助时使用子文件夹，如 motion-frames/。

文章形态

在 content.md 中，让这份采集对 builder 立刻有用：

• 以日期和一段简洁的模式总结开场
• 如果创建了拼接的动效研究视频，把它嵌在靠顶部处
• 对 5 个参考中的每一个，在条目标题附近包含静态图片
• 嵌入本地视频，或说明回退原因
• 匹配最近采集所确立的文章结构：### Full-Page And Section Evidence、整页截图作为普通 Markdown 图片、#### Section Crops，然后每个板块裁剪作为普通 Markdown 图片，从 hero 到页脚排序
• 不要把该区块改名为 Local Evidence，不要为整页/板块裁剪区块使用文字链接、文件名列表、Markdown 表格、原始 HTML 网格或裁剪坐标说明；把裁剪坐标放在 manifest.json 里
• 在长提示词之前展示动效演进帧
• 描述什么起作用、视觉模式，以及具体的动效备注
• 包含一条长的 AI-builder 提示词，把该页面当作参考而非模板
• 加一小段说明，解释这条提示词为何有效

写提示词时，给出关于布局、板块、组件、排版、间距、配色、图片处理、动画时序、滚动编排、响应式行为、交互状态以及需避免事项的具体指令。

Manifest 形态

用 JSON。包含文章级元数据，如：

• title
• date
• captureMethod
• itemCount
• dedupeAgainst
• motionStudyVideo（如有）
• items

对每个条目，包含如下字段：

• title
• creator
• sourceUrl
• pageUrl
• imageUrl
• imageFile
• videoFile 或 videoFallbackReason
• fullPageImage
• sectionImages，含板块标签、文件路径、来源整页图、y-start、y-end，以及可得时的 height
• 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 张有代表性的静态图片
• 每个被引用的静态图、视频和动效帧文件都在本地存在
• 每个 live 网站条目都有一张整页滚动截图，以及覆盖 hero、所有检测到的/有意义的中间板块和页脚的板块裁剪
• 板块裁剪派生自整页图、自上而下排序，且相邻板块之间不漏像素范围
• content.md 对每个 live 网站条目遵循确立的整页/板块裁剪结构：### Full-Page And Section Evidence、渲染的整页 Markdown 图片、#### Section Crops，以及自上而下顺序渲染的板块裁剪 Markdown 图片，不含文字链接、文件名列表、Markdown 表格、原始 HTML 网格、Local Evidence 标题或裁剪坐标说明
• 每个条目都有本地视频或清晰的回退原因
• 成功的视频采集包含至少 4 个动效帧
• README.md 不存在

如果 articles/ARTICLES_INDEX.md 是干净的，仅当符合当前仓库约定时才加一行以便被发现。如果它已是脏的或有冲突，别动它，并在收尾时说明。

因为 articles/ 经常被忽略，对目标带日期文件夹用 git add -f。只暂存并提交本次运行创建或有意更改的文件。