4个实战技巧，提升产品原型"高级感"!

Ben的AI实验室
0 阅读6分钟

引子

在上一篇关于“需求->原型”工作流的文章中，我分享了如何利用AI原型工具，将脑海中的需求快速转化为初步可见可交互的原型。

然而，如果尝试过就会发现：若不特别指定UI风格，AI生成的原型往往风格趋同，不够优雅。

比如下方的网站首页案例：

因此，本文将分享4个实战技巧和对应的案例模板，让AI生成的原型更优雅，有令人眼前一亮的“高级感”。

  1. 技巧一：活用行业黑话

  2. 技巧二：积累高分提示词

  3. 技巧三：巧选UI框架

  4. 技巧四：借鉴开源模板

话不多说，我们直接开始！

技巧一：活用行业黑话

过去我对“行业黑话”不以为然，但在与AI协作的过程中，会发现许多行业术语是高度浓缩的精华，一个词往往能替代外行半天的描述，一语胜千言。

以设计风格为例，有：

  • 粗犷主义风格（Brutalist）

  • 孟菲斯风格（Memphis）

  • 黏土拟态风格（Claymorphism）

  • 复古纸张风格（Vintage Paper）

  • 扁平化风格（Flat Design）

  • ……

下面通过创建爱因斯坦个人简介网站的示例，展示不同设计风格的效果。

工具建议选用Lovable、Gemini 2.5、Cursor(模型选Claude 3.7)等，选用其他的模型效果不一定好。

我的提示词统一为：

1. 粗犷主义风格（Brutalist）

2. 孟菲斯风格（Memphis）

3. 黏土拟态风格（Claymorphism）

4. 复古纸张风格（Vintage Pape）

5. 扁平化风格（Flat）

6. 小结

风格其实非常多，上述只是一些示例。怎么获取更多的【行业黑话】？

这里贴一段提示词大神李继刚老师的观点：

大模型越来越强，所知越来越多，第一象限的「AI 知 x 我知」越来越大，Prompt 趋向于「简单说」。

简单说「什么」呢？核心关键词。

「吉卜力风格」「Bento Grid 」「Knolling」...

未来能第一个说出来这些「Magic Words」的人，就率先打开了一个新的参数空间。

怎么才能知道「这些词」呢？

两个思路：

  1. 老生常谈的「多读多看多学」

  2. 在你自己从事的领域中挖掘，毕竟没人比你更懂你自己

技巧二：积累高分提示词

技巧一提及的设计风格术语，好比为AI选定了“画笔型号”与“画布材质”。

有些时候确实无法准确说出自己想要的风格怎么办？那就需要高质量的提示词来参考了！

以下列举3个原型及对应prompt，均为个人构思与社区高分UI Prompt框架的融合，供参考。

1. 优雅简洁APP

  • 创建工具：Cursor+Claude 3.7

2. 便当风格卡片(Bento Grid)

  • 在线预览地址：aiben.cc/bentogrid.h…

  • 创建工具：Cursor+Claude 3.7，输出的代码可保存为.html文件后用浏览器打开。

3. 精美CRM系统

4. 小结

篇幅有限，不胜枚举，关键在于日常积累与实践。

  • 主动收集优秀案例：（way to AGI社区，twitter中有大量优秀案例）

  • **利用大模型进行“逆向工程”：**上传优秀的设计截图，让AI尝试复刻或生成对应的Prompt。

目前我正在制作一个产品经理AI知识库，后续会把我所积累的好的各类提示词整理进去。

技巧三：巧选UI框架

如果你在设计一个完整的原型，需要各个页面/模块风格一致，那我建议你使用UI框架。

UI框架能够明确的设计规范与组件集，进而确保原型风格的统一性与专业性。

因此在给AI的Prompt中声明所选UI框架即可，如：

业界优秀UI框架很多，这里分享3个用得顺手的。

1. shadcn/ui

  • 网址：ui.shadcn.com/themes

  • 类比：设计师定制款

  • 观感: 以极简、现代的设计风格著称，尤其是其默认基础款的黑白配色，简约而不简单！

  • 适用场景：适合需要高度定制化界面、追求极简现代设计风格的项目，如个人作品集、初创产品等。我自己的个人网站就是基于此UI构建的，有兴趣可以点击查看（www.aiben.cc）

2. Daisy UI

  • 网址：daisyui.com/theme-gener…

  • 类比：时尚快消主题款

  • 观感：**提供多种预设主题，风格多样，涵盖从简约到复古的多种设计。**你可以在其官网的主题生成器中尝试，找到心仪主题后，将主题名称告知AI，AI便会遵循此风格进行设计。

  • 使用场景：适合需要快速开发，主题多样化的项目，如博客、营销页面、轻量级应用等

3. Ant Design

  • 网址：ant.design/index-cn

  • 类比：企业统一制服

  • 观感：蚂蚁集团出品，企业级 UI 设计语言，风格稳重、专业，强调一致性和可用性

  • 使用场景：适合构建企业级应用，如后台管理系统、ERP 系统等2B/2G项目

4. 小结

  • “希望产品界面优雅且独一无二，完全体现自己的个人/品牌调性” -> 考虑 shadcn UI

  • “我们需要快速上线一个看起来不错的版本，之后再迭代” -> 考虑 daisyUI

  • “我们正在做一个复杂的后台管理系统，需要专业、稳定、功能全面的界面” -> 考虑 Ant Design

除上述3个，还有很多优秀的UI框架/组件库，感兴趣的自行探索吧~

技巧四：借鉴开源模板，赢在起跑线

如果我们想要一个几乎100%精美的界面，直接采用高质量开源模板是高效之选。

从哪里找模板？我推荐以下2个：

1. HtmlRev

  • 网址：htmlrev.com/

  • 优势：完全免费，模板种类超多（网站首页仪表盘/应用系统/个人网站等），质量很高，开箱即用。

  • **用法：找到自己中意的，下载后利用Cursor打开，就可以开始定制修改！**具体修改技巧会在后续Cursor的分享中介绍。

2. GitHub

  • 网址：reurl.cc/1KzDqp

  • 优势：上述网址对应的是移动端app的UI合集，质量都超高，非常优雅！

  • 用法：该项目提供UI图片，旨在提升审美、启发灵感。可将图片交由Lovable/Cursor等工具复刻，或在GitHub搜索现成模板，搜索方法可咨询AI：）

总结

OK，本文分享了4个让原型更优雅的实用技巧：

  1. 技巧一：活用设计风格行业黑话，一语胜千言

  2. 技巧二：积累高分提示词，点石成金

  3. 技巧三：巧选UI框架，统一风格

  1. 技巧四：借鉴开源模板，赢在起跑线

希望这些技巧能帮助大家更好地与AI协作，真正为自己的工作进行提质提效！

感谢阅读，我们下期再见！

如果对上述原型源文件感兴趣，可以添加我的个人wx:jiangben1105

avatar
文章
阅读
粉丝