6个Skill让AI演示跑起来，先装哪个更省事

Meng To 在 X 上列了 6 个他常用来做演示的 Skill，附了链接、安装方式和一段效果视频。清单不长，指向很具体：目标图、指针响应、界面动效、反向拆解、live HTML。每个都对应演示流程里的一个卡点。

原推文：https://x.com/MengTo/status/2121264403530293624

1. dream-loop：把目标图和批评agent放进循环

链接：https://github.com/achimala/dream-loop

按仓库说明，dream-loop 是一个 agent skill，用闭环做游戏、应用或场景：AI 先用图像生成做一张高质量目标截图，再围绕目标图构建，另一个 AI critic 把实时截图和目标图对比并给反馈，构建方回到第 2 步继续改，直到 critic 满意。也可以选择回到第 1 步，根据当前状态生成更好的目标图。

安装方式：npx skills add achimala/dream-loop。需要 agent 能图像生成、有视觉输入，子 agent 可选但强烈建议。要自定义 3D 建模就装 Blender，Blender MCP 或脚本接口比 computer use 效果更好。仓库说目前只在 Codex 里的 GPT-6 Astra 上测试过，Claude Fable 5.1 这类强模型也可能跑。

评论区里有人把重点放在 critic agent：生成已经容易，知道什么难看才是真技能。也有人调侃这条 pipeline 像需要一个小市政厅。Meng To 回复说 dream-loop 被低估了。这个判断值得留意，演示质量常常卡在反复对比和修改，不在第一次生成。

2. Hairline：让等距线稿响应指针

链接：https://hairline.lucasmarkes.com

Hairline 提供 33 个等距线稿图形，面向网页，SVG、无依赖，React 或 plain DOM 都能用。安装：npm i @lucasmarkes/hairline。它的卖点是线稿会响应指针，适合需要交互反馈的插图，不是静态装饰图。项目 MIT 免费，也有自己画图的 skill。

有网友说 Hairline 很好，适合任何需要响应指针的东西。这个定位很窄，但演示里一旦有鼠标移动、悬停、拖拽，静态图就会露怯。

3. Emil Kowalski 的设计工程 skills

链接：https://emilkowal.ski/skill

页面显示 18 个 skills，按项目阶段排：动手前有 Animation Vocabulary、Pick a UI Library、Prototyping；做界面有 Design Engineering、Animate、Choreograph、Apple Design、Gestures、Mobile Native；收尾有 Animation Performance、Break UI、Review Animations；看整个应用时有 Find Opportunities、Improve Animations、Remove Animations；另外还有 Animate Expo、Ask Sonner、Learn Taste。

安装：npx skills@latest add emilkowalski/skills。页面显示 GitHub 56,647 stars，skills.sh 3.5M installs。课程 waitlist 有 4619 人，页面写 12 月 8 日重新开放。

有网友问 Meng To 为什么不用 Impeccable 或 Taste，Meng To 回复说 references 是获得 taste 最好的方式。这个回复比争论哪个 skill 更强更有用。设计判断很难靠一个提示词解决，参考样本仍然重要。

4. Meng To 自己的 skills

链接：https://github.com/mengto/skills

推文里的描述很简短：给设计师和构建者的 skills。素材没有展开更多细节，链接先留着。它和 Emil 的清单不是同一个层级，一个偏个人工作流，一个偏系统化的界面工程技能。

5. REA：反向拆解应用和网站

链接：https://rea.tools

推文描述是 reverse engineer how any app or site works。也就是反向拆解任意应用或网站的工作方式。素材没有给更多用法，但这类工具适合在动手前拆交互、结构和实现路径。演示前先搞清楚别人怎么做的，比直接让 agent 猜更稳。

6. HTML Demo：把应用直接跑成 live HTML

链接：https://fil.design/skills/html-demo

推文描述是 your app working live in HTML。有网友说 live HTML demo 最有用，能省掉录视频这一步。Meng To 回复说最近视频都在用它。这个反馈很实际：演示从一段录屏变成可打开、可点击的页面，评审和分享都少一道转手。

值得先装的可能是收尾工具

这份清单真正有意思的地方在闭环和收尾。dream-loop 把目标图、构建、批评、修正串成循环；HTML Demo 把演示从录屏变成可运行页面；Emil 的 skills 把设计工程拆成可调用步骤。生成能力在变便宜，判断和收尾没有。

六个 Skill 堆起来不难，难的是知道哪个该删。装之前先确认卡点：缺目标图就试 dream-loop，缺交互插图就看 Hairline，缺界面动效判断就装 Emil 的 skills，缺可点击演示就先用 HTML Demo。