最终，写网页会像写PPT那样简单

1984年9月2日，图灵奖得主、面向对象编程奠基人阿伦.凯发表了一篇论文叫 《Opening the hood of a word processor》，中文翻译为：

打开文字处理器的引擎盖。

彼时PC机刚刚开始被个人使用，微软刚刚发布了DOS系统上的文字处理器word1.0，不过当时它只能被大公司的专业工程师所用。而Alan认为个人电脑暗示着人人都需要一个word processor，所以世界需要一个人人都能使用的灵活的Word procesor 。

三年后，

• Word 3.0被安装在苹果的操作系统上可以被个人使用；
• Excel 在微软自家的Windows操作系统上发布；
• PowerPoint被微软收购

今天，这些软件对普通人早已触手可及。然而，在他们诞生的早期，必须由专业的排版工程师、表格工程师、图形绘制工程师操作。就像今天，写一个网页仍然需要专业的工程师。

不过， 当AI掌 握写代码的技能后，网页会成为未来日常使用的通用工具。我相信用不了多久，使用网页表达，就会像今天我们使用PPT那样简单，把阿伦.凯40年前的预言再上一个高度。

ps：阿伦.凯至今85岁高龄仍然活跃在Quora（海外版知乎）平台上，老头很健康，大家有空可以去cue一下。

同样是让AI写网页，会有什么不同？

当然，用AI 写网页不是什么新鲜事：

• 最开始，是cursor这类工具用AI写网页，主要是开发场景中。

• 后来，manus这类通用工具把写网页用在日常办公场景。

• 再后来，大家纷纷跟进，包括字节跳动的扣子（coze）团队，这次跟进让Coze生态长出新的枝杈：扣子空间（coze.cn），这与Coze之前构建工作流的“人设”完全不同。

今天，如果你打开扣子空间的官网，会赫然看到：扣子空间，你的AI 办公助手。

对话框上方，几个快捷键中有两个是人类历史上经典的个人工具类软件：

• 写作对应的是笔记、文档类工具；
• PPT对应的是汇报类工具；
• 最后一个就是还未被大多数人掌握的 ——网页

ps：插播弦外音：这里没有表格，我猜因为字节有飞书表格；又多一个播客，我猜是希望大家能在午休时间听听播客（抑或是领导讲话）？

这样看起来，和其他的网页工具相比，扣子可能会发展成一个AI的全家桶工具。

扣子 = 扣子智能体搭建 + 扣子空间

= 智能体搭建 + AI 写作 + AI PPT + AI播客 + AI网页

不过，虽然功能齐全，到底效果如何还要真实感受、对比一下。今天主要试试扣子空间的网页生成功能，看看它能不能打开网页的引擎盖，成为人人都可以使用的工具。

整个过程有两个小惊喜：

• 一是：某些场景生成的网页比Cursor略胜一筹文档类工具；

• 二是：支持用户指定网页元素局部修改，很好地满足了个性化诉求。

以下三个案例，所有链接全部透明分享，感兴趣的朋友可以用起来。

案例一： 复刻某博主的网页

个人博客站点是最好的传播自己的方式，不过大多数拥有独立博客站点的人都是开发工程师，因为这是独属于开发者的手艺。 那么普通人能不能拥有自己的独立博客站点呢？我自己的操作步骤是这样的：

1. 找到你喜欢的博主的个人博客站点。

2. 让扣子空间分析该博客站点结构，并以开发工程师的角度给出复刻该站点的规划。

3. 依据这个规划，让扣子空间生成新的博客站点。

我比较喜欢的Twitter 博主 Ammaar（Google deepmind设计师）的站点：https://ammaar.me/，也推荐给大家。

然后我使用以下三种方法进行对比：

• 方法一：分析站点、生成网页全部使用扣子空间。

• 方法二：分析站点、生成网页全部使用Cursor。

• 方法三：分析站点使用Claude，生成网页全部使用扣子空间。

三种方法的对比如下图（左右滑动查看）

☜左右滑动查看对比

我个人感觉扣子空间与Cursor给出的结果均可采纳，而且扣子空间给出的结果略胜一筹，因为个人经历这一部分它以时间轴的方式呈现，更合理、生动。

而这个过程也特别简单：

1. 打开网页https://www.coze.cn/space-preview

2. 点击打开网页版或者你可以下载PC端

3. 在对话框中输入：

https://ammaar.me， 请帮我拆解这个个人博客网站，如果你是一个前端开发人员，你会如何开发这个博客，写下你的详细思路，包括使用什么技术栈，框架。

