帮我做个网页然后上线：从需求描述到生产部署的完整话术
"帮我做一个产品介绍页，要好看，然后部署到线上" —— 这句话让 Agent 完成了设计、编码、部署三个阶段的工作。本文拆解这个场景的完整链路，分享如何用一句话得到一个真正能访问的网页。
场景画像
高频指令：
- "帮我做一个产品介绍页"
- "把这份数据做成可视化报告页面"
- "帮我做个个人简历网页"
- "做好之后部署到线上，给我链接"
为什么这个场景震撼力最强：
大多数 AI 助手只能输出文本。但当你说"帮我做个网页"，然后 Agent 真的给你一个 https://xxx.pages.dev 的链接，你点开发现是一个精美的、可以分享给任何人的真实网页——这种"从无到有"的体验是最能让人感受到 Agent 价值的。
场景拆解：三个阶段
阶段一：需求理解与设计
Agent 收到"帮我做一个产品介绍页"后，会先 加载 web-design 技能的 SKILL.md，了解设计规范：
- 技术栈：Tailwind CSS + Chart.js + Font Awesome
- 设计约束：不用紫色渐变、不用 Emoji（统一 Font Awesome 图标）
- 响应式：确保移动端和桌面端都有良好展示
然后 LLM 基于用户需求进行设计推理——确定页面结构（英雄区、功能列表、价格表、页脚）、配色方案、布局方式。
阶段二：代码生成（分段写入）
这是最关键的技术环节。CountBot 的系统提示词中有一条硬性规则：
大文件分段写入：当需要写入的内容较长（如完整 HTML 页面），
必须分多次调用 write_file，每次控制在 2000 字符以内。
Agent 的实际执行过程：
第 1 轮：write_file("product.html", "<!DOCTYPE html>...<head>...</head><body>...")
→ 写入 HTML 头部 + CDN 引用 + 英雄区（约 1500 字符）
第 2 轮：write_file("product.html", "<section>功能列表...</section>", mode="append")
→ 追加功能展示区（约 1800 字符）
第 3 轮：write_file("product.html", "<section>价格表...</section>", mode="append")
→ 追加价格表区域（约 1500 字符）
第 4 轮：write_file("product.html", "<footer>...</footer><script>...</script></html>", mode="append")
→ 追加页脚 + JavaScript（约 1200 字符）
阶段三：部署上线
# 自动生成随机前缀，避免项目名冲突
python3 skills/web-design/scripts/deploy.py deploy product.html \
--project k7m2x9b4-product-intro
部署成功后返回：https://k7m2x9b4-product-intro.pages.dev
整个过程从用户发出指令到拿到可访问的 URL，通常在 1-3 分钟内完成。
提示词技巧：让生成的网页更好
技巧一：描述越具体，结果越好
不建议的描述：
帮我做一个网页
推荐的描述：
帮我做一个 AI 助手产品的介绍页面：
- 英雄区：大标题"你的私人 AI 管家"，副标题描述核心价值，一个 CTA 按钮
- 功能区：4 个功能卡片（邮件管理、新闻聚合、天气查询、定时任务），每个有图标和描述
- 数据区：用 Chart.js 做一个柱状图展示"使用前后效率对比"
- 配色：深蓝 + 白色，科技感
- 部署到线上
技巧二：参考现有页面
参考 linear.app 的设计风格，帮我做一个项目管理工具的介绍页。
要有暗色主题、渐变背景、动画效果。
Agent 虽然不能直接访问 linear.app 的代码，但 LLM 对主流产品的设计风格有认知，能生成风格相近的页面。
技巧三：迭代修改
第一版不满意？直接说修改需求：
英雄区的标题太小了，改大一点。
功能卡片改成 3 列布局。
加一个客户评价区域。
改完之后重新部署。
Agent 会使用 edit_file 工具精确修改 HTML 文件，然后重新部署到同一个项目（覆盖更新）。
技巧四：数据驱动的报告页面
这个场景特别适合做数据可视化报告：
我有一份销售数据（Q1: 120万, Q2: 150万, Q3: 180万, Q4: 210万），
帮我做成一个精美的年度报告网页，包含：
- 柱状图展示季度趋势
- 环形图展示各产品线占比
- 关键指标卡片（总营收、同比增长、客户数）
做好后部署上线。
web-design 技能支持 Chart.js 的所有图表类型：bar、line、doughnut、radar、polarArea。
技巧五：指定部署到已有项目
如果你想更新已有的网页而不是创建新的：
更新 my-portfolio 项目的网页，把"工作经历"部分加上最新的一段。
Agent 会使用 --project my-portfolio 参数部署到已有项目，覆盖旧版本。
技术细节：部署脚本的工作原理
deploy.py 是纯 Python 实现的 Cloudflare Pages 部署工具，不依赖 Node.js 或 wrangler：
- 通过 API Token 自动获取 account_id
- 检查项目是否存在，不存在则自动创建
- 单文件部署时自动复制为 index.html
- 通过 Cloudflare Pages Direct Upload API 上传文件
- 返回
https://<project>.pages.dev的访问地址
关键限制：
- 单文件限制 10MB
- 项目名会作为子域名，只能包含小写字母、数字和连字符
- 需要配置 Cloudflare API Token（一次性配置）
常见问题
Q：部署后多久能访问？ A：通常 10-30 秒内生效。Cloudflare 的 CDN 全球分发速度很快。
Q：能部署多页面网站吗？
A：可以。使用目录部署模式：deploy.py deploy ./dist --project my-site，目录中的所有文件都会上传。
Q：能绑定自定义域名吗？ A：可以，但需要在 Cloudflare Dashboard 中手动配置。Agent 目前不支持域名绑定操作。
小结
"帮我做个网页然后上线"是 AI Agent 最具视觉冲击力的场景——用户从一句话出发，几分钟后拿到一个全球可访问的真实网页。CountBot 的 web-design 技能通过预定义的设计规范（Tailwind + Chart.js + Font Awesome）和纯 Python 部署脚本，让这个流程完全自动化。关键技巧是：描述越具体，结果越好；善用迭代修改；利用 Chart.js 做数据可视化。