设计师零基础Vibe Coding入门：2024精选教程与实战指南

2026-05-27阅读 0热度 0

零基础

设计师个人网站开发实战：从设计稿到上线的完整指南

上一篇文章我们探讨了个人网站的定位与模板选择。现在，我们将进入核心环节：如何将你的设计稿转化为一个功能完整的线上网站。

以往，这需要跨越HTML、CSS、JavaScript乃至各类框架的技术鸿沟，对设计师而言挑战巨大。

如今，Vibe Coding彻底改变了游戏规则。你无需精通语法，只需用自然语言描述设计意图，AI便能生成代码、调试问题并优化效果。

但这并非意味着毫无门槛。清晰的思路与基础认知依然关键，只是技术难度已降至前所未有的水平。

本篇开发指南，我们将首先构建稳固的认知基础。你不必成为工程师，也无需记忆术语，只需理解每一层技术栈的职责，就能确保项目方向正确。

对于设计师而言，你已具备Vibe Coding所需的核心优势：

精通设计语言：布局、间距、色彩、字体——这些你描述需求的词汇，AI能够精准理解。
具备组件化思维：Figma中的变体、实例与自动布局，其逻辑与前端的组件化开发高度一致。
拥有明确目标：设计稿已在手中，你只需清晰地将其转化为开发需求。

接下来，我们将从基础技术概念入手，厘清前后端分工，探讨如何选择AI工具、撰写项目需求文档（PRD），并掌握Vibe Coding的核心协作技巧。

二、开发基础：必须理清的几层逻辑

许多设计师初次使用AI开发项目时，通常会经历从兴奋到困惑的情绪转变。

困惑的根源在于信息过载。当你提出“做一个作品集网站”时，AI的回复可能瞬间涌现出前端、后端、API、数据库、部署、域名等十几个陌生概念。

更大的风险在于，若你自身缺乏清晰的方案，AI并不会主动提醒你“先规划再执行”。它会基于模糊的描述生成一个看似完整的方案，这种“有求必应”极易导致方向性错误。

因此，本节将抛开代码，用设计师的视角梳理这些基础概念。明确每个环节的职责，是高效协作的前提。

1. 网页的基石：HTML、CSS与JavaScript

任何网页的底层都由三种语言构成：HTML、CSS和JavaScript。

以你在Figma中设计的一个卡片组件为例，它包含圆角矩形、图片、标题和按钮。

在代码世界中，三者分工如下：

HTML 定义结构：“此处有一个卡片容器，内含图片、标题文字与按钮。”
CSS 定义样式：“卡片具有圆角、阴影效果、白色背景，标题字号为16px且加粗。”
JavaScript 定义行为：“用户点击此按钮后触发何种交互。”

这是最基础的呈现层。但要构建一个完整的产品，你还需要理解其背后的运行逻辑。

2. 前端、后端与数据库：三层架构解析

前端、后端、数据库是三个紧密协作但又职责分明的层面。

核心概括：前端负责用户所见与操作，后端处理背后的业务逻辑，数据库负责数据的持久化存储。

前端：用户感知层

用户在浏览器中看到和交互的一切，均由前端负责实现。

页面布局、按钮尺寸、文字颜色、悬停动效、点击跳转——所有这些视觉与交互细节都属于前端范畴。换言之，你在Figma中设计的每一个像素，最终都由前端代码呈现给用户。

前端不仅是“让页面好看”，其核心职责是确保用户流程顺畅。你的设计经验——组件化、间距系统、响应式布局——在此能直接转化为开发优势。

后端：业务逻辑层

当用户在页面上执行一个操作（如提交表单）后，发生了什么？

如果只是简单的页面跳转，前端可独立完成。但若涉及数据处理——例如提交联系信息、调用AI接口、保存用户记录——则需要后端介入。

后端负责接收前端的请求，执行相应的处理逻辑（如验证数据、调用外部服务），并将结果返回给前端。它是决定“接下来做什么”的大脑。

对于个人网站而言，后端逻辑通常并不复杂。一个简单的判断标准：若网站仅为内容展示（作品集、个人简介），可能无需后端；若需添加评论、AI对话、用户登录等动态功能，则需后端支持。

请注意区分后端与数据库：后端是“处理者”，数据库是“记录者”。

数据库：数据存储层

没有数据库的网站，每次刷新都会重置状态——用户提交的信息无法留存。

数据库的作用正是持久化存储数据，例如用户账号、留言内容、草稿记录等，确保下次访问时数据依然存在。

对于设计师作品集，好消息是许多场景初期无需数据库。使用Astro等框架生成的静态站点，内容可直接嵌入代码中。

但若未来需要增加如访客留言、用户偏好记忆等功能，则需引入数据库。

