正在加载陈远的个人网站

开源 Agent Skills：把网页设计变成可执行提示词

Meng To 开源 75 个设计向 Agent Skills，覆盖网页参考采集、交互提炼与灵感生成。

提示词视频提示词技能Agent 工程前端工程AI 应用

原始内容

Meng To@MengTo

I'm open-sourcing my Agent Skills library. 75 skills for Codex, Claude Code, Cursor, and other agents, focused on web design, landing pages, motion, WebGL, UI styles, and assets. A few favorites: - Video to Super Prompt Turns a screen recording of a design, landing page, or animation into a super detailed prompt that Fable 5 can one-shot into HTML. - HTML to Interaction Prompts Takes an existing HTML page, like something built in Aura, and extracts prompts for sections, buttons, animations, WebGL effects, and interactions. - Stitched Full Page Capture Captures the entire landing page, not just the hero, so you can use the full page as a design reference. - Daily UI Inspiration Combines multiple skills into an agent loop that browses the web, captures great landing pages, and turns them into detailed prompt packs. It's free. Fork them and adapt for your own workflow.

在 X 上查看原视频

中文译文

机器翻译，保留原文供核对。

我正在开源我的 Agent Skills 库。 75 个技能，适用于 Codex、Claude Code、Cursor 以及其他 agent，聚焦网页设计、落地页、动效、WebGL、UI 风格和素材。 几个我最喜欢的： - Video to Super Prompt（视频转超级提示词） 把一段设计、落地页或动画的屏幕录制，变成一条超详细的提示词，让 Fable 5 能一次性生成 HTML。 - HTML to Interaction Prompts（HTML 转交互提示词） 拿一个已有的 HTML 页面，比如用 Aura 做出来的东西，提取出针对区块、按钮、动画、WebGL 效果和交互的提示词。 - Stitched Full Page Capture（整页拼接截图） 截取整个落地页，而不只是首屏，这样你就能把整页当作设计参考。 - Daily UI Inspiration（每日 UI 灵感） 把多个技能组合成一个 agent 循环：浏览网页、抓取优秀的落地页，并把它们变成详细的提示词包。 它是免费的。Fork 它们，改造成适合你自己工作流的样子。

深度解析

是什么

这不是一个单点生成器，而是一组面向设计—实现链路的 Agent Skills。推文列出的能力覆盖：把视频中的视觉结构转成 Fable 5 可执行的 HTML 提示词；从已有 HTML 反推出区块、按钮、动画和 WebGL 交互提示；截取完整落地页作为参考；再把网页浏览、截图和提示词整理成每日灵感循环。截图中的 README 对话还展示了 GIF 体积优化，体现出对工作流文档可用性的关注。

核心设计

核心是“观察—结构化—生成—复用”：保留参考的构图、节奏和交互逻辑，再替换主题与素材，避免表面仿制。截图中的文档进一步把审美判断落成工程规格，例如使用 GSAP ScrollTrigger、SVG 路径长度和 marker 状态描述滚动图表。

关键洞察

价值不只在提示词更长，而在于把设计师的逆向分析步骤封装成可重复的 agent loop，降低从灵感到原型的摩擦；全页捕获也比只看 Hero 更适合理解信息架构与连续内容流。

边界与风险

“一键 HTML”不等于生产级响应式、无障碍或性能实现，结果仍依赖参考素材质量、模型理解和目标平台能力。现有材料能证明 README 示例与若干界面模式，但不足以推断仓库内部目录、依赖和完整 API；落地时仍需人工验收版权、可访问性、代码质量与媒体加载成本。

精选追评与案例

  1. Meng To@MengTo · 查看追评

    原作者补充说明这些技能已在日常自动化循环中反复使用，可信度更高。

    I've been using them daily (with automations and loops). So they're battle-tested. https://t.co/BoiGY8zvA9

    中文译文 · 机器翻译

    我每天都在用它们（配合自动化与循环）。所以它们是经过实战检验的。https://t.co/BoiGY8zvA9

  2. Marko Vineli@handsher_NGU · 查看追评

    给出真实工作流并指出缺失环节（渲染结果回检），可直接复用。

    @MengTo Video to Super Prompt is the one. screen recording → prompt → one-shot HTML is exactly the loop I run for motion videos - the missing half is checking the rendered motion against the recording afterwards. huge release, diving in today

    中文译文 · 机器翻译

    Video to Super Prompt 才是关键的那个。录屏 → 提示词 → 一次性生成 HTML，正好是我做动效视频时跑的循环——缺的那一半是生成后再把渲染出的动效和录屏对照检查。好大的发布，今天就开始上手。

  3. Ishaan@__ishaangupta__ · 查看追评

    点出技能的核心价值并追问随模型升级的版本维护问题，属于重要边界。

    @MengTo skills are underrated because they're how you get consistency out of a non-deterministic model. the model improvises, the skill is the guardrail. curious how you version them as models change. you rewrite every Claude/Codex bump, or it's stable enough to carry over?

    中文译文 · 机器翻译

    技能被低估了，因为它们正是让非确定性模型保持一致的途径：模型负责即兴发挥，技能就是护栏。好奇你如何随着模型迭代给它们做版本管理。每次 Claude/Codex 升级你都要重写一遍，还是足够稳定可以直接沿用？

  4. Liz Zhang@helloLizZhang · 查看追评

    提供“技能≈包管理器”“录屏是最密规格”的视角，便于判断生态定位。

    @MengTo Skills are quietly becoming the package manager for agent behavior, and most public ones are backend-flavored, so design getting first-class treatment matters. Video to Super Prompt is a clever pattern: a screen recording is the densest spec format we have.

    中文译文 · 机器翻译

    技能正在悄悄变成 agent 行为的包管理器，而多数公开技能都偏后端，所以设计方向能获得一等公民待遇很重要。Video to Super Prompt 是个聪明的范式：屏幕录制是我们目前拥有密度最高的规格说明格式。

  5. Sebastian Buzdugan@sebuzdugan · 查看追评

    简短纠错性提醒：技能多不等于好，路由需要评测兜底。

    @MengTo 75 skills is useful, but agents break when skill routing has no evals

    中文译文 · 机器翻译

    75 个技能是有用，但当技能路由没有评测时，agent 就会崩。