零基础20分钟用Agent做一个可拖动的演示页面，附完整提示词和迭代过程

以杨辉三角为例，讲清楚「怎么让 AI 把抽象知识做成能动手的东西」

最近一直在想一个问题：为什么很多知识，明明不难，但就是讲不明白？

后来发现，问题往往不在知识本身，在呈现方式。

一张静态图，你只能看；一个能动手的东西，你会去试。这两种状态下的理解深度，完全不一样。

所以我想试试：能不能用 AiPy，把抽象知识快速做成能交互的演示页面？

下面以杨辉三角为例，把整个过程拆开讲——包括提示词怎么写、第一版哪里不对、怎么迭代。

最终成品：深绿黑板质感的可拖动演示页面

最终成品：深绿黑板质感的可拖动演示页面

一、先想清楚：什么样的演示页面才算「好」

动手之前，我先给自己定了三条标准。

第一，能动手。不能只是「看」，得有「操作」。拖一下、点一下、切一下，都算。

第二，有反馈。操作之后要立刻看到变化，否则动手也没意义。

第三，能讲完一件事。演示不是炫技，得让人看完之后真的懂了一个点。

这三条听起来简单，但很多演示页面只做到第一条——能拖能点，但拖完之后什么也没发生，那就只是个玩具。

二、为什么选杨辉三角做案例

选它有三个原因。

一是结构清晰。等腰三角形排布，每个数等于上方两数之和，规则一句话能说完。

二是层次丰富。表面是加法表，往下挖有二项式系数、组合数、斐波那契数列，甚至谢尔宾斯基分形。

三是有「反差」。多数人只在课本上见过静态版，一旦能动手，反应会很强烈。

这三点凑在一起，正好适合用来验证「演示页面到底能做成什么样」。

三角形特写：节点、连线、粉笔质感

三角形特写：节点、连线、粉笔质感

三、提示词怎么写

这是整个流程里最关键的一步。提示词写得好，第一版就能用；写得糊，来回改十轮也白搭。

我这次的提示词是这样的：

做一个知识演示页面，以杨辉三角为例，要求：
1. 单文件 HTML，不引任何外部库，离线可用
2. 深绿色黑板质感底色，数字用粉笔白，高亮用粉笔黄
3. 三角形用 SVG 画，每个数字是独立节点
4. 按住任意数字可以拖动整个三角形，拖动要有边界约束
5. 按钮可以增加/减少层数，3 到 14 层
6. 三个演示：二项式系数、组合数、斐波那契，点了之后对应数字高亮
7. 下方放公式、推导过程、常见错解、知识链接

拆开看，这段提示词做了四件事：

定边界。第 1 条说「单文件、不引外部库」，它就不会给你塞个 ECharts 进来。

定技术路线。第 3 条说「每个数字是独立节点」，它才会用 SVG 而不是 Canvas——这直接决定了后面拖拽和 hover 好不好写。

定交互。第 4、5、6 条把「能动手」的部分说清楚了。

定信息密度。第 7 条保证页面不只是个玩具，下面还有内容支撑。

很多人写提示词只写「做一个杨辉三角网页」，那出来的多半是个静态表格。差别就在这几条约束上。

页面下方的公式区：递推关系、通项公式、常用性质

页面下方的公式区：递推关系、通项公式、常用性质

四、第一版的问题

十分钟后，第一版出来了。

功能基本齐了，配色也对，但拖起来有点飘——鼠标移动 100 像素，三角形移动了大约 190 像素。

这个现象很有意思。它不是「不能用」，而是「用着别扭」。

我判断是坐标系问题：SVG 有 viewBox，元素实际渲染尺寸和 viewBox 尺寸不一致，鼠标坐标没换算就直接用了。

于是我这样跟 Agent 说：

拖动的时候三角形跟手有延迟，实测拖动距离大约是鼠标移动距离的 1.9 倍。
检查鼠标坐标和 SVG viewBox 的换算逻辑。

它把 getPoint 那段重写了，问题解决。

这里有个技巧：描述现象时带上具体数值。你说「拖起来飘」，它可能改半天；你说「是 1.9 倍」，它立刻知道是比例问题。

五、后面三个坑

拖拽修好之后，我又试出了三个问题，都是「上手试」才发现的。

坑一：手机上拖不动。浏览器把触摸拖动当成页面滚动。我跟它说「移动端触摸拖动会触发页面滚动」，它加了 touch-action: none。

坑二：鼠标移出窗口状态卡死。事件绑在容器上，鼠标移出去就收不到了。我说「鼠标移出容器后拖拽状态没结束」，它把事件改绑到 window 上。

坑三：能拖到看不见的地方。我说「拖动需要边界约束，不能拖出视野」，它加了范围限制。

三个坑，三轮对话，每轮一两句话。

注意这个顺序：先试出来，再让它改。你不试，就不知道哪里不对；不知道哪里不对，提示词也写不准。

斐波那契演示：斜线实时求和

斐波那契演示：斜线实时求和

六、Agent 做不了的部分

骨架搭好之后，剩下的是我自己调的。

配色调了七八版。一开始用的是纯黑，太像终端；换成深蓝，太像后台管理系统；最后定在深绿，因为它有「教室」的暗示。

节点间距也调了很久。太密显得挤，太疏又散。最后按层数自适应，8 层时节点半径 18px，14 层时缩到 10px。

这些东西没法写进提示词，因为「好看」说不清楚。

所以我的结论是：Agent 负责把想法变成能跑的东西，人负责判断它好不好。

前者是体力活，后者是判断力。判断力这部分，目前还得自己来。

六步推导：Agent 生成的内容骨架，人工核对过

六步推导：Agent 生成的内容骨架，人工核对过

七、这套方法能复用到哪

杨辉三角只是个例子。同样的流程，可以套到很多场景：

• 讲排序算法：做成能拖动元素、实时看交换过程的演示
• 讲傅里叶变换：做成能拖波形、实时看频谱的演示
• 讲概率分布：做成能调参数、实时看曲线变化的演示
• 讲数据结构：做成能插入删除、实时看树结构变化的演示

共同点是：有明确规则、有可视结构、有值得动手的点。

反过来，纯概念、纯流程、没有可视结构的内容，就不太适合做成交互演示——硬做出来也只是个花架子。

八、小结

回到最开始那个问题：为什么很多知识讲不明白？

我的答案是：因为它们是「静态呈现」的。

而 Agent 这类工具，最大的价值不是「替你写代码」，是把「想法」到「能看见」之间的距离缩短了。

以前想做一个演示页面，光实现就得一天，多数人想想就算了。现在半小时能出个能跑的版本，试错成本降下来，做东西的意愿就不一样了。

这可能是比「效率提升」更重要的变化。