实用建议：不必在项目初期搭建数据库。可先用静态数据跑通核心页面与流程，待确认哪些数据确需持久化时再引入。

实例解析：联系表单的三层协作

以个人网站常见的“联系表单”为例，理解三层如何配合：

前端职责：渲染包含姓名、邮箱、留言框及“发送”按钮的表单界面。用户点击后，前端显示“发送成功”或“失败”的反馈。
用户点击“发送”后，前端将表单数据打包，通过API（一种通信接口）发送给后端。
后端职责：接收数据，验证邮箱格式，调用邮件服务发送消息至你的邮箱，并将操作结果（成功/失败及原因）返回前端。
数据库角色：若你需要留存所有留言以便后台查看，后端在发送邮件的同时，会将这条记录写入数据库。

可见，三层各司其职：缺失后端，表单无法提交；缺失数据库，历史记录无法追溯。掌握这种拆分思维，比记忆术语更为实用。

3. 框架与组件库：提升效率的工具

框架是什么？

想象建造一栋房屋：

从零开始 = 手写HTML/CSS/JS（自行设计图纸、采购材料、打地基）。
使用框架 = 采用预制模块化建筑系统（已提供承重结构、水电管线，你只需组合房间）。

常见的前端框架（设计师需了解）：React, Vue, Svelte, Astro。它们提供了组织代码、管理状态、构建界面的高效范式。

组件库是什么？

组件库 = 设计师“组件面板 + 样式系统”的代码实现。

正如Figma中一个“按钮”组件可衍生出主要、次要、禁用等变体，代码中通过指定如 `variant=“primary”` 的属性即可调用。

常用的组件库：Shadcn/ui, Radix UI, Chakra UI, Ant Design。它们提供了一系列开箱即用、可定制且符合设计系统规范的UI组件。

从设计师视角类比：

框架 ≈ 你的Figma文件结构（页面、画板、框架的组织方式）。
组件库 ≈ 你的Figma组件库（按钮、输入框、卡片等可复用设计资产）。

理解这一点，你便能以Figma的思维来理解代码结构。设计时的“提取公共组件”即等同于开发中的“封装复用组件”。

4. 为何推荐 Astro + Tailwind CSS？

我们推荐经过验证的技术组合：Astro框架搭配Tailwind CSS。理由如下：

Astro的核心优势：岛屿架构——仅交互部分加载JavaScript，其余皆为静态HTML。因此首屏加载极快、对SEO友好，非常适合作品集等展示型网站。
Astro的灵活性：框架无关——你可在同一项目中混合使用React、Vue或纯HTML + Tailwind。当需要添加复杂交互（如3D效果）时再引入React，极为灵活。
Tailwind CSS：AI友好的CSS方案——传统CSS需要命名类并分离文件，而Tailwind将样式直接内联于HTML，AI一目了然。其设计令牌（如p-6对应spacing/24）与Figma Variables完美映射，修改配色只需替换配置，效率极高。

5. 网站上线：服务器、部署与域名

本地预览无误后，你的网站仍仅存在于你的电脑中。要使其对外可访问，需理解三个环节：

服务器：一台持续在线、提供网络服务的计算机。你的网站文件需放置于此，他人才能访问。常用平台如Cloudflare、Vercel、Netlify均提供免费额度。
部署：将本地代码上传至服务器并确保其正确运行的过程，即“发布上线”。
域名：用户访问的网址，如yourname.com。没有域名，访问需使用难记的IP地址。

三者关系可理解为：服务器是“空间”，部署是“搬入”，域名是“门牌”。缺一不可。

最简流程：将代码上传至Github -> 在Cloudflare等平台绑定Github仓库 -> 一键部署上线（获得可访问链接）->（可选）绑定自定义域名（可在Cloudflare购买）。

三、AI编程工具选择指南

AI编程的核心是“模型+工具”的组合。模型负责理解意图，工具负责执行操作。

1. IDE 与 CLI 的区别

IDE（集成开发环境）：提供图形化界面（如增强版的VS Code），包含文件树、侧边栏，操作直观。代表：Cursor。
CLI（命令行工具）：基于文本对话的终端工具，专注简洁，灵活性高，能自动化处理复杂任务。代表：Claude Code、Codex。

两者均支持AI直接操作项目文件。实际工作中可搭配使用。

2. 主流工具概览

Cursor：图形化IDE，适合对照Figma设计稿生成组件代码。
Claude Code：命令行工具，理解复杂需求能力强，适合模块级重构。
Codex（OpenAI）：轻量级Agent，能自主执行任务与调试。
Gemini（Google）：免费额度较高，适合快速原型验证。
Kimi, CodeBuddy, TRAE, Qcoder：国产工具，免费额度大，对中文及零基础用户友好。

