【免费下载链接】SkillsAgent 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做归一化去重。产出定位产出物是文章级 bundlearticle-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 todays 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 herosaas landing pageproduct websiteweb design herorecent web designrecent 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为0manifest 恰好包含 5 个 itemcontent.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.mdagent 接口声明见 agents/openai.yaml。赞分享【免费下载链接】SkillsAgent 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 技能实战每日 UI 灵感采集工作流与可复现演示构建契约Skills 仓库 daily ui inspiration capture 技能实战每日 UI 灵感采集工作流与可复现演示构建契约 本文围绕 Skills基于 Codex 的 Daily UI Inspiration Capture 实战五引用每日 UI 灵感采集工作流基于 Codex 的 Daily UI Inspiration Capture 实战五引用每日 UI 灵感采集工作流 本文以 agent skills/codSkills灵感流水线Daily UI Inspiration Capture每日UI灵感自动捕获工作流详解Skills灵感流水线Daily UI Inspiration Capture每日UI灵感自动捕获工作流详解 在 Skills 项目中 Daily UI I上一篇DDSP-VST探索下一代实时神经网络合成器的终极指南下一篇OpenToonz 上手指南从克隆到第一帧动画创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考