前端生成实战手册：从提示词到高完成度页面

一、提示词：用一句话控制视觉质量

markdown 复制代码

# 前端生成实战手册：从提示词到高完成度页面

> 本教程带你系统掌握"AI 辅助前端生成"的多种思路与方法，包括：  
> **提示词设计**、**Skill 配置**、**参考图复刻**、**专业设计工具使用**、**Vibecoding 实战**。  
> 无论你是设计师、开发者还是产品经理，都能快速上手，产出高质量前端页面。

---


一个好的提示词，可以让 AI 生成极具质感的图片或页面。以下以**兰博基尼超跑广告级图片**为例，展示结构化提示词的写法。

### 🧠 提示词模板（可直接复制使用）

```markdown
# 角色
你是一位顶级超跑设计师与汽车CG渲染师，专注于为豪华汽车品牌打造广告级视觉作品，精通光影、材质和镜头语言的运用。

# 任务
生成一张可用于汽车广告、杂志封面或数字展厅的兰博基尼超跑图片。要求图片呈现出极致的高级感、速度感与奢华气质，能够激发用户对兰博基尼品牌的向往。

# 需求要素
- 车型：兰博基尼 Revuelto 或 Countach LPI 800-4，体现楔形车身、剪刀门、Y型日间行车灯
- 环境：未来主义玻璃别墅夜景 / 雨后湿滑高架桥 / 艺术馆镜面大厅 / 黄昏海滨山路（背景简洁高级）
- 光线：电影级布光（侧逆光、伦勃朗光），强调车身线条与碳纤维细节
- 色彩：深金属灰 / 哑光黑 / 珍珠白 / 兰博基尼黄（Giallo Orion），轮毂金色或哑光黑
- 构图：低角度仰拍或超广角，黄金分割或三分法，留出运动方向空间
- 质感：漆面高光反射、碳纤维纹理、红色刹车卡钳、内饰缝合线，轮胎运动模糊或静态光影

# 技术规格
- 比例：16:9（壁纸）或 4:3（印刷）
- 质量：8K，超高清，光线追踪
- 渲染器：Unreal Engine 5 路径追踪 或 Octane Render

# 要求
- 主体必须为兰博基尼，无其他品牌车辆或杂乱元素
- 高级感优先，拒绝塑料感、卡通感、过度饱和
- 明确给出相机参数、光源类型、环境反光细节

# 负向提示词（推荐）
nsfw, lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry

💡 提示词设计心法

角色定义 → 让 AI 进入专业状态

任务 + 要素 → 明确输出目标与细节

技术规格 → 控制画质与比例

负向提示 → 排除低质干扰

点击不同的按钮能切换视角，可以全方位转动视角，由于模型是生成的并非真正的3d模型还是有点丑，而且效果无法提前看到，具有随机性，不推荐。

二、Skill 配置：让 AI 拥有专业"技能包"

2.1 什么是 Skill？

Skill 是 Anthropic 提出的概念，类似于可插拔的专业知识模块 。

你可以在 IDE（如 Trae、Cursor）中为 AI 加载不同 Skill，使其具备前端设计、动画、架构等专项能力。

2.1.1 frontend-design skill

GitHub 仓库：frontend-design skill

例如：frontend-design skill 可以让 AI 生成更符合设计规范的页面代码。

2.1.2 gsap-skills

GSAP (GreenSock Animation Platform) 是一个高性能、框架无关的 JavaScript 动画引擎，被誉为网页动画的"行业标准"。

GitHub 仓库：greensock/gsap-skills（⭐5.7k）
能力：滚动触发、时间轴、缓动、交错动画等

网页生成如下：

使用 GSAP Skill 后，AI 可以为你生成带有复杂动画的页面，例如：
滚动视差
文字逐字出现
鼠标跟随动画
3D 旋转卡片

2.2 在 Trae 中配置 Skill（分步图解）

2.2.1 打开设置 → 找到"技能与命令"

2.2.2 选择作用范围

全局：所有项目可用
项目：仅当前项目可用

2.2.3 加载从 GitHub 下载的 Skill

先克隆 skill 仓库（例如 gsap-skills）
阅读其中的 README.md 了解每个 md 文件的作用
在 Trae 中选中对应文件夹

2.2.4 确认添加

2.2.5 开启/关闭 Skill

2.2.6 使用 Skill

在聊天框中输入：

复制代码

/你的skill名称

即可调用。

三、参考图大法：截图 → AI → 80% 复刻

这是目前成本最低、效果最稳的前端生成技巧。

步骤

找到你喜欢的网页设计（可以是 dribbble、pinterest、任何网站）
截取关键区域（尽量清晰、完整）
将截图发送给 AI（如 Claude、GPT-4、Trae）
附上提示词："请根据这张截图，生成一个结构相似、风格一致的 HTML/CSS 页面，并使用 Tailwind CSS"

✅ 效果：AI 能还原约 80% 的布局、配色、间距，你只需微调内容与响应式。

四、专业前端设计工具推荐

这些网站提供可直接复制的提示词或代码片段，让你的 AI 生成更专业。

4.1 Design Prompts

提供大量风格化设计提示词，覆盖毛玻璃、极简主义、新拟态、 brutalism 等。

如何使用：

打开官网，浏览风格库
点击某个风格下的 Get Prompt
复制提示词，粘贴给 AI，并加上："请根据这个设计风格，生成一个完整的落地页"
根据需求修改内容

4.2 React Bits

⭐ GitHub 33.2k，提供大量可复用的 React 动画组件（文字动效、自定义光标、背景特效等）

亮点：

鼠标跟随正方形（Target Cursor）
渐变文字、故障效果、滚动数字
每个组件都可直接复制代码

使用步骤：

浏览组件库
点击你喜欢的组件（会高亮显示）
复制代码或提示词
让 AI 集成到你的项目中

里面还有许多玩法，一定不要错过！

4.3 MotionSites

收录大量动效优秀的网站，并提供生成提示词

用法：

打开网站，选择一个你喜欢的动效站点
点击进入详情页，找到 Prompt 区域
复制提示词，直接发给 AI 复现

4.4 AuraBuild

可完整复刻某个网站的前端代码（需提供网址或截图）

适合想要"照搬"某个页面结构，再二次修改的场景。

4.5 V0 / Bolt（付费但有免费额度）

工具	特点	免费额度
V0	Vercel 出品，内置设计系统，UI 极佳	每月少量 credits
Bolt	在线全栈项目生成，可直接运行	有免费试用

🎯 适用场景：需要快速生成一个完整、可用、符合设计系统的前端项目，且不介意付费升级。

五、Vibecoding 前端页面实战（以 MotionSites 为例）

本节演示：从 MotionSites 复制提示词 → 让 AI 生成页面 → 替换素材 → 叠加 React Bits 组件 → 最终交付高级感页面。

5.1 复制提示词到 Trae / Cursor/claude等

在 MotionSites 中找到一个你喜欢的动效页面，点击复制 prompt。

我这里使用的Trae CN中安装的claude插件

5.2 初次生成效果

将提示词粘贴给 AI，生成初始页面。

复刻程度：几乎一模一样（布局、动效、配色）

5.3 个性化修改（大纲）

你可以按以下方向进行二次定制：

① 页面内容修改

替换标题、副标题、按钮文字
修改为你的产品/品牌信息

② 背景视频替换

自备视频素材（推荐使用 Kimi 2.6 或 Runway 生成 AI 视频）
或者用一张高质量图片替代（降低复杂度）

🎬 视频生成工具推荐：豆包（免费，带水印）、Kimi 2.6 、Pika Labs

③ 叠加 React Bits 组件

例如：

Gradient Text → 让文字具有渐变动效
这里面的文字颜色，渐变过程都可以手动调整
Target Cursor → 自定义鼠标跟随效果

做法：从 React Bits 复制组件代码，让 AI 融合到现有页面中。

5.4 最终效果展示

经过以上三步修改后，你会得到一个：

动效丰富
视觉高级
内容个性化
可交互（鼠标跟随、渐变文字等的完整前端页面。）

可以看到鼠标选中组件会包括起来，组件会在页面刷新打开会从下往上弹出等等效果，背景为视频

注意：这里展示的还是初级的用法，可以多自己琢磨

总结：前端生成的核心工作流

#mermaid-svg-hBunAWAo1ZdrHACG{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-hBunAWAo1ZdrHACG .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-hBunAWAo1ZdrHACG .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-hBunAWAo1ZdrHACG .error-icon{fill:#552222;}#mermaid-svg-hBunAWAo1ZdrHACG .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-hBunAWAo1ZdrHACG .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-hBunAWAo1ZdrHACG .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-hBunAWAo1ZdrHACG .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-hBunAWAo1ZdrHACG .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-hBunAWAo1ZdrHACG .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-hBunAWAo1ZdrHACG .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-hBunAWAo1ZdrHACG .marker{fill:#333333;stroke:#333333;}#mermaid-svg-hBunAWAo1ZdrHACG .marker.cross{stroke:#333333;}#mermaid-svg-hBunAWAo1ZdrHACG svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-hBunAWAo1ZdrHACG p{margin:0;}#mermaid-svg-hBunAWAo1ZdrHACG .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-hBunAWAo1ZdrHACG .cluster-label text{fill:#333;}#mermaid-svg-hBunAWAo1ZdrHACG .cluster-label span{color:#333;}#mermaid-svg-hBunAWAo1ZdrHACG .cluster-label span p{background-color:transparent;}#mermaid-svg-hBunAWAo1ZdrHACG .label text,#mermaid-svg-hBunAWAo1ZdrHACG span{fill:#333;color:#333;}#mermaid-svg-hBunAWAo1ZdrHACG .node rect,#mermaid-svg-hBunAWAo1ZdrHACG .node circle,#mermaid-svg-hBunAWAo1ZdrHACG .node ellipse,#mermaid-svg-hBunAWAo1ZdrHACG .node polygon,#mermaid-svg-hBunAWAo1ZdrHACG .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-hBunAWAo1ZdrHACG .rough-node .label text,#mermaid-svg-hBunAWAo1ZdrHACG .node .label text,#mermaid-svg-hBunAWAo1ZdrHACG .image-shape .label,#mermaid-svg-hBunAWAo1ZdrHACG .icon-shape .label{text-anchor:middle;}#mermaid-svg-hBunAWAo1ZdrHACG .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-hBunAWAo1ZdrHACG .rough-node .label,#mermaid-svg-hBunAWAo1ZdrHACG .node .label,#mermaid-svg-hBunAWAo1ZdrHACG .image-shape .label,#mermaid-svg-hBunAWAo1ZdrHACG .icon-shape .label{text-align:center;}#mermaid-svg-hBunAWAo1ZdrHACG .node.clickable{cursor:pointer;}#mermaid-svg-hBunAWAo1ZdrHACG .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-hBunAWAo1ZdrHACG .arrowheadPath{fill:#333333;}#mermaid-svg-hBunAWAo1ZdrHACG .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-hBunAWAo1ZdrHACG .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-hBunAWAo1ZdrHACG .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-hBunAWAo1ZdrHACG .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-hBunAWAo1ZdrHACG .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-hBunAWAo1ZdrHACG .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-hBunAWAo1ZdrHACG .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-hBunAWAo1ZdrHACG .cluster text{fill:#333;}#mermaid-svg-hBunAWAo1ZdrHACG .cluster span{color:#333;}#mermaid-svg-hBunAWAo1ZdrHACG div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-hBunAWAo1ZdrHACG .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-hBunAWAo1ZdrHACG rect.text{fill:none;stroke-width:0;}#mermaid-svg-hBunAWAo1ZdrHACG .icon-shape,#mermaid-svg-hBunAWAo1ZdrHACG .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-hBunAWAo1ZdrHACG .icon-shape p,#mermaid-svg-hBunAWAo1ZdrHACG .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-hBunAWAo1ZdrHACG .icon-shape .label rect,#mermaid-svg-hBunAWAo1ZdrHACG .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-hBunAWAo1ZdrHACG .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-hBunAWAo1ZdrHACG .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-hBunAWAo1ZdrHACG :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 灵感/参考
截图/提示词
选择工具
Design Prompts
React Bits
MotionSites
V0/Bolt
AI生成
人工微调
部署上线

🧰 常用工具速查表

用途	工具	链接
设计提示词	Design Prompts	designprompts.dev
动效组件	React Bits	reactbits.dev
动效网站参考	MotionSites	motionsites.ai
完整复刻	AuraBuild	aura.build/create
高质量UI生成	V0 / Bolt	vercel.com / bolt.new
动画技能	GSAP Skill	github.com/greensock/gsap-skills

✨ 最佳实践：

先用参考图大法快速生成初版

再用 React Bits 增强动效

最后用 Design Prompts 打磨整体风格

熟练后，可直接编写结构化提示词一步到位

现在，打开你的 Trae / Cursor，开始你的 Vibecoding 之旅吧！ 🚀