3. 选择建议

若追求完全免费起步，可优先考虑国产IDE，如TRAE（国内版）或Qcoder。它们免费额度充足，中文支持好，能直接理解Figma风格的自然语言描述，几乎无需额外配置。

若能接受小额付费以获得更佳体验，IDE可考虑Cursor或TRAE国际版。Cursor编辑器体验流畅；TRAE国际版在模型访问与稳定性上有所提升。

若预算有限但追求性价比，CLI工具可优先接入国内模型，如Kimi、GLM、Qwen等。它们价格实惠，新用户优惠多，足以应对调整颜色、替换字体、实现简单交互等日常需求。

若追求强大的项目级处理能力且成本可控，可直接使用Claude Code或Codex。它们在理解复杂需求、多文件重构及项目级调整上表现更为稳定。

实际经验是：多数设计师初期使用TRAE国内版或Kimi即可快速跑通模板、验证效果，之后再决定是否升级。当然，直接使用顶配工具能减少反复修改的内耗，是省时省心的选择。

四、产品需求文档 (PRD) 撰写

先明确需求，再着手执行，这是Vibe Coding中最关键的一步。

PRD（产品需求文档）在Vibe Coding中即给AI的“项目说明书”。它将你的想法转化为结构化要求，指引AI高效工作，减少反复迭代。

许多人初次尝试时，会直接给出“帮我做个网站”的模糊指令。AI虽会开始编写，但很可能偏离你的真实意图：目标用户是谁？核心功能是什么？有哪些设计约束？完成标准如何定义？

PRD正是为了解决这些问题。

你可以将其视为“项目地图”。它无需如公司文档般正式，但必须明确方向、边界与验收标准。尤其对零基础项目而言，PRD能有效避免一个常见陷阱：项目中途偏离初衷，甚至忘记最初目标。

若你的工具支持“规划模式”，可先让AI协助完善PRD。明确方案后再编码，将节省大量后期返工时间。

零基础撰写PRD的三步法：

在项目根目录创建 `PROJECT_PRD.md` 文件。
复制下方通用模板，替换为你自己的内容。
后续每次指示AI修改时，均附带指令：“请参考根目录的 `PROJECT_PRD.md` 文件中的要求，帮我实现……”

通用PRD模板（可直接使用）：

# 项目 PRD

## 项目概述
这个项目要做什么？
一句话说清楚目标，比如：做一个个人网站、一个作品管理工具、一个 AI 小工具、一个活动落地页。

## 目标用户
谁会使用它？
- 主要用户：
- 他们现在遇到的问题：
- 这个项目要帮他们解决什么：

## 核心功能
先列最重要的 3-5 个功能，不要一开始写太多。
- 功能 1：
- 功能 2：
- 功能 3：

## 页面 / 模块结构
这个项目大概由哪些页面或模块组成？
- 页面 / 模块 1：
- 页面 / 模块 2：
- 页面 / 模块 3：

## 设计与体验要求
希望它看起来和用起来是什么感觉？
- 视觉风格：
- 字体 / 色彩 / 间距偏好：
- 需要适配的设备：桌面端 / 手机端 / 平板
- 参考设计稿、截图或链接：

## 技术约束
有哪些已经确定或不希望改动的地方？
- 技术栈：
- 不要改动的文件 / 路由 / 组件：
- 优先使用的组件库或样式方案：

## 素材与数据
项目会用到哪些内容？
- 图片 / 图标 / 视频：
- 文案：
- 示例数据：
- 需要接入的外部服务：

## 验收标准
做到什么程度才算完成？
- 手机端和桌面端都能正常浏览
- 核心流程可以跑通
- 视觉效果接近设计稿或参考图
- 没有明显报错和布局错位

## 暂不做的事情
哪些需求先不做，避免项目变复杂？
- 暂不做：
- 以后再考虑：

拥有PRD后，你的每次对话都可围绕其展开。例如：

“请先阅读 `PROJECT_PRD.md`，然后帮我实现首页第一屏。请注意不要改动PRD中明确暂不开发的功能。”

这能确保AI始终基于项目整体目标、设计规范与边界进行工作，其效果远胜于孤立的漂亮指令。

五、Vibe Coding 核心协作技巧

1. Vibe Coding 的工作流

传统编程路径：学习语法 -> 理解概念 -> 练习编码。

Vibe Coding路径：描述需求 -> AI生成代码 -> 运行验证 -> 迭代调整 -> 完成项目。

关键在于：你无需先掌握全部知识再行动。可以在实现需求的过程中，逐步理解代码逻辑。

2. 让AI处理环境配置

许多人被环境配置（安装Node.js、配置npm等）难住。现在，你只需告诉AI：

“请帮我把这个项目运行起来。”

