在 AI 设计工具的加持下，原型的生成速度大幅提升，但如何让 AI 产出的原型更具高级感？本篇文章将分享 4 个实战技巧，帮助产品经理优化 AI 生成的 UI 设计，让原型不仅高效，更能展现专业与美感。
在上一篇关于“需求->原型”工作流的文章中，我分享了如何利用AI原型工具，将脑海中的需求快速转化为初步可见可交互的原型。
然而，如果尝试过就会发现：若不特别指定UI风格，AI生成的原型往往风格趋同，不够优雅。
比如下方的网站首页案例：
因此，本文将分享4个实战技巧和对应的案例模板，让AI生成的原型更优雅，有令人眼前一亮的“高级感”。
话不多说，我们直接开始！
过去我对“行业黑话”不以为然，但在与AI协作的过程中，会发现许多行业术语是高度浓缩的精华，一个词往往能替代外行半天的描述，一语胜千言。
以设计风格为例，有：
……
下面通过创建爱因斯坦个人简介网站的示例，展示不同设计风格的效果。
工具建议选用Lovable、Gemini 2.5、Cursor(模型选Claude 3.7)等，选用其他的模型效果不一定好。
我的提示词统一为：
请你使用{具体风格(如粗犷主义)}创建一个爱因斯坦的个人介绍中文网站
创建工具：Lovable
预览链接：https://aiben.cc/memphis.html
创建工具：Gemini 2.5
创建工具：Lovable
预览链接：https://aiben.cc/vintagepape.html
创建工具：Gemini 2.5
创建工具：Lovable
风格其实非常多，上述只是一些示例。怎么获取更多的【行业黑话】？
这里贴一段提示词大神李继刚老师的观点：
大模型越来越强，所知越来越多，第一象限的「AI 知 x 我知」越来越大，Prompt 趋向于「简单说」。
简单说「什么」呢？核心关键词。
「吉卜力风格」「Bento Grid 」「Knolling」…
未来能第一个说出来这些「Magic Words」的人，就率先打开了一个新的参数空间。
怎么才能知道「这些词」呢？
两个思路：
1. 老生常谈的「多读多看多学」
2. 在你自己从事的领域中挖掘，毕竟没人比你更懂你自己
技巧一提及的设计风格术语，好比为AI选定了“画笔型号”与“画布材质”。
有些时候确实无法准确说出自己想要的风格怎么办？那就需要高质量的提示词来参考了！
以下列举3个原型及对应prompt，均为个人构思与社区高分UI Prompt框架的融合，供参考。
创建工具：Cursor+Claude 3.7
角色:你是一位资深前端开发工程师设计
风格:
1.优雅的极简主义美学与功能的完美平衡;
2.清新柔和的渐变配色与品牌色系浑然一体;
3.恰到好处的留白设计;
4.轻盈通透的沉浸式体验;
5.信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现;
6.用户视线能自然聚焦核心功能;
7.精心打磨的圆角;
8.细腻的微交互;
9.舒适的视觉比例;
10.强调色：按APP类型选择;
技术规格:
1.单个页面尺寸为 375x812PX，带有描边，模拟手机边框
2.图标:引用在线矢量图标库内的图标(任何图标都不要带有背景色块、底板、外框）
3.图片: 使用开源图片网站链接的形式引入
4.样式必须引入 tailwindcss CDN来完成
5.不要显示状态栏以及时间、信号等信息
6.不要显示非移动端元素，如滚动条
7.所有文字只可以使用黑色或白色
任务:
这是一个{XX（输入你要创建的内容）}APP。
模拟产品经理输出详细功能设计、信息架构设计，结合{设计风格}和{技术规格}输出一套UI设计方案。
生成一个UI.html文件放入所有页面。
现在请生成前2个页面。
在线预览地址：https://aiben.cc/bentogrid.html
创建工具：Cursor+Claude 3.7，输出的代码可保存为.html文件后用浏览器打开。
设计一个现代、简约、高端的产品/服务发布页面，使用 Bento Grid 风格布局，将所有关键信息紧凑地呈现在一个屏幕内。
内容要点：{小米Su7 Ultra}
设计要求：
1.使用 Bento Grid 布局：创建一个由不同大小卡片组成的网格，每个卡片包含特定类别的信息，整体布局要紧凑但不拥挤
2.卡片设计：所有卡片应有明显圆角（20px 边框半径），细微的阴影效果，悬停时有轻微上浮动效果
3.色彩方案：使用暗黑科技方案，搭配渐变色作为强调色
4.排版层次：
-大号粗体数字/标题：使用渐变色强调关键数据点和主要标题
-中等大小标题：用于卡片标题，清晰表明内容类别
-小号文本：用灰色呈现支持性描述文字
5.内容组织：
-顶部行：主要公告、产品特色、性能指标或主要卖点
-中间行：产品规格、技术细节、功能特性
-底部行：使用指南和结论/行动号召
6.视觉元素：
-使用简单图标表示各项特性
-进度条或图表展示比较数据
-网格和卡片布局创造视觉节奏
-标签以小胶囊形式展示分类信息
7.响应式设计：页面应能适应不同屏幕尺寸，在移动设备上保持良好的可读性设计风格参考：
-整体设计风格类似苹果官网产品规格页面-使用大量留白和简洁的视觉元素
-强调数字和关键特性，减少冗长文字-使用渐变色突出重要数据
-卡片间有适当间距，创造清晰的视觉分隔
输出格式：html代码
在线预览地址：https://reurl.cc/lzXKoE
创建工具：Lovable
请设计一个现代、专业的【中文客户关系管理（CRM）系统】，旨在帮助企业高效管理客户信息、追踪销售机会并提升客户互动。系统需具备简洁的用户体验（UX）、最小化的界面干扰、优雅的间距布局以及高级感的UI细节。
核心设计要求：
1.视觉风格：
采用冷静且专业的色调，搭配现代无衬线字体（如：Inter、思源黑体、苹方或类似Söhne的现代字体）。界面元素多采用圆角设计和微妙的阴影效果，营造高级感和舒适感。
2.用户体验：
优先考虑信息的清晰度、操作的层级感和流畅沉稳的用户体验，可参考Linear或Superhuman等工具的设计理念。整体追求具有苹果（Apple）设计风格的高级感与独特布局。
3.语言：
系统界面语言为简体中文。
篇幅有限，不胜枚举，关键在于日常积累与实践。
目前我正在制作一个产品经理AI知识库，后续会把我所积累的好的各类提示词整理进去。
如果你在设计一个完整的原型，需要各个页面/模块风格一致，那我建议你使用UI框架。
UI框架能够明确的设计规范与组件集，进而确保原型风格的统一性与专业性。
因此在给AI的Prompt中声明所选UI框架即可，如：
请使用{UI框架（如shadcn/ui）}构建一个后台管理系统的数据看板。
业界优秀UI框架很多，这里分享3个用得顺手的。
网址：https://ui.shadcn.com/themes
类比：设计师定制款观感: 以极简、现代的设计风格著称，尤其是其默认基础款的黑白配色，简约而不简单！
适用场景：适合需要高度定制化界面、追求极简现代设计风格的项目，如个人作品集、初创产品等。我自己的个人网站就是基于此UI构建的，有兴趣可以点击查看（www.aiben.cc）
网址：https://daisyui.com/theme-generator
类比：时尚快消主题款
观感：提供多种预设主题，风格多样，涵盖从简约到复古的多种设计。你可以在其官网的主题生成器中尝试，找到心仪主题后，将主题名称告知AI，AI便会遵循此风格进行设计。
使用场景：适合需要快速开发，主题多样化的项目，如博客、营销页面、轻量级应用等
网址：https://ant.design/index-cn
类比：企业统一制服
观感：蚂蚁集团出品，企业级 UI 设计语言，风格稳重、专业，强调一致性和可用性
使用场景：适合构建企业级应用，如后台管理系统、ERP 系统等2B/2G项目
“希望产品界面优雅且独一无二，完全体现自己的个人/品牌调性”-> 考虑 shadcn UI
“我们需要快速上线一个看起来不错的版本，之后再迭代”-> 考虑 daisyUI
“我们正在做一个复杂的后台管理系统，需要专业、稳定、功能全面的界面”-> 考虑 Ant Design
除上述3个，还有很多优秀的UI框架/组件库，感兴趣的自行探索吧~
如果我们想要一个几乎100%精美的界面，直接采用高质量开源模板是高效之选。
从哪里找模板？我推荐以下2个：
优势：完全免费，模板种类超多（网站首页仪表盘/应用系统/个人网站等），质量很高，开箱即用。
用法：找到自己中意的，下载后利用Cursor打开，就可以开始定制修改！具体修改技巧会在后续Cursor的分享中介绍。
优势：上述网址对应的是移动端app的UI合集，质量都超高，非常优雅！
用法：该项目提供UI图片，旨在提升审美、启发灵感。可将图片交由Lovable/Cursor等工具复刻，或在GitHub搜索现成模板，搜索方法可咨询AI：）
OK，本文分享了4个让原型更优雅的实用技巧：
希望这些技巧能帮助大家更好地与AI协作，真正为自己的工作进行提质提效！
感谢阅读，我们下期再见！
作者：Ben的AI实验室 公众号：Ben的AI实验室
本文由 @Ben的AI实验室 原创发布于人人都是产品经理。未经作者许可，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。