# 用 WorkBuddy 从零搭建公司官网并上线的踩坑实录

> 本文记录了使用 WorkBuddy（腾讯 AI 办公工作台）为一家科技公司搭建中英双语官网、部署到腾讯云、配置 HTTPS、设计电路板风格背景的全过程，重点分享踩过的坑和解决办法。为保护公司隐私，不涉及具体公司信息和域名。

## 背景

公司需要一个官网。中英双语，8个页面，静态站。找外包要几万块，周期还长。抱着试一试的心态，用 WorkBuddy 从零开始做，最终完整上线。下面是真实经历，包括踩的坑和浪费的算力，希望后来人少走弯路。

## 一、建站阶段：多页面静态站

### 做了什么

8个HTML页面（中文4页+英文4页），共享CSS和JS文件。首页、关于我们、产品服务、联系我们，中英各一套。

### 踩的坑

**坑1：需求描述太模糊**

一开始只说"做个官网"，结果做出来的风格完全不对。后来学会用"身份+任务+格式"的框架描述需求，比如"你是一个企业官网设计师，为一家科技公司设计首页，蓝色科技风，包含Hero区域、核心业务、关于我们、联系方式"。

**教训**：需求一次说清楚，省掉大量来回对话的积分消耗。每次追问都是在烧积分。

**坑2：内容反复修改**

文案改了好几轮，每次都要重新生成。后来发现应该先把所有文案内容定稿，再让AI排版，而不是边写边改。

**教训**：内容定稿后再做设计，否则改一处牵连多处。

## 二、部署阶段：腾讯云服务器

### 做了什么

- 域名解析（A记录指向服务器IP）
- Nginx 配置静态站点
- Let's Encrypt SSL 证书（certbot自动申请）
- HTTP自动跳转HTTPS

### 踩的坑

**坑3：备案接入商问题**

域名在阿里云注册，备案接入商是腾讯云。如果迁移到其他云厂商，需要做接入商变更。最终选择直接用腾讯云服务器部署，省去了变更备案的麻烦。

**教训**：备案接入商和服务器厂商最好一致，避免不必要的变更流程。

**坑4：文件权限**

直接用SFTP上传文件到 `/var/www/` 目录会遇到权限问题。解决方案是先上传到 `/tmp/`，再用 `sudo cp` 复制到目标目录，最后 `sudo chown www-data:www-data` 修改属主。

**教训**：Linux 文件权限是部署的基本功，提前了解目标目录的权限结构。

## 三、设计阶段：电路板风格背景

### 做了什么

网站所有蓝色背景区域（Hero、Banner、CTA、视觉装饰块）从纯色改为电路板线路SVG图案，增加科技感。

### 踩的坑

**坑5：SVG data URI 中的 # 未编码（最大的坑）**

这是浪费算力最多的一坑。把SVG嵌入CSS的 `background-image` 时，SVG中的 `url(#glow)` 滤镜引用里的 `#` 字符没有编码为 `%23`。浏览器把 `#` 当成URL锚点，直接截断了SVG，导致整个电路板图案白屏不渲染。

来来回回检查了好几遍，用户都以为没部署成功，最后才发现是这个编码问题。

**教训**：SVG data URI 中的特殊字符（特别是 `#`）必须进行URL编码。写完CSS后应该在浏览器里验证一次，而不是等用户反馈。

**坑6："增加20%复杂度"说了两遍**

第一版电路板图案太规则，全是横平竖直的网格，像棋盘不像电路板。用户要求增加复杂度，但改完变化不大，用户不得不再说一遍。

最终版本加入了45°斜线走线（真实PCB就是45°拐弯）、弧形曲线、QFP/SOIC/QFN/DIP等多种芯片元件、发光节点、信号同心环、中心光晕等元素，才达到满意效果。

**教训**：用户说"增加复杂度"时，应该直接上大幅度的改动，而不是小修小补。改动幅度要明显到用户一眼就能看出来。

**坑7：未经确认就部署**

有一次改完CSS直接部署到了生产服务器，用户还没确认效果。被明确批评："我还没让你部署，等我指令再部署。"

**教训**：改完先给本地预览，等用户确认后再部署到生产环境。永远不要自作主张。

## 四、地图集成：百度地图

### 做了什么

联系页的地图图标改为可点击链接，跳转百度地图精确定位公司地址。

### 踩的坑

**坑8：百度地图搜索定位不准**

试了三种方式才定位准：
1. 搜索完整地址字符串 → 定位到错误位置
2. 搜索POI名称 → 还是不够精确
3. 使用 marker API + BD-09坐标系精确坐标 → 终于准了

百度地图的坐标系是BD-09，和腾讯地图的GCJ-02不同，需要转换后才能使用。

**教训**：地图定位直接用坐标 marker API，不要依赖搜索。不同地图服务的坐标系不同，注意转换。

## 五、省积分的实战经验

经过这些踩坑，总结几条省积分的方法：

1. **需求一次说清楚**：用"身份+任务+格式"框架，减少来回对话
2. **改完先本地验证**：不要等部署后才发现问题
3. **对话太长就 /clear**：历史上下文越长，消耗Token越多
4. **简单任务用轻量模型**：查资料、翻译不需要用深度模型
5. **大文件先提示格式优化**：如果给AI的文件特别大，先看看有没有更省的格式

## 六、最终成果

- 官网已完整上线（出于隐私不贴具体域名）
- 中英双语8个页面
- HTTPS加密访问
- 电路板科技风背景
- 百度地图精确定位
- ICP备案号已展示

整个过程如果不算踩坑浪费的算力，实际有效工作量大概在几十轮对话内就能完成。关键是把需求想清楚、把坑提前避开。

## 总结

WorkBuddy 做网站是可行的，但有几个前提：
- 你得知道自己想要什么，需求越具体效果越好
- 技术性的坑（编码、权限、坐标系）AI不一定会主动避坑，需要你有一定的判断力
- 改东西要一次到位，来回试错最费积分

希望这篇踩坑记录能帮到同样想用AI建站的朋友。积分来之不易，且用且珍惜。


本文记录了使用 WorkBuddy（腾讯 AI 办公工作台）为一家科技公司搭建中英双语官网、部署到腾讯云、配置 HTTPS、设计电路板风格背景的全过程，重点分享踩过的坑和解决办法。为保护公司隐私，不涉及具体公司信息和域名。

# 用 WorkBuddy 从零搭建公司官网并上线的踩坑实录

开发工具

前端

运维

用WorkBuddy从零搭建中英双语公司官网并成功上线，本文记录了完整过程与踩坑教训。涵盖8个静态页面构建、腾讯云部署、HTTPS配置、电路板风格SVG设计，重点分享需求描述、SVG编码、文件权限、地图坐标等关键问题的解决方案，帮助用户省积分、避弯路，实现高效建站。

云服务器

服务器

WorkBuddy 

Linux

Nginx

WorkBuddy企业版限时双倍 Credits 活动

workbuddy

2026上云采购 | AI焕新·智启新局

热销域名限时优惠，新客首年免费！


domain

4核4G3M云服务器 新用户低至38元/年！

DNS解析新购特惠59元起，续费优惠低至5.3折！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

# 用 WorkBuddy 从零搭建公司官网并上线的踩坑实录-腾讯云开发者社区-腾讯云

# 用 WorkBuddy 从零搭建公司官网并上线的踩坑实录

# 用 WorkBuddy 从零搭建公司官网并上线的踩坑实录

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