企业官网建设流程全解析

AI Store(https://aistore.best)当前最火的AI产品是【口袋专家AI】(https://agentsdance.ai)——AI版微信，让AI微信中的智能体专家帮你做PPT、做短剧、做图片，完成工作和生活中的所有事。

一、引言

编码智能体大致分两派：一派是 OpenHands、Devin 这种“你交代完就去喝咖啡”的全自动派；另一派是Cline这种“住在编辑器里、每一步都让你看得见”的结对派。后者的好处是可控：它要执行命令前会停下来问你，改文件时直接在编辑器里给你看 diff，还能先在Plan（规划）模式里只读不改、把方案讲清楚，你点头了再切到Act（执行）模式动手。

Cline 是 VS Code 上最受欢迎的开源 AI 编程扩展之一，GitHub 上 7 万 Star。在 AI Store 上，它装在一个网页版 VS Code 里，模型已经配好（默认 Claude Sonnet 5，走 AI Store 网关），打开浏览器就是一个能写代码、能开终端、能跑服务的完整开发环境。

这一篇我们用 Cline 从零做一个番茄钟网页：先让它一口气做出来，再用 Plan → Act 的方式加一个设置面板，最后发现一个它自己埋下的 bug，让它定位并修好。

二、Cline 项目介绍

2.1 它是什么

Cline 是一个开源的编码智能体，官方定位是“住在你的 IDE、终端和桌面里的开源编码智能体”。它最早是 VS Code 扩展（扩展 ID 至今还叫claude-dev），现在同一个引擎还做成了 CLI、桌面应用、JetBrains 插件和 SDK。

2.2 项目特色

• 人在回路：创建文件、执行命令、浏览网页、调用工具，都可以设成“先问我”；自动批准的范围（读文件、改文件、Web Fetch、MCP……）在输入框上方一眼可见，随时调整。
• Plan / Act 两种模式：Plan 模式下只读不写，连mkdir这种会改文件的命令都会被拦下，专心把方案讲清楚；Act 模式才真正动手。
• 模型随便换：Anthropic、OpenAI、Google、OpenRouter、AWS Bedrock、Ollama / LM Studio 本地模型，以及任何 OpenAI 兼容接口。
• 可扩展：支持 MCP 服务器和插件；CLI 版还能多智能体组队（--team-name）、按 cron 定时跑任务、接入 Slack / Telegram / Discord，以及在 CI/CD 里无界面运行。

2.3 基本信息

三、在 AI Store 上开箱即用

在 aistore.best 首页点 “Cline” 这一格，几秒后浏览器里就是一个完整的 VS Code：左边是 Cline 面板，右边是编辑器，下面可以打开终端。工作区目录是/workspace，落在你自己的持久盘上。

面板里几个关键位置：

• 输入框上方的 Auto-approve：当前自动批准的是 Read、Edit、Web Fetch、MCP——读文件、改文件不用每次确认，执行终端命令则每次都会停下来问你。点开可以调整。
• 输入框下方：当前模型openai-compat:claude-sonnet-5（走 AI Store 网关，不用填 Key），以及右下角的Plan / Act切换。
• 顶部的进度条：这一轮对话用掉的上下文（如 28.1k / 128.0k）。

四、实战：和 Cline 结对做一个番茄钟

4.1 第一轮：一句话做出来

先切到Plan模式，交代任务：

在工作区新建 pomodoro/ 目录，做一个番茄钟网页 index.html（纯 HTML/CSS/JS，不用任何外部库）： 25 分钟专注 / 5 分钟休息自动切换，开始、暂停、重置三个按钮，圆环进度条，到点用 Web Audio 响一声， 记录今天完成了几个番茄并存到 localStorage，界面用中文、适配手机。 做完后在 pomodoro 目录下用 python3 -m http.server 8000 把它跑起来。

有意思的一幕出现了：它想先mkdir建目录，被 Plan 模式直接拦下——Plan 模式下任何会改文件的命令都执行不了，只能用只读命令看项目、把方案讲清楚。接着它想跑一个只读的ls -la /workspace，也停在那里等我点Run Command：

确认它理解了需求，我切到Act模式回一句“计划没问题，开始做吧”。这次mkdir顺利执行，下方的终端里能看到同样的命令和输出：

写index.html属于 Edit，已经在自动批准范围里，所以它直接写好并在右侧编辑器里打开。写完它还想自检：先查环境里有没有 Node.js（没有），于是改用 Python 提取<script>里的代码，检查括号是否配对。每条要执行的命令都会先列出来，等我点 Run Command 或 Reject：

最后它在后台起了python3 -m http.server 8000，用curl验证返回 200，然后给出一份“完成内容”总结：用常量定义 25/5 分钟、setMode()自动切换阶段、stroke-dasharray画圆环进度、Web Audio 合成提示音、按日期把番茄数存进 localStorage；还专门提到计时不是简单地setInterval累减，而是记录结束时刻、每 250ms 用Date.now()计算剩余时间，避免计时漂移。

4.2 第二轮：先出方案，再动手

接着提一个新需求，这次明确要它先给方案：

再加一个设置面板：可以自定义专注和休息的时长（1–60 分钟），设置保存在 localStorage，刷新页面后保留。 先给我一个修改方案，不要直接改。

在 Plan 模式下，它读完现有代码，指出专注/休息时长目前写死在FOCUS_SECONDS、BREAK_SECONDS两个常量里，然后分 HTML、CSS、JS 三块列出改动点：标题旁加一个 ⚙️ 按钮、弹出带遮罩的设置面板（两个 1–60 的数字输入框 + 保存/取消）、新增loadSettings()/saveSettings()、修改设置时如果正在计时就先暂停再按新时长重置……最后一句是“如果方案没问题，请切到 Act 模式”。

方案没问题，切到 Act，它按方案改完index.html，又验证了一遍服务返回的内容和源文件一致。

4.3 第三轮：发现 bug，让它自己定位

AI Store 上的 code-server 自带端口代理，在浏览器里打开https://cline.aistore.best/proxy/8000/就能看到它跑起来的页面。我换了一个全新的浏览器打开，结果发现专注时间显示的是01:00，而不是 25:00：

我只描述了现象，让它找原因并修复、写个小脚本验证“没有任何存储”时的默认值。它很快定位到根因：

• 新浏览器里 localStorage 没有设置项，loadSettings()里的raw是null；
• raw && raw.focusMinutes短路求值的结果是null（不是undefined）；
• Number(null)等于 0，既不是 NaN 也是有限数，于是没走默认值分支，而是被Math.max(1, 0)夹成了1 分钟，还顺手把这个错误值存进了 localStorage。

它还顺带指出了同一个 bug 的另一个触发方式：用户把输入框清空再保存，Number("")也是 0。修法是在clampMinutes()开头先判断null/undefined/ 空字符串，直接返回默认值。修完它写了个小脚本，对比修复前后clampMinutes(null, 25)的返回值（1 → 25），输出 PASS，再重启 8000 端口的服务：

再用全新浏览器打开，默认 25:00，点“开始”就开始倒计时；点右上角 ⚙️ 打开设置面板，默认值也是 25 / 5：

手机宽度下也是好的：

三轮下来，我没写一行代码，但每一条要执行的命令都过了我的眼，改了什么在编辑器里看得清清楚楚，这就是 Cline 这种“结对派”智能体的价值。

五、想自己装？

5.1 装进本机的 VS Code

在 VS Code 扩展市场搜索 “Cline” 安装即可，也可以用命令行：

code --install-extension saoudrizwan.claude-dev

装好后点左侧的 Cline 图标，选一个模型提供方、填上自己的 API Key 就能用。JetBrains 全家桶（IntelliJ IDEA、PyCharm、WebStorm……）在插件市场里也能搜到 Cline。

5.2 命令行版

npm i -g cline cline "Run tests and fix any failures" git diff origin/main | cline "Review these changes for issues"

CLI 版可以交互聊天，也可以完全无界面运行，适合放进脚本和 CI/CD。

5.3 像 AI Store 这样放在服务器上用浏览器访问

AI Store 用的是 code-server（网页版 VS Code）加 Cline 扩展。自己搭可以这样：

docker run -it --name code-server -p 127.0.0.1:8080:8080 \ -v "$HOME/project:/home/coder/project" \ codercom/code-server:latest # 浏览器打开 http://127.0.0.1:8080 (密码在容器里的 ~/.config/code-server/config.yaml) # 然后在扩展面板里搜索安装 Cline

六、总结

本文介绍了“结对派”编码智能体 Cline，并在 AI Store 的网页版 VS Code 里真实地走了三轮：一句话做出一个番茄钟网页并跑起服务；用 Plan 模式先出方案、确认后 Act 模式加上设置面板；最后发现它自己埋下的默认时长 bug，描述现象让它定位并修复验证。每一步要执行的命令都会停下来等你点“Run Command”，改了什么在编辑器里看得清清楚楚。整个过程不需要装 VS Code、不需要申请 API Key。

如果觉得对你有帮助，期待您的关注，点赞、收藏或评论，您的支持是我持续码字的动力。

AIStore免费AI公开课系列文章：

AIStore免费AI公开课-智能体篇（一）：口袋专家Harness上架AIStore，开源个人智能体，开箱即用

AIStore免费AI公开课-智能体篇（二）：Agents Team上架AIStore，拉一群机器人同时开工，开箱即用

AIStore免费AI公开课-智能体篇（三）：AI Search上架AIStore，问你的数据、答案带出处，开箱即用

AIStore免费AI公开课-智能体篇（四）：AI Recom上架AIStore，信息流推荐并讲清理由，开箱即用

AIStore免费AI公开课-智能体篇（五）：OpenClaw上架AIStore，龙虾2.0智能体，开箱即用

AIStore免费AI公开课-智能体篇（六）：Hermes上架AIStore，自记忆智能体，开箱即用

AIStore免费AI公开课-智能体篇（七）：DeepSeek Harness上架AIStore，DeepSeek官方智能体，开箱即用

AIStore免费AI公开课-智能体篇（八）：OpenCode上架AIStore，最火的开源编码智能体，开箱即用

AIStore免费AI公开课-智能体篇（九）：Claude Code上架AIStore，用Claude改整个代码库，开箱即用

AIStore免费AI公开课-智能体篇（十）：ComfyUI上架AIStore，节点编排生图生视频，开箱即用

AIStore免费AI公开课-智能体篇（十一）：Codex上架AIStore，用GPT改整个代码库，开箱即用

AIStore免费AI公开课-智能体篇（十二）：Pi Agent上架AIStore，极简可改的编码智能体，开箱即用

AIStore免费AI公开课-智能体篇（十三）：Open Design上架AIStore，开源版Claude Design，开箱即用

AIStore免费AI公开课-智能体篇（十四）：OpenHands上架AIStore，开源版Devin，开箱即用

AIStore免费AI公开课-智能体篇（十五）：Cline上架AIStore，VS Code里的结对编程智能体，开箱即用

AIStore免费AI公开课-智能体篇（十六）：AutoGen Studio上架AIStore，微软多智能体搭建台，开箱即用

AIStore免费AI公开课-智能体篇（十七）：CrewAI上架AIStore，按角色分工的智能体团队，开箱即用

AIStore免费AI公开课-智能体篇（十八）：OpenManus上架AIStore，开源版Manus，开箱即用

AIStore免费AI公开课-智能体篇（十九）：Twenty上架AIStore，开源版Salesforce，开箱即用

AIStore免费AI公开课-智能体篇（二十）：LangChain上架AIStore，LangGraph智能体对话界面，开箱即用

AIStore免费AI公开课-智能体篇（二十一）：SillyTavern上架AIStore，开源版Character AI，开箱即用

AIStore免费AI公开课-智能体篇（二十二）：Kilo Code上架AIStore，架构编码调试多模式，开箱即用

AIStore免费AI公开课-智能体篇（二十三）：Laya上架AIStore，毫秒级结构化判断的决策模型，开箱即用

AIStore免费AI公开课-智能体篇（二十四）：Jev上架AIStore，托管决策模型按输入计价，开箱即用

AIStore免费AI公开课-智能体篇（二十五）：Semantica上架AIStore，开源版Palantir本体工作台，开箱即用

AIStore免费AI公开课-智能体篇（二十六）：Open Dots上架AIStore，开源版OpenAI Dots，开箱即用

AIStore免费AI公开课-智能体篇（二十七）：OpenMausBot上架AIStore，开源版Grok Bot，开箱即用

AIStore免费AI公开课-智能体篇（二十八）：OpenMuse上架AIStore，开源版Muse，开箱即用