零代码建站：用Claude Code打造高级感个人网站

AI建站的模板化困境

用AI生成网站已经不是新鲜事，但一个普遍的痛点是——AI直接生成的网页往往千篇一律，模板感极强，别人一眼就能看出「这是AI做的」。如何让AI建站既快速又有个性、有质感？

本文将分享一套实用的Vibe Coding工作流：通过Claude Code配合专业UI设计规范（Skills），在10分钟内搭建一个视觉效果出色的个人品牌网站。整个过程无需编程基础，特别适合教师、自由职业者等需要个人品牌展示的人群。

什么是Vibe Coding？ Vibe Coding是2025年初由OpenAI联合创始人Andrej Karpathy提出的编程新范式，核心理念是「完全沉浸在AI的辅助中，用自然语言描述意图，让AI完成实际编码」。与传统编程不同，Vibe Coding的实践者不需要逐行审查代码，而是通过持续对话和迭代反馈来驱动AI产出符合预期的结果。这一概念迅速在开发者和非技术人群中引发共鸣，因为它将编程的门槛从「会写代码」降低到「会描述需求」。

环境准备：三步搭好工作台

第一步：安装代码编辑器

推荐使用 Trae CN（国内版免费），它是一款代码编辑器，最大的好处是可以在Claude Code编写代码时，通过目录结构实时查看代码变更，直观了解AI的编码过程。

安装方式很简单：打开Trae CN官网，根据操作系统下载对应版本，按常规软件流程安装即可。

第二步：创建项目文件夹

在本地磁盘创建一个项目文件夹，例如 D:/webcodingdemo/t-shirt-demo，然后在其中：

1. 新建一个 index.html 文件——这是网站的源代码文件
2. 创建 docs 文件夹，放入个人简介的 .md 文档

个人简介文档可以自己撰写，也可以把现有简介发给任意AI工具，让它生成Markdown格式的文档。文档内容包括：个人照片、联系信息、擅长领域、教育经历、技能特长、荣誉奖项等。

第三步：安装两个关键Skills

这一步是让网站从「AI味」变成「设计感」的核心，也是整个零代码建站流程中最关键的环节。需要安装两个Skills（技能包）：

Skills机制的本质 Skills本质上是结构化的系统提示词（System Prompt）集合，通过标准化接口注入到AI代理的上下文中。当AI编程工具加载某个Skill后，它会在每次对话前自动获得该Skill定义的设计原则、代码规范和最佳实践约束。这类似于给AI「预装了一位专业顾问」——UI/UX Design Skill相当于让一位资深视觉设计师全程参与，Frontend Design Skill则确保代码结构符合工程化标准。Skills的复用性（Global作用域）使其成为个人AI工作流中的「可积累资产」。

1. UI/UX Design Skill

打开 skills.sh 网站，搜索 uiux.comax，点击复制安装命令。在Trae CN中打开终端，粘贴命令并回车。安装时可以选择关联的Agent工具（如Claude Code、Open Code等），作用范围建议选择 Global（全局可用），这样以后其他项目也能复用。

2. Frontend Design Skill

同样在skills.sh搜索 frontend-design，按相同步骤安装。

这两个Skills的作用是为Claude Code提供专业的UI/UX设计规范和前端开发最佳实践，让生成的代码在视觉层面达到专业水准。

核心操作：用提示词驱动高质量网页生成

选择设计参考模板

安装好UI/UX Skill后，进入其案例展示页面，里面有大量不同风格的设计范例。本文选择的是 EDU Platform（教育平台） 风格，非常适合教师类个人网站。

点击「显示提示词」可以获取该风格对应的设计提示词，这段提示词包含了配色方案、布局结构、交互细节等设计规范。

编写完整提示词

将以下要素整合成一条完整的提示词发送给Claude Code：

1. 指定Skills：要求使用UI/UX Design和Frontend Design两个Skill
2. 设计参考：粘贴EDU Platform的风格提示词，明确「只参考风格，不照搬内容」
3. 内容来源：指向docs目录下的个人简介.md文档
4. 技术栈：指定使用纯HTML + Tailwind CSS（当前AI编码的主流方案）
5. 图标库：使用Bootstrap Icons在线图标库
6. 输出要求：生成单个文件，代码写入index.html

这条提示词的设计逻辑值得注意：风格与内容分离。

