躺在沙发上刷手机的时候突然想改个 bug，结果发现电脑在书房懒得动……周末突然想起老板周一要的 PPT 还没做……相信每个打工人都有过这种时刻。今天给大家介绍一个我自己做的工具——WebCode，一个能在手机上远程驱动 AI 干活的全能工作台。写代码、做设计、处理 Excel，一个浏览器全搞定。

---

它能帮你做什么？先看几个真实场景

在详细介绍之前，先说几个我日常使用的场景，你就能明白这东西有什么用：

📱 场景一：地铁上改 Bug

早上挤地铁，突然收到测试同事的消息："生产环境报错了！"

以前只能干着急等到公司。现在？掏出手机，打开网页，直接跟 AI 说：

"帮我看看 UserService 里的空指针问题，应该是 GetUserById 那个方法"

AI 自动分析代码、定位问题、给出修复方案。**我只需要点一下"应用修改"**，bug 就修好了。还没到公司，问题已经解决。

📊 场景二：周末赶 PPT

周五晚上老板突然说："周一给客户汇报，准备个 10 页的 PPT。"

以前这种时候只能加班熬夜。现在？躺沙发上用手机就能搞定：

"帮我做一份 Q3 业绩汇报 PPT，10 页左右，重点突出增长亮点，风格简洁专业"

几分钟后，一份完整的 PPT 就生成了。我只需要最后过一遍，调整几个细节。

📈 场景三：快速分析数据

销售总监发来一份 Excel，问："能不能帮我看看哪几个区域销量下降最明显？"

以前要打开电脑、打开 Excel、写公式、做透视表，折腾半小时。现在？

"帮我分析这份销售报表，找出销量下降最明显的三个区域，做个对比图"

30 秒后，分析报告和图表就出来了。

---

这个工具解决了什么痛点？

说清楚背景：市面上有 Claude Code CLI、Codex CLI 这些超强的 AI 编程工具，但它们都有一个共同的问题——必须在本地命令行运行。

这意味着：

• 你得有一台开着的电脑

• 你得能 SSH 进去或者坐在电脑前

• 手机上？别想了

WebCode 解决的就是这个问题：

在任何设备的浏览器里，远程驱动服务器上的 AI CLI 工具，实时看到 AI 的"思考过程"和输出结果。

而且不只是写代码——它集成了 Claude Code 的 Skills 技能系统，可以处理 Excel、做 PPT、设计 UI、生成艺术作品……一个浏览器就是一个全能工作台。

---

核心功能一览

🔌 多 AI 工具支持

WebCode 不绑定某一个 AI 工具，目前完整支持：

• Claude Code CLI —— Anthropic 出品，综合能力最强

• OpenAI Codex CLI —— OpenAI 出品，代码生成专精

后续还会支持 GitHub Copilot CLI、Gemini CLI 等。你可以根据任务类型选择最合适的 AI。

💬 实时流式输出

AI 的思考过程、工具调用、代码生成……所有内容都实时流式展示，就像看 AI 在屏幕上"打字"一样。不用干等，随时能看到进度。

🔄 会话持续 & 上下文记忆

• 会话恢复：关掉浏览器再打开，之前的对话还在

• 上下文记忆：AI 记得之前聊过什么，不用每次都重复说背景

• 智能压缩：对话太长时，自动压缩早期内容，保留关键信息

🖥️ 实时网页预览

AI 生成的前端代码，可以直接在浏览器里预览效果。支持：

• Vue / React (Vite)

• Next.js / Nuxt.js

• 静态 HTML

不用本地启动开发服务器，生成即可见。

📁 工作区管理

每个会话有独立的工作区，文件隔离、互不干扰。支持：

• 文件浏览器（查看 AI 创建/修改的文件）

• 代码差异对比（看 AI 改了什么）

• 一键下载工作区

📱 完美移动端适配

这是我特别花心思做的部分。手机上的体验和电脑上一样流畅：

• 触摸友好的操作区域

• 自适应的布局

• 虚拟键盘弹出时不会遮挡输入框

• 横竖屏都能用

---

16 个专业 Skills：不只是写代码

WebCode 最大的亮点是集成了 Claude Code 的 Skills 技能系统。每个 Skill 就像一个"专业插件"，赋予 AI 特定领域的能力。

📊 办公三件套：Excel、PPT、Word

Excel 分析（xlsx）—— 以前分析销售数据，要打开 Excel 写公式做透视表，折腾半天。现在直接扔给 AI：

"帮我分析这份销售报表，找出销量下降最明显的三个区域，做个对比图"

30 秒搞定，还自动生成了可视化图表。

支持的操作：

• ✅ 创建带公式和格式的新表格

• ✅ 读取和分析现有数据

