Paperclip AI 教程 Day 5：实战——让你的 AI 公司交付第一个项目

📎 学了四天理论，是时候让你的公司干点正事了。

前四天你学会了建公司、招员工、定目标、控预算。但是你有没有发现一个问题——你的 AI 公司到现在为止，一件产品都没交付过。

今天，我们要给公司下达一个真实的任务：做一个个人落地页（Landing Page）。然后泡杯咖啡，看着你的赛博牛马们从规划到交付，跑完整条流水线。

---

为什么选”做一个落地页”？

不是随便选的。这个项目刚好满足几个条件：

• 流水线完整：规划 → 设计 → 开发 → 交付，四个阶段全覆盖
• 结果肉眼可见：浏览器打开 .html 文件，3 秒见效果
• 多角色协作：CEO 做规划、CTO（或 Engineer）做技术方案、Engineer 写代码
• 坑多且真实：而且每个坑都跟前四天学的知识有关

让我们开始。

---

出发前检查

确保以下条件就绪：

1. Paperclip 服务正在运行（npx paperclipai onboard --yes）
2. 组织架构里至少有一个 CEO 和一个 Engineer（Day 2 已搭好）
3. CEO 的心跳（Heartbeat）是开启的（下面会验证）
4. 预算别太紧——公司 $10、每个 Agent $5 足够跑完这次演练

💡 如果你是从头开始的新玩家，也没关系，Day 2 有完整的建公司流程。

---

第一步：给公司定任务

进入你公司的 Goals 页面，创建一个新的 Company Goal：

我写的目标是：

Create a personal landing page for Jeff (BTW :) My name is Jeff).
Requirements:
1. Single HTML file (no external resources, all CSS inline)
2. Include the following sections: top Hero (name + one-sentence introduction), About Me, Project Showcase (3 cards), Contact Information
3. Modern and minimalist design with dark theme
4. Mobile-responsive
5. Output to: ~/day5landing_page/index.html

🪤 坑 #1：目标写得模糊 = 产出是垃圾

如果你只写”帮我做个落地页”，会发生什么？

CEO 会拆解出一个计划，Engineer 也会交付一个页面——但你打开一看，是一个满屏 Lorem Ipsum 的 Bootstrap 模板，跟网上随便搜的没区别。

为什么？ 回忆 Day 3 的核心概念：目标是 DNA。如果你的目标没写”单 HTML 文件”，Engineer 可能拆出 HTML + CSS + JS 三个文件。如果没写”深色主题”，你会得到一个默认的白底页面。如果没提”适配移动端”，就不会有响应式。

📎 老板心法： 多花 5 分钟把目标写具体。这 5 分钟能帮你省下 50 分钟的来回扯皮。

---

第二步：CEO 拆解战略

目标设好之后，等待 CEO 的下一次心跳（或者手动触发）。CEO 会：

1. 读取公司目标
2. 创建一个 项目（比如”个人落地页开发”）
3. 把项目拆成若干 Issue

CEO 的典型拆解结果：

你的收件箱里会出现什么

CEO 会提交一个 审批请求（Approval Request）。这就是 Day 3 讲的策略审批门控在实际工作中的样子。

认真看一下：

• 拆解合不合理？
• 输出路径写对了没？
• 人指派对了没？

没问题就 点 Approve。机器开始转了。

🪤 坑 #2：CEO 创建了太多 Issue

有时候 CEO 会过于积极。本来 3-4 个 Issue 就够了，它给你拆出了 8-10 个，里面有什么”调研深色主题的色彩心理学""分析竞品落地页设计”之类的花活。

怎么办？ 驳回，然后在目标里补一句：“保持简洁，最多 3-4 个 Issue。这只是一个单页面 HTML，不是产品发布。”

这就是你作为董事长的权利！

---

第三步：看心跳引擎工作

审批通过之后，有意思的事情开始了。

不想等？手动唤醒

如果你不想等 2 分钟的心跳周期，可以手动触发：

• UI 方式：进入 Agent 详情页，点击 Run Heartbeat 按钮
• API 方式：curl -X POST http://localhost:3100/api/agents/{agentId}/heartbeat/invoke

”呼吸”节律

Paperclip 的执行遵循一种像心跳一样的 舒张-收缩 节律：

舒张期（Diastole）：CEO 醒来，发现已审批的 Issue，把它们分配给下属。

收缩期（Systole）：Engineer 醒来，认领 Issue，执行工作，更新状态，结果顺着汇报线一路往上报。

时间线（假设心跳间隔 60 秒）：

T+0 分钟    CEO 心跳触发 → 把 Issue #1 分配给 Engineer
T+1 分钟    Engineer 心跳触发 → 认领 Issue #1，开始干活
T+3 分钟    Engineer 完成 Issue #1，状态 → done
T+4 分钟    CEO 心跳触发 → 发现 #1 完成，分配 Issue #2
T+5 分钟    Engineer 心跳触发 → 认领 Issue #2
...

