跳到主要内容

提示词示例参考

1. 图表不显示，修复参考提示词​

<xxx 图表>不显示，请检查 echarts 代码完整性并修复

---将<>中的内容替换成实际图表名称---

2. 图表显示尺寸不正确​

1. 如果图表对应的父容器是隐藏状态，需要监听父容器显示，再进行图表初始化
2. 监听图表对应的父容器 dom 尺寸变化
3. 等变化完成后，再重新对相应的 echarts 对象进行 resize 操作，resize 的参数需要是父容器的宽高
注意：需要防止容器无限变化

3. 如何让页面编辑起来更方便​

初次生成时，提示词最下方加上示例这一段，可以让生成的页面基本都是支持平台编辑操作的静态内容：

所有内容都使用静态页面生成，不要使用 JavaScript 动态生成或者 append html. 
代码中的 JavaScript 代码只用来做跳转或者 html 元素显隐

4. 在桌面端模式下一次性生成多张移动端 UI 图​

## 产品需求：
应用类型：英语背单词的应用

## 技术规格：
▸ 单个 HTML 每行为 3 个横向排列的页面预览，可以有 2 行，六个页面；代码需要包含所有功能页面；
▸ 画板尺寸：375x812（带 1px 描边模拟手机边框）；强制隐藏滚动条

---核心是技术规格---

5. 使用 deepseek 等优化提示词​

使用以下模板，让 deepseek 等大模型优化你的需求描述：

你是一名专业的 ui 设计师
请对用户输入的需求从页面布局，交互，风格等角度进行优化

用户输入：

输出：

6. 响应式设计提示词​

平台生成的页面默认支持响应式设计，如需要指定变化要求，可参考下方示例：

好示例："生成博客首页原型：桌面端（>1200px）显示 3 列文章卡片；平板（768-1200px）显示 2 列；手机（<768px）显示 1 列，导航栏转为汉堡菜单"
坏示例："博客页要适配手机和电脑"

7. 表单设计类提示词​

好示例："生成注册表单：2 列布局，左列姓名（文本框，必填）/邮箱（格式验证）/手机号（11 位数字），右列密码（8-16 位含大小写）/确认密码（与密码一致）/验证码（6 位数字 + 发送按钮）"
坏示例："注册表单要有姓名和密码"

8. 增删元素提示词​

好示例："修改商品详情页：在价格下方新增'服务承诺'区块（图标 + 文字'7 天无理由退货'），删除右侧'加入收藏'按钮（位于'加入购物车'下方）"
坏示例："商品页加个服务说明，去掉收藏按钮"

9. 布局调整提示词​

好示例："修改列表页：将商品卡片从 2 列布局改为 3 列（每列宽度从 50% 减至 33.33%），卡片间距从 20px 调整为 16px，保持响应式断点不变"
坏示例："商品列表改密一点"

10. 交互调整提示词​

好示例："修改搜索功能：原点击搜索按钮触发搜索，改为输入框输入完成后 300ms 自动搜索，同时保留按钮触发方式"
坏示例："搜索要改得好用点"

11. 内容替换提示词​

好示例："修改轮播图：将首页第 2 张轮播图（当前显示'夏季促销'）替换为'秋季新品上市'，图片尺寸保持 1920x500px，文字位置居中"
坏示例："换一下轮播图的内容"

12. 数据展示样式调整提示词​

好示例："修改销售报表：将'月度销售额'折线图的 X 轴从'日期'改为'周'（显示近 12 周），Y 轴刻度从 0-10000 调整为 0-15000，添加数据标签"
坏示例："报表的时间维度改一下"

13. 加载状态样式提示词​

好示例："修改列表加载：将商品列表的整页加载动画（顶部转圈）改为卡片骨架屏（每个商品位置显示灰色占位块，图片区圆形加载动画）"
坏示例："列表加载动画换一种"