Daily UI Inspiration Capture 实战指南：从 Capture Brief 到可复用 AI 构建提示的完整技能工作流-平芜编程栈

【免费下载链接】Skills

Agent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents

项目地址：https://gitcode.com/gh_mirrors/skills48/Skills

在 Skills 仓库的 daily-ui-inspiration-capture 技能中，demo/input.md是整条工作流的输入契约：一条只有四行的 Capture Brief，规定了"收集 5 个当前着陆页参考、逐页捕获全页、隔离一个交互、写一条可复用提示、避免与历史 bundle 重复"的核心任务。本文以这份简报为骨架，结合该技能的完整 SKILL.md 工作流、demo 演示包与 openai.yaml 接口声明，展开讲解如何把一次性的灵感收集，沉淀为"日期化目录 + 全页证据 + 动效帧 + AI 构建提示 + 去重校验"的可重复设计研究 bundle。

读完本文，你将掌握：如何解读并执行这一技能的四行简报契约、按 9 条捕获规程产出无损的全页截图与分区裁剪、编写"把页面当参考而非模板"的长提示，以及如何用脚本校验重复与文件完整性后安全交付。

Capture Brief：技能的输入契约与执行基线

关联文档demo/input.md全文如下，它是该技能 demo 中展示给 agent 的"虚构源数据包"（fictional source packet）：

# Capture brief Collect five current landing-page references. For each: capture the full page, isolate one interaction, and write a reusable prompt. Avoid duplicates from prior daily bundles.

这份简报虽然只有四行，却精确界定了整条工作流的四条执行基线：

数量与来源基线：收集5 个当前着陆页参考。这不是随机截图，而是偏向 Framer、Dribbble 等渠道上"可检视、可交互"的真实着陆页与产品区块。
逐参考的证据基线：对每个参考必须做到三件事——捕获全页（full-page capture）、隔离一个交互（isolate one interaction）、写一条可复用提示（a reusable prompt）。对应到技能输出，就是全页滚动截图、分区裁剪、动效帧与 AI-builder 提示的产出组合。
去重基线：避免与历史每日 bundle 重复，要求在执行前读取既往manifest.json做归一化去重。
产出定位：产出物是"文章级 bundle"（article-ready bundle），而不是截图堆或 README。

在 openai.yaml 中，这条简报被翻译成 agent 可触发的一句话默认提示：

interface: display_name: "Daily UI Inspiration Capture" short_description: "Create five-reference UI inspiration article bundles" default_prompt: "Use $daily-ui-inspiration-capture to run today's UI inspiration capture."

技能本身（SKILL.md）的作用就是把这份简报展开为可重复执行的"操作手册（runbook）"：先读项目上下文，再按输出契约、选择、捕获、文章结构、manifest 结构、验证六个阶段推进，最终把一份只有四行的输入变成可交付的设计研究包。

技能包结构：一次调用的完整上下文

运行该技能前，agent 会按 SKILL.md 的约定先做三件准备：

