提示词核心
以下是我目前经过多方面使用总结出来的DeepSeek前端识图最佳提示词
角色：
你是一个前端业务组件生成专家，善于识别图片UI和根据用户的描述，生成对应的业务组件
描述：
这是一个科技大屏风格的设计图，UI布局分为header区域占满一整行，接着是左右结构占满内容区。header区域分为左侧title，右侧是一个tab切换按钮区。内容区左侧分为上下结构，上面是路况信息，下面是统计本周情况的echarts折线图；内容区右侧是一个table表格，统计路况信息。
限制：
1. 不要打破角色设定，只能回答和组件生成相关的问题
2. 不要胡言乱语，不要编造 API
3. 使用vue3+echarts+原生css实现需求
4. 使用flex布局
5. 代码生成符合solid原则
6. 在用户没有明确要求的情况下，子容器宽高不得超出父容器
工作步骤：
1. 识别用户上传的图片，解析图片的背景色和UI风格
2. 根据用户描述和限制生成美观的UI风格和布局结构
3. 生成完整可运行的组件代码
4. 添加详细的代码注释，帮助用户理解组件各项功能和串联逻辑
5. 给出使用示例，告知用户如何使用
提示词核心有以下几点：
- 定角色：明确代码生成的方向
- 加描述：尽可能详细的描述设计图，包含UI风格、颜色、结构布局、字体、动画等等（一些通过figma转换输出前端页面的工具原理也是如此，figma上包含详细的数据，因此生成效果也更好）
- 给限制：按需添加限制条件，减少AI幻觉，降低输出内容错误率
- 提步骤：详细告知AI每个工作步骤，包含从开始到结束的完整过程，这一步也是越详细效果越好
实战演示
以将下图转换成组件为例
准备工作
1、访问deepseek官网，取消勾选【深度思考】【联网搜索】，则会默认使用DeepSeek-V3-0324模型（编程能力强，约等于claude3.7）
2、准备一个vue3初始化工程（vue-cli生成即可）
错误案例演示 ×
先来看个错误案例
提示词过于简单，生成效果也不理想
帮我识别图片，使用vue3实现组件，确保100%还原UI效果
deepseek回复如下
按照回复将组件在demo项目中预览，效果如下，与实际UI差距非常大
正确案例演示 √
输入最佳实践提示词并上传图片
deepseek回复如下：
根据图片分析，这是一个科技蓝黑风格的大屏组件，采用深色背景和亮色数据展示。我将为您创建一个符合要求的Vue3组件。
组件代码
<template>
<div class="dashboard-container">
<!-- Header区域 -->
<header class="dashboard-header">
<div class="header-title">公路运营运力调度</div>
<div class="header-tabs">
<button
:class="['tab-button', activeTab === 'status' ? 'active' : '']"
@click="activeTab = 'status'"
>
现况
</button>
<button
:class="['tab-button', activeTab === 'dispatch' ? 'active' : '']"
@click="activeTab = 'dispatch'"
>
调度
</button>
</div>
</header>
<!-- 内容区域 -->
<main class="dashboard-content">
<!-- 左侧内容 -->
<div class="content-left">
<!-- 今日路况 -->
<div class="today-status">
<h3 class="section-title">今日路况</h3>
<div class="status-grid">
<div class="status-item" v-for="item in todayStatus" :key="item.type">
<div class="status-value">{{ item.value }}</div>
<div class="status-label">{{ item.label }}</div>
</div>
</div>
</div>
<!-- 本周情况图表 -->
<div class="week-chart">
<h3 class="section-title">本周情况</h3>
<div class="chart-container" ref="chartRef"></div>
<div class="chart-dates">
<span v-for="date in weekDates" :key="date">{{ date }}</span>
</div>
</div>
</div>
<!-- 右侧表格 -->
<div class="content-right">
<h3 class="section-title">路况信息</h3>
<div class="table-container">
<table>
<thead>
<tr>
<th v-for="col in tableColumns" :key="col">{{ col }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in tableData" :key="index">
<td>{{ row.type }}</td>
<td>{{ row.location }}</td>
<td>{{ row.weather }}</td>
<td>{{ row.impact }}</td>
<td>{{ row.flow }}</td>
<td>{{ row.change }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
// 响应式数据
const activeTab = ref('status')
const chartRef = ref(null)
let chartInstance = null
// 今日路况数据
const todayStatus = ref([
{ value: '27.2', label: '车流拥堵' },
{ value: '31', label: '意外事故' },
{ value: '14.4', label: '路段施工' },
{ value: '10', label: '交通管制' },
{ value: '45', label: '高温热损' },
{ value: '1006', label: '暴雨台风' },
{ value: '30', label: '沙尘大雾' },
{ value: '17', label: '霜冻积雪' }
])
// 本周日期
const weekDates = ref(['10-18', '10-19', '10-20', '10-21', '10-22', '10-23', '昨日'])
// 表格数据
const tableColumns = ref(['路况类型', '交通路段', '气象预警', '影响预测', '小时流量', '车流变化'])
const tableData = ref([
{ type: '其他游区', location: '白云山', weather: '暴雨', impact: '未来3小时', flow: '1358', change: '' },
{ type: '温泉养生', location: '肇庆七星岩', weather: '高温', impact: '未来3小时', flow: '2733', change: '' },
{ type: '滨海娱乐', location: '惠州西湖', weather: '高温', impact: '未来3小时', flow: '8925', change: '' },
{ type: '主题乐园', location: '佛山祖庙', weather: '高温', impact: '未来3小时', flow: '1110', change: '' },
{ type: '乡村旅游', location: '开平碉楼', weather: '高温', impact: '未来3小时', flow: '1167', change: '' },
{ type: '自然风光', location: '丹霞山', weather: '高温', impact: '未来3小时', flow: '8805', change: '' },
{ type: '博物馆', location: '珠海长隆海洋王国', weather: '高温', impact: '未来3小时', flow: '8483', change: '' },
{ type: '人文荟萃', location: '深圳世界之窗', weather: '高温', impact: '未来3小时', flow: '2967', change: '' }
])
// 初始化图表
const initChart = () => {
if (!chartRef.value) return
chartInstance = echarts.init(chartRef.value)
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '15%',
top: '10%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#4a7dbb'
}
},
axisLabel: {
color: '#fff',
fontSize: 12
},
show: false // 隐藏x轴
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#4a7dbb',
fontSize: 12
},
splitLine: {
lineStyle: {
color: 'rgba(74, 125, 187, 0.3)'
}
}
},
series: [
{
name: '温度',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 8,
lineStyle: {
width: 3,
color: '#00d8ff'
},
itemStyle: {
color: '#00d8ff',
borderColor: '#fff',
borderWidth: 2
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(0, 216, 255, 0.5)' },
{ offset: 1, color: 'rgba(0, 216, 255, 0.1)' }
])
},
data: [39, 36, 33, 30, 27, 24, 27]
}
]
}
chartInstance.setOption(option)
}
// 响应式调整图表大小
const resizeChart = () => {
if (chartInstance) {
chartInstance.resize()
}
}
// 生命周期钩子
onMounted(() => {
initChart()
window.addEventListener('resize', resizeChart)
})
onBeforeUnmount(() => {
if (chartInstance) {
chartInstance.dispose()
}
window.removeEventListener('resize', resizeChart)
})
</script>
<style scoped>
/* 基础样式 */
.dashboard-container {
width: 100%;
height: 100%;
background-color: #0a1a35;
color: #fff;
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
padding: 20px;
box-sizing: border-box;
}
/* Header样式 */
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(74, 125, 187, 0.3);
}
.header-title {
font-size: 24px;
font-weight: bold;
color: #00d8ff;
text-shadow: 0 0 10px rgba(0, 216, 255, 0.5);
}
.header-tabs {
display: flex;
gap: 15px;
}
.tab-button {
padding: 8px 20px;
background: transparent;
border: 1px solid #4a7dbb;
color: #fff;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
}
.tab-button.active {
background: rgba(0, 216, 255, 0.2);
border-color: #00d8ff;
color: #00d8ff;
box-shadow: 0 0 10px rgba(0, 216, 255, 0.5);
}
/* 内容区域样式 */
.dashboard-content {
display: flex;
flex: 1;
gap: 20px;
}
.content-left {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.content-right {
flex: 1;
}
.section-title {
font-size: 18px;
margin: 0 0 15px 0;
color: #00d8ff;
padding-left: 10px;
border-left: 3px solid #00d8ff;
}
/* 今日路况样式 */
.today-status {
background: rgba(16, 42, 90, 0.5);
border-radius: 8px;
padding: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.status-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.status-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
background: rgba(74, 125, 187, 0.1);
border-radius: 6px;
border: 1px solid rgba(74, 125, 187, 0.3);
}
.status-value {
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
color: #fff;
}
.status-label {
font-size: 14px;
color: #4a7dbb;
}
/* 本周图表样式 */
.week-chart {
flex: 1;
background: rgba(16, 42, 90, 0.5);
border-radius: 8px;
padding: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
}
.chart-container {
flex: 1;
width: 100%;
}
.chart-dates {
display: flex;
justify-content: space-between;
padding: 10px 5px 0;
color: #4a7dbb;
font-size: 12px;
}
/* 表格样式 */
.table-container {
height: 100%;
background: rgba(16, 42, 90, 0.5);
border-radius: 8px;
padding: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
overflow: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid rgba(74, 125, 187, 0.3);
}
th {
color: #00d8ff;
font-weight: normal;
background: rgba(16, 42, 90, 0.8);
position: sticky;
top: 0;
}
tbody tr:hover {
background: rgba(0, 216, 255, 0.1);
}
/* 响应式调整 */
@media (max-width: 1200px) {
.dashboard-content {
flex-direction: column;
}
.status-grid {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
使用示例
<template>
<div class="app-container">
<TrafficDashboard />
</div>
</template>
<script setup>
import TrafficDashboard from './components/TrafficDashboard.vue'
</script>
<style>
.app-container {
width: 100vw;
height: 100vh;
overflow: hidden;
}
</style>
组件说明
-
组件结构:
-
Header区域: 包含标题和两个tab切换按钮
-
内容区域: 分为左右两部分
左侧: 今日路况统计和本周温度折线图
右侧: 路况信息表格
-
-
技术特点:
- 使用Vue3的Composition API
- 集成ECharts实现折线图
- 纯CSS实现科技大屏风格
- 完全响应式设计
- 使用Flex布局
-
自定义配置:
- 可以通过修改todayStatus、tableData等响应式数据来更新内容
- 图表样式可以通过修改ECharts的option对象来调整
-
注意事项:
- 组件需要在一个固定尺寸的容器中使用(如示例中的100vw×100vh)
- 确保已安装echarts依赖: npm install echarts这个组件完美复现了您提供的设计图，并添加了适当的交互效果和响应式设计。
使用vue-cli创建一个vue3的基础工程，预览组件效果如下
可以发现生成的组件结构基本接近UI，且有一些小问题，目前任何模型都或多或少会遇到这种情况，我们只需要继续提要求让它修复即可
修复提示词（关键点：要肯定前面生成的代码没有大问题，同时提出小问题所在点）
很好，现在右侧内容区table高度设置了100%，但缺少考虑title区域的高度，导致高度超出内容区了，请修复问题
将提示词发送给deepseek，回复如下
您指出的问题确实存在，我们需要调整右侧内容区的高度计算，确保包含标题区域后不会超出内容区。以下是修复后的代码：
<template>
<!-- 其他部分保持不变... -->
<!-- 修改右侧内容区结构 -->
<div class="content-right">
<div class="table-section">
<h3 class="section-title">路况信息</h3>
<div class="table-container">
<table>
<!-- 表格内容保持不变... -->
</table>
</div>
</div>
</div>
</template>
<style scoped>
/* 修改右侧内容区样式 */
.content-right {
flex: 1;
display: flex;
flex-direction: column;
}
.table-section {
display: flex;
flex-direction: column;
height: 100%; /* 确保占据全部可用高度 */
}
.table-container {
flex: 1; /* 占据剩余空间 */
min-height: 0; /* 修复flex容器中的滚动问题 */
overflow: auto; /* 添加滚动条 */
}
/* 其他样式保持不变... */
</style>
完整修复方案
以下是完整的右侧内容区代码，确保高度计算正确：
<template>
<!-- 右侧表格 -->
<div class="content-right">
<div class="table-section">
<h3 class="section-title">路况信息</h3>
<div class="table-container">
<table>
<thead>
<tr>
<th v-for="col in tableColumns" :key="col">{{ col }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in tableData" :key="index">
<td>{{ row.type }}</td>
<td>{{ row.location }}</td>
<td>{{ row.weather }}</td>
<td>{{ row.impact }}</td>
<td>{{ row.flow }}</td>
<td>{{ row.change }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<style scoped>
.content-right {
flex: 1;
display: flex;
flex-direction: column;
}
.table-section {
display: flex;
flex-direction: column;
height: 100%;
background: rgba(16, 42, 90, 0.5);
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
overflow: hidden; /* 防止内部元素溢出圆角 */
}
.table-container {
flex: 1;
min-height: 0; /* 关键修复：允许flex容器内部滚动 */
overflow: auto;
padding: 0 15px 15px; /* 调整内边距 */
}
.section-title {
font-size: 18px;
margin: 0;
padding: 15px 15px 10px;
color: #00d8ff;
border-left: 3px solid #00d8ff;
background: rgba(16, 42, 90, 0.8);
position: sticky;
top: 0;
z-index: 1;
}
/* 表格样式保持不变... */
</style>
修复要点说明
-
结构调整：
- 将右侧内容区分为两层容器：table-section和table-container
- table-section负责整体高度控制和圆角等样式
- table-container负责表格内容的滚动
-
关键CSS属性：
- min-height: 0 - 解决flex容器中子元素的滚动问题
- flex: 1 - 确保容器能充分利用可用空间
- overflow: hidden - 防止内部元素溢出圆角边界
-
标题处理：
- 将标题设置为position: sticky使其固定在顶部
- 添加适当的z-index确保标题始终在表格内容之上
这样修改后，右侧内容区将正确计算高度，包含标题区域且不会超出父容器，同时保持表格内容的可滚动性。
按照给出的回复修改后，效果如下，基本没有什么太大问题，剩下的就是自己动手微调即可，后续需求可以继续追问和补充
UI描述技巧
前面的提示词描述中我们只是简单描述了下UI，可以看到生成的结构和布局基本符合UI设计，那么有没有办法能够一次提示词就能获得比较完美的生成结果呢？
答案是让AI帮我们优化描述，以上面的提示词描述作为示例，将简要描述发送给deepseek r1，让AI帮我们优化为更加标准的提示词
我有一段关于用deepseek生成UI布局前端代码的描述如下，请你帮我分析内容是否满足生成代码需要，如果不满足，请补充或修改内容，帮助deepseek v3更好的识别和生成前端组件，以达到最佳效果。
"
这是一个科技大屏风格的设计图，底色为#08192A，所有内容title都具有科技风格的背景或边框，颜色风格为#5DC9CA，UI布局分为header区域占满一整行，接着是左右结构占满内容区。header区域分为左侧title，右侧是一个tab切换按钮区，支持点击切换视图，按钮字体默认白色，选中后颜色为#5DB2B5。内容区左侧分为上下结构，上面是路况信息，数字加粗颜色#F8D760，描述为白色，下面是统计本周情况的echarts折线图，展示x轴和y轴信息，折线图颜色用#F8D760，具备鼠标hover展示tooltip功能；内容区右侧是一个table表格，与左侧内容等高，统计路况信息，鼠标hover每一行有渐变背景效果，支持超出滚动。
"
deepseek r1回复如下，在它的思考过程中可以看到核心大致有以下5点，当我们熟练自己写描述以后也可以从这5个点出发来设计自己的提示词
以下是deepseek r1给出优化后的详细描述内容
描述：
这是一个科技大屏风格的设计图，需实现以下特征：
1. 全局样式
- 主背景色：`#08192A`
- 科技风格装饰色：`#5DC9CA`（用于标题边框/背景）
- 高亮数值色：`#F8D760`
2. 布局结构
- Header区域：占满容器顶部，高度固定为60px
- 内容区域：剩余高度自适应，采用左右分栏布局（左:右 ≈ 3:2）
- 左侧内容区：上下结构（上：固定高度200px的路况信息板块；下：自适应高度的图表区域）
3. Header组件
- 左侧标题：
- 文字："公路运营运力调度"
- 样式：左侧3px竖线装饰（颜色#5DC9CA）+ 2px发光效果
- 右侧Tab切换：
- 按钮间距：20px
- 默认样式：字体颜色#FFF，无背景
- 激活态：字体颜色#5DB2B5 + 底部2px渐现下划线动画（过渡时间300ms）
4. 左侧内容区
- 路况信息板块：
- 布局：4列网格，每列间距15px
- 数字样式：font-weight:700 + 字号24px
- 容器：半透明背景（rgba(8,25,42,0.8)） + 1px边框（rgba(93,201,202,0.2)）
- ECharts折线图：
- 尺寸：高度占满剩余空间
- 视觉：
- 数据点：圆形符号（半径8px）
- 线宽：3px
- 区域渐变：从#F8D760(30%透明度)到透明
- 交互：
- Tooltip格式：`日期：{x值}<br/>温度：{y值}°C`
- 响应式：窗口resize时自动适配
5. 右侧表格组件
- 等高设计：与左侧内容区高度一致
- 布局：
- 列宽分配：按内容自适应（路况类型:15% 交通路段:20% 气象预警:15% 影响预测:20% 小时流量:15% 车流变化:15%）
- 表头：固定定位 + 半透明背景（rgba(93,201,202,0.1)）
- 交互：
- Hover效果：线性渐变背景（90deg, rgba(93,201,202,0.1) → rgba(93,201,202,0.3)）+ 300ms过渡动画
- 滚动条：宽度6px + 轨道颜色rgba(93,201,202,0.1)
- 视觉：
- 行高：48px
- 分割线：1px实线（rgba(93,201,202,0.1)）
提示词优化
AI给出的回复最好不要直接使用，因为编程领域最重要的是稳定性，而AI本身会因为AI幻觉的问题创造一些不太符合实际的内容，因此根据给出的回复，我进行了以下补充和调整，你可以直接套用模板，按需微调就可以得到比较好的生成效果，大大减少了手动布局的时间
角色：
你是一个前端业务组件生成专家，善于识别图片UI和根据用户的描述，生成对应的业务组件
描述：
这是一个科技大屏风格的设计图，需实现以下特征：
1. 全局样式
- 主背景色：#08192A
- 科技风格装饰色：#5DC9CA（用于标题边框/背景）
- 高亮数值色：#F8D760
2. 布局结构
- Header区域：占满容器顶部，高度固定为60px
- 内容区域：剩余高度自适应，采用左右分栏布局（左:右 ≈ 2:3）
- 左侧内容区：上下结构（上：固定高度200px的路况信息板块；下：自适应高度的图表区域）
- 右侧内容区：与左侧内容区等高的表格组件，支持点击title左侧按钮收起/展开表格
3. Header区域
- 布局：左右结构（左边是标题区域，右边是Tab按钮区）
- 样式：透明背景色、无边框
- 左侧标题：
- 文字："公路运营运力调度"
- 样式：背景颜色#102A3B + 1px边框颜色#275A66 + 扩散5px的文字发光效果
- 右侧Tab切换：
- 按钮间距：0px
- 默认样式：字体颜色#FFF，背景色#112C3D，边框1px
- 激活态：字体和边框颜色#5DB2B5，背景色#112C3C，边框添加路径动画顺时针闭合，持续300ms
4. 左侧内容区
- 路况信息板块：
- 布局：4列网格，每列间距15px，背景透明
- title样式：扩散5px的文字发光效果，无边框
- 数字样式：font-weight:700 + 字号24px + 颜色#F8D760
- 背景色：透明背景
- ECharts折线图板块：
- 容器尺寸：高度占满剩余空间，折线图容器高度等于100% - title区域高度
- title
- 样式：扩散5px的文字发光效果，无边框
- 视觉：
- 数据点：圆形符号（半径8px）
- 线宽：3px
- 区域渐变：无
- 分割线：白色半透明虚线
- 折线颜色：#F8D760
- 交互：
- Tooltip格式：`日期：{x值}<br/>温度：{y值}°C`
- 响应式：窗口resize时自动适配
- 背景色：透明背景
5. 右侧表格组件
- 容器尺寸：与左侧内容区高度一致
- 背景色：透明背景
- title
- 样式：扩散5px的文字发光效果 + 1px边框 + 背景渐变色（#102A3B → #112C3D）+ margin-bottom: 20px
- 交互：title文字左侧箭头按钮，添加点击事件，支持点击收起/展开表格
- 布局：
- 列宽分配：按内容自适应
- 表头：固定定位 + 半透明背景（rgba(93,201,202,0.1)）
- 交互：
- Hover整行效果：线性渐变背景（90deg, rgba(93,201,202,0.1) → rgba(93,201,202,0.3)）+ 300ms过渡动画
- Y轴内容超出滚动条：宽度6px + 轨道颜色rgba(93,201,202,0.1)
- 视觉：
- 行高：48px
- 分割线：无
限制：
1. 不要打破角色设定，只能回答和组件生成相关的问题
2. 不要胡言乱语，不要编造 API
3. 使用vue3+echarts+原生css实现需求
4. 使用flex布局
5. 代码生成符合solid原则
6. 在用户没有明确要求的情况下，子容器宽高不得超出父容器
7. 添加详细的代码注释，帮助用户理解
工作步骤：
1. 识别用户上传的图片，解析图片的背景色和UI风格
2. 根据用户描述和限制生成美观的UI风格和结构布局
3. 生成完整可运行的组件代码
4. 给出使用示例，告知用户如何使用
核心点在于分区描述，先描述整体风格、样式细节、布局细节，再根据整体布局结构分区描述，依旧是以布局、样式、交互等细节为主。
最终我将修改后的提示词发送给deepseek v3，运行生成结果中的代码进行预览，得到以下页面预览效果，虽然与UI还有一些差距，但生成代码UI的质量比前面高出很多了
识图生成组件代码工具对比
目前前端根据图片生成组件的最好工具我个人认为是v0，其次是claude3.7，接着是DeepSeek-V3-0324
- v0：识别图片能力顶尖，还原UI效果最好，使用提示词最简单
- claude3.7：识别图片能力一般，还原UI效果中等，使用提示词中等难度
- DeepSeek-V3-0324：识别图片能力微弱，还原UI效果取决于提示词工程，难度稍大
国产的一些大模型如豆包、通义千问等在编程领域识别图片转换代码的能力经过一段时间的使用，基本可以忽略，目前只能说期望未来吧
以下是我使用v0生成当前样例的demo，一共用了三次提示词
第一次提示
生成结果，基本还原UI布局和效果
第二次提示
生成结果，补充了按钮的交互事件，支持切换视图
第三次提示
生成结果，优化了UI效果，支持切换视图
可以看出来v0的提示词非常简单，不需要给出过多的描述和详细工作步骤就能生成效果非常好的组件代码，背后的逻辑也是预置了非常完善和规范的提示词工程。
如何编写提示词
如果你想使用其它模型来实战，但不知道怎么编写提示词，完全可以让AI来帮你做，例如：让deepseek帮忙生成标准化提示词
提示词如下：
你是一位大模型提示词生成专家，请根据用户的需求编写一个前端组件生成智能助手的提示词，来指导大模型进行内容生成，要求：
1. 以 Markdown 格式输出
2. 贴合用户需求，描述智能助手的定位、能力、知识储备
3. 提示词应清晰、精确、易于理解，在保持质量的同时，尽可能简洁
4. 只输出提示词，不要输出多余解释
deepseek回复结果：
## 定位
- 专业前端组件生成专家
- 设计稿转代码的AI执行引擎
- 现代Web开发规范的实施者
## 核心能力
1. **视觉解析**
- 识别设计稿布局结构（Flex/Grid/绝对定位）
- 提取颜色体系/间距系统/字体层级
- 解析交互状态（hover/active/disabled）
2. **组件识别**
- 判断组件类型（原子组件/复合组件）
- 识别UI模式（表单/导航/数据展示）
- 检测响应式断点（移动端/平板/桌面）
3. **代码生成**
- 输出React/Vue/Svelte组件
- 自动生成Tailwind CSS/SCSS样式
- 生成可配置的Props接口
- 添加语义化ARIA属性
- 符合solid原则
## 知识储备
1. **现代前端技术栈**
- React 18+/Vue 3+/Svelte 4+
- CSS Modules/Tailwind CSS/PostCSS
- TypeScript 5+/ECMAScript 2023
2. **设计系统规范**
- Material Design 3
- Apple Human Interface
- Ant Design 5.0
3. **组件库基准**
- Headless UI/Radix UI
- Chakra UI/Mantine
- Bootstrap 5
4. **跨平台适配**
- 移动端优先原则
- 容器查询实现方案
- 深色模式自动切换
## 输出要求
- 组件化：导出独立模块
- 可维护性：清晰的Props接口
- 可访问性：WAI-ARIA 1.2标准
- 性能优化：CSS原子化方案
- 响应式：基于容器查询的布局
- 类型安全：完整的TypeScript定义
通过deepseek回复的标准化提示词，再加以微调，基本可以应对当下百花齐放的各种大模型。
持续关注，保持学习，才能立于不败之地。
