AI 工具聚合网站
课程导读
用 Claude Code 开发一个 AI 工具聚合网站，把智谱开放平台常用能力整合到网页里，完成开发、联调与验证。
一、课前准备
| 准备项 | 说明 |
|---|---|
| 智谱 API Key | 调用智谱接口需要 |
| 智谱开放平台文档 | 先下载到本地，供 Claude Code 分析接口 |
二、开始开发
- 新建项目文件夹
- 用 Warp 进入项目目录
- 执行
git init初始化仓库 - 启动 Claude Code
三、下载接口文档到本地
示例提示词：
text
https://docs.bigmodel.cn/cn/api/introduction 帮我将这个网站上的 API 文档下载到本地，然后保存到一个文件夹里。小技巧：btw
Claude Code 执行任务时，可用 /btw 临时提问（不中断主任务、不占用主上下文）；看完回复按 Esc 退出即可。
四、选择要接入的功能
示例提示词：
text
我想你基于刚才下载的这些 API 文档，帮我开发一个 AI 工具站，用户可以在网页中使用不同的 AI 工具。不过这些 API 接口数量比较多，我不希望把所有功能全部开发出来。你帮我从中筛选出 4 个最适合开发的功能。与 Claude Code 迭代沟通后，本课演示最终定稿为 三个功能模块：
| 功能模块 | 包含能力 |
|---|---|
| AI 对话 | 多轮对话、图像理解、联网搜索 |
| 图像生成 | 根据文字提示生成图片 |
| 语音工具 | 文本转语音、语音转文本、音色复刻 |
- 文本转语音 与 语音转文本 放在同一语音工具页
- 图像理解、联网搜索 集成到 AI 对话里
- 声音复刻（音色克隆） 纳入语音工具。该接口单价较高；若只做练习、不打算实际调用，开发时告知 Claude Code 剔除即可
五、Plan 模式规划开发方案
功能方向确定后，切换到 Plan 模式。
六、UI 风格参考
本课选用 get design.md 的 Claude 官方网站 风格。
get design.md
- 在 get design.md 选好 Claude 风格，复制页面上的安装命令
- 在项目目录执行（会下载
DESIGN.md）：
bash
npx getdesign@latest add claude- 新建
.pen文件，用 Pencil 打开
七、Pencil 设计稿
让 Claude Code 按开发计划执行，先调用 UI 子代理在 Pencil 里出界面稿；设计稿确认后再进入代码开发。
八、进入开发
设计稿确认后：Git 存档 → 上下文较长时 /compact → 继续开发。
开发完成后 Claude Code 可能申请 Chrome 自动化测试权限，允许即可。
九、配置智谱 API Key
测试前需创建 API Key 并确保账号有余额（如果不使用音色复刻，其他功能大概几块钱就够了）。
智谱 API Key 管理将 Key 写入 .env 后，Claude Code 即可做真实接口测试；可能再次调用 Chrome DevTools MCP 做自动化连通性验证。
十、还原设计稿样式
若页面与设计稿偏差较大（如布局、衬线字体），可切换到 Opus，要求 1:1 还原设计稿 并改用 非衬线字体。
十一、测试 AI 对话
测 多轮对话、图像理解、联网搜索；发现问题 汇总后一次性反馈，不必遇到一个修一个。
联网搜索可问「今天是几号」或「搜索一下今天的新闻」。
十二、测试图像生成
示例提示词：
text
高端海军蓝指甲油的奢华美容广告海报，优雅的韩式时尚活动，柔和米色和奶油色美学背景，带有极简奢华室内阴影，电影般的美容照明，光泽杂志编辑风格，超现实，高档化妆品品牌布局。
左侧：深海军蓝色的醒目奢华品牌字体，高端衬线字体，产品名称和色号，下面是优雅的标语。其下方，4 个美容益处部分，带有极简线条图标和简洁字体：• 高光泽光泽效果
• 持久佩戴
• 平滑一笔涂抹
• 注入护甲配方
中心/右侧：留出干净的垂直构图空间，以便稍后添加女性面部/模特，完美对齐以便面部替换或修复。模特应略微位于中心右侧，上半身肖像姿势，柔和自信的表情，面向镜头，用优雅的手指将指甲油瓶靠近面部。保持面部区域干净、详细、对称且无遮挡，便于后续轻松面部替换/编辑。
模特造型：丝质海军蓝色缎面连衣裙，与指甲油色号匹配，柔和奢华妆容，光泽嘴唇，精致珠宝，长卷发自然流动，美学女性姿势，抛光美甲与产品颜色匹配。
底部部分：大理石平台上的逼真指甲油瓶，身后带有艺术性的海军蓝颜料笔触，产品周围环绕精致的干花，奢华化妆品商业构图。在右下角附近添加 3 个小型圆形美甲特写镜头。
颜色调色板：海军蓝、奶油米色、柔和暖白、柔和金色点缀。
风格：迪奥风格的奢华化妆品活动，《Vogue》美容编辑，高端护肤广告美学，简洁布局，优雅字体，超详细，锐利焦点，逼真皮肤纹理，光泽反射，景深，8K，照片级真实，精致女性奢华品牌。智谱没有官方局部编辑接口；若需改图，Claude Code 可能用变通方案，效果有限。
十三、测试语音工具
- 语音转文字 若报「文件只支持单声道」：上传前先把音频转单声道，或把报错发给 Claude Code
费用提醒
音色复刻接口单价较高。若只做练习、不打算实际调用，可不做测试，或者告知 Claude Code 剔除该功能
十四、Git 存档
主要功能和样式验证通过后：
text
/commit-commands:commit