🪤 坑 #3：“为什么审批完了，什么都不动？”

你点了 Approve，盯着 Dashboard 看了 10 分钟，一动不动。

怎么回事？ 默认心跳间隔是 3600 秒——也就是说 CEO 一小时才醒来一次。教程场景下，我们把节奏加快。

方式 A：在 UI 中修改心跳（推荐）

对 CEO 和 Engineer 分别操作：

1. 点击左侧导航栏 Agents
2. 点击目标 Agent 进入详情页
3. 找到 Agent Settings / Runtime Config 区域
4. 修改心跳相关设置：
   • intervalSec：改为 120（2 分钟一次）
   • cooldownSec：改为 30
   • wakeOnDemand：确保是 true
   • maxConcurrentRuns：保持 1
5. 保存

方式 B：通过 API 修改（如果 UI 找不到入口）

# 替换 {agentId} 为实际值（在 Agent 详情页 URL 中可以看到）
curl -X PATCH http://localhost:3100/api/agents/{agentId} \
  -H "Content-Type: application/json" \
  -d '{
    "runtimeConfig": {
      "heartbeat": {
        "enabled": true,
        "intervalSec": 120,
        "cooldownSec": 30,
        "wakeOnDemand": true,
        "maxConcurrentRuns": 1
      }
    }
  }'

对 CEO 和 Engineer 各执行一次。

💡 心跳参数速查表：

参数	作用	本次教程建议值
intervalSec	多久醒来一次	120（2 分钟）
cooldownSec	两次运行之间最短间隔	30
wakeOnDemand	是否可以手动唤醒	true
maxConcurrentRuns	允许几个并行执行	1（先保持简单）

生产环境中你会设得高得多（CEO：1 小时，Engineer：30 分钟）。但学习阶段，调快频率，别让自己对着空白屏发呆。

🪤 坑 #4：Engineer 写到一半，卡住了

Engineer 开始干 Issue #3（写 HTML 代码）了。进度条在动……然后突然，Issue 状态卡在 in_progress，但没有新的输出了。

查一下 Agent 的 adapter 配置：

{
  "maxTurnsPerRun": 300,
  "timeoutSec": 0
}

对于一个单文件落地页，300 turns 通常够用。但如果你的目标描述特别详细（指定了动画效果、具体文案、精确配色），Agent 可能需要更多轮次。

快速修复：

curl -X PATCH http://localhost:3100/api/agents/{engineerAgentId} \
  -H "Content-Type: application/json" \
  -d '{
    "adapterConfig": {
      "maxTurnsPerRun": 500,
      "timeoutSec": 600,
      "graceSec": 15
    }
  }'

📎 这就是 Day 4 的运行时保护机制在发挥作用。系统帮你拦住了一次可能失控的执行。你确认任务是正常的之后，手动放宽限制，Agent 继续干活。

---

第四步：验收交付物

如果一切顺利（踩完上面的坑之后，确实会顺利的），你最终会看到：

1. 所有 Issue 变成 done 状态
2. index.html 文件已生成
3. CEO 在收件箱里发了最终汇报

打开文件：

# 这里我以自己的目录举例了
open ~/day5landing_page/index.html
# Linux 用户：
# xdg-open ~/day5landing_page/index.html

你大概会看到什么

一个功能完整的落地页：

• 顶部有你的名字和一句话介绍
• 一个”关于我”板块
• 三张项目卡片
• 底部联系方式
• 深色主题（如果你指定了的话）
• 移动端适配（如果你指定了的话）

完美吗？ 大概率不。配色可能不好看，文案可能很 AI 味，手机上间距可能有点崩。

但这不是重点。 重点是：你没写一行代码。你设了个目标，审批了一个计划，然后你的公司交付了一个能用的产品。

---

第五步：像老板一样迭代

页面交付了但需要打磨。不要打开代码编辑器。

创建一个新 Issue（或者在原有的 Issue 里评论，但是记得要指派给 CEO，记得吗？你是董事长，你只需要分配任务给 CEO，或者等下一次心跳让 CEO 自己安排）：

下面是该提示词的中文翻译版本：

---

你负责主导这次落地页的重新设计。

当前版本在结构上是可用的，但整体视觉冲击力太弱，看起来过于极简，以至于显得有些未完成。我希望这个页面在用户打开时能够呈现出一种更加精致、现代且有设计感的体验。

请把这次工作视为一次**设计升级项目**，而不仅仅是简单的样式调整。你的任务是组织必要的设计与工程工作，以实现以下几个目标。

**第一，Hero 区域必须成为页面的视觉焦点。**
目前这一部分显得平淡且缺乏记忆点。当访客打开页面时，首屏应该立即传达出一种明确、专业且高质量的感觉。需要提升 Hero 区域的视觉层级、存在感以及整体冲击力。