为什么要「风格与内容分离」？ 这是提示词工程（Prompt Engineering）中的一项重要设计原则，借鉴自传统软件架构中的「关注点分离」思想。在网站生成场景中，视觉风格（配色、排版、布局节奏、交互细节）和页面内容（文字、数据、个人信息）是两个独立维度。将两者混在一条提示词中往往导致AI在两个目标之间妥协，产出平庸结果。而明确拆分——风格来源指向专业设计模板，内容来源指向结构化文档——能让AI在各自维度上充分发挥，最终融合时质量更高，这也是本文工作流能突破「AI模板化」困境的根本原因。

风格来自专业设计模板，内容来自个人简介文档，两者通过Claude Code融合，既保证了视觉质量，又确保了内容的个性化。这也是Vibe Coding区别于普通AI建站的关键所在。

Claude Code是什么？ Claude Code是Anthropic推出的命令行AI编程工具，与GitHub Copilot等代码补全工具不同，它能够理解整个项目上下文、读写本地文件、执行终端命令，并完成从需求分析到代码生成的完整开发链路。其底层模型Claude 3.5/3.7 Sonnet在代码生成基准测试中表现突出，尤其擅长前端HTML/CSS生成和多文件项目协调，是目前Vibe Coding工作流中最常被采用的AI编程代理之一。

等待AI编码完成

在终端输入 code 进入Claude Code，粘贴提示词后回车。AI会经历以下过程：

• 读取本地的个人简介文档
• 根据设计规范规划页面结构
• 生成完整的HTML代码并写入index.html

整个过程大约需要几分钟。中间可能会弹出权限请求（如读写文件），直接选择「Yes」即可。

预览与优化：让网站更完美

安装Live Server插件

生成完成后，推荐通过 Live Server 插件预览网站，而不是直接双击HTML文件打开。原因有二：

1. 操作更便捷，支持实时刷新
2. 图片等资源的文件路径处理更准确

安装方法：在Trae CN的扩展商店搜索「Live Server」，安装第一个结果。安装后右击index.html，选择「Open with Live Server」即可在浏览器中预览。

迭代优化建议

首次生成的个人网站已经具备完整的模块：个人头像区、联系信息、擅长领域、教育经历、技能展示、荣誉奖项、联系方式等。但每次生成的布局可能略有不同，如果对某些细节不满意，可以通过以下方式优化：

• 追加对话：直接告诉Claude Code你想修改的部分，比如「把主色调改为深蓝色」「将技能模块改为卡片式布局」
• 提供参考截图：找到心仪网站的页面截图，让AI模仿其布局和样式
• 替换内容：将MD文档中的虚拟信息替换为真实的个人资料和照片

Vibe Coding的正确打开方式

这套零代码建站工作流的核心思路可以概括为三个关键点：

1. 用Skills提升AI的设计素养——不是让Claude Code随意发挥，而是给它专业的设计规范作为约束
2. 风格与内容分离——从专业模板库选择视觉风格，从个人文档提供内容素材
3. 单文件输出——HTML + Tailwind CSS的组合让部署极其简单，一个文件就是一个完整网站

为什么选择HTML + Tailwind CSS？ Tailwind CSS是一个「原子化CSS框架」，它不提供预设的UI组件，而是提供数百个细粒度的工具类（utility classes），开发者通过在HTML标签上直接组合这些类名来实现样式。例如 class="bg-blue-500 text-white rounded-lg p-4" 就能完成一个蓝色圆角卡片的样式定义。这种方式对AI生成代码极为友好：AI无需维护独立的CSS文件，所有样式内联在HTML中，单文件即可完整运行，大幅降低了文件管理复杂度，也是当前AI编码领域的主流前端技术选型。

对于教师、咨询师、设计师等需要个人品牌展示的职业人群来说，这种方式的性价比极高：零代码基础、10分钟完成、视觉效果媲美专业设计。更重要的是，它打破了「AI生成 = 模板化」的刻板印象，证明了通过合理的提示词工程和Vibe Coding方法论，AI完全可以产出有个性、有质感的个人网站作品。

核心要点

• 通过安装UI/UX Design和Frontend Design两个Skills，为AI提供专业设计规范，避免生成模板化网页
• 采用「风格与内容分离」策略：从专业模板库选择视觉风格，从个人Markdown文档提供内容素材
• 技术栈选择HTML + Tailwind CSS单文件方案，零代码基础也能快速部署个人品牌网站
• 通过追加对话或提供参考截图的方式持续优化网站细节，实现个性化定制
• 推荐使用Trae CN编辑器配合Live Server插件，实现代码实时预览和便捷调试