Calicat CLI 实测：用 WorkBuddy + Hy3 跑通设计到前端实现

跟 AI 改设计改到疲惫，应该不少人都经历过。

你说“按钮往左挪一点”，它改动了整个布局；你说“配色再柔和一点”，它给出了一套完全不同的风格。来回几轮之后，最初的想法反而越来越模糊。

AI 能写代码，但要把脑海中的设计准确传达给它，仍然需要大量沟通。页面布局、组件样式、间距和交互，仅靠文字描述很容易产生偏差。

这次，我尝试先在 Calicat 中和 AI 一起确定设计，再通过 Calicat CLI + Skill 把设计数据交给 WorkBuddy + Hy3，完成前端实现。本文记录从单页 HTML 到多页面运动场地预约 App 的实际过程。

先看结果：一个可交互的运动场地预约 App

这次的案例是一个运动场地预约 App，围绕预约流程串联多个页面：

• 在首页浏览附近的运动场地。
• 进入场地详情，查看开放时段并选择预约时间。
• 提交后进入订单确认页。
• 预约成功后，在个人页查看通知记录。

从这次输出与设计稿的并排对比来看，页面布局、组件样式和主要交互流程都得到了较好的还原。这个结果来自 AI 读取设计数据后的实现，而不是反复用文字描述每一个视觉细节。

这里展示的是本次生成的前端页面与交互效果，实际业务上线还需要完成相应的服务接入和验收。

先把设计看清楚，再交给 AI 开发

直接和 AI 对话，让它根据一句话做出产品，是一种很方便的起步方式。但当我对页面有明确预期时，纯文字沟通的成本就显现出来了：AI 需要从描述中推测布局，我又需要根据输出继续纠正。

我现在的做法是，先在 Calicat 里和 AI 把设计做出来。页面长什么样、内容如何组织、点击之后去哪里，都在画布上确认。哪里不合适，就直接调整对应的设计。

设计确定之后，再把数据交给开发 Agent。这样，开发阶段有了可以对照的目标，也更容易发现实现与设计之间的差异。

整个流程可以概括为：在 Calicat 中确定设计 → 通过 CLI 读取设计数据 → 在 WorkBuddy 中实现前端 → 对照设计检查结果。

CLI 和 Skill，各自负责什么

要让 AI 按照 Calicat 中的设计开发，首先需要让它读到设计数据。

Calicat CLI 是数据通路。 它是安装在本地电脑上的命令行工具，Agent 可以通过它获取 Calicat 中的页面、图层、需求和交互数据，减少人工复制和搬运信息的工作。

Calicat Skill 是操作指引。 它告诉 Agent 如何识别设计链接、定位目标页面，以及按需读取数据。面对较大的设计文件，Agent 可以按照指引逐步获取结构和细节，控制每次处理的数据范围。

两者配合，既让 AI 能拿到数据，也让它知道如何组织读取过程。使用时，你仍然可以用自然语言提出任务，不必手动调用每个底层接口。

用一条 Prompt 开始安装和测试

这次演示使用 WorkBuddy 和 Hy3 模型。打开支持执行本地终端命令的 Agent 工具，把下面的提示词发给它，并将占位内容替换为自己的 Calicat 文件链接：

请使用 `npx skills add calicatcn/calicat-agent-skills --skill calicat-cli-operator --yes --global` 帮我自动安装 Skill，
并根据其指引下载安装配置 Calicat CLI。
基于这个文件进行测试：`{替换为你的 Calicat 文件链接}`

在本次流程中，Agent 根据 Skill 指引完成了 CLI 安装与配置，再发起登录授权。浏览器打开登录页后，需要由你登录 Calicat 账号并完成授权。随后，Agent 使用提供的文件链接读取数据，检查连接是否跑通。

安装完成后再开始页面实现，可以先确认 Agent 能够读取目标文件，避免把连接问题和设计还原问题混在一起。手动安装、更新及命令说明可参考 Calicat CLI 及 Skill 安装使用指南。

从一个页面开始：把设计还原成 HTML

连接测试通过后，我先选择了一个页面，复制它在 Calicat 中的链接，交给 AI：

请使用 Calicat CLI 读取这个页面的设计数据，帮我还原成 HTML。
页面链接：{替换为你的 Calicat 页面链接}

这一步把目标限定为一个页面，便于检查 Agent 是否找对了设计，以及输出的布局是否符合预期。

将生成的 HTML 与 Calicat 设计稿并排对比，可以看到主要样式、间距和颜色较为接近。明确的页面链接和设计数据，减少了额外解释视觉细节的需要。

从单页到多页面：先处理数据，再串联流程

单页确认之后，我继续让 AI 实现整个运动场地预约 App。画布上的多个页面已经在 Calicat 中设计完成，这次将整个画布链接交给 Agent：

请使用 Calicat CLI 读取这个画布的设计，
将所有页面做成一个可以运行的前端 App，并按照已有设计串联页面交互。
画布链接：{替换为你的 Calicat 画布链接}

多页面任务的难点之一是数据量。图层和样式细节增多后，一次返回的设计数据可能超过 Agent 客户端适合直接展示或处理的范围。如果工具输出被截断，AI 就可能在缺少部分信息的情况下继续开发。

本次采用的处理方式是：先将读取结果保存到本地文件，再根据文件大小决定如何加载和解析，逐页处理设计。 这样，原始数据可以留在本地，Agent 也可以按当前任务提取所需内容，而不必一次把整个画布的详细数据放进对话上下文。

CLI 与 Skill 为这类处理提供了工具和指引；实际使用时仍需要关注读取结果是否完整、目标页面是否正确。它们帮助管理大数据量任务，但不会自动保证每次实现都准确。

逐页完成后，再将页面连接起来，检查浏览场地、选择时段、订单确认和通知查看等主要路径，最终得到开头展示的前端 App。

让 AI 有明确的设计依据

这次实践最有价值的变化，是设计与开发之间的信息传递更直接了。

在 Calicat 中，我可以看到页面、调整方案、确认交互；进入开发阶段后，Agent 可以通过 CLI 读取这些已经确定的数据，按同一份设计进行实现。我也能用设计稿检查结果，指出具体差异。

本次案例的视觉还原效果较好，但不同页面的复杂度、数据完整性和 Agent 的处理方式都会影响结果。比起一个固定的还原度数字，更实用的判断是：页面是否符合设计，主要交互是否跑通，剩余差异能否清楚定位。

图中积分信息来自本次演示，当前额度和使用规则请查看 计费说明。

如果你也经常在“描述设计”和“纠正 AI 输出”之间来回，可以先尝试一个页面：在 Calicat  中把设计确定下来，再让 Agent 通过 CLI 读取并实现。先完成一次小范围的对照，再把同样的流程扩展到多页面产品。