做个人网站这件事很容易陷入一种纠结想要速度快就选 Framer 这类可视化工具想要自由度就得自己写代码。Framer 把“上手快”做到了极致但代价是网站被平台绑定。Claude Code 这类编程代理正在把另一侧的门槛降下来你不需要手工敲每一行代码但得到的却是完全属于自己的工程化项目。这篇文章不是单纯夸某个工具而是完整记录一次真实的技术选型过程为什么我要把个人网站从 Framer 迁出去Claude Code 在迁移中到底承担了什么角色以及从环境准备、项目重建、内容迁移到上线验证每一步具体怎么操作。如果你也在“可视化建站”和“代码建站”之间犹豫读完你会有一个清晰可靠的决策依据。1. 为什么把个人网站从 Framer 迁出来先说结论Framer 不是不好用而是它优先服务的是“快速上线”不是“长期拥有”。个人网站和营销页不一样。营销页做完就上线改版周期长个人网站是持续更新的资产你会频繁改作品、写博客、调整关于页。这种“高频迭代 长期维护”的需求会很快暴露可视化建站工具的四个瓶颈。第一是所有权问题。Framer 上的页面以项目数据的形式保存在平台里设计资产和内容都跟平台绑定。你可以在平台上编辑、发布但要把它变成自己仓库里的一套干净代码整个流程不算顺畅。从长期看个人网站是一份需要持续维护的数字资产代码可控性很重要。第二是自定义边界来得太快。Framer 的组件、动效和交互模板确实强但一旦你想做超出它抽象层的事情比如自定义路由逻辑、接入特殊脚本、精细控制结构化数据就会感到阻力。这种阻力不是“再写一行代码”就能解决的而是你得绕开平台本身的封装。第三是成本结构。Framer 采用订阅制套餐会对项目数、访问流量和站点数量做限制。对个人网站来说月付成本不高但按年累计就不是一笔小开销。相比之下代码方案的固定成本主要是域名和托管一年的费用通常更低。第四是 SEO 与性能的可控性。Framer 能做好基础 SEO但如果你对日志、结构化数据、CWV 性能指标、路由复用有更高要求代码方案可以精细到每一个 HTML 标签而可视化工具只能停留在平台允许的配置范围内。所以迁移的核心理由不是“Framer 不好”而是它被放错了位置。它更适合做原型、营销活动页、品牌落地页这类“短周期、重视觉、不深度依赖代码资产”的项目而个人网站这种“长周期、高频迭代、追求完全控制权”的项目更适合交给代码方案。2. 重新理解 Claude Code它不是“AI 写代码”是编程代理很多文章会把 Claude Code 理解成“一个帮你写代码的命令行工具”这个说法太浅了。更准确的定义是Claude Code 是一个运行在终端里的编程代理它不仅能生成代码还能读取项目上下文、跨文件修改、执行命令并在多次尝试中调整自己的方案。我们不妨对比一下普通 AI 聊天工具和 Claude Code 在工作流程上的区别。在聊天工具里你问“请写一个响应式导航栏”它给你一段代码你复制新建文件粘贴再手动处理依赖。整个过程中 AI 只负责“产生片段”其它工程环节全靠你。在 Claude Code 里你在某个项目目录下启动它然后说“帮我给这个 React 项目加一个响应式导航栏项目用的是 Tailwind”它会先读取项目结构、找到路由配置和样式总入口然后动手修改对应的文件最后运行构建命令来确认没有报错。你做的事从“执行代码”变成了“描述意图 审查结果”。这种工作模式对建站的影响是结构性的它不再只生成“一次性代码片段”而是围绕你的项目上下文做增量修改。它可以把一个复杂需求拆成多个小步骤逐步执行而不是一次性输出一大堆代码后让你自己整合。它能自己跑命令比如构建、安装依赖、测试并把结果反馈到处理流程中。所以Claude Code 真正降低的成本不是“打字成本”而是“意图到工程实现”的翻译成本。过去你要把设计稿翻译成组件结构、样式方案、路由关系、数据流现在你可以用自然语言把设计意图描述给它由它在项目里落地。这个能力放在个人网站迁移场景里特别合适。个人网站通常规模不大但涉及页面多、内容杂、设计细节多如果用传统的“手写代码”方式重建工作量大如果用可视化工具又回到了平台锁定。而编程代理正好填补了中间地带。3. Framer 与 Claude Code 建站方案对比在动手之前有必要把两套方案摆在同一张表格里做一次冷静的对比。维度Framer 建站Claude Code 代码建站设计上手可视化拖拽无需代码需要基础的前端概念AI 辅助生成内容管理内置 CMS表单配置Markdown / JSON 数据文件完全可控自定义能力受平台组件边界限制代码自由可接入任意脚本SEO 控制平台提供基础配置可精细控制 meta、schema、sitemap页面性能平台统一托管优化空间有限构建产物可控可精细优化长期资产设计数据留在平台代码和内容归自己成本订阅制按项目和流量计费域名 托管费用通常更低AI 协作平台自带 AI 能力Claude Code 深度参与开发全过程从这张表能看出两者并不是“谁彻底取代谁”的关系而是适用场景不同。如果你需要的是两三天就能上线的营销落地页Framer 的效率无可替代。它的模板质量高动效也强你不用关心构建链路和部署细节。如果你的目标是做一个持续迭代的个人网站并且希望拥有全部代码、内容和数据那么 Claude Code 代码方案长期来看更合适。它把“从设计到代码”的转化成本压低之后个人开发者不需要再依赖平台的设计封装。我在这次迁移中采用的是第二套方案。具体技术栈是 Vite React TypeScript内容放在 Markdown 和 JSON 里部署到 Vercel。这个组合对个人网站来说足够轻生态也成熟。4. 迁移前准备内容盘点与设计决策迁移最忌讳的是打开 Claude Code 就直接说“帮我重建网站”。AI 能帮你写代码但不能替你做产品决策。迁移前我先把三件事做完。第一件事盘点页面和内容。我把原站面的所有页面列了一遍首页、关于页、作品集、博客列表、博客详情、联系方式。每一页都记录了核心内容资产包括文案、图片、视频、外部链接。图片和文件先统一下载到本地放到一个临时目录后续迁到新项目的 public 目录。第二件事确认平台依赖。有些内容看似是“网站内容”但实际上是 Framer 平台特性比如平台的表单托管、平台的动画预设、平台的 CMS 数据模型。这些不能在代码方案里一键迁移需要重新实现。我当时把表单改成用现成的表单服务把动画从“平台预设”改成“CSS 动画或轻量动画库”把 CMS 列表改成基于 Markdown 文件的数据目录。第三件事确定设计语言。不用追求一比一还原原站迁移本身就是重新设计的好机会。我把这次迁移要遵守的设计约束提前写成了一份简短说明主色、辅助色、字体栈、间距节奏、圆角大小、页面布局层级。这份说明后来直接喂给了 Claude Code作为生成页面时的设计基础。技术选型方面我给个人网站定的是Vite React TypeScript 做界面React Router 做路由文章内容用 Markdown站点全局配置用 JSON。这套方案对个人开发者最友好构建快生态丰富部署也简单。这些都完成后才进入真正的环境准备。5. Claude Code 环境安装与基础配置5.1 安装 Claude CodeClaude Code 的安装方式以官方文档为准最常见的是通过 npm 全局安装。在终端里执行npm install -g anthropic-ai/claude-code安装完成后先检查版本确认命令可用claude --version如果看到版本号输出说明安装成功。如果你的机器上没有 Node.js需要先安装一个较新的 LTS 版本。可以用node -v确认node -v5.2 登录与密钥配置Claude Code 在工作时需要有对应的账号授权。第一次运行claude命令时会自动进入登录流程按提示操作即可。如果你更习惯用环境变量管理密钥也可以在启动之前设置export ANTHROPIC_API_KEY你的密钥注意密钥不要写进项目仓库也不要提交到 Git 历史里。个人网站项目通常托管在 GitHub 公开仓库密钥泄露会造成账号安全问题。5.3 项目级配置与权限Claude Code 支持通过配置文件控制权限。用户级配置文件在~/.claude/settings.json项目级配置文件在项目根目录的.claude/settings.json。项目级配置的一个实用价值是限制 Claude Code 在项目中的操作范围。下面是一个常见的权限配置示例{ permissions: { deny: [Delete] } }这个配置只做了“拒绝删除”这一条约束目的是防止 Agent 在自动修改过程中误删重要文件。实际可用的权限字段有很多建议以当前版本的官方文档为准不要直接照搬网上找不到出处的配置。保持最小权限原则比全部放开更稳妥。5.4 关于模型配置的提醒Claude Code 会默认使用它适配的模型。配置文件中可以指定model字段但这里有一个非常常见的坑网上搜索到的配置里模型名往往是旧版本或者某个教程作者自己填写的直接复制过来可能会看到类似这样的报错xxx is not a model this version of claude code recognizes意思是当前版本根本识别不了你写的模型名。解决办法很简单使用官方文档列出的模型标识升级 Claude Code 版本而不是在网上乱抄配置。我是在写博客的时候才特别体会到这个提示想要表达的底层含义第三方 API 兼容层、非官方模型名、过时版本都会让这个工具链变得脆弱。5.5 最小可用性测试安装配置完成后先不用急着写网站。进入一个测试目录运行claude然后向它提一个小任务请查看当前目录下的文件列表并简述项目结构。如果它能正常返回结果说明安装、登录、权限和网络链路都是通的。这一步能提前暴露大部分环境问题避免在正式迁移中才发现。6. 用 Claude Code 重构个人网站核心实操6.1 初始化项目我选择在一个全新的空目录里启动迁移这样能让 Claude Code 从零构建避免旧文件干扰。mkdir my-site cd my-site git init然后启动 Claude Codeclaude如果你使用的编辑器是 VS Code也可以在编辑器集成的终端里运行或者在扩展市场搜索并安装 Claude Code 的官方扩展把整套工作流放在编辑器里。6.2 让 Claude Code 初始化项目我给它下达了第一个完整任务请在当前目录初始化一个基于 Vite 的个人网站项目。 技术栈使用 React TypeScript。 请先安装依赖并确认项目能在本地启动。这一步它会帮我们完成npm create、依赖安装、目录初始化等一系列操作。相比手动执行命令这一步给我节省了不少时间。初始化完成后我要求它继续生成页面骨架请创建个人网站的页面骨架 - 顶部导航栏 - Hero 首页首屏区域 - 作品展示区域 - 文章列表区域 - 页脚 页面结构使用 React 组件拆分样式暂时用普通 CSS主题色使用 #4F46E5 留白多整体风格干净简洁。Claude Code 会根据这个描述生成组件目录和基础样式。6.3 生成的核心代码示例以首页 Hero 区域为例。Claude Code 生成的组件经过我确认后大致是这样的结构// 文件路径src/components/Hero.tsx export function Hero() { return ( section classNamehero p classNamehero__kickerFrontend Developer/p h1 classNamehero__title你好我是开发者/h1 p classNamehero__desc 专注于前端开发与交互设计记录技术思考与个人项目。 /p a classNamehero__link href/about 关于我 /a /section ); }对应的样式片段/* 文件路径src/styles/global.css */ :root { --primary: #4f46e5; --text-main: #1f2937; --text-secondary: #6b7280; --space-page: 64px; } .hero { padding: var(--space-page) 0; max-width: 720px; margin: 0 auto; } .hero__kicker { color: var(--primary); font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; } .hero__title { font-size: 48px; line-height: 1.2; margin: 16px 0; } .hero__desc { color: var(--text-secondary); font-size: 18px; line-height: 1.7; }这里有两个关键决策值得说明。第一把颜色、间距等设计变量抽成 CSS 变量。这样后续调整主题色时只改一处即可全局生效。如果不抽变量每个组件的颜色都写死改版时会非常痛苦。第二数据不要写死在组件里。Hero 文案这种一次性内容可以暂时内联但博客列表、作品集这类会持续更新的内容必须抽成数据文件或者 Markdown否则以后每次更新都要改组件代码。6.4 分块生成而不是一次性生成用 Claude Code 做网站时最容易犯的错误是让它“一次性生成整个网站”。一次任务塞进太多需求上下文会很长生成的代码难审查出错了也不好定位。我当时的做法是分四步第一步搭建项目骨架确认能启动。第二步生成首页的布局和样式。第三步逐个生成关于页、作品页、博客页。第四步统一处理路由、导航和页脚。每一步生成完毕后我都会在当前目录跑一次构建命令确认没有报错再进入下一步。这种小步快跑的方式让迁移过程始终处于可控状态。7. 内容迁移与页面扩展从首页到博客首页跑通之后真正的体力活是内容迁移。个人网站的内容通常分三类页面文案、图片资源、博客文章。页面文案可以直接在新页面中重写。图片资源放到public/images目录并通过相对路径引用。博客文章则是迁移的重头戏。7.1 把文章转成 Markdown我在迁移时把所有博客文章统一转成 Markdown 格式放在src/content/articles/目录下。每篇文章单独一个文件--- title: 用 AI 编程代理重构个人网站 date: 2025-02-10 tags: [Claude Code, 建站] --- 这里是文章正文支持标准 Markdown 语法。这种做法的好处是把“内容”和“展示”彻底分离文章本身就是普通文本文件不依赖数据库不依赖内容管理系统Git 天然能记录每一次修改。7.2 用数据文件管理文章列表博客列表页需要读取文章元信息。Claude Code 可以帮你生成一个数据文件// 文件路径src/content/articles/index.ts export interface ArticleMeta { slug: string; title: string; date: string; tags: string[]; excerpt: string; } export const articleList: ArticleMeta[] [ { slug: ai-programming-agent-personal-site, title: 用 AI 编程代理重构个人网站, date: 2025-02-10, tags: [Claude Code, 建站], excerpt: 从 Framer 迁移到代码方案Claude Code 改变了整个工作流。 } ];我把这个数据文件当作“内容索引”组件只负责渲染不负责维护内容。以后新增文章时只需要新增一个 Markdown 文件并在这个索引里加一条记录。7.3 让 Claude Code 生成列表页和详情页我给 Claude Code 下达的下一步指令是请创建一个博客列表页读取 src/content/articles/index.ts 中的文章元信息 渲染成卡片列表。同时创建一个文章详情页路由格式为 /blog/:slug 内容从对应的 Markdown 文件读取。这一段指令里包含了路由约定、数据来源、页面职责。Claude Code 会把路由配置、列表组件、详情组件都创建好。比我手动从头写一遍快得多。8. 运行验证与上线发布网站重建完成后不能只看“页面能打开”就结束。我按照下面这条链路做完整验证。8.1 本地运行npm run dev浏览器访问终端提示的本地地址逐个检查页面首页是否按设计稿展示导航栏跳转是否正常博客列表是否读取到文章文章详情页能否正确渲染 Markdown移动端宽度下布局是否正常8.2 生产构建验证开发模式正常不代表生产构建正常。必须运行npm run build npm run previewbuild会输出生产产物。如果类型检查有错误、依赖缺少、路径配置不对都会在这一步暴露。preview可以让你在本地预览构建产物确认和开发模式表现一致。8.3 部署到 Vercel个人网站的部署方案很多我选用 Vercel因为配置简单、提供免费 HTTPS、支持持续部署。安装 CLI 后在项目根目录运行npm install -g vercel vercelVercel 会自动识别 Vite 项目我只需要选择绑定自己的域名之后每次推到 Git 仓库它都会自动触发部署。8.4 上线后的检查清单上线不等于结束。我整理了一份检查清单你也可以直接复用自定义域名解析是否生效。HTTPS 证书是否自动签发。首页和文章页的 title、description 是否正确。OG 分享卡片是否显示正常。移动端访问是否和白屏。robots.txt 和 sitemap.xml 是否正确生成。文章中的图片是否全部正常加载。旧站的 301 跳转是否已经配置。这套检查做完迁移才算真正完成。9. 常见问题与排查思路Claude Code 在个人网站迁移场景中最常见的几个问题有一定的规律。我把遇到过的高频问题整理成了一张排查表问题现象可能原因排查方式解决方案运行claude时提示 529 错误服务端负载过高或网络波动查看终端完整错误信息确认是限流还是网络问题稍后重试或关闭重试任务后重新发起提示模型名称不识别Claude Code 版本过旧或模型字段配置错误运行claude --version检查配置文件中的 model 字段升级到最新版使用官方文档列出的模型标识提示组织订阅被禁用账号所属组织的订阅策略未开放 Claude Code 权限查看订阅管理后台和账号权限联系管理员开启权限API Key 无效或鉴权失败Key 过期、权限不足或环境变量未生效检查ANTHROPIC_API_KEY环境变量重启终端后重试重新生成 Key 并确认权限范围生成到一半中断单次任务上下文过长或网络中断查看日志定位中断发生时的阶段把大任务拆成小任务分步执行npm 全局安装权限不足当前系统用户没有全局写入权限查看 npm 的错误信息按 npm 官方文档配置全局安装目录生产构建失败依赖版本冲突或路由配置错误运行npm run build查看完整报错统一依赖版本检查路由组件导入路径这些问题的共同点是先看日志再改配置不要盲目重装。Claude Code 的控制台日志和构建输出本身就会给出足够线索。10. 从本次迁移总结出的最佳实践在完整经历过一次从 Framer 到 Claude Code 的迁移后我总结了六条个人网站建设的最佳实践。第一把设计语言写成提示词。不要只说“好看一点”要给具体约束主色、字体、间距、页面结构。Claude Code 的生成质量高度依赖需求描述质量。第二跨文件修改时先确认影响范围。编程代理会修改多个文件。在让它执行重要改动之前最好先问它“你准备改哪些文件”再让它动手。小步提交每次改动后都确认一次 Git diff。第三建立 Git 提交习惯。Claude Code 每完成一个功能我就在本地提交一次。这样一旦某次生成结果不理想可以随时回滚不影响其它页面。第四内容与代码分离。博客文章用 Markdown页面配置用 JSON组件不和具体内容耦合。这个习惯在迁移和维护阶段都会给你极大自由度。第五审查生成的代码不要无脑信任。AI 生成的代码整体可用但可能有冗余依赖、缺失的错误处理、不合理的命名。尤其在涉及路由和鉴权逻辑时必须有开发者人工审查。第六把安全和备份放在前面。生产环境不要用匿名密钥个人网站托管平台要开好回滚能力本地保留完整备份。小站也不能忽略这些基础工程保障。如果你目前还在 Framer 和代码方案之间摇摆我的建议很直接不要立刻做全站迁移先挑一页比如博客列表页或者关于页用 Claude Code 在本地重建一次。跑通这个最小闭环后你再判断是否值得把整个站点迁出来。这个成本很低但获得的判断信息是最真实的。