TuBrief
Subscribed Channels
Videos
Community

如何将 Claude 编写的代码转化为实际服务

TuBrief Editorial
June 24, 2026
0
Computing/Software

Written with AI assistance from the source video. The video is the authority.

中文한국어EnglishEspañolالعربيةहिन्दीDeutschPortuguêsРусскийBahasa IndonesiaFrançais日本語

Related Video

学会这些惊人的 Claude 设计技巧,打造精美网站14:14

学会这些惊人的 Claude 设计技巧,打造精美网站

AI LABS

More from the community

사내 시스템에 llm api 붙일 때 마주하는 현실적인 한계와 대응법

September 13, 2026

레거시 백엔드에 GPT-6 Astra 붙일 때 예산 승인과 보안 통과를 먼저 끝내는 법이 있습니다

September 13, 2026

에이전트끼리 대화하다 6천만 원 청구서가 나오는 이유

September 13, 2026

사내 RAG 벡터 검색에 Okta 권한 필터를 직접 거는 방법

September 13, 2026

브라우저 에이전트에게 내 구글 계정을 통째로 넘기면 안 되는 이유

September 12, 2026

Apple Won the AI Race

September 12, 2026

Comments (0)

Log in to leave a comment

No posts yet

© 2026 . All rights reserved.

TuBrief
Subscribed Channels
Videos
Community
Log in

如何将 Claude 编写的代码转化为实际服务

防止设计碎片化

Claude 生成的 HTML 文件起初看起来不错,但一旦页面超过 3 个,修改就会变成一场噩梦。为了修改一个字号而去打开 10 个文件简直是浪费时间。请将代码进行模块化拆分。

  1. 创建项目文件夹。将 CSS 放在 /assets/css,图片放在 /assets/img,布局放在 /components 中。
  2. 文件名请仅使用小写字母和连字符,例如 main-header.html。这能减少 Claude 对路径产生误解的可能性。
  3. 在主 HTML 的 标签中放入 ,并在中央统一管理样式。

这样做之后,以后只需修改一次头部文件,修改内容就会立即应用到所有页面。无需再在反复修改文件上浪费时间。

使用 CSS 变量固定调色板

不要在每个组件中直接输入颜色代码。当你想更改按钮颜色时,不必去翻阅成千上万行代码。请改用 CSS 变量。

  1. 打开 /assets/css/global.css 文件。
  2. 定义 3 个核心颜色,例如 :root { --main-color: #000000; --sub-color: #ffffff; }。
  3. 在编写样式时,使用类似 background-color: var(--main-color); 的方式。

以后如果品牌颜色发生变化,只需 3 秒钟修改一个文件即可。所有页面的按钮颜色会同时更新。这比每次手动调整设计要高效得多。

在本地环境中即时确认

如果反复经历“修改代码 -> 回到浏览器 -> 刷新页面”的过程,专注力会很容易被打断。请安装 VS Code 的 Live Server 插件。

  1. 在 VS Code 中安装 Live Server,并点击底部的 Go Live 按钮。
  2. 在浏览器中打开网站,点击鼠标右键 -> 选择“检查”打开开发者工具。
  3. 在 Elements 标签页中即时修改边距或字号。看到满意的效果后,直接将修改后的数值复制到 CSS 文件中即可。

无需刷新页面,实时查看视觉变化。这能将设计修改的时间缩短一半。

强制 Claude 遵守规范

Claude 每次响应请求时生成的代码风格都可能不同。请在开始对话前就定好规则。在项目根目录下创建一个 CLAUDE.md 文件。

  1. 在 CLAUDE.md 中记录 CSS 变量规则和要使用的文件夹结构。
  2. 将常用的按钮或卡片样式定义为 XML 格式(例如:...)。
  3. 当要求 Claude 编写新页面时,只需加上一句:“请遵守 CLAUDE.md 中的规则编写”。

AI 随意乱写代码的情况将显著减少。

使用 Vercel 进行自动部署

不要为服务器设置或复杂的环境配置而烦恼。使用 Vercel,只需上传代码,网站即可直接运行。

  1. 将代码推送到 GitHub。
  2. 在 Vercel 网站上连接你的 GitHub 账号并创建项目。
  3. 之后每次将代码上传到 GitHub,Vercel 都会在 45 秒内反映更改并更新网站。

你无需亲自管理服务器。域名地址会自动生成,如果出现问题,可以随时回滚到之前的版本。现在就开始上传你的代码吧。