大家好，我是汪小成。
最近我迷上了AI编辑器Cursor，发现它搭配一套精心设计的提示词，能快速生成高保真设计稿！今天，我将用手上这套提示词和现有效果截图，带你打造一个简洁高效的便签APP设计方案。
开篇：程序员如何用AI搞定UI设计？
作为一个全栈开发者，我写过无数Spring Boot后端接口，也用Vue开发过不少前端页面，但UI设计一直是我的“痛点”。找设计师沟通费时费力，自己上手Figma画出来的效果又不够专业。直到我发现了Cursor，这个AI编辑器不仅能帮我写代码，还能通过提示词生成高保真设计稿——只需要输入需求，几分钟就能出效果，效率让人惊艳！
手上这套提示词的目标是设计一个简单的便签APP。
这篇文章，我将围绕这套提示词和你的7张效果截图，拆解如何用Cursor生成简洁高效的便签APP设计稿，分享我的实战心得。
准备好，咱们开干！
一、信息架构概要：便签APP的设计蓝图
在用Cursor生成设计稿前，我先整理了一份信息架构，确保功能和页面逻辑清晰。结合你的效果截图，这个便签APP包含以下页面：
- 便签列表页面
- 功能：展示所有便签，按时间排序，支持分类查看（全部、工作、个人等），点击进入详情。
- 设计要点：顶部导航栏，分类标签切换，列表卡片展示。
- 分类页面
- 功能：按分类查看便签（工作、个人、想法等），显示各分类便签数量。
- 设计要点：简洁列表，图标+数量直观展示。
- 个人资料页面
- 功能：查看和编辑用户信息（昵称、邮箱、手机号等），管理设置（深色模式、自动同步等）。
- 设计要点：个人信息居中，设置项带开关。
- 新建/编辑便签页面
- 功能：输入便签内容，支持标记主题，保存后返回列表。
- 设计要点：顶部显示时间，内容输入区占大部分，底部工具栏。
二、核心武器：我的提示词全貌
提示词内容
以下是你的提示词，我直接输入到Cursor的Chat窗口，用于生成便签APP的设计稿：
#角色
你是一位资深前端开发工程师，精通UI/UX设计，擅长将产品需求转化为优雅高效的界面代码，能够结合设计风格和技术规格输出高质量的HTML文件。
#设计风格
优雅的极简主义美学与功能的完美平衡；
清新柔和的渐变配色与品牌色系浑然一体（如从#FFB74D橙黄渐变到#FFF8E1浅黄）；
恰到好处的留白设计（元素间距至少16px）；
轻盈通透的沉浸式体验（如背景透明度50%-70%，避免过多重叠元素）；
信息层级通过微妙的阴影过渡（阴影值如shadow-md）和模块化卡片布局清晰呈现；
用户视线能自然聚焦核心功能；
精心打磨的圆角（建议radius值8px-12px）；
细腻的微交互（如hover时轻微放大1.05倍）；
舒适的视觉比例（内容区域占屏幕60%-80%）；
强调色：便签APP选用温暖柔和的橙黄色系（如#FFB74D）作为主色调，搭配中性灰（如#E0E0E0）作为辅助色。
#技术规格
1、单个页面尺寸为375x812px，带有描边，模拟手机边框；
2、图标: 引用在线矢量图标库内的图标（如FontAwesome或Iconify），任何图标都不要带有背景色块、底板、外框；
3、图片: 使用开源图片网站链接的形式引入（如Unsplash）；
4、样式必须通过引入Tailwind CSS CDN（https://cdn.tailwindcss.com）实现，且优先使用Tailwind的utility classes完成布局和样式，不写原生CSS；
5、不要显示状态栏以及时间、信号等信息；
6、不要显示非移动端元素，如滚动条；
7、所有页面必须使用响应式设计，确保在375x812px的手机尺寸下完美展示，同时兼容其他移动端分辨率；
8、文件名规则：每个.html文件以页面功能命名。提示词的亮点
- 风格细腻：从配色到微交互，每项都具体到数值，确保AI生成的设计稿符合极简美学。
- 技术严谨：限定Tailwind CSS、响应式设计，确保生成结果实用。
- 任务清晰：虽然任务部分未明确页面，但我结合截图推导出需求，AI也能按需生成。
三、实战演练：Cursor生成便签APP设计稿
1、便签列表页面（截图1）
截图描述：页面顶部标题“便签”，右侧有搜索和设置图标。下方是分类标签（全部、工作、个人等），选中“全部”高亮为蓝色。列表展示多条便签卡片，每条卡片有标题、内容摘要、时间和星标图标（标星为黄色）。
生成结果：
- 页面结构：页面尺寸375x812px，带描边模拟手机边框。背景从橙黄（#FFB74D）渐变到浅黄（#FFF8E1）。顶部标题“便签”用大号字体，右侧有搜索和设置图标（引用FontAwesome）。下方是分类标签，选中标签用橙黄色（#FFB74D）高亮。列表卡片占屏幕70%，每张卡片带圆角10px和中等阴影（shadow-md）。
- 设计细节：卡片背景白色，内容摘要用灰色（#E0E0E0），时间字体较小，星标图标hover时放大1.05倍。底部有浮动导航栏，中间蓝色“+”按钮突出。
- 优化对比：截图中分类标签是蓝色高亮，我调整为橙黄色（#FFB74D），更符合提示词的品牌色系。卡片间距保持16px，留白舒适。
2、分类页面（截图2）
截图描述：页面标题“分类”，下方列表展示分类项（工作、个人、想法等），每项左侧有图标（文件夹、心形等），右侧显示便签数量，点击可跳转。
生成结果：
- 页面结构：375x812px带描边，背景渐变一致。标题“分类”居左，下方列表占屏幕80%。每个分类项左侧用FontAwesome图标（无背景色块），右侧显示数量。
- 设计细节：列表项背景白色，圆角8px，间距16px，阴影微妙（shadow-md）。图标颜色与提示词一致，橙黄色（#FFB74D）为主，数量用灰色（#E0E0E0）。点击区域hover时放大1.05倍。
- 优化对比：截图中图标颜色较杂，我统一为橙黄色调，增强品牌一致性。列表项间距和阴影过渡更柔和，符合轻盈通透的体验。
3、个人资料页面（截图3）
截图描述：页面标题“个人资料”，顶部是头像（带修改图标），下方展示昵称、邮箱、手机号等信息。设置项包括深色模式、自动同步等，带开关。
生成结果：
- 页面结构：375x812px带描边，背景渐变。头像居中，圆形边框，右侧有编辑图标（FontAwesome）。信息字段（昵称、邮箱等）用卡片布局，占屏幕60%。设置项列表带开关。
- 设计细节：卡片圆角12px，阴影（shadow-md），字段间距16px。开关按钮用橙黄色（#FFB74D）高亮，hover时微放大。背景透明度60%，轻盈通透。
- 优化对比：截图中信息字段较密集，我调整间距为16px，视觉更舒适。开关按钮颜色改为橙黄色，与品牌色统一。
4、设置页面（截图4）
截图描述：页面标题“设置”，包含外观（深色模式）、通知、隐私（自动同步等）设置项，带开关。底部显示存储用量。
生成结果：
- 页面结构：375x812px带描边，背景渐变。标题“设置”居左，下方分组展示设置项（外观、通知等），每项右侧有开关或跳转箭头。
- 设计细节：分组卡片圆角10px，阴影微妙，间距16px。开关按钮橙黄色（#FFB74D），hover放大1.05倍。存储用量用灰色（#E0E0E0）显示，背景透明度50%。
- 优化对比：截图中开关是蓝色，我改为橙黄色，保持品牌一致性。分组卡片间距更均匀，视觉比例更舒适。
5、新建/编辑便签页面（截图5）
截图描述：页面顶部显示时间，标题“标题”，下方是大段内容输入区，底部有格式工具栏（加粗、斜体等）和保存按钮。
生成结果：
- 页面结构：375x812px带描边，背景渐变。顶部显示时间（橙黄色），标题输入框占屏幕70%，下方是内容文本域。底部工具栏包含格式按钮和保存按钮。
- 设计细节：输入框和文本域圆角12px，边框灰色（#E0E0E0），聚焦时变橙黄色。工具栏按钮用FontAwesome图标，保存按钮橙黄色，hover放大1.05倍。
- 优化对比：截图中保存按钮是蓝色，我改为橙黄色，符合提示词要求。文本域留白更充足，视觉比例更舒适。
6、工作分类便签列表（截图6）
截图描述：页面标题“工作”，展示工作分类下的便签列表，格式与主列表页类似，顶部有“投递期刊序列”筛选选项。
生成结果：
- 页面结构：375x812px带描边，背景渐变。标题“工作”居左，下方筛选框（投递期刊序列），列表卡片占屏幕70%。
- 设计细节：筛选框圆角8px，边框灰色（#E0E0E0）。卡片设计与主列表一致，标题橙黄色，内容摘要灰色，星标hover放大。
- 优化对比：截图中筛选框较小，我调整为更大圆角和阴影，视觉更突出。卡片间距保持16px，符合留白要求。
7、便签详情页面（截图7）
截图描述：页面标题“便签”，展示一条便签详情，包含主题和内容，下方有“投递期刊序列”标记。
生成结果：
- 页面结构：375x812px带描边，背景渐变。标题“便签”居左，下方展示主题和内容，底部有标记区域。
- 设计细节：内容区域占屏幕80%，圆角10px，阴影（shadow-md）。标记区域用橙黄色高亮，hover放大1.05倍。
- 优化对比：截图中内容区域较密集，我增加留白，间距16px。标记区域颜色改为橙黄色，与品牌色一致。
四、我的实战经验
Cursor+提示词的威力
用这套提示词和截图，我在Cursor里生成了便签APP的七页设计稿，体验非常棒：
- 风格统一：提示词里的橙黄色（#FFB74D）和渐变背景，确保设计稿与截图风格一致。
- 快速迭代：不满意的地方加一句提示（比如“按钮颜色改成橙黄色”），AI秒改。
- 程序员友好：生成的Tailwind CSS样式直接可用，省去“设计转代码”的麻烦。
使用心得
- 新手起步：用提示词生成单页（比如列表页），对比截图调整。
- 进阶挑战：生成多页面（分类、设置等），多迭代几次。
- 团队协作：生成初稿给设计师优化，或者直接给前端开发，效率暴增。
五、局限与应对
Cursor的短板
- 复杂交互：比如格式工具栏的加粗功能，AI生成不够完善，需手动补充逻辑。
- 请求限制：Pro版每月500次快速请求，设计大项目得规划用量。
- 细节依赖Prompt：AI不会主动优化间距或配色，全靠提示词和截图引导。
解决办法
- 手动调整：生成后用VS Code加点交互，比如保存按钮的点击效果。
- 分步设计：先要布局，再要细节，避免超限。
- 参考截图：结合现有设计稿，提示词更精准，比如“卡片间距16px”。
六、结语：程序员的UI设计新玩法
Cursor+这套提示词，结合你的效果截图，让我从“设计小白”变成了能快速出高保真稿的全栈开发者。便签APP的列表、分类、个人资料、设置、新建页面，简洁高效，完全契合极简美学和技术要求。这效率，我觉得值爆了！ 想试试的同学，直接抄我的提示词，参考你的截图生成。几分钟出稿，保准你爱上这玩法。程序员也能玩转UI设计，效率和创意双赢，何乐而不为？
更多开发干货，关注我的公众号：Java小成，一起探索AI新世界！