AI将自动检测环境、安装依赖、启动开发服务器并告知访问地址。你只需提出意图，其余由AI完成。

3. 上下文管理：清晰传达意图

避免模糊指令：“帮我改一下首页”。

应提供清晰上下文：“我想调整首页Hero区域的布局。当前是左文右图结构，希望改为上下结构：上方是标题与简介，下方是头像图片。”

有效上下文的四要素：

目标（期望达成的效果）
现状（当前实际情况）
素材（设计稿、截图、参考链接）
约束（技术栈、设计规范、不可改动的部分）

4. 模型搭配与迭代对话

AI的能力取决于所选模型。实际开发中的常用策略：

使用Claude Code或Codex进行需求梳理、精细调整及多文件重构（理解力更强）。
简单需求与代码编写可使用glm、minimax等性价比较高的模型。但涉及架构与方案设计，能力更强的模型长期来看更省事。

迭代对话是Vibe Coding的精髓。不要追求一次完美，而应通过多轮“反馈 -> 调整”逐步逼近目标。每次修改时，都将PRD发送给AI，确保其牢记整体风格。

5. 善用 Skills、MCP 与 Agents

当你频繁使用AI修改项目时，会接触到三个进阶概念：Skills、MCP、Agents。它们听起来技术化，但可简单理解为：

Skill是经验包，MCP是连接器，Agent是执行者。

不同工具命名可能不同，如Claude Code中常见Subagents或Agent teams，有些工具直接称为Agents、子任务或工作流。核心思想一致：将大任务拆解，由AI扮演不同角色协同处理。

以一个设计师熟悉的场景为例：你已有一份Figma首页设计稿，需将其转化为网站首页。

第一步：使用普通对话，让AI依据设计稿搭建页面结构。此阶段先确保页面可见、可运行，无需使用进阶功能。
第二步：若你发现自己反复强调“按钮需有悬停状态”、“间距遵循8px体系”、“移动端避免拥挤”，则可考虑创建Skill。它将你的设计检查清单固化为可复用的工作模式。
第三步：若AI需要读取Figma文件、检查浏览器实际渲染效果或获取外部文档，则需启用MCP。它并非提升AI智能，而是为其提供更多上下文信息。
第四步：若页面已较复杂，需同时检查导航、作品卡片、移动端布局及性能，则可启用Agent/Subagent分工处理。它们如同临时组建的专项小组，各司其职，最终汇总结果。

因此，无需将这些功能视为入门门槛。它们是你项目复杂度提升后，自然引入的效率工具。

六、推荐的开发顺序

概念清晰后，动手顺序至关重要——许多新手失败源于步骤错乱。

推荐路径：

确认技术方案。 技术栈决定后续所有工作，方向错误意味着推倒重来。
优先实现页面与交互。 将设计稿转化为可见、可交互的页面，以此验证用户流程是否顺畅。
使用模拟数据跑通流程。 暂不对接真实服务，先用静态数据验证完整流程。
接入后端逻辑。 页面流程验证无误后，再明确后端需要处理的具体业务。
按需引入数据库。 确认哪些数据需要持久化存储后，再搭建数据库。
部署上线。 使网站对外可访问。
最终打磨细节： 绑定域名、配置密钥、添加日志监控，将“可用”提升至“稳定”。

此顺序看似基础，却能有效避免“中途推翻重来”的困境。先打通最短路径，再逐步完善。

七、提前实践：运行现有模板

理论铺垫完毕，下一篇文章我们将深入每个模块的具体实现。此处提供一个快速起步的方法：

一句话启动项目

你可以通过现成的开源模板体验完整流程。

中文版： https://github.com/ricocc/ricoui-portfolio-zh
英文版： https://github.com/ricocc/ricoui-portfolio
Figma设计文件： https://figma.com/community/file/1570102065468722827

打开你选择的AI工具（如TRAE或Kimi），下载开源模板，然后输入：

帮我把这个项目跑起来。

AI将自动检查Node.js环境、安装依赖、启动开发服务器，并告知本地访问地址。

八、总结

本篇开发指南涵盖了基础概念：前后端与数据库的分工、框架与组件库、服务器部署与域名、AI工具选择，并简要介绍了PRD撰写与Vibe Coding核心技巧。

核心理念可归纳为四点：

概念先行，动手在后。 理解各技术层职责，比急于编码更重要。
AI是你的协作伙伴，而非单纯工具。 可与它讨论方案，获取建议。
先实现，再优化。 完美源于持续迭代，而非初始设计。
设计师的组件化思维是天然优势。 充分利用你的设计经验。

下一篇文章，我们将进入实战环节，以开源网站模板为例，分享个人在Vibe Coding中的实践经验，涵盖视觉实现、常见陷阱及部署上线等具体内容。