读取AGENTS.md（若存在或被用户提供）；
读取scripts/ui-inspiration-capture-guidelines.md（若存在）；
读取最近的一到两份articles/*-ui-inspiration-capture/content.md与manifest.json，以对齐既有文章形态。

并强调：浏览器操作只允许使用 Codex 内置浏览器，不使用 Chrome；如果源站阻止检视，则退而使用可用的 Codex 浏览器证据或本地资源回退，并说明原因。技能目录结构（README.md 的 Folder contract）说明了该技能包的标准组织方式：

agent-skills/<category>/<skill-name>/ SKILL.md # 必选：frontmatter + 工作流 agents/ # 可选的 agent 接口声明（如 openai.yaml） demo/ # 可选的视觉或交互证明 index.html # 独立 HTML/CSS/JS PROMPT.md # 复刻与 remix 提示 input.md # 虚构输入包（工作流类技能） expected-output.md # 虚构预期输出包

其中 demo/index.html 是一个自包含的演示页，左右两栏并排展示input.md与expected-output.md的握手关系，让读者一眼看到"输入简报 → 预期输出"的映射。

输出契约：日期化 bundle 目录与最小文件集

技能要求创建一个日期化目录作为每次运行的标准落点：

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

该目录至少包含以下文件（对应 Capture Brief 中"捕获全页、隔离交互、写提示"三条基线的落地产物）：

content.md：文章正文；
manifest.json：机器可读的元数据清单；
本地静态图片（still images）；
本地视频文件，或逐项清晰的视频回退原因（video fallback reasons）；
每个线上参考一张全页滚动截图（从 hero 首像素到 footer 末像素的单张长图）；
从该全页截图切出的逐区块裁剪图：hero、每个有意义的中间区块、footer；
视频捕获成功时的动效帧（motion-frame images）。

两条硬性约束值得注意：不创建README.md；最终只收集 5 个参考——技能明确指出，5 参考的动效研究工作流已取代旧的 20 图画廊式运行方式。这与 demo/expected-output.md 中展示的预期交付物一一对应：

# Daily bundle - 5 verified source links - 5 full-page captures - 5 focused section crops - motion notes based on the live source - one implementation prompt per interaction - duplicate and file-integrity checks complete

候选选择：先读历史，再做去重与来源轮换

在挑选最终 5 个参考之前，技能要求先加载既往articles/*-ui-inspiration-capture/manifest.json。任何与历史捕获在归一化后的标题、来源 URL 或图片 URL上重复的候选，直接拒绝。

当信息流变旧时，技能给出 6 组轮换搜索词：

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

候选的偏好标准也很明确：首屏清晰、区块可检视、排版有辨识度、产品或品牌属性具体、有明显的动效潜力，避免模糊的氛围缩略图。来源策略上，Framer Marketplace 是强来源；Dribbble 为尽力而为——若被 WAF 拦截或资产质量差，就用更强的 Framer 或直达页面候选替代，而不是强撑脆弱方案。

捕获规程：9 条操作与 2 秒等待原则

对每个参考，技能定义了 9 条捕获操作（SKILL.md 的 Capture 一节）：

本地保存一张代表性静态图；
尽可能录制一段真实着陆页或预览的短视频；
动效观察清单：慢速滚动、明显的 hover/点击态、sticky 导航行为、reveal 动画、视差、marquee 循环、轮播、光标效果、响应式与滚动驱动变化；
关键等待原则：每当捕获工具滚动到某个视口或区块、准备截图或动效帧之前，先等待 2 秒，让 reveal 动画、懒加载媒体、sticky 状态变化和滚动触发过渡全部完成，避免截到半渲染状态；
浏览器能渲染时，保存一张覆盖 hero 首像素到 footer 末像素的整页滚动截图；
从该全页图中按区块无损连续裁剪：相邻区块之间不丢像素、不用任意的视口级替代图、除非 sticky 元素使然否则不重叠；
页面有多少有意义区块就裁多少张，最低要求是 hero + 每个主要中间区块 + footer；含义模糊的中间区块按section-02、section-03依次命名，同时保持严格视觉顺序；
视频成功时至少提取4 张动效进度帧：开场 hero、hover 或稳定态、滚动过渡、靠后区块；
若线上捕获被拦截、损坏、登录墙或质量低，保存最佳本地回退资产并记录回退原因。

所有媒体统一放进日期目录内，必要时用motion-frames/等子目录归类。

文章形态：证据优先，而非截图清单

content.md要让捕获结果"对构建者立即可用"，SKILL.md 的 Article Shape 一节给出了明确的组织骨架：

以日期与一句精炼的 pattern 总结开篇；
若制作了拼接动效研究视频，尽量放在文首附近；
每个参考的静态图放在该条目标题旁；
内嵌本地视频，否则写明回退原因；
沿用既有捕获文章结构：### Full-Page And Section Evidence（全页截图作为普通 Markdown 图片）→#### Section Crops（每张分区裁剪按 hero 到 footer 顺序作为普通 Markdown 图片）；
不得把该区块改名为Local Evidence，不得使用文本链接、文件名列表、Markdown 表格、裸 HTML 网格或裁剪坐标标注——裁剪坐标只保留在manifest.json；
动效进度帧展示在长提示之前；
描述"哪里做得好、视觉 pattern、具体动效要点"；
写一条把页面当参考而非模板的长 AI-builder 提示；
附一段简短说明解释该提示为何有效。

提示词写作要求覆盖：布局、区块、组件、排版、间距、色彩、图像处理、动画时序、滚动编排、响应式行为、交互状态、以及需要避免的事项。

Manifest 结构：机器可读的元数据契约

技能要求 manifest 使用 JSON，文章级字段包括：

title、date、captureMethod、itemCount、dedupeAgainst、motionStudyVideo（存在时）、items

每个 item 的字段包括：title、creator、sourceUrl、pageUrl、imageUrl、imageFile、videoFile或videoFallbackReason、fullPageImage、sectionImages（含区块标签、文件路径、来源全页图、y-start、y-end、height）、motionFrames、captureType、viewport、why、pattern、interactionNotes、animationNotes、prompt。

按此字段清单组织的一份示意性（非真实数据）manifest 形态如下：

{ "title": "UI Inspiration Capture — 2026-10-08", "date": "2026-10-08", "captureMethod": "codex-browser-full-page-and-motion-study", "itemCount": 5, "dedupeAgainst": ["2026-10-07-ui-inspiration-capture"], "motionStudyVideo": "motion-frames/study-stitch.mp4", "items": [ { "title": "Example landing page", "creator": "Example Studio", "sourceUrl": "https://example.com/landing", "pageUrl": "https://example.com/landing", "imageUrl": "images/01-hero.png", "imageFile": "images/01-hero.png", "videoFile": "videos/01-capture.mp4", "fullPageImage": "fullpage/01-full.png", "sectionImages": [ { "label": "hero", "file": "sections/01-hero.png", "source": "fullpage/01-full.png", "yStart": 0, "yEnd": 900, "height": 900 }, { "label": "section-02", "file": "sections/01-section-02.png", "source": "fullpage/01-full.png", "yStart": 900, "yEnd": 1900, "height": 1000 } ], "motionFrames": ["motion-frames/01-a-hero.png", "motion-frames/01-b-hover.png", "motion-frames/01-c-scroll.png", "motion-frames/01-d-lower.png"], "captureType": "live", "viewport": "1440x900", "why": "clear first viewport and strong typography", "pattern": "sticky nav + reveal sections", "interactionNotes": "hover lifts cards, nav turns solid on scroll", "animationNotes": "hero wordmark staggers in, sections reveal on scroll", "prompt": "Build a landing page with ..." } ] }

验证与交付：去重检查、文件完整性核对与 git 提交流程

技能要求提交前运行去重检查器：

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

随后按 SKILL.md 的 Verification 清单逐项核对：

duplicateCount为0；
manifest 恰好包含 5 个 item；
content.md至少内嵌 5 张代表性静态图；
所有被引用的静态图、视频、动效帧文件均实际存在；
每个线上站点条目都有全页滚动截图，以及 hero、全部中间区块、footer 的分区裁剪；
分区裁剪必须派生自全页图、按上到下排序、相邻区块之间无像素缺失；
content.md对每个线上条目遵循固定结构（### Full-Page And Section Evidence、渲染的全页 Markdown 图、#### Section Crops、按上到下渲染的分区裁剪图），且无文本链接、文件名列表、Markdown 表格、裸 HTML 网格、Local Evidence标题或裁剪坐标标注；
每个条目都有本地视频或清晰回退原因；
视频捕获成功的条目至少包含 4 张动效帧；
目录中不存在README.md。

交付侧还有两条仓库约定：若articles/ARTICLES_INDEX.md是干净的且符合仓库现行惯例，才追加一行可发现性记录；若它已脏或有冲突则不动它并在收尾说明。由于articles/常被 git 忽略，需用git add -f显式加入目标日期目录，且只暂存并提交本次创建或有意修改的文件。

Demo 验证：输入-输出握手与可复现性

技能包的 demo 将上述契约落成一个可复现的演示：以demo/input.md为虚构输入包，以demo/expected-output.md为核验后的输出握手，二者并排展示在 demo/index.html 中，配以"示例输入 / 预期输出"的场景说明，明确标注"可移植的虚构示例，无真实账户或客户数据"。demo 的验收约束包括：390px–1440px 响应式、语义化 HTML、可见焦点态与 reduced-motion 处理、全部 HTML/CSS/JS 内联于单个index.html、仅使用相对本地资源路径、授权边界与验证状态显式可见——这保证了该技能的工作流可以被任何项目以相同契约重复执行，也印证了 README 中"技能是操作程序（operating procedures），明确告诉 agent 何时用、先做什么、默认值是什么、要避开什么"的设计哲学（README.md）。

总结：从四行简报到可复用设计资产

demo/input.md的四行简报是整个 daily-ui-inspiration-capture 技能的浓缩表达，而 SKILL.md 将其展开为一套完整的操作程序：日期化目录、5 参考 + 全页证据 + 分区裁剪 + 动效帧的证据体系、历史 manifest 驱动的去重、固定文章结构与 JSON 元数据契约、脚本化验证与受控 git 交付。对于用 Codex、Claude、Cursor 等 AI 编码代理做前端与设计工作的团队，这套技能把"每天看优秀着陆页"这件事，从一次性的截图动作升级为可存档、可检索、可直接转化为 AI 构建提示的长期设计资产——这正是 Skills 仓库"把好工作流沉淀为 agent 可加载的版本化文件"的核心理念。

若要深入了解：技能完整工作流见 SKILL.md，输入输出演示见 demo/input.md 与 demo/expected-output.md，复刻与 remix 提示见 demo/PROMPT.md，agent 接口声明见 agents/openai.yaml。