在上一期的设计篇章里，我们圆满地完成了从设计理念到Figma设计稿的全过程。然而，设计稿虽然精美，却始终停留在静态图像的层面。那么，如何将其转化为一个真正具备互动性和可访问性的网站呢？
在以往，这需要我们掌握HTML、CSS、JavaScript等编程语言，同时还需要了解框架、打包工具、版本控制等概念。单是这些术语就足以让许多人望而却步。
然而，时至今日，情况已有所不同。
Vibe Coding彻底改变了“编写代码”的本质，你无需从头开始学习编程语言的语法，只需用自然语言表达你的需求，AI便会为你生成代码、解决调试问题、优化视觉效果。
然而，面对铺天盖地的 Vibe Coding 宣传，或许有人会误以为只需随意聊聊便能够打造出一个产品。然而，这实则是一项具有一定难度且需要掌握相关基础知识的工作。尽管难度确实相较于以往有所降低，但仍然不容小觑。
在本篇开发指南的第一部分，我们暂不急于着手编写代码，而是首先筑牢基础。
你无需先成为一位工程师，也无需去死记硬背一大堆定义。你只需先明确每一层所负责的内容，这样在你第一次尝试制作产品时，就不会那么容易迷失方向。
对于设计师而言，这件事可能比你想象的要简单得多，因为你们已经拥有了 Vibe Coding 所需的技能：
开发篇，我们首先夯实基础：熟悉技术术语、明确前后端职责、挑选合适的AI工具、学习编写PRD文档，并掌握Vibe Coding的技巧。
一、开发入门：设计师必须了解的几个关键点
许多设计师初次尝试让AI协助完成项目时，心情往往是既兴奋又迅速感到困惑。
这种困惑的产生并不复杂——当你向AI提出“帮我制作一个作品集网站”的请求时，它可能会在你还没来得及消化的情况下，抛出一连串你从未听过的词汇：前端、后端、API、数据库、部署、域名、环境变量……在你还来不及理解这些概念时，AI已经着手进行下一步了。
更棘手的是，如果你对项目方案没有清晰的思路，AI很可能不会提醒你“先想清楚再行动”。你给出一个模糊的想法，它也会迅速提供一个完整的方案。这种“有求必应”的态度很容易让人误以为已经走上了正确的道路，而实际上，方向可能还未明确。
因此，在这一节中，我们不涉及代码，而是以设计师易于理解的方式，逐一解释这些基础概念。只有搞清楚每个词汇的含义和作用，在动手实践时才不会偏离方向。
1.1 网页的构成：三大语言
网页的构成实际上是由三种语言构成的：
以一个在Figma上绘制的卡片组件为例：一个圆角矩形，其中包含一张图片、一段标题文字和一个按钮。
在编程的世界里：
这是入门的第一步。然而，你很快就会意识到，仅仅掌握这三种编程语言，并不能完全理解一个完整产品的运行机制。
1.2 前端、后端、数据库：三层职责解析
对于初学者来说，这三组词汇常常让人感到困惑。尽管它们经常一同出现，但实际上它们各自负责不同的领域。
简单来说，前端负责呈现给用户看到的内容，后端负责在幕后处理信息的流动，而数据库则负责存储和记录产品的相关信息。
前端：直观与交互的呈现面
在我们浏览网页的每一刻，眼前所见的每一个像素点，都归属于前端领域。
页面的布局、按钮的大小、文字的色调、鼠标悬停时的动态效果，甚至点击后的跳转行为，这一切都是前端的工作范畴。换句话说，你在设计软件如Figma中所绘制的一切，最终都是通过前端技术得以呈现。
许多人对于前端的理解仅限于“让页面看起来美观”，这其实是对前端工作的一个误解。视觉固然重要，但前端的核心职责在于确保用户操作流程的顺畅。
对于设计师而言，前端是他们最易上手的部分。你在Figma中形成的那些设计习惯——如组件化设计、间距规范、响应式布局——在前端开发中几乎都能找到对应的理念。你的设计经验在这里可以直接转化为实际的应用。
后端：幕后逻辑的驱动者
当用户在页面上点击一个按钮，背后究竟发生了什么？
如果只是简单的页面跳转，前端可以独立完成。但若是涉及到数据处理，如表单提交、AI文字生成、数据记录保存等，这些任务就超出了前端的能力范围。这时，后端技术便应运而生。
后端主要负责接收前端传来的请求、执行相应的处理逻辑，并将结果返回。前端告知“用户做了什么”，而后端则决定“接下来该做什么”。
这可能听起来相当复杂，但对于个人网站的设计师来说，后端的需求往往并不繁重。它可能仅涉及接收请求、调用外部服务（如AI接口）、将结果返回等基础操作。无需一开始就构建一个庞大的系统。
一个简单的判断标准：如果你的网站仅用于展示内容（如作品集、个人介绍），可能几乎不需要后端的支持。但如果你需要添加评论功能、AI对话、用户登录等“互动性”功能，后端的作用就变得至关重要。
注意区分后端和数据库——后端是“执行者”，数据库则是“记录者”。它们常常共同出现，但本质上是不同的。
数据库：赋予产品“记忆”的能力
没有数据库的网站，每次刷新就像是从零开始——你刚刚填写的个人信息消失了，之前的操作也一无所知。
数据库的作用正是解决这一问题：它能够将需要保存的数据存储起来，以便下次访问时能够找回。如用户注册的账号、提交的评论、保存的草稿等，都需要数据库进行管理。
对于个人作品集的设计师来说，好消息是很多情况下暂时不需要使用数据库。例如，使用Astro这类框架生成的静态页面，内容直接嵌入代码中，刷新也不会丢失数据。
但如果你未来打算增加功能，如访客留言、AI工具需要记住之前的输入等，那么引入数据库就是必要的。
一个实用的建议：无需急于在第一天就搭建数据库。可以先使用静态数据来测试页面和流程，等到确认哪些数据确实需要长期保存时，再引入数据库也不迟。
以联系表单为例：看懂三层的协同工作
以设计师网站中常见的“联系表单”为例，你会发现这三层之间的协同工作其实并不难理解。
前端负责展示表单，包括姓名、邮箱、留言内容等输入框，以及一个“发送”按钮。用户填写完毕后点击“发送”，页面会显示“发送成功”或“发送失败”的提示。
当用户点击“发送”后，前端并不会直接发送邮件，它只是将用户填写的信息打包，并通过一条约定的通道（即API）将信息传递给后端处理。
后端则负责接收前端传来的信息，先检查格式是否正确（例如邮箱地址是否合法），然后调用邮件服务将信息发送至你的邮箱。如果发送成功，后端会通知前端“操作完成”；如果失败，则会告知前端失败的原因。
数据库在这里的作用是，如果你希望将每条留言都保存下来以便日后查看，后端在发送邮件的同时，也会将这条留言记录到数据库中。下次你登录后台时，就能看到历史留言记录。
若后端支持缺失，点击按钮将无法得到响应；倘若数据库功能不健全，你将只能通过电子邮件来查阅留言。在这三层架构中，每一层都承担着其独特的职责，任何一层的缺失都可能导致用户体验的中断。
这个案例的启示在于：当您遇到“这个功能尚未完善”的反馈时，不妨尝试将其拆解——是页面设计本身的问题，还是数据处理逻辑上的疏漏，亦或是数据存储存在误差。这种分解问题的思维方式，相较于单纯记忆各种术语，更为实用有效。
1.3 何为框架与组件库？
框架究竟是什么？
让我们将构建一栋房屋的过程进行比喻：
组件库又是什么呢？
组件库，即设计师的“组件面板”和“样式系统”的代码化呈现。
在 Figma 中，您可以看到一个“按钮”组件，它可以变化为主要、次要、禁用等多种状态；在代码层面，只需通过指定 variant="primary" 这样的参数，即可实现相同的效果。
常见的组件库包括：
组件库的特点：适合风格——shadcn/ui可定制程度高，现代简洁——HeroUI功能丰富，现代简洁——Radix UI无样式底层完全自定义——daisyUI轻量免费快速原型
从设计师的角度进行类比：
文章标题：面向设计师的 Vibe Coding 初学者手册（一）：基础知识、架构构建、工具应用
（文章第8/11部分，中间部分，直接输出改写正文）
原文片段：
对这些有了认识后，你便能以 Figma 的视角去解读代码的世界。在绘制设计稿时进行“公共组件的提取”，在代码世界中就对应为“模块的封装与复用”。
1.4 选择 Astro + Tailwind 的理由
我的开源模板选用 Astro 框架与 Tailwind CSS 相结合，理由相当直接：
Astro 的关键亮点：岛屿架构——仅在需要交互的部分加载 JavaScript，其余部分均为静态 HTML。因此，首屏加载速度极快，SEO 优化良好，非常适合展示个人作品集。
Astro 的另一大优势：框架的兼容性——你可以在同一个项目中灵活运用 React、Vue 或纯 HTML 与 Tailwind，当需要引入 3D 交互时，再添加 React 即可。
Tailwind CSS：最契合 AI 使用的 CSS 解决方案——传统 CSS 需要命名和文件分离，而 Tailwind 则将样式直接嵌入 HTML 中，AI 一目了然。其设计变量与 Figma 的变量完美对接（如 p-6 对应 spacing/24），更换配色只需替换配置文件。
1.5 网站制作完成后如何上线：服务器配置、部署流程、域名绑定
当你在自己的电脑上预览网站，并确认一切正常，但截至目前，你的网站仅限于你个人的电脑上。
为了让网站对外可访问，你需要明白三个关键点：
这三者之间的关系可以这样理解：服务器相当于“空间”，部署就是“入住”，域名则是“挂牌”。缺少任何一环，他人都无法访问你的网站。
以下是一个简单的上线流程：将代码上传至 Github（代码上传）-> 在 Cloudflare 上绑定 Github（绑定服务）-> 一键部署上线（网站可访问）->（可选）通过 Cloudflare 购买域名并绑定。
二、AI编程利器推荐
在AI编程的世界里，核心在于模型与工具的巧妙结合。模型如同大脑，负责解读你的指令；而工具则如同双手双脚，负责实际操作文件、执行命令。
IDE与CLI的对比
IDE（集成开发环境）犹如我们熟悉的代码编辑器（例如带有AI功能的VS Code），拥有窗口、侧边栏，直观地展示文件结构，操作简便。以Cursor为例，它就是一个典型的IDE。
CLI（命令行界面）则更像是一个简洁的终端窗口，仅通过文字进行交流，简洁高效，灵活性极高，能够自动处理更多任务。例如，Claude Code和Codex就是CLI的代表。
两者都能让AI直接对你的项目文件进行操作。我经常将它们结合起来使用。
主流工具推荐
以下是我的建议：
如果你希望完全免费地入门，那么国产IDE是一个不错的选择，例如TRAE（国内版）和Qcoder等。这些工具免费额度较高，中文支持良好，且各种模式非常适合设计师直接用自然语言描述Figma风格，几乎无需配置。
如果你愿意支付小额费用，并希望获得更佳的使用体验，那么可以考虑Cursor或TRAE国际版。Cursor的编辑器操作非常流畅；而TRAE国际版在模型访问和稳定性方面也有所提升。
如果你预算有限，但又希望保持较高的性价比，那么CLI工具可以优先选择接入国内各大模型，如Kimi、GLM、Qwen等。这些模型价格低廉，新用户优惠力度大，对于日常调整颜色、替换字体、实现简单交互已经足够。
截至我撰写本文时，如果你追求更强的项目级能力，且不太在意成本，那么可以直接使用Claude Code或Codex。它们在理解复杂需求、多文件重构和项目级调整方面表现更为稳定。
我的个人体验：大多数设计师在开始使用AI进行项目时，通常会从TRAE国内版或Kimi开始，快速地将模板运行起来，看到效果后再决定是否升级。有能力的用户可以直接使用Claude Code，这将带来更佳的体验和尽可能少的修改，减少过程中的内耗，选择最高配置是一个节省时间和精力的高效决策。
三、产品需求文档（PRD）
在Vibe Coding中，首先明确需求，然后行动，这是最为关键的一步。
PRD（Product Requirements Document）原本指的是产品需求文档。在Vibe Coding中，它也是向AI提供的“项目说明书”：将你的想法转化为结构化的要求，让AI少走弯路，减少反复迭代。
许多人第一次使用AI进行项目时，会直接说“帮我做一个网站”或者“帮我做一个工具”。AI虽然会开始编写，但它可能并不清楚你真正想要的是什么：它是为谁而设计的、重点功能是什么、哪些地方不能随意修改、最终达到何种程度才算完成。
PRD正是为了解决这一问题。
你可以将其理解为一张“项目地图”。它不需要像公司文档那样正式，但至少要明确方向、边界和验收标准。尤其是在零基础进行项目时，PRD能帮助你避免一个常见的问题：随着项目的进行，AI的修改越来越偏离初衷，你自己也忘记了最初的目标。
如果你的工具支持plan模式，也可以先让AI帮助你完善PRD。先讨论清楚方案，再让AI动手编写代码，这一步将大大减少后续的返工。
零基础编写PRD的3个步骤：
通用PRD模板
四、Vibe Coding 的实用技巧解析
4.1 Vibe Coding 的核心思维模式
通常，我们学习编程的方式是先掌握语法，然后理解概念，最后通过实践来编写代码。然而，Vibe Coding 的学习方法与此不同。它倡导的是：在执行任务的过程中，逐步领悟代码的精髓。其流程是这样的：先描述需求，接着由AI生成代码，然后运行并观察效果，接着进行迭代调整，最终完成任务。
4.2 AI助力环境配置无忧
对于许多人来说，环境配置（如安装Node.js、配置npm等）是一项复杂的任务。现在，你只需向AI下达指令：“把这个项目运行起来”，AI便会自动检测环境、安装所需依赖、启动开发服务器，并告知你访问地址。你只需提出一个简单的意图，其余的麻烦都由AI帮你解决。
4.3 上下文沟通：让AI准确把握你的意图
在提出需求时，不要简单地说：“帮我改一下首页”，而是要详细描述：“我想调整首页的Hero区域布局。目前是左文右图的形式，我希望改为上下结构，上面是标题和简介，下面是头像图片。”
上下文沟通包含四个关键要素：
4.4 模型组合与迭代对话
AI的能力取决于所使用的模型。在实际开发过程中，我经常采用多种模型的组合。迭代对话是Vibe Coding的精髓所在。我们不应期望一次就能达到完美，而是通过多次的“反馈—调整”过程，逐步接近目标。每次调整后，都要将产品需求文档（PRD）发送给AI，以便它记住整体风格。
4.5 灵活运用Skills、MCP、Agents
当频繁使用AI进行项目修改时，你将遇到三个高级概念：Skills、MCP、Agents。虽然这些概念听起来很技术，但我们可以这样简单理解：
Skill代表经验包，MCP是连接器，而Agent则是执行者。
文章标题：面向设计师的Vibe Coding入门手册（终章）：基础知识、架构、工具应用
原文片段：
工具的命名各有千秋。有的直接称之为“代理”、“子任务”或“工作流”，它们的目的相似：将一个庞大的任务分解，让AI根据不同的角色来执行。
以设计师易于理解的一个场景为例：你手中已经有一份Figma首页的设计图，想要将其转化为网站首页。
首先，你可以通过简单的对话指令，让AI根据设计图搭建出页面的基本结构。在这个阶段，不必急于探索高级功能，只需确保页面能够呈现并正常运行。
其次，如果你发现自己频繁地重复强调“按钮需要hover效果”、“间距应使用8px体系”、“移动端布局不要拥挤”，那么可以考虑使用“技能”功能。它相当于将你的设计检查清单转化为一套固定的操作流程，今后每次优化页面时都可以重复利用。
再次，当AI需要读取Figma文件、查看浏览器中的真实渲染效果，或者读取外部文档时，这时候“多能力平台”（MCP）就派上用场了。它并非让AI变得更聪明，而是让AI能够获取更多的现场信息。
第四步，如果页面变得相当复杂，你希望同时检查导航、作品卡片、移动端布局和性能问题，那么可以启用Agent或Subagent来分头处理。它们就像是临时召集的助手，各司其职，最终将结果汇总到主任务中。
因此，不必将这些功能想得过于神秘。它们并非一开始就必须掌握的内容，但当你开始频繁修改页面、处理外部资料、管理多文件项目时，这些功能将显著提高你的工作效率。
五、推荐的开发步骤
概念已经明晰，现在到了动手实践的时候。但顺序至关重要——许多新手之所以失败，并非因为能力不足，而是因为步骤安排不当。
推荐的路径：
这个步骤看似简单，却能有效避免“做到一半不得不推翻重来”的情况。先确保最简单的路径能够顺利运行，然后再逐步进行完善。
六、实战演练：启动模板
理论已经阐述完毕，下篇文章我们将深入探讨每个模块的具体实现。在此，先提供一个最简单的启动方法：
一句话启动项目
开源模板地址：
选择你喜欢的工具（如TRAE或Kimi），下载我的开源模板，然后输入：
请帮我启动这个项目。
AI将自动检查Node.js环境、安装依赖、启动开发服务器，并告知你本地访问地址。
结语
在本篇开发篇中，我们详细介绍了许多基础知识：前端、后端、数据库的分工，框架和组件库，服务器、部署、域名，以及AI工具的选择，还简要提到了PRD编写方法和Vibe Coding的核心技巧等概念。
核心观念：
在下一篇文章中，我们将直接进入实操阶段，以我开源的网站模板为例，分享我在Vibe Coding中的实践经验，包括视觉实现、常见问题、部署上线等内容。
我是Rico，感谢您的阅读！