• ✅ 修改文件同时保留公式

• ✅ 数据可视化和图表生成

PPT 制作（pptx）—— 周五下午老板突然说周一要汇报。以前只能加班熬夜。现在？

"帮我做一份 Q3 业绩汇报 PPT，10 页左右，突出增长亮点"

AI 自动创建演示文稿、设计布局、填充内容。我只需要最后过一遍调整细节。

Word 处理（docx）—— 合同改几个字、文档加批注、内容格式调整……这些繁琐操作一句话搞定。

📄 PDF 全功能处理

PDF 这个 Skill 功能特别全：

• 📖 提取：文本提取、表格数据提取

• ✂️ 编辑：合并多个 PDF、拆分单个 PDF

• 🔒 保护：添加水印、密码保护

• 📝 表单：自动填写 PDF 表单（超实用！）

"把这 5 份合同合并成一个 PDF，加上公司水印"

以前要下载专门的 PDF 工具，现在一句话就行。

🎨 设计类 Skills

前端设计优化（frontend-design）—— 后端程序员最头疼的就是 UI，功能好但就是不好看。

"帮我优化这个管理后台的设计，现代感强一点"

AI 给出完整方案：配色、字体、间距、交互细节……不是千篇一律的"AI 味"，是真有设计感的。

视觉设计（canvas-design）—— 做海报、配图、创意视觉，博物馆/杂志级别的设计质量。

算法艺术（algorithmic-art）—— 用 p5.js 生成炫酷的流场动画、粒子系统，适合做动态背景或公众号配图。

🧪 自动化测试

Web 应用测试（webapp-testing）—— 基于 Playwright 的自动化测试能力：

• 验证前端功能是否正常

• 自动截图对比

• 查看浏览器日志

• 调试 UI 问题

前端回归测试从此不再是体力活。

完整 Skills 清单

技能	能做什么
xlsx	Excel 全功能：公式、图表、数据分析
pptx	PPT 制作：布局、动画、内容填充
docx	Word 处理：编辑、批注、格式化
pdf	PDF 处理：提取、合并、表单、水印
frontend-design	前端 UI 设计优化
canvas-design	静态视觉设计
algorithmic-art	算法艺术生成
webapp-testing	Playwright 自动化测试
doc-coauthoring	文档协作工作流
internal-comms	内部沟通模板
theme-factory	10 套预设主题
web-artifacts-builder	Web 组件构建
mcp-builder	MCP 服务器构建
skill-creator	创建自定义 Skill
slack-gif-creator	Slack GIF 动画
brand-guidelines	品牌风格应用

这意味着什么？

WebCode 不是"编程助手"，而是"AI 全能工作台"。

以前我需要：VSCode 写代码、Excel 分析数据、PowerPoint 做汇报、Figma 做设计……

现在，一个浏览器全搞定。80% 的日常需求，AI + Skills 都能覆盖。

最关键的是：随时随地，想用就用。

---

后续规划

这个项目还在持续迭代，接下来计划做的事情：

🤝 多人协作—— 支持多人同时使用同一个工作区，实时看到彼此的操作和 AI 的响应。

🧠 更智能的上下文—— 用 AI 来做对话摘要，让"记忆"更聪明，不会丢失关键信息。

🔧 更多 AI 工具—— GitHub Copilot CLI、Gemini CLI、Qwen CLI 都在适配计划中。

📴 离线支持—— PWA 化，离线也能查看历史记录。

---

总结：工作不应该被设备限制

工作这件事，本来就不应该被设备和场景限制。

• 躺沙发上突然想到一个好点子？掏出手机让 AI 帮你实现

• 地铁上 review 代码发现问题？直接让 AI 修复

• 咖啡馆里想起 PPT 没做？打开网页几分钟搞定

这才是我理想中的工作方式。

WebCode 能做的事情：

场景	能力
📝 编程	写代码、改 bug、code review、重构优化
📊 数据	Excel 分析、图表生成、数据处理
📑 文档	PPT 制作、Word 编辑、PDF 处理
🎨 设计	UI 优化、海报设计、艺术生成
🧪 测试	自动化测试、截图对比、日志分析

所有这些，只需要一个浏览器。

---

🌐 立即体验

无需安装，直接访问在线演示：

试用地址	账号	密码
https://webcode.tree456.com/	treechat	treechat@123

⚠️ 试用环境为演示用途，请勿存储敏感信息

---

项目完全开源：**https://github.com/xuzeyu91/WebCode**

欢迎 Star ⭐、Fork、提 Issue，有问题我会回复的！

---

写这篇文章的时候，我正躺在沙发上用手机让 AI 帮我润色文案。嗯，真香。

更多AIGC文章

RAG技术全解：从原理到实战的简明指南

更多VibeCoding文章