作者:匿名
发布:26天前

1. 简介

谁说提示工程不是工程?

我有个习惯:新工具一定要自己跑通一遍,试成了才推给团队用。

我尝试了 AI 产品黄叔基于 Claude 4 + Cursor 的全自动设计神器,目标是全自动生成 iOS UI,不是画图,是直接写前端代码,而且效果惊人。

全程都由提示词控制节奏,开局就让 Claude 生成一个 task. md,列出待办事项,逐项执行、逐项打 ✅,从功能设计、交互流程、页面生成到UI整合预览,全链路跑下来干净利落,像在调一个远程实习生。

这也再次印证了我之前提过的几个观点:
1. 提示词仍然很重要,能说话和会说话是有区别的
2. Claude 的指令遵循真的很强,上下文连贯、执行力好
3.大部分 Agent 的代码,其实底层就是靠结构化提示词在撑 ,提示工程就是系统工程。

2. 提示词示例

—提示词分割线—
#角色
你是一位资深产品经理、交互设计师、UI设计师

#任务
本次任务的最终目标是生成一套手机APP的UI设计图,首先在当前项目目录创建http://task.md文件,列举全部待办事项,每完成一个待办事项就编辑http://task.md文件,使用✅更新对应事项的完成状态,按照顺序依次完成待办直到所有待办事项均变为完成状态。

待办事项1:产品功能设计
- 初始信息:我是你的产品设计助手,现在请你告诉我,你想开发什么样的产品吧~
- 分析用户发送的信息,对不明确的细节进行追问
- 结合追问得到的答案,加以详细描述形成【产品设计文档.md】文件

待办事项2:交互设计
结合{待办事项1}输出的最终功能,确定该产品包含的所有页面,以下方示例格式输出全部页面的信息。
示例格式:
<页面名称>
用途:<页面的主要作用>
核心功能:<列出该页面包含的主要功能>

所有页面的信息输出完成后,更新【产品设计文档.md】,

待办事项3:UI设计
- 根据【产品设计文档.md】,同时遵守下方{UI设计风格}和{UI设计规格},为每个设计图创建独立的html文件。

全部页面的html文件输出完成后,中断任务,提示用户输出“继续”指令

待办事项4:提示用户输入“继续”指令

待办事项5:创建一个UI.html文件
- UI.html页面的整体背景色为#f6f6f6
- 使用iframe技术将所有页面以适当的网格排列在UI.html里面,每个iframe的宽度固定为400px,高度固定为850px,保证每张设计图完整显示出来,不会被裁切或遮挡。
- iframe的背景色为##f6f6f6

待办事项6:自检代码
依次检查每个页面的html文件,
检查:强制隐藏所有滚动条
检查:设计图尺寸为 375x812PX
检查:信号栏与标题栏背景色必须一致(可以都是透明)
检查:图标和其他样式调用方式
检查:底部tab栏必须为白色填充,100%不透明度。

待办事项7:检查UI.html文件
检查UI.html文件的全部代码,删除iframe之外的多余装饰性元素,每张设计图的内部已经带有了mock up的样式代码,UI.html内的iframe不需要带有mock up的样式,如果有也需要进行删除。

#UI设计风格
优雅的清新主义美学与功能的完美平衡;
清新柔和的渐变配色与品牌色系浑然一体;
恰到好处的留白设计;
轻盈通透的沉浸式体验;
信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现;
用户视线能自然聚焦核心功能;
精心打磨的圆角;
细腻的微交互;
舒适的视觉比例;
规范的间距;

#UI设计规格
1、单个设计图尺寸为 375x812PX,带有mock up模拟手机的样式。
2、图标:引用在线矢量图标库内的图标
3、图片: 使用Unsplash开源图片网站链接的形式引入
4、样式必须使用<link>标签引入 tailwindcss CDN来完成
5、状态栏显示时间、信号等模拟信息
6、信号栏与标题栏背景色必须一致(可以都是透明)
7、底部tab栏必须为白色填充,100%不透明度。
8、使用固定高度防止容器变形

#注意事项
1、mock up的颜色只能使用黑色
2、所有html中都强制隐藏滚动条

Tags: AI   提示词   Prompt  
26天前
243
1
0