提升Vibe Coding设计质量的10个技巧！|上下文|代码|显式标识|编辑器|设计稿|设计质量

很多人用VibeCoding时设计稿还原度低，设计细节反复说也改不对。文章按前期准备与代码产出两个阶段，整理提升还原度的十个技巧，覆盖底层大模型的选择、MCP与npm包的安装，以及如何用约束规则缩小AI的上下文盲区。

经常有朋友来问我：“在VibeCoding中有没有能够提升设计稿还原度的经验和方法？感觉自己用AI做Coding时的设计稿还原度很低，设计细节反复说好几遍也改不对，该怎么办呢？”

今天就给大家分享下我在做VibeCoding时调整设计稿细节的10个技巧，技巧1-3是针对前期准备阶段；技巧4-10是针对代码产出阶段，希望对你有帮助。

一、前期准备阶段

1.选择合适的底层大模型

好的AIIDE工具都支持底层模型的选择，底层大模型的质量会直接影响你coding的质量，所以一定要优先选用行业内认可的质量高的大模型。我最常用的是GPT和Gemini，版本越新越好。像Qwen、Deepseek这类大模型，用来回答文字问题是绰绰有余的，但是用来做VibeCoding，产出的页面很有可能是惨不忍睹的：

图为Trae编辑器中对于大模型的选择方式

另外要注意的是，一定要从项目一开始就要调整和选择好模型，如果你第一步生成页面时的地基打得不好，后面更改和调整会变得更加困难。

2.安装MCP、Skills、npm包

MCP、Skill和npm包的本质都是在做一件事：缩小AI的上下文操作盲区。AI对你的需求上下文了解得越深，生成结果的准确率就越高。

MCP：是一种让AI模型与外部数据源、工具、文档实时交互的协议。通过MCP接入设计稿或者PRD，AI就相当于直接阅读一手资料，也就有了更准确的上下文输入：

我最常用Figma和飞书文档的MCP

Skill：相当于给AI增加了领域专长。把你们团队的设计规范、常见页面模式、组件使用规则封装成Skill，AI在生成时就会优先遵循这套规则，你可以阅读我之前的文章：如何做一个AISkill？

组件npm包：是以最直接的方式让AI直接获取和调用组件真实的代码实现、类型定义和属性说明，并用来生成页面代码。npm包与Skills相辅相成，如果只用Skills，AI可能理解规则但无法稳定还原代码；而加上npm，AI就能在理解规则的基础上，直接调用组件代码。

很多大厂都提供自身组件库的npm包，可以在官网（https://www.npmjs.com/）下载并安装：

图为AntD组件库npm包下载页面

3.设定专属的Agent

项目专属Agent的本质是给AIIDE设定一个“固定工作环境中的角色”，以保持连贯使用。

以下设计场景中可以尝试设定Agent来提效：

你的很多项目有固定、统一的技术栈和规范：比如大多数项目都要使用AntDesign+Tailwindv4，如果每次都要在prompt里说一遍会很麻烦，也容易出错。

你的很多设计需求需要在视觉规范上保持一致：比如大部分需求都需要用到一些特殊的颜色token和组件偏好等规则。

你在一段时间内会持续迭代同一个项目的设计方案：比如这段时间需要在同一个项目中反复修改和迭代，需要让每次对话都在同一个频道和场景中，减少前置说明的成本。

图为Trae的智能体设定方式

二、代码产出阶段

4.让AI来优化Prompt

对于设计稿需求的描述会极大程度的影响生成效果，我常用的方法是把优化需求发给其他AI，让其帮忙润色。举个例子：

某个设计需求中的两个元素的位置，我自己写Prompt调整了很多次，效果还是不及预期，于是我就把截图发给了豆包，并跟它说：

“我想让元素A和元素B之间的间距变成8px，并让它们居中对齐。你帮我描述下这个需求，我要发给Trae让它帮我改。”

豆包的回复中就增加了很多我想不到的、或者说我作为一个没有代码基础的人不太会用的一种描述方式来表达我的修改需求：

“这两个元素在代码里应该是同一个父容器下的相邻元素，用flex布局的align-items:flex-end和gap:8px来实现。”

我把这段Prompt复制并发给Trae，这一改还真就比之前的效果好了很多：

5.注意设计稿层级结构和命名

把设计稿发给AI之前，至少要检查下设计稿中的主要区块和关键组件的嵌套层级和命名，是否符合规范、直接易懂、无多余层级。如果所有的模块命名全都叫作Frame1234、Frame5678，AI就很难判断出哪层是容器、哪层是内容、哪层是单个元素，生成的设计和代码层级关系也会混乱，在细节调整时就会遇到很多意想不到的困难。下图就是个错误案例：

6.选择合适的设计稿输入方式

把设计稿发给AIIDE工具的方式有很多种，比如提供截图、复制页面的链接、复制单个模块的CSScode等等。不过这里面也有一些技巧：

如果你是要把Figma设计稿喂给AI，用Dev模式下复制的设计稿链接或者直接复制某个模块CSS代码，设计稿还原的效果会更好。因为这相当于AI能拿到的是代码中的flex、padding等的具体数值，而Design模式下复制设计稿链接，AI拿到的更多是视觉层面的描述，是颜色、字体、间距等设计属性，AI会把它当成“设计描述”来理解，更适合用于了解设计方案的整体布局和意图，但实现细节会有偏差：

7.准确限制参考范畴

对于跨文件修改的任务，可以严格限制AI的参考范畴。比如在Trae的输入框中输入#符号，会弹出一个可搜索的列表，包含当前项目中能够参考的代码、文件等内容。在发起一个Prompt时先把固定的参考项加入到指令中，也能避免AI在不相关的文件里自由发挥：

8.分阶段由粗到细逐级还原

如果把中大型的页面生成需求直接扔给AI，AI面对的就是一个巨大的“黑盒”，一次性生成一大坨代码，在布局没想清楚时就开始写细节，后面改结构牵一发动全身。但如果能够分步完成，就相当于把一个大难题拆成几个小需求，每步的目标都很清晰，AI也更容易给出准确的结果。

所以对于中大型页面的VibeCoding的开发流程，我通常会采用以下步骤分阶段进行：

第一步：布局Layout（比如页面包含哪几个区块、每一个区块大致是干嘛的、是否采用响应式栅格结构等）

第二步：模块Module（比如页面上具体分几个区块、每个区块的功能和作用是什么、展示哪些具体内容等）

第三步：针对每一个区块，逐一优化细节Details（比如每一个区块中的颜色、文字、间距等有哪些具体调整需求）

这样能保证每一步都在一个已经稳定的基础上往前走，也就不会走偏：

图为我做某个0-1项目的Coding过程

9.选择接受AI更改的内容

大部分AlIDE工具每次做出修改的代码内容都会以diff对比（红色和绿色差异显示）的形式显示：红色就是被改掉的旧内容；绿色就是改写成的新内容。如果你懂一些代码知识，可以选择性地接受这些更改。也就是说，对于一轮复杂的需求修改，你可以先整体浏览生成后的页面效果，然后回到代码编辑器，逐块、逐条采纳你确认无误的部分，对存疑的部分果断拒绝，避免AI越改越偏：