---
title: "让 Claude 生成可下载的代码和文档"
description: "把对话结果变成能带走的文件：用独立面板做单文件网页、图表和文档，边看边改，再下载到本地继续用。"
updated: 2026-11-13
canonical: https://docai.cc/learn/downloadable-code-and-docs/
markdown_mirror: https://docai.cc/learn/downloadable-code-and-docs.md
---
## 聊天里的代码，和能用的文件

你让它在对话里写一段网页代码，拿到的是一块带高亮的文本。想看一眼效果，得自己复制、存盘、再找浏览器打开。改一处，整套动作重来。

结果放进独立面板后，情况不一样：页面在旁边直接渲染，按钮能点，窗口能拉宽看响应式；文档可以当场改字；觉得行了，整份下载。不是模型突然变强，而是输出有了文件的形状。

适合这样做的活很集中：一张活动页、一个能算数的小工具、一份带样式的报告、一张趋势图。需要登录、读写数据库、定时执行的东西，不该放在这里。

判断标准只有一条：**这东西能不能只靠一个文件活在浏览器里**。能，就适合；不能，就只是看起来像。

## 先分清三种产出

很多人把「预览」「下载」「部署」混成一件事。其实它们是三段：

- **预览**：在面板里看渲染结果，验证布局和交互；
- **下载**：拿到源码文件，自己保存、转发、二次修改；
- **部署**：放到服务器上，让别人通过网址访问。

面板能覆盖前两段；把页面放到你自己的服务器、绑定域名长期开放，第三段得你自己做。知道这个分工，你就不会问「为什么它给我的链接打不开」——那本来就不是面板的职责。

## 把要求写成一份交付说明

一句「帮我做个网页」，多半换来一个能跑却不好用的东西。把下面几件事一次说清：

> 做一个单文件的活动报名页，HTML、CSS 和少量 JS 写在一起。
> 使用场景：手机打开，按 375px 宽度优先设计。
> 必须包含：活动名称、时间地点、三行介绍、一个报名按钮，点击后只显示「已提交」，不做真实提交。
> 视觉：深色背景，暖金主色，标题淡入。
> 样式全部写在文件内，不引用外部字体、图片和脚本。
> 输出完整代码，并告诉我怎么在本地打开。

拿到代码后先做一次自包含检查：在源码里搜 `http://`、`https://`、`<link` 和 `<script src`。命中外部地址的，多半是字体、图标或图表库；要么要求它改成本地内嵌或系统字体栈，要么明确记下「这份文件离线打不开」。面板里能预览，不代表下载后还能预览。

## 在面板里小步改

第一版出来后，别重新描述需求让它整体重写。只说差异：

- 「标题再大一点，和正文拉开距离。」
- 「按钮改圆角，悬停时颜色深一档。」
- 「三行介绍压成两行，语气轻松些。」

一次只动一两个点，你才看得出哪句话起了作用。纯文字的小修可以直接在编辑区改，保存立即生效，不必让模型再生成一遍。

## 下载之后要做的三件事

1. **换环境打开**。双击文件，再换一个浏览器看。预览环境和你的机器不完全一样。
2. **当代码审一遍**。生成的脚本可能引入你不需要的库，也可能把示例数据写死在里面。发布前清掉占位内容。
3. **放进版本管理**。单文件最容易躺在下载文件夹里失踪，放进仓库，改坏了还能回去。

文档类输出同理。用纯文本格式写的模板下载后能直接填，但表格、脚注在不同编辑器里的支持程度不同，先在目标工具里试一次再发给别人。

还有一件小事值得养成习惯：给每次产出起个能看懂的名字。`活动页-v2.html` 比 `index.html` 强得多，过两周你还能分清哪个是最终版。同一份文件在对话里迭代三四轮后，最好把最后一版单独存一处，别依赖对话记录去找。

## 打开失败时，先查这三处

下载回来才发现用不了，多半不是模型写错，而是文件少了自包含的条件。按下面顺序排查，通常一分钟内能定位：

- **页面没有样式。** 现象是文字全挤在左边。原因通常是样式表用了外链，或者路径多写了一层。处理办法：把 CSS 移回 `<style>`，图片改成同目录相对路径或内嵌。
- **按钮点了没反应。** 打开开发者工具，看控制台第一条红色错误；多数是脚本引用了不存在的元素，或某个外部库没加载成功。先删掉外部依赖，再逐步加回。
- **中文变成问号。** 文件头缺 `<meta charset="utf-8">`，或者保存时用了别的编码。补上声明，用 UTF-8 重新保存。

还有一个隐蔽问题：本地直接双击打开时，某些浏览器会限制脚本读取本地文件。需要读文件的工具，换成启动一个本地静态服务器再测；这类工具本来就不适合长期停留在预览面板里。相关写法可以对照[结构化输出](/concepts/structured-output/)。

## 什么时候该换工具

需要多文件、真实接口、构建流程时，面板就不够用了。把需求和数据带进本地项目，让它按目录结构落文件，做法见[第一次用 Claude Code 改代码](/learn/claude-code-first-run/)。想把需求写得更像一份规格书，可以参考[提示词模板](/concepts/prompt-template/)。

预览面板的价值是「快速看到一个能点的东西」，不是「替你把项目做完」。想清这条边界，就不会在一个根本跑不起来的原型上反复打磨。

下一课换到文字场景：[Claude 写作助手：从初稿到润色的完整流程](/learn/claude-writing-workflow/)。