最近我把个人网站从 Framer 迁了出来用 Claude Code 重写了整个前端并重新设计了一遍。这篇文章不聊虚的先讲清楚这套方案是什么Claude Code 是 Anthropic 推出的终端编程代理工具它可以读取项目目录、分析现有代码、生成新页面、执行命令也能直接改文件。我用它取代 Framer把原来依赖订阅制托管平台的响应式网站改成了纯静态前端项目部署回自己的服务器整个流程跑通后后续维护和迭代都更可控。如果你也在纠结“用了很久的建站工具到期续费太贵”或者“模板设计越看越不顺眼”这篇文章可以直接看完。我会按 Claude Code 的安装、模型接入、项目重构、页面设计、部署验证、常见报错排查的顺序展开重点说明它能不能取代传统建站工具、适合什么场景、实际落地时会踩哪些坑。这里先给结论它不是一个傻瓜式拖拽工具但它能完成从代码生成到部署的完整工作流前提是你愿意用命令行和配置文件来驱动。1. 核心能力速览能力项说明项目类型终端编程代理 / 代码生成与自动化工具来源Anthropic开源 CLI 工具主要功能阅读项目代码、生成/修改文件、执行命令、多轮交互完成编程任务支持平台Windows、macOS、Linux 终端VS Code 插件桌面客户端模型接入默认 Anthropic API也可以通过配置接入第三方兼容模型启动方式终端命令claude或 VS Code 插件或桌面版应用是否支持批量任务支持通过脚本、CLI 参数和 Skills 组合处理重复任务部署方式生成静态文件后可部署到任意 Web 服务器适合场景个人网站重构、前端页面批量生成、项目代码分析、自动化重构硬件门槛不需要独立显卡普通开发机能跑磁盘占用约几百 MB 到 1GB显存占用不依赖本地 GPU 推理显存占用约 0取决于是否运行本地模型插件是否支持一键启动支持安装后终端输入claude即进入交互界面需要注意Claude Code 本身是“编程代理”不是“渲染引擎”。它能写 HTML、CSS、JavaScript也能改 React、Astro、Next.js 等现代前端代码但最终网页的展示效果由浏览器和代码质量决定。用 Claude Code 替代 Framer 这类建站工具的实质是把“在设计器里拖拽”改成“让 AI 按提示词生成代码”并把产物变成可维护的工程。2. 适用场景与使用边界2.1 适合谁有自己的域名和服务器想摆脱建站平台订阅费用的人。想要一个代码完全可控、不会被平台锁定模板的个人网站。愿意学习命令行基本操作能接受“配置驱动”工作流的技术型用户。需要批量处理页面比如把旧站几十个 Markdown 文章页统一改成新模板。如果把“用 Claude Code 取代 Framer”这件事拆开它解决的核心问题不是“拖拽设计”而是“批量生成与重构效率”。传统建站平台改一百个页面的成本极高而 Claude Code 可以通过一次指令批量修改所有页面标题、布局、样式变量效率优势非常明显。2.2 不适合谁完全不会使用命令行、只想纯鼠标操作的用户。需要非常复杂的视觉动效和后台数据库管理的网站更适合 WordPress 或 Webflow。对“AI 能写完整网站”的期望过高、不准备做任何检查和调整的用户。2.3 使用边界与合规提醒使用 Claude Code 重构网站时涉及素材版权、隐私和服务条款几个方面原站在 Framer 里的图片、字体、图标、文案迁移前要确认自己是否有使用权。版权不明确的素材不要直接搬运。生成内容可能涉及商标、肖像、未授权素材商用前必须人工复核。接入第三方模型服务时不要在提示词和代码文件中提交真实 API 密钥。密钥应该通过环境变量或本地配置文件管理并加入.gitignore。使用 AI 生成代码时要检查安全漏洞尤其是用户输入、表单提交、JWT 校验、第三方脚本引用等部分。涉及自动化抓取、批量请求外部服务时遵守目标网站的 robots 协议和服务条款不做攻击性操作。3. Claude Code 本地部署环境准备先用一个清单快速确认环境环境项要求说明操作系统Windows 10/11、macOS 12、主流 Linux 发行版Node.js建议 v18 及以上CLI 通过 npm 安装依赖 Node.js包管理器npm 或 yarn安装 Claude Code 用终端Windows 推荐 PowerShell 7 或 Windows TerminalmacOS 用自带 TerminalGit用于管理项目版本方便 Claude Code 回退修改模型 API Key默认需要 Anthropic API Key接三方模型时按其文档申请磁盘空间安装 CLI 和依赖约占用 500MB 到 1GB注意Claude Code 不依赖本地 GPU在普通笔记本上也能流畅运行。3.1 检查 Node.jsnode -v npm -v如果 Node.js 未安装去官网下载 LTS 版本或者用 nvm 管理版本。3.2 安装 Claude Code官方推荐的安装方式是全局 npm 安装npm install -g anthropic-ai/claude-code安装后验证claude --version如果出现could not locate the claude cli on path通常是安装路径没加入 PATH或者全局 npm 目录没有生效。Windows 下可以检查%APPDATA%\npmmacOS 检查/usr/local/bin。3.3 VS Code 插件安装Claude Code 提供 VS Code 插件安装后在编辑器中通过侧边栏直接打开对话不需要切换终端。插件安装方式打开 VS Code 扩展面板搜索Claude Code点击安装。安装后插件需要能识别到全局安装的claude命令如果插件报错找不到 CLI先确认终端里claude命令能正常启动。3.4 桌面版与其他入口除了 CLI 和 VS Code 插件桌面版也在逐步推送给用户。桌面版提供一个独立聊天窗口适合不想打开终端和编辑器的人。更强的操作形态是桌面版配合ccswitch这类模型切换工具把默认模型切到第三方兼容接口。3.5 模型接入Claude Code 默认使用 Anthropic 官方模型首次运行会要求登录或填写 API Key。如果你希望接入第三方兼容模型通常的方式是设置环境变量指向兼容端点。使用模型切换工具例如 ccswitch在多个模型配置之间切换。在settings.json中配置模型名和 API 地址。配置示例第三方兼容模型的通用模板实际内容以你所用服务为准{ env: { ANTHROPIC_BASE_URL: https://your-endpoint.example.com, ANTHROPIC_AUTH_TOKEN: your-token-here, ANTHROPIC_MODEL: your-model-name } }把上面的地址、token、模型名替换成实际值。需要注意不同的模型服务提供不同的参数格式如果配置后启动报错优先查看服务商文档确认ANTHROPIC_BASE_URL是否支持 Claude 消息格式。4. Claude Code 启动方式与服务访问4.1 终端启动进入一个空目录或者已有项目的根目录执行claude首次启动时工具会检查依赖、确认用户登录状态然后进入交互模式。你可以直接输入自然语言指令例如“帮我分析一下当前项目结构”。4.2 VS Code 插件启动安装插件后在编辑器内点击 Claude Code 侧边栏图标选择项目目录即可开始对话。插件模式适合一边看代码一边改代码Claude Code 会直接修改当前工作区文件。4.3 桌面版启动桌面版安装后打开登录账号即可使用。桌面版通常提供图形化的设置界面可以在界面上配置模型切换和目录选择不熟悉终端的用户可以先用桌面版过渡。4.4 启动后验证启动成功后可以输入以下指令验证项目链路请列出当前目录下的所有文件并说明每个文件的作用。Claude Code 会调用文件读取工具返回目录结构和文件说明。这可以确认终端、文件系统权限和模型链路都正常。5. 用 Claude Code 重构个人网站的完整流程5.1 迁移前的准备从 Framer 迁出前我建议先导出旧站内容而不是直接删除。Framer 可以导出站点内容和部分静态资源具体操作在 Framer 后台的站点设置里。导出后整理出一个基础文件包包括站点文案标题、导航、段落、联系方式。图片素材Logo、头像、作品截图。页面结构首页、关于、作品集、博客、联系页。依赖信息旧站使用了哪些字体、图标库、第三方服务。这一步很重要Claude Code 生成的是“代码版网站”它不能自动从 Framer 的私有格式导出内容。内容是迁移的核心。5.2 创建项目目录和基础文件以纯静态 HTML/CSS/JS 为例先手动创建项目骨架mkdir personal-site cd personal-site git init然后让 Claude Code 生成基础结构请在这个目录下创建一个个人作品集网站的骨架使用纯 HTML、CSS、JavaScript不要引入重型框架。 结构包括index.html、about.html、projects.html、blog.html、contact.html。 目录结构要求如下 - css/main.css 存放全局样式 - js/main.js 存放公共脚本 - assets/ 存放图片和静态资源Claude Code 会创建对应的 HTML 文件和基础目录。生成后可以打开index.html预览初始效果。5.3 设定技术栈和设计系统如果你想沿用现代前端方案可以在提示词中指定技术栈使用 Astro 作为静态站点生成器配合 Tailwind CSS 编写页面。 要求 - 页面组件化头部导航和底部信息抽成独立组件。 - 全局颜色、字体、间距统一使用 CSS 变量。 - 适配移动端和桌面端。 - 生成一个公共布局布局文件然后在首页、关于、作品集等页面复用该布局。用 Claude Code 重构网站时最核心的不是让 AI 一次性写出所有代码而是先建立“设计约束”。我建议把所有设计规则放进项目根目录的CLAUDE.md文件里这样多轮对话中 Claude Code 会一直遵守这些规则。示例# 项目规范 - 主色#1a1a2e强调色#e94560。 - 正文字体系统字体栈不加载外部字体文件。 - 页面宽度最大 1200px居中布局。 - 导航栏固定在顶部背景色 #1a1a2e文字白色。 - 所有图片必须使用 assets/ 目录下的本地文件。 - 代码格式使用 Prettier缩进两个空格。写入后在对话中要求 Claude Code 读取 CLAUDE.md 并严格遵守生成的页面样式会更统一。5.4 首页重构实操首页是网站的门面也是从 Framer 迁移后最容易出现“设计降级”的地方。建议把旧站首页的文案整理成结构化提示词请用 CLAUDE.md 的设计规范重写 index.html。 页面结构 1. Hero 区域大标题“我是 XXX一名产品设计师”。副标题描述服务领域背景使用 assets/hero-bg.jpg。 2. 作品展示区域展示 3 个近期项目每个项目包含封面图、标题、一句话说明。 3. 个人简介区域包含 2 段文字描述工作经历和擅长方向。 4. 联系区域包含邮箱和社交媒体链接。 风格要求干净、留白多、无多余动画。等待 Claude Code 完成后打开浏览器预览。Framer 站点的优势在于设计感所以要重点检查排版层级是否清晰。导航栏在移动端是否正确折叠。图片是否被拉伸变形。页面是否有横向滚动条。如果发现样式不对直接让 Claude Code 修改首页存在以下问题 1. 移动端导航没有折叠菜单遮挡内容。 2. Hero 区域图片拉伸变形请改为 cover 并居中。 3. 页面最右侧有 10px 的横向留白请检查 body 的 margin。 请一次性修复。5.5 博客页面批量重构如果旧站有几十篇博客手工复制粘贴效率很低。Claude Code 最大的优势是批量处理。假设你已经把旧文章导成 Markdown 文件放在content/posts/目录下可以这样让 Claude Code 完成批量转换请遍历 content/posts/ 目录下的所有 .md 文件为每个文件生成一个对应的 HTML 页面。 要求 - 使用 blog.html 作为模板结构。 - 每个页面的标题、日期、正文分别插入对应内容。 - 正文中的 Markdown 标题和列表要转换为 HTML 标签。 - 页面标题格式文章标题 - 个人网站。 - 文章列表页需要生成一个索引显示所有文章标题和发布日期。这种批量任务人工做需要几个小时Claude Code 完成速度和稳定度都高不少。不过要提醒一点AI 生成的 HTML 可能存在格式错误或内容丢失批量生成后必须抽查几篇对比原始 Markdown 内容是否一致。5.6 图片与资源迁移图片资源不能用 AI 凭空生成而是把旧站导出素材放入assets/目录。让 Claude Code 自动替换 HTML 中的图片引用检查所有 HTML 文件中的 img 标签。 引用旧地址的图片统一替换为 assets/ 目录下的本地文件。 替换规则 - hero-bg 使用 assets/hero-bg.jpg - avatar 使用 assets/avatar.jpg - 其余图片如果 assets 中不存在先保留原地址并列出清单。替换后清点一遍输出清单把缺失的图片手动补充进去。5.7 本地预览与服务访问静态网站可以直接用 VS Code 的 Live Server 插件启动本地预览也可以用 Python 启动一个临时 HTTP 服务cd personal-site python -m http.server 8080打开http://localhost:8080就能预览网站。如果你用了 Astro 或 Next.js 这类框架本地先安装依赖npm install npm run dev启动后按终端提示访问本地地址通常是http://localhost:4321Astro或http://localhost:3000Next.js。5.8 部署到服务器网站代码验证通过后执行构建命令生成静态文件npm run build构建产物一般在dist/或out/目录。把这些文件上传到自己的 Web 服务器例如 Nginx 的站点目录scp -r dist/* useryour-server:/var/www/html/同时配置 Nginx 指向该目录并做好 HTTPS 证书。这样网站就从 Framer 迁移到了自己的服务器上不再依赖第三方订阅服务。6. 接口 API 与批量任务6.1 Claude Code 的自动化调用Claude Code 本身提供 CLI 参数可以在非交互模式下执行单次任务。例如claude -p 分析当前目录的 index.html找出所有没有被使用的 CSS 类名-p参数用于传入提示词--output-format可以指定输出格式claude -p 列出项目所有文件 --output-format json这种非交互模式非常适合自动化脚本。比如写一个 Node.js 脚本把所有 Markdown 文件批量交给 Claude Code 转换const { execSync } require(child_process); const fs require(fs); const path require(path); const postsDir ./content/posts; const files fs.readdirSync(postsDir).filter(file file.endsWith(.md)); for (const file of files) { const prompt 读取 content/posts/${file}将其转换为完整 HTML 页面输出到 dist/posts/${file.replace(.md, .html)}; execSync(claude -p ${prompt}, { stdio: inherit }); }6.2 第三方模型接口的批处理思路如果你把 Claude Code 接入了第三方模型服务批处理的核心是“把每一轮对话的真实 API 请求暴露出来”。Claude Code 在交互过程中会调用模型接口你可以通过日志或代理观察请求格式然后把同样的请求封装成自己的批量任务脚本。常见流程是在本地启动一个代理服务接收模型请求。Claude Code 在对话中触发模型调用。代理服务把请求按批次分发到不同的模型端点。批量任务完成后再汇总结果。这种方式适合同时处理多篇文章、多张页面模板或多语言翻译。不过在批量任务前务必先小规模测试一次确认模型接口的返回结构稳定再全量跑。6.3 批量任务的最佳实践批量任务要用目录隔离输入和输出input/ 原始文件 output/ 生成结果 logs/ 运行日志每次批量任务都记录输入文件列表。使用的模型和配置。成功与失败的文件名。失败原因。失败重试时只处理失败文件不要全量重跑节省 API 费用和时间。7. 资源占用与性能观察7.1 本地资源占用Claude Code 本身是 Node.js 进程日常占用内存大约几百 MB具体数值受项目大小和对话上下文影响。因为它不做本地推理所以没有显存占用普通 8GB 内存的笔记本也能流畅运行。如果项目目录很大比如包含几万个node_modules文件Claude Code 在读取文件列表时可能会变慢。建议在项目根目录添加.claudeignore文件排除不需要分析的目录node_modules/ dist/ .git/ .output/7.2 模型服务响应速度响应速度取决于你接的模型服务。官方 Anthropic 服务和第三方兼容服务的速度差异较大实测时重点观察首次响应耗时。生成大文件时的流式输出速度。上下文变长后是否明显变慢。请求高峰期是否出现 529 错误服务过载。如果发现响应速度慢可以通过减少上下文内容来改善。比如把项目拆分成多个子目录每个对话只处理一个子目录避免 Claude Code 读取过大的全局上下文。7.3 构建性能如果网站是纯 HTML/CSS/JS构建时间基本可以忽略。如果用了 Astro 或 Next.js首次构建需要安装依赖耗时按分钟计算。构建性能瓶颈通常不在 CPU 而在磁盘和网络。建议依赖安装失败时切换 npm 镜像源。构建前清理dist/缓存目录。大图片放到外部存储或 CDN避免静态构建包过大。8. 常见问题与排查方法8.1 安装与终端问题问题现象可能原因排查方式解决方案安装后claude命令找不到全局 npm 目录未加入 PATH检查 npm 全局目录把 npm 全局目录加入 PATHVS Code 插件报错 could not locate claude cli on path插件找不到 CLI终端执行 which claude重启 VS Code或配置插件 CLI 路径模型名称不被识别例如 deepseek 报错 this version of claude code recognizesClaude Code 版本过旧或模型名不匹配更新到最新版检查模型名列表升级 Claude Code或改用正确的模型名每次对话都报 529模型服务过载检查服务状态等待后重试或切换备用模型接入自定义模型后没有回复API 地址或模型名不匹配查看服务商文档修正 ANTHROPIC_BASE_URL 或模型配置8.2 项目应用问题问题现象可能原因排查方式解决方案生成的页面没有样式CSS 文件路径错误打开浏览器控制台检查 CSS 引用路径和文件名图片显示不出来路径错误或资源缺失检查 assets 目录让 Claude Code 重新修正图片引用页面在移动端布局混乱缺 viewport 或媒体查询检查 head 标签添加 viewport meta 和响应式样式批量生成的 HTML 内容缺失原文 Markdown 格式特殊对比原文输出逐篇检查重新生成失败文件连接模型报错your organization has disabled claude subscription access账号权限限制检查账号订阅策略更换账号或使用个人 API Key依赖安装失败网络或镜像源问题查看 npm 日志切换 npm 镜像源重新安装8.3 设计还原问题用 Claude Code 做设计重构时最常出现的问题是“生成页面不够好看”。这只靠 AI 不够建议明确给出设计参考例如“风格类似 Linear、字体用 Inter、圆角 12px、背景色 #fafafa”。让 Claude Code 先生成纯色块原型确认布局后再补细节。把不满意的地方逐条反馈而不是说“整体重做”。学习最基础的 CSS 属性方便在 AI 生成后手动微调。9. 最佳实践与使用建议9.1 第一次先构建最小页面不要一上来就让 Claude Code 生成整个网站。先做一个单页面试水验证模型响应质量、速度和代码可用性。比如先让它生成一个首页 Hero 区域确认满意后再扩展到全站。9.2 保留一套最小可运行配置把所有配置文件固定下来.claudeignore CLAUDE.md settings.json package.json这样即使换一台电脑只需要同步这几个文件和项目代码就能恢复工作流。配置文件本身也要版本管理提交到 Git 仓库。9.3 模型、输入、输出分目录管理项目结构建议personal-site/ ├── content/ # 原始内容 ├── assets/ # 图片与静态资源 ├── dist/ # 构建产物 ├── scripts/ # 自动化脚本 ├── logs/ # 运行日志 └── CLAUDE.md # 项目规范这样批量任务不怕误删日志也方便排查。9.4 批量任务加点保险批量任务不要一次性处理 100 个文件而要先跑 3 个文件验证效果。加日志和失败重试。接口型批量任务要设置超时和限流避免请求过快被封。9.5 接口服务要限制访问范围如果你把 Claude Code 包装成 Web API 服务不要直接暴露在公网。合理方案是监听 127.0.0.1。用 API Key 鉴权。限制单 IP 请求频率。定期轮换密钥。9.6 涉及人脸、声音、版权素材必须确认授权如果网站包含人物肖像、客户 Logo、第三方插图、字体迁移后必须保留授权记录。AI 生成的素材也不代表版权自动归你商用前要复核来源。9.7 发布商用前做全站检查发布上线前做一次完整检查- 所有页面是否可以正常访问。 - 移动端适配是否正常。 - 表单功能是否可以提交。 - 图片和字体是否加载完整。 - 有无外部资源跨域问题。 - Meta 标题和描述是否齐全。 - 是否有无效外链。 - HTTPS 证书是否有效。10. 总结与下一步这次用 Claude Code 替代 Framer 重构个人网站整个过程验证了一个判断AI 编程工具的价值不只是“写代码”更是把重复的页面重构、批量转换、格式统一工作压缩到分钟级。相比订阅建站平台代码化网站的优势是可控、免费部署、不锁定模板劣势是上手门槛更高需要自己维护样式和依赖。建议你先验证两个能力第一它能否按照一个明确的 CLAUDE.md 规范生成风格一致的页面第二它能否批量处理你手上已有的旧内容。如果这两条都能跑通那么迁移旧站就是水到渠成的事。最容易踩的坑是“让 AI 一口气生成一百个页面”正确做法是一批次二十个逐批检查发现问题当时修复不要拖到后面统一返工。后续可以继续扩展的方向很多把文章统一改成 MDX 格式做交互式文档、接入无头 CMS 管理内容、加一个简单的搜索功能、用 GitHub Actions 自动构建部署。从 Framer 迁出来了网站的技术栈就完全握在自己手里后面想怎么加都行。