4. 等待几分钟后，你会看到页面返回一个网页构建思路，相当于是需求文档，你还发现，它会为你贴心的这个markdown文件下显示了三个按钮。

5. 点击【网页】标签之后，Ta就开始生成网页，3分钟之后就有生成网页了。

6. 之后如果你想要做调整的话，直接输入你需要的改动。而且你会发现：针对改动它没有直接改网页，而是走了个流程，就是先改规划思路（需求变更），然后再顺着个思路改网页(开发阶段）。 这个小细节大家在构建自己的产品时也可以借鉴，这样可以保证多轮、长文对话任务中的记忆丢失（聪明如我，和大厂学起来~）

这样，一个博客的网页设计就完成了，你也可以试试。

参考链接：https://space.coze.cn/task/7529709482223894799

接下来看一个生活场景。

案例二：做一个自驾游+观鸟的行程规划

前一阵暑期想北上去草原自驾，而女儿最近又迷上了观鸟，希望提前知道自驾途中哪些地方可以看到什么鸟。这是个性化工具诉求，因为一般的旅行规划网站中不会有观鸟推荐的功能，而观鸟的专业网站中又不会有规划旅行路线的功能，这样的诉求相信你也在日常生活中经常遇到。我给扣子空间输入的是：

制定一个旅游路线规划， 明天从北京出发，一路往北自驾600公里，

去程走密云朱家湾，喇叭沟门，丰宁坝上草原，塞罕坝森林公园，返程走承德，北京，每一站休息一晚上。 我们对鸟类特别有兴趣，因此需要特别注明这几个地方有什么鸟。

路线图上应该标注：

• 各个地点之间的距离。

• 当地有哪些鸟类可以观察。

• 当地的气温，天气状况。

网页上需要注明：

• 旅行规划（时间，地点，酒店，花销）

• 参与人

• 必带物品

Coze设计出一个网页后，看上去还不错，但有一个问题就是观鸟推荐中的图片是随意生成的显得很不协调，能不能局部修改呢。

还真是有这样一个功能，如下图，你你可以选中网页的某个元素，进行局部修改。

这样，整个网页就完美了，我想你就可以把这种图打印出来，作为随身携带的笔记本了，当然，还可以把它当做暑期的游学作业，完美~

参考链接：https://space.coze.cn/task/7529747595254645018

案例三：直播分享海报制作

工作中，我还时不时会做的事情就是分享。 原来我的分享是纯文字，现在有了扣子空间的生成网页，3分钟出来一个海报，大家直接看对比（左右滑动对比），是不感觉海报比文字要高大上多了。

☟左右滑动查看对比

参考链接：https://space.coze.cn/task/7529899818983096622

最后提几个小建议

仍然还有几个小建议提给扣子空间：

• 建议一：局部修改这个节目一定要保留且优化。因为99.99%的情况下，大家都需要做局部修改。但是现在交互起来空间比较局促，而且偶尔会卡住。如果能放成全屏更佳，而且支持在页面框选多个要素，那就更好了！
• 建议二：如果给出一些网页的框架、模板，不要让用户从零冷启动，对大多数用户会友好很多。
• 建议三：支持更多的组件，比如行程规划中支持地图等。

好了，今天以一个普通用户的身份尝试到这里，希望有机会你也和我一样试试。刚巧，扣子空间有这样一场活动可以线上参加，让我们像40年前的阿兰.凯一样，一起来

打开网页生成的引擎盖

我是关注和开发AI产品的产品二姐，致力于带来丰富的 AI 学习分享、体会，欢迎你和我一起学习，如果你觉得文章有用，欢迎关注、点赞、转发。

往期精选

• 产品经理研读：Agent的九种设计模式(图解+代码)
• Agent开发者坦白：窘境中前行
• RAG组合拳：AGI应用走向落地的40%（上篇）
• RAG组合拳：AGI应用走向落地的40%（下篇）--附100M文档资料
• 我在调研了十几个知识库对话产品后整理出来的功能清单
• 用一张图理解所有的AI“聊天”产品（上篇）
• 用一张图理解所有的AI Native产品（下篇）
• 一文讲清大模型AI应用架构
• 做大模型AI应用一定要了解的成本计算公式
• 当老板问起落地AI解决方案要多少钱，你该如何回答
• AI应用省钱攻略--降低模型成本的七大策略

参考文章：

https://worrydream.com/refs/Kay\_1984\_-\_Opening\_the\_Hood\_of\_a\_Word\_Processor.pdf