怎么用

从 GoodVibe 复制一段内容之后，怎么让 AI 帮你把它做成网页。不用会写代码。

复制的东西，随便哪个 AI 都能用

你在 GoodVibe 上复制的，其实就是一段文字（一段发给 AI 的说明，或一段现成的代码）。
不用额外安装任何东西，直接粘贴给你正在用的 AI 就行。
下面这些常见的 AI 都能用：

Claude

Cursor

Codex

VS Code

腾讯 CodeBuddy

WorkBuddy

用法都一样，一共三步：

只有一种情况要多做一步：带 npm 标记的组件，是别人做好的现成小工具，得先「装」一下才能用。
不会装也没关系，把那行提示一起发给 AI，让它帮你装。
其余内容（UI 模块、网站灵感、带 源码 标记的组件）复制就能用，什么都不用装。

第三步「补一句」可以直接抄下面这句，粘在你复制的内容后面一起发：

外观（颜色、字体、圆角）沿用我网站现在的风格，别自己另配一套；做完告诉我放在哪个地方。

进阶（可以先跳过）：如果你经常用同一个 AI 做同一个项目，可以在项目里放一个「说明文件」，一次性写清你的风格和习惯，之后就不用每次都解释。
不同 AI 的说明文件名字不一样，需要时再查即可。

GoodVibe 上有四类内容，复制出来的东西不太一样，用法也略有区别。一类一类看。

你复制的是：一段能让 AI「照着某个网站的某块区域重做一遍」的说明。

怎么用：粘贴给 AI，再加一句「照这个样子做一个，外观用我网站的风格，放在首页顶部」。
它会照着结构和感觉做，但颜色字体会跟着你的网站走。

（这里粘贴你复制的说明）照这个做一个网站首屏，颜色和字体沿用我现在的风格，放在首页。

你复制的是：一小段告诉 AI「怎么用某个现成小组件」的说明。
两种：带 npm 标记的要先装一下；带 源码 标记的会直接给你一整段代码。

怎么用：

带 npm 标记：先按提示装好（不会装就让 AI 帮你），再告诉 AI 你想拿它做什么。

这个滚动条组件我已经装好了，用它做一排客户 logo 的循环滚动，放在首页。

带 源码 标记：把那一整段代码原样发给 AI。

这是一个动效组件的代码（粘贴），帮我放进项目里，在首页用一下。

你复制的是：一段只说「布局长什么样」的说明，故意不写死颜色字体，这样能套进任何风格。

怎么用：粘贴给 AI，一定要补一句「外观用我网站的风格」，不然它会自己配一套颜色，通常不好看。

（这里粘贴你复制的说明）帮我做这个导航栏，颜色字体沿用我现在的风格，放在页面最上面。
做出来后可以继续说：导航之间再宽一点 / 手机上换成可以收起的菜单 / logo 换成我自己的。

你复制的是：不是给 AI 的说明，而是一批做得好的网站链接。

怎么用：拿去找灵感、对比别人怎么做；看到喜欢的，截个图发给 AI，让它照着你的风格做一个。

AI 就是「边看边改」的。
第一次做出来七八分像很正常，剩下的直接在同一个对话里继续说「这里再宽一点」「这个颜色换一下」就行，比一开始写一大段要求省力得多。
比较复杂的，可以先让它「先说说打算怎么做，先别动手」，你觉得可以了再让它做。