**第二，整体的配色系统需要更加和谐且具有设计感。**
当前的颜色虽然可用，但缺乏系统性和设计感。需要建立一套更加干净、现代、平衡的色彩体系，同时保持深色主题。强调色应该是有意设计的，而不是随意出现的。

**第三，在 Hero 区域加入背景视觉元素。**
背景内容应与开发者 / 博客 / 个人网站的主题相契合。背景图需要保持克制，通过透明度或遮罩等方式确保文本始终清晰可读。目标是增加层次感和氛围，而不是造成视觉干扰。

**第四，需要重新思考整个字体系统。**
当前的字体方案虽然可以使用，但过于普通。我希望建立更加清晰的排版层级，并使用更适合现代技术类个人网站的字体组合。

**第五，让页面整体显得更加精致。**
需要优化间距、节奏和组件样式，使页面看起来更有设计感和一致性，而不是显得过于空洞。卡片、链接和交互元素应该更现代，并具有良好的响应反馈。

**重要约束条件：**

* 页面需要保持轻量。
* 不要引入任何框架。
* 继续保持单个 HTML 文件的结构。
* 改进应该来自更好的设计决策，而不是增加不必要的复杂度。

最终的效果应该像一个现代开发者作品集或技术博客的落地页——整体质量应达到可以与优秀产品官网相媲美的水平。

在完成设计升级后，请返回完整的 HTML 文件。

这又会触发一轮新的循环：CEO 分配 → Engineer 认领 → 交付更新后的文件。

更新后的页面

是不是好多了～😎

---

复盘：刚才到底发生了什么？

拉远镜头看一下。在过去 30-60 分钟里，你的 AI 公司：

1. 接到了战略目标（Company Goal）
2. 自主拆解成可执行的任务（CEO → 项目 → Issue）
3. 等你审批后才动手（治理门控）
4. 通过心跳自动调度执行（不需要你手动喊”开始干活”）
5. 交付了一个实际产物（一个能打开的 HTML 文件）
6. 在预算内运作（超支前就发出预警）
7. 基于反馈进行迭代（新 Issue → 新一轮执行）

前四天的每个概念都在这次实战中自然浮现了：

天数	概念	在哪里出现的
Day 1	AI 公司 vs AI 助手	你在管一个团队，不是在聊天窗口里打字
Day 2	组织架构	CEO 通过汇报线把任务委派给 Engineer
Day 3	目标对齐	Engineer 知道这个页面是你的个人品牌页，不是随便一个模板
Day 4	预算控制	80% 预警让你在无限迭代之前刹了车
Day 5	串联前 4 天的小实战	Agent 自己醒来、查任务队列、干活——全程不用你催

---

成本报告：这次一共花了多少钱？

以下是一次真实运行的大致花费：

Agent	做了什么	大约花费
CEO	目标拆解 + 3 次心跳循环	~$6.13
Engineer	HTML 生成 + 1 次迭代	~$1.26
总计		~$7.39

实际花费取决于模型选择、目标复杂度和迭代次数。给 Engineer 换个便宜的模型（比如 Sonnet 代替 Opus）能省 50-70% 的钱。

查看你的实际花费：点击左侧导航栏 Costs，可以看到按 Agent 和按 Project 的花费明细可视化报表。

---

今日任务 ✅

1. 设定 Company Goal：为落地页项目写一个具体的目标（记住，越具体越好！）
2. 调快心跳：把 CEO 和 Engineer 的 intervalSec 改成 120
3. 审批 CEO 的战略规划，然后看着执行自动展开
4. 打开交付的 HTML 文件：在浏览器里欣赏你的 AI 公司的第一个产品
5. 创建一个迭代 Issue：挑一个不满意的地方让公司改进
6. 查看 Costs 面板：这次你的 AI 公司收了你多少钱？

---

急救手册：常见问题速查

症状	原因	解决
审批后什么都不动	intervalSec 设太大	直接点击 Run Heartbeat 手动触发一次
Agent 卡在 in_progress	撞了 maxTurnsPerRun	提高到 500
文件写到了错误位置	目标里没写绝对路径	目标里补上完整输出路径
页面丑 / 内容泛泛	目标太模糊	加上设计细节（配色、主题、板块内容）
迭代两轮就收到预算预警	预算设太低	加 budgetMonthlyCents 或者接受现有结果
两个 Agent 改同一个文件	缺少原子执行保护	确保 maxConcurrentRuns: 1 且 Issue 指派清晰

如果你想知道更多关于 Agent 心跳的秘密的话，请看这里

---

预告：Day 6 — 治理

你的公司刚刚交付了第一个项目。但如果出了问题，谁来负责？怎么追溯是哪个 Agent 做了什么决定？明天我们戴上审计官的帽子。

审批门控、审计日志、以及终极大招：暂停、干预、终止。

老板，明天董事会见。