把个人网站从 Framer 迁到 Claude Code 重新设计了一遍我的结论是这条路可行但不是简单的“换工具”而是把整套建站工作流换掉。Claude Code 不是 Framer 那种可视化编辑器它是跑在终端里的编程智能体会直接读项目文件、创建页面、改样式、跑命令。迁移完成后网站从 Framer 托管的页面变成了一组可以由 Git 管理的静态文件样式、SEO、响应式布局都回到自己手上。这篇记录适合正在用 Framer、但觉得模板和订阅限制越来越难受的人也适合想用 Claude Code 做真实项目、还没想清楚从哪下手的人。我会按实际执行的顺序写迁移前怎么判断、Claude Code 怎么装怎么配、从 Framer 迁到静态站点时怎么拆任务、部署和验收要看哪些指标最后是报错排查和边界提醒。1. 迁移前先想明白Framer 和 Claude Code 到底谁取代谁1.1 Framer 解决什么问题Claude Code 解决什么问题Framer 是可视化网页设计和发布平台优点是拖拽、模板、动效、一键发布适合不想碰代码的人快速做一个品牌站或落地页。但缺点同样明显想改一个超出模板范围的交互得研究它的内置逻辑网站托管在平台体系里SEO、性能、代码控制力、数据导出都会受限。Claude Code 是 Anthropic 推出的命令行编程智能体。你可以把它理解为一个能在终端里读项目、写文件、执行命令的“结对程序员”。它本身不是网页设计工具但能直接生成 HTML、CSS、JavaScript、Markdown 和各类配置文件。对这次迁移来说它的价值不是“比 Framer 更会拖拽”而是“所有页面都能以代码形式被版本管理”。所以这里说的“取代”更准确的说法是把个人网站的生成方式从可视化平台迁移到代码工作流。Claude Code 负责把页面代码写出来你自己做决策和验收。1.2 适合迁移的人和不适合迁移的人先说适合的画像能接受命令行操作至少跑过 npm 或 git 命令。会写一点 Markdown能看懂 HTML 结构大概长什么样。网站以内容呈现为主比如个人介绍、作品集、博客、项目展示。对站点有长期维护计划想要样式可控、部署独立。不适合的情况完全没碰过代码连终端是什么都不知道。Claude Code 能写代码但不能替你判断设计好坏和部署环境。只是需要一个两三天就能上线的活动页Framer 和模板站仍然更快。网站重度依赖后端逻辑比如用户登录、支付、数据库读写。Claude Code 能生成部分后端代码但整体工程复杂度会立刻上升。我的建议是如果你只是想做一个展示型个人站而且愿意学一点点命令行和 GitClaude Code 这条路可以走如果目标只是“先有个页面”就别折腾迁移。1.3 迁移前后网站形态对比做个简单的对比方便判断自己是否真的需要迁移维度Framer 工作流Claude Code 静态站工作流页面编辑可视化拖拽改代码 / 对话生成代码样式控制受模板和组件限制完全由 CSS 控制站点托管平台托管静态托管平台或任意静态服务器版本管理平台自带历史代码导出有限Git 可完整追溯SEO 控制基础设置有时不够灵活可以自由写 meta、JSON-LD、sitemap学习门槛较低需要命令行和基础代码知识改版速度新页面上手快前期慢后面积累组件后加快不是说 Framer 不好而是它更适合“不想维护代码”的场景。如果你已经开始在意代码可控性那就能理解为什么有人会选择迁出来。2. 安装和配置 Claude Code先把最小任务跑通2.1 前置条件和机器要求Claude Code 本质上是 Node.js 命令行工具所以先确认机器上有可用的 Node.js 环境。建议安装 LTS 版本Windows、macOS、Ubuntu 都可以跑。Windows 上建议用 PowerShell 或 Windows TerminalmacOS 用自带终端Ubuntu 习惯用哪款都行。配置方面不用对硬件有太高要求。CPU 不差、内存 8GB 以上就够平时使用。它不是一个本地大模型工具真正负责推理的是云端模型服务本地主要负责文件读写和命令执行。这也是为什么不少人误以为装完 Claude Code 就能离线用——它还是需要可靠的模型接口和账号权限的。如果你没有对应账号或可用的订阅、API 权限VSCode 插件、桌面端同样无法正常工作。这和工具本身无关是模型服务账号的问题。2.2 安装命令与常见路径问题常见的安装方式是通过 npm 全局安装npm install -g anthropic-ai/claude-code安装完成后在终端里进入你的项目目录执行claude第一次运行会提示你登录或绑定账号按指引完成即可。安装后如果提示could not locate the claude cli on path通常不是工具坏了而是终端找不到claude这个命令先确认 npm 全局安装目录在哪。确认该目录已经加入系统的 PATH。重启终端再试。如果是 Windows还要注意 npm 全局目录路径是否包含中文字符或空格。我建议装好后先在一个空目录里跑一次claude随便问一句“你好请确认你能读取当前目录下的文件”。能正常回复再进后面的站点迁移不要一上来就拿真实网站测试。2.3 模型接入配置和模型名识别Claude Code 默认使用官方模型服务。也有开发者会把它接到其他模型供应商这时候最常碰到的报错是some-model-name is not a model this version of claude code recognizes这句话看起来吓人实际上多数是配置里的模型名写错了或者当前 Claude Code 版本不认识这个模型名。默认模型服务的场景里问题通常出在本地配置或环境变量覆盖第三方模型服务的场景里要重点检查三样东西模型名是否填成了对话界面里的“别名”而不是接口层面的模型标识。BaseURL 是否正确是否写成了带多余路径的地址。工具版本是否太新或太旧导致模型名单不匹配。还有开发者会借助配置切换工具比如社区里常见的 CCSwitch在不同供应商之间切换。这类工具真正管理的是接口地址、模型名、密钥等配置切换后能不能跑通仍然取决于供应商接口和模型名是否匹配。如果你在官方账号下也遇到模型名不识别我的排查顺序是先看启动日志里的模型名再看环境变量再看全局配置文件最后看工具版本。2.4 第一次对话测试配置完成后的最小验证我建议这样做claude然后让它做一件小事比如“在当前目录创建一个 readme.md内容是一段项目介绍”。做完检查文件是否真的存在、内容是否正常。这一步能同时验证命令能启动。模型能正常响应。Claude Code 有权限写文件。当前目录的路径没问题。如果这一步都过不了先不要思考网站重构的问题回到环境和权限验证。3. 从 Framer 迁到静态站点我是怎么拆任务的3.1 盘点旧站别直接复制代码很多人迁移的第一步是“把 Framer 页面的代码复制出来”实际上大多数 Framer 页面并不能直接导出成一份干净可维护的静态代码。可视化平台生成的代码往往和平台运行时深度绑定直接复制到静态站里会有一堆依赖问题。更稳的做法是盘点内容资产有哪些页面首页、关于、作品集、博客、联系方式逐个列出来。每页有哪些模块导航、主视觉、正文、案例卡片、页脚。有哪些资源图片、文件、字体、SEO 标题和描述。哪些内容是长期不变的哪些需要持续更新。把这份清单整理成一个 Markdown 文件放在项目目录里。后面给 Claude Code 描述任务时直接告诉它“参考 site-map.md 来生成页面结构”比在对话里反复描述更省事。3.2 用 Claude Code 生成站点骨架我给个人站选的是静态站生成器这类工具能把组件和页面内容编译成纯静态 HTML。Claude Code 在这个阶段能帮你做初始化项目依赖。创建统一的目录结构。配置基础路由和页面集合。把 Tailwind 之类的样式方案接入项目。你可以直接对 Claude Code 说“在当前目录初始化一个静态网站项目页面包括首页、关于、博客、作品集。使用响应式布局移动端优先。导航包含四个入口页脚包含社交媒体链接。”第一次运行时先让它在本地启动开发服务器npm run dev然后打开浏览器看页面是否正常显示。这个阶段不需要追求设计效果只要证明“项目能跑起来、页面能打开、文件结构能看懂”就够了。3.3 页面迁移顺序主页、内容页、详情页我一般不会一次性让 Claude Code 生成全部页面而是按依赖关系拆先做全局布局导航、页脚、公共样式。再做列表页博客列表、作品集列表因为结构重复度高最容易验证模板逻辑。再做详情页博客文章详情、作品详情。最后做首页首页通常包含多个功能块信息层级最复杂。每完成一个页面就打开浏览器看一眼确认结构没乱再继续。如果一口气让 Claude Code 生成 10 个页面后面排查哪里错会很痛苦。3.4 内容迁移和资源整理文本内容迁移相对简单。把旧站页面上需要保留的文字复制出来整理成 Markdown 文件。图片和文件资源单独放在public或assets目录命名规则建议用英文小写加连字符避免中文文件名引发编码问题。这里最容易忽略的是 SEO 信息。Framer 里可能配置了不少页面的标题、描述、分享图迁移到静态站时要逐个页面检查。你可以让 Claude Code 为每个页面生成统一的 SEO 信息格式再把旧站的标题、描述填进去。实操提示迁移内容时不要直接把旧站页面抓取出来的全文粘贴到一个大文件里。最好按类型拆分比如 posts 目录存文章projects 目录存作品数据层和 UI 层分开后面改版会省很多事。4. 重新设计的关键步骤描述需求、检查输出、迭代4.1 把设计目标写成 Claude Code 能理解的任务Claude Code 能听懂自然语言但描述越具体输出越接近预期。比如“把首页做得高级一点”这种话运行结果很难判断。更好的描述是主视觉区域需要一句话介绍 两个按钮按钮分别指向“作品集”和“联系我”。作品卡片显示图片、项目名称、年份、一句话描述。导航在桌面端显示完整文字移动端显示汉堡按钮。页面间距、圆角、颜色风格尽量统一。我会把设计目标先列成清单再让 Claude Code 逐个实现。每改完一个点看一次页面效果不要同时铺很多改动。4.2 响应式布局、导航、SEO 的检查标准设计完成后直接“感觉还行”是不够的。我通常会检查这几个点浏览器宽度分别拉成 375px、768px、1440px看内容是否溢出。导航在移动端是否可用按钮点击区域是否足够大。每个页面的title和 meta description 是否唯一。图片有没有设置宽高比避免加载时布局跳动。文章页的正文阅读宽度是否合理行高和字号是否适合长时间阅读。这些检查不复杂但能拦住 80% 的“看起来好用、实际很别扭”的情况。4.3 批量修改组件的做法页面多起来之后逐页改会很累。正确做法是把重复模块抽成组件让 Claude Code 只改组件文件所有引用它的页面自动更新。比如导航栏只需要维护一个组件文件。需要加一个链接时让 Claude Code 修改组件并检查所有页面是否仍然正常。改完后跑一次构建命令确认没有编译错误。如果 Claude Code 在一次修改中动了很多文件我会让它先列出改动清单再执行。你可以直接问它“这次改动会影响哪些文件”然后扫一眼清单判断改动范围是否合理。4.4 验证本地预览、Lighthouse、浏览器尺寸本地预览没问题后我会用浏览器开发者工具跑一轮性能检查也会看 Lighthouse 的分数重点不是分数本身而是有没有明显的性能问题比如首屏图片过大。第三方脚本阻塞渲染。CSS 文件体积异常。没有做基础缓存和压缩。静态站生成器一般会把 CSS、JS 压缩好但图片压缩往往需要额外处理。遇到单张图片几 MB 的情况先压缩图片再调代码。5. 部署与验收从本地到线上5.1 构建命令和输出目录本地开发跑通不代表线上没问题。发布前先确认构建命令。静态站项目一般会在package.json里配置npm run build构建完成后会输出一个静态目录常见的是dist也有项目直接输出到public。具体以你项目的构建配置为准。我会在部署前先执行一次构建把输出目录里的文件数量和体积扫一遍确认没有异常大的文件。接着把构建产物放到本地预览里再点一轮主要页面确保不是“开发模式正常构建后样式丢失”。5.2 部署到静态托管平台静态站可以部署到各种静态托管平台比如 GitHub Pages、Netlify、Vercel、Cloudflare Pages 等。流程基本相似把项目推送到 Git 仓库。在托管平台导入仓库。配置构建命令和输出目录。平台自动部署生成访问地址。绑定自己的域名更新 DNS 记录。第一次部署时最容易出错的点是构建命令或输出目录没写对导致部署成功后打开是空白页或 404。我会在部署日志里先看构建步骤是否成功再看访问路径和资源路径是否正确。5.3 验收清单部署完成后我建议按这个顺序验收域名能正常打开强制刷新后没有样式丢失。从首页点击导航进入每个主要页面。博客列表能跳转到文章详情。移动端和桌面端分别操作一遍。浏览器地址栏输入旧站网址确认旧站是否还需要保留跳转。看托管平台有没有部署失败警告。检查 SEO 信息是否生效比如搜索站点标题是否会显示成预期文字。如果迁移前旧站已经有一定的访问量建议保留旧站一段时间或把旧站根路径设置为公共通知页面告诉访问者网站已经搬家。直接在线上删除旧站容易丢失老链接的访问入口。6. 常见报错和排查顺序6.1 claude CLI 找不到报错样例是failed to run claude code: error: could not locate the claude cli on path这个报错在 VSCode 插件里也比较常见。原因基本都是终端找不到claude命令。排查顺序在终端里执行where claude或which claude看路径是否存在。检查 npm 全局安装目录是否在 PATH 里。重启终端或编辑器让新的 PATH 生效。如果之前用非 npm 方式安装确认路径冲突。这类问题跟模型能力没有任何关系先改路径再重启通常能解决。6.2 模型名不被识别报错格式类似deepseek-v4-pro is not a model this version of claude code recognizes看到这个提示先不用慌。它表示当前版本认识不到这个模型名。我会按顺序查当前 Claude Code 版本是多少用claude --version查看。配置文件里的模型名是不是拼写错误。环境变量里是否设置了覆盖模型名。第三方模型接口的 BaseURL 是否正确。如果模型名是对的但版本太旧升级 Claude Code 后再试。不要把这个问题当成“工具坏了”它更像是配置漂移。6.3 529 和请求超时运行过程中有时会看到类似 529 或请求超时的提示。这通常说明模型服务端负载较高或当前网络状态不够稳定。我的处理方式先等几分钟重试一次不要连续重发同一请求。把单次任务拆小比如从“生成整个站点”改成“只生成主页结构”。检查是不是同时跑了多个长任务导致请求排队。如果频繁出现需要考虑网络环境是否稳定或者换到更空闲的时间段再操作。6.4 订阅和权限提示有些团队环境会提示your organization has disabled claude subscription access for claude code这说明账号或组织策略限制了 Claude Code 的使用。个人用户先查自己的订阅状态团队用户需要找管理员确认是否允许启用 Claude Code。这个问题在工具层面解决不了。遇到账号、权限、订阅相关提示时最有效的动作是确认三件事账号是否有对应服务权限、模型服务是否可用、本地配置是否指向了正确的账号。6.5 输出质量不稳定怎么办页面代码生成出来但没有达到预期最常见的不是工具问题而是任务描述太宽。比如“设计一个美观的首页”这种描述生成结果随机性很大。我会做三件事把任务拆小一次只改一个区域比如“只改 hero 区域的标题字号和间距”。给 Claude Code 提供参考结构比如“在 projects 文件夹已有 3 篇 markdown请按日期倒序生成列表”。让 Claude Code 先输出修改方案确认思路后再写入文件。这样能大幅减少来回返工的时间。7. 哪些场景不要急着用 Claude Code 取代 Framer7.1 零基础用户如果你完全不了解命令行、npm、Git也没有意愿去学Claude Code 很难成为主力建站工具。它能生成代码但遇到路径问题、部署问题、样式问题时你还是需要理解基础概念才能排查。零基础用户建议先用可视化工具把几个页面做起来同时慢慢学一点 HTML 和命令行再考虑迁移。7.2 对像素级视觉要求高Claude Code 擅长生成结构清晰、复用性好的代码但很精细的视觉设计比如惊艳的动效、复杂的排版细节、品牌级设计系统还是需要人工调优。它能提高“从零到可用”的速度但不能替你做“从可用到惊艳”的设计判断。7.3 需要复杂后端逻辑个人介绍站和博客用静态站生成器非常合适。但如果是会员系统、电商、多用户内容管理这类站点工程复杂度会明显提升。Claude Code 可以生成部分后端代码但数据库设计、权限、支付、部署监控都需要专业开发和维护不要指望一条命令解决。7.4 内容量大且没有规范如果网站有几百篇文章而旧站内容结构混乱、大量页面缺失标题、图片链接失效直接迁移会非常痛苦。我的建议是先花时间把内容整理成结构化格式再迁移到新站。否则 Claude Code 生成的代码再干净内容层也是乱的后期维护还是寸步难行。整个迁移跑下来我最深的感受是真正值得替代的不是 Framer 这个工具而是过去那种“页面改版要重新拖一遍”的工作方式。Claude Code 把工作重心从视觉编辑挪到了需求描述和结果验收上网站也从此变成了可版本管理、可编译、可部署的代码项目。如果你也想试一试不要一上来就试图把整个网站迁完。先装好 Claude Code跑通一个最小页面再把旧站内容慢慢搬过来。个人网站的价值始终在内容和表达上工具只是负责把输出这件事变轻。 
长河君 · 2026/9/2 1:49:54 · 阅读 1.2k 从 Framer 迁移到 Claude Code：静态网站重构的完整实践指南
把个人网站从 Framer 迁到 Claude Code 重新设计了一遍我的结论是这条路可行但不是简单的“换工具”而是把整套建站工作流换掉。Claude Code 不是 Framer 那种可视化编辑器它是跑在终端里的编程智能体会直接读项目文件、创建页面、改样式、跑命令。迁移完成后网站从 Framer 托管的页面变成了一组可以由 Git 管理的静态文件样式、SEO、响应式布局都回到自己手上。这篇记录适合正在用 Framer、但觉得模板和订阅限制越来越难受的人也适合想用 Claude Code 做真实项目、还没想清楚从哪下手的人。我会按实际执行的顺序写迁移前怎么判断、Claude Code 怎么装怎么配、从 Framer 迁到静态站点时怎么拆任务、部署和验收要看哪些指标最后是报错排查和边界提醒。1. 迁移前先想明白Framer 和 Claude Code 到底谁取代谁1.1 Framer 解决什么问题Claude Code 解决什么问题Framer 是可视化网页设计和发布平台优点是拖拽、模板、动效、一键发布适合不想碰代码的人快速做一个品牌站或落地页。但缺点同样明显想改一个超出模板范围的交互得研究它的内置逻辑网站托管在平台体系里SEO、性能、代码控制力、数据导出都会受限。Claude Code 是 Anthropic 推出的命令行编程智能体。你可以把它理解为一个能在终端里读项目、写文件、执行命令的“结对程序员”。它本身不是网页设计工具但能直接生成 HTML、CSS、JavaScript、Markdown 和各类配置文件。对这次迁移来说它的价值不是“比 Framer 更会拖拽”而是“所有页面都能以代码形式被版本管理”。所以这里说的“取代”更准确的说法是把个人网站的生成方式从可视化平台迁移到代码工作流。Claude Code 负责把页面代码写出来你自己做决策和验收。1.2 适合迁移的人和不适合迁移的人先说适合的画像能接受命令行操作至少跑过 npm 或 git 命令。会写一点 Markdown能看懂 HTML 结构大概长什么样。网站以内容呈现为主比如个人介绍、作品集、博客、项目展示。对站点有长期维护计划想要样式可控、部署独立。不适合的情况完全没碰过代码连终端是什么都不知道。Claude Code 能写代码但不能替你判断设计好坏和部署环境。只是需要一个两三天就能上线的活动页Framer 和模板站仍然更快。网站重度依赖后端逻辑比如用户登录、支付、数据库读写。Claude Code 能生成部分后端代码但整体工程复杂度会立刻上升。我的建议是如果你只是想做一个展示型个人站而且愿意学一点点命令行和 GitClaude Code 这条路可以走如果目标只是“先有个页面”就别折腾迁移。1.3 迁移前后网站形态对比做个简单的对比方便判断自己是否真的需要迁移维度Framer 工作流Claude Code 静态站工作流页面编辑可视化拖拽改代码 / 对话生成代码样式控制受模板和组件限制完全由 CSS 控制站点托管平台托管静态托管平台或任意静态服务器版本管理平台自带历史代码导出有限Git 可完整追溯SEO 控制基础设置有时不够灵活可以自由写 meta、JSON-LD、sitemap学习门槛较低需要命令行和基础代码知识改版速度新页面上手快前期慢后面积累组件后加快不是说 Framer 不好而是它更适合“不想维护代码”的场景。如果你已经开始在意代码可控性那就能理解为什么有人会选择迁出来。2. 安装和配置 Claude Code先把最小任务跑通2.1 前置条件和机器要求Claude Code 本质上是 Node.js 命令行工具所以先确认机器上有可用的 Node.js 环境。建议安装 LTS 版本Windows、macOS、Ubuntu 都可以跑。Windows 上建议用 PowerShell 或 Windows TerminalmacOS 用自带终端Ubuntu 习惯用哪款都行。配置方面不用对硬件有太高要求。CPU 不差、内存 8GB 以上就够平时使用。它不是一个本地大模型工具真正负责推理的是云端模型服务本地主要负责文件读写和命令执行。这也是为什么不少人误以为装完 Claude Code 就能离线用——它还是需要可靠的模型接口和账号权限的。如果你没有对应账号或可用的订阅、API 权限VSCode 插件、桌面端同样无法正常工作。这和工具本身无关是模型服务账号的问题。2.2 安装命令与常见路径问题常见的安装方式是通过 npm 全局安装npm install -g anthropic-ai/claude-code安装完成后在终端里进入你的项目目录执行claude第一次运行会提示你登录或绑定账号按指引完成即可。安装后如果提示could not locate the claude cli on path通常不是工具坏了而是终端找不到claude这个命令先确认 npm 全局安装目录在哪。确认该目录已经加入系统的 PATH。重启终端再试。如果是 Windows还要注意 npm 全局目录路径是否包含中文字符或空格。我建议装好后先在一个空目录里跑一次claude随便问一句“你好请确认你能读取当前目录下的文件”。能正常回复再进后面的站点迁移不要一上来就拿真实网站测试。2.3 模型接入配置和模型名识别Claude Code 默认使用官方模型服务。也有开发者会把它接到其他模型供应商这时候最常碰到的报错是some-model-name is not a model this version of claude code recognizes这句话看起来吓人实际上多数是配置里的模型名写错了或者当前 Claude Code 版本不认识这个模型名。默认模型服务的场景里问题通常出在本地配置或环境变量覆盖第三方模型服务的场景里要重点检查三样东西模型名是否填成了对话界面里的“别名”而不是接口层面的模型标识。BaseURL 是否正确是否写成了带多余路径的地址。工具版本是否太新或太旧导致模型名单不匹配。还有开发者会借助配置切换工具比如社区里常见的 CCSwitch在不同供应商之间切换。这类工具真正管理的是接口地址、模型名、密钥等配置切换后能不能跑通仍然取决于供应商接口和模型名是否匹配。如果你在官方账号下也遇到模型名不识别我的排查顺序是先看启动日志里的模型名再看环境变量再看全局配置文件最后看工具版本。2.4 第一次对话测试配置完成后的最小验证我建议这样做claude然后让它做一件小事比如“在当前目录创建一个 readme.md内容是一段项目介绍”。做完检查文件是否真的存在、内容是否正常。这一步能同时验证命令能启动。模型能正常响应。Claude Code 有权限写文件。当前目录的路径没问题。如果这一步都过不了先不要思考网站重构的问题回到环境和权限验证。3. 从 Framer 迁到静态站点我是怎么拆任务的3.1 盘点旧站别直接复制代码很多人迁移的第一步是“把 Framer 页面的代码复制出来”实际上大多数 Framer 页面并不能直接导出成一份干净可维护的静态代码。可视化平台生成的代码往往和平台运行时深度绑定直接复制到静态站里会有一堆依赖问题。更稳的做法是盘点内容资产有哪些页面首页、关于、作品集、博客、联系方式逐个列出来。每页有哪些模块导航、主视觉、正文、案例卡片、页脚。有哪些资源图片、文件、字体、SEO 标题和描述。哪些内容是长期不变的哪些需要持续更新。把这份清单整理成一个 Markdown 文件放在项目目录里。后面给 Claude Code 描述任务时直接告诉它“参考 site-map.md 来生成页面结构”比在对话里反复描述更省事。3.2 用 Claude Code 生成站点骨架我给个人站选的是静态站生成器这类工具能把组件和页面内容编译成纯静态 HTML。Claude Code 在这个阶段能帮你做初始化项目依赖。创建统一的目录结构。配置基础路由和页面集合。把 Tailwind 之类的样式方案接入项目。你可以直接对 Claude Code 说“在当前目录初始化一个静态网站项目页面包括首页、关于、博客、作品集。使用响应式布局移动端优先。导航包含四个入口页脚包含社交媒体链接。”第一次运行时先让它在本地启动开发服务器npm run dev然后打开浏览器看页面是否正常显示。这个阶段不需要追求设计效果只要证明“项目能跑起来、页面能打开、文件结构能看懂”就够了。3.3 页面迁移顺序主页、内容页、详情页我一般不会一次性让 Claude Code 生成全部页面而是按依赖关系拆先做全局布局导航、页脚、公共样式。再做列表页博客列表、作品集列表因为结构重复度高最容易验证模板逻辑。再做详情页博客文章详情、作品详情。最后做首页首页通常包含多个功能块信息层级最复杂。每完成一个页面就打开浏览器看一眼确认结构没乱再继续。如果一口气让 Claude Code 生成 10 个页面后面排查哪里错会很痛苦。3.4 内容迁移和资源整理文本内容迁移相对简单。把旧站页面上需要保留的文字复制出来整理成 Markdown 文件。图片和文件资源单独放在public或assets目录命名规则建议用英文小写加连字符避免中文文件名引发编码问题。这里最容易忽略的是 SEO 信息。Framer 里可能配置了不少页面的标题、描述、分享图迁移到静态站时要逐个页面检查。你可以让 Claude Code 为每个页面生成统一的 SEO 信息格式再把旧站的标题、描述填进去。实操提示迁移内容时不要直接把旧站页面抓取出来的全文粘贴到一个大文件里。最好按类型拆分比如 posts 目录存文章projects 目录存作品数据层和 UI 层分开后面改版会省很多事。4. 重新设计的关键步骤描述需求、检查输出、迭代4.1 把设计目标写成 Claude Code 能理解的任务Claude Code 能听懂自然语言但描述越具体输出越接近预期。比如“把首页做得高级一点”这种话运行结果很难判断。更好的描述是主视觉区域需要一句话介绍 两个按钮按钮分别指向“作品集”和“联系我”。作品卡片显示图片、项目名称、年份、一句话描述。导航在桌面端显示完整文字移动端显示汉堡按钮。页面间距、圆角、颜色风格尽量统一。我会把设计目标先列成清单再让 Claude Code 逐个实现。每改完一个点看一次页面效果不要同时铺很多改动。4.2 响应式布局、导航、SEO 的检查标准设计完成后直接“感觉还行”是不够的。我通常会检查这几个点浏览器宽度分别拉成 375px、768px、1440px看内容是否溢出。导航在移动端是否可用按钮点击区域是否足够大。每个页面的title和 meta description 是否唯一。图片有没有设置宽高比避免加载时布局跳动。文章页的正文阅读宽度是否合理行高和字号是否适合长时间阅读。这些检查不复杂但能拦住 80% 的“看起来好用、实际很别扭”的情况。4.3 批量修改组件的做法页面多起来之后逐页改会很累。正确做法是把重复模块抽成组件让 Claude Code 只改组件文件所有引用它的页面自动更新。比如导航栏只需要维护一个组件文件。需要加一个链接时让 Claude Code 修改组件并检查所有页面是否仍然正常。改完后跑一次构建命令确认没有编译错误。如果 Claude Code 在一次修改中动了很多文件我会让它先列出改动清单再执行。你可以直接问它“这次改动会影响哪些文件”然后扫一眼清单判断改动范围是否合理。4.4 验证本地预览、Lighthouse、浏览器尺寸本地预览没问题后我会用浏览器开发者工具跑一轮性能检查也会看 Lighthouse 的分数重点不是分数本身而是有没有明显的性能问题比如首屏图片过大。第三方脚本阻塞渲染。CSS 文件体积异常。没有做基础缓存和压缩。静态站生成器一般会把 CSS、JS 压缩好但图片压缩往往需要额外处理。遇到单张图片几 MB 的情况先压缩图片再调代码。5. 部署与验收从本地到线上5.1 构建命令和输出目录本地开发跑通不代表线上没问题。发布前先确认构建命令。静态站项目一般会在package.json里配置npm run build构建完成后会输出一个静态目录常见的是dist也有项目直接输出到public。具体以你项目的构建配置为准。我会在部署前先执行一次构建把输出目录里的文件数量和体积扫一遍确认没有异常大的文件。接着把构建产物放到本地预览里再点一轮主要页面确保不是“开发模式正常构建后样式丢失”。5.2 部署到静态托管平台静态站可以部署到各种静态托管平台比如 GitHub Pages、Netlify、Vercel、Cloudflare Pages 等。流程基本相似把项目推送到 Git 仓库。在托管平台导入仓库。配置构建命令和输出目录。平台自动部署生成访问地址。绑定自己的域名更新 DNS 记录。第一次部署时最容易出错的点是构建命令或输出目录没写对导致部署成功后打开是空白页或 404。我会在部署日志里先看构建步骤是否成功再看访问路径和资源路径是否正确。5.3 验收清单部署完成后我建议按这个顺序验收域名能正常打开强制刷新后没有样式丢失。从首页点击导航进入每个主要页面。博客列表能跳转到文章详情。移动端和桌面端分别操作一遍。浏览器地址栏输入旧站网址确认旧站是否还需要保留跳转。看托管平台有没有部署失败警告。检查 SEO 信息是否生效比如搜索站点标题是否会显示成预期文字。如果迁移前旧站已经有一定的访问量建议保留旧站一段时间或把旧站根路径设置为公共通知页面告诉访问者网站已经搬家。直接在线上删除旧站容易丢失老链接的访问入口。6. 常见报错和排查顺序6.1 claude CLI 找不到报错样例是failed to run claude code: error: could not locate the claude cli on path这个报错在 VSCode 插件里也比较常见。原因基本都是终端找不到claude命令。排查顺序在终端里执行where claude或which claude看路径是否存在。检查 npm 全局安装目录是否在 PATH 里。重启终端或编辑器让新的 PATH 生效。如果之前用非 npm 方式安装确认路径冲突。这类问题跟模型能力没有任何关系先改路径再重启通常能解决。6.2 模型名不被识别报错格式类似deepseek-v4-pro is not a model this version of claude code recognizes看到这个提示先不用慌。它表示当前版本认识不到这个模型名。我会按顺序查当前 Claude Code 版本是多少用claude --version查看。配置文件里的模型名是不是拼写错误。环境变量里是否设置了覆盖模型名。第三方模型接口的 BaseURL 是否正确。如果模型名是对的但版本太旧升级 Claude Code 后再试。不要把这个问题当成“工具坏了”它更像是配置漂移。6.3 529 和请求超时运行过程中有时会看到类似 529 或请求超时的提示。这通常说明模型服务端负载较高或当前网络状态不够稳定。我的处理方式先等几分钟重试一次不要连续重发同一请求。把单次任务拆小比如从“生成整个站点”改成“只生成主页结构”。检查是不是同时跑了多个长任务导致请求排队。如果频繁出现需要考虑网络环境是否稳定或者换到更空闲的时间段再操作。6.4 订阅和权限提示有些团队环境会提示your organization has disabled claude subscription access for claude code这说明账号或组织策略限制了 Claude Code 的使用。个人用户先查自己的订阅状态团队用户需要找管理员确认是否允许启用 Claude Code。这个问题在工具层面解决不了。遇到账号、权限、订阅相关提示时最有效的动作是确认三件事账号是否有对应服务权限、模型服务是否可用、本地配置是否指向了正确的账号。6.5 输出质量不稳定怎么办页面代码生成出来但没有达到预期最常见的不是工具问题而是任务描述太宽。比如“设计一个美观的首页”这种描述生成结果随机性很大。我会做三件事把任务拆小一次只改一个区域比如“只改 hero 区域的标题字号和间距”。给 Claude Code 提供参考结构比如“在 projects 文件夹已有 3 篇 markdown请按日期倒序生成列表”。让 Claude Code 先输出修改方案确认思路后再写入文件。这样能大幅减少来回返工的时间。7. 哪些场景不要急着用 Claude Code 取代 Framer7.1 零基础用户如果你完全不了解命令行、npm、Git也没有意愿去学Claude Code 很难成为主力建站工具。它能生成代码但遇到路径问题、部署问题、样式问题时你还是需要理解基础概念才能排查。零基础用户建议先用可视化工具把几个页面做起来同时慢慢学一点 HTML 和命令行再考虑迁移。7.2 对像素级视觉要求高Claude Code 擅长生成结构清晰、复用性好的代码但很精细的视觉设计比如惊艳的动效、复杂的排版细节、品牌级设计系统还是需要人工调优。它能提高“从零到可用”的速度但不能替你做“从可用到惊艳”的设计判断。7.3 需要复杂后端逻辑个人介绍站和博客用静态站生成器非常合适。但如果是会员系统、电商、多用户内容管理这类站点工程复杂度会明显提升。Claude Code 可以生成部分后端代码但数据库设计、权限、支付、部署监控都需要专业开发和维护不要指望一条命令解决。7.4 内容量大且没有规范如果网站有几百篇文章而旧站内容结构混乱、大量页面缺失标题、图片链接失效直接迁移会非常痛苦。我的建议是先花时间把内容整理成结构化格式再迁移到新站。否则 Claude Code 生成的代码再干净内容层也是乱的后期维护还是寸步难行。整个迁移跑下来我最深的感受是真正值得替代的不是 Framer 这个工具而是过去那种“页面改版要重新拖一遍”的工作方式。Claude Code 把工作重心从视觉编辑挪到了需求描述和结果验收上网站也从此变成了可版本管理、可编译、可部署的代码项目。如果你也想试一试不要一上来就试图把整个网站迁完。先装好 Claude Code跑通一个最小页面再把旧站内容慢慢搬过来。个人网站的价值始终在内容和表达上工具只是负责把输出这件事变轻。