ARTICLE · 1196574
如何使用AI制作精美界面的软件系统,这里有10个设计参考
DESIGN NOTES
把参考图和设计要求一起交给 AI，界面才有明确的方向。
用 AI 做软件界面，最容易写进需求里的词，大概就是“简洁、现代、有高级感”。
可这些词离一个具体页面还有很远。导航放在哪里，表格一屏显示多少行，主按钮用什么颜色，筛选条件怎样收起来，都需要有人作出判断。
最近看到X上面有人分享过一组很有用的设计资源。这些站点的用途差别很大，有些适合研究软件流程，有些适合找官网风格，还有些专门解决排版和交互细节。
如果正在做管理后台、SaaS 或内部工具，可以先打开 Mobbin 和 Refero。官网与产品介绍页可以从 Recent、Minimal Gallery 和 Lapa Ninja 开始。剩下几个站，留到处理深色主题、字体和动效时再看。
下方网址均可复制到浏览器打开。
阅读导引
01
把需求说具体
02
找到10个参考
03
生成并检查页面
01
START WITH A BRIEF
先把“好看”写成 AI 能执行的要求
拿一个待开发的项目管理系统举例。
只给一句“参考这个网站，做得高级一点”，AI 仍然需要猜。参考图可能是一张营销首页，你要做的却是每天打开几十次的工作台，页面承担的任务差别很大。
可以先把需求说具体。
这个系统供项目负责人每天查看任务。首页先呈现即将逾期的事项，随后是可筛选的任务列表。请参考这张图的信息层级，保留本项目的业务字段和中文文案。
这时去找设计参考，目的就清楚了。缺导航结构就找导航，表格难读就看表格。每张图都对应一个要解决的问题。
02
10 DESIGN REFERENCES
10个值得收藏的设计参考
网址 https://mobbin.com/
Mobbin 的产品界面与流程分类
Mobbin 收集真实上线产品的界面与用户流程，也提供动效和界面元素参考，覆盖 App 和 Web 产品。
它适合在功能设计阶段打开。例如做一个订阅页面，可以连续观察用户从选择方案到确认付款的过程，看看价格说明放在哪一步，返回后又怎样保留选择。单张截图回答不了这些问题。
交给 AI 的要求也可以具体到流程。
参考这组页面组织订阅流程，保留方案选择和付款确认两个阶段。标出每一步的主要操作，并补全付款失败后的重试入口。
这里值得学的是任务怎样完成。 研究完流程，再决定哪些做法适合自己的产品。
网址 https://recent.design/
Recent 的设计灵感页面
Godly 的旧入口目前会跳转到 Recent。按照其官方介绍，Recent 接替了 Godly，收录范围也扩展到网页之外的界面、品牌和动效等设计。
官方介绍 https://recent.design/info
如果产品已经有功能框架，却迟迟定不下视觉方向，可以在这里挑两三张接近目标的参考。观察字体与色彩怎样配合，页面给人的感受是否一致。
挑图时给每张图分配一个用途。例如一张负责首屏构图，另一张只参考配色。这样 AI 收到的要求更容易保持一致。
以第一张图的字体层级和页面节奏为主要方向。第二张图只参考背景与强调色的搭配，其他装饰不引入。
网址 https://minimal.gallery/
Minimal Gallery 的精选网页
Minimal Gallery 是人工精选的网页设计灵感库，包含软件、SaaS、App 和产品等分类。做工具官网或产品介绍页时，很适合观察内容怎样被安排在一屏里。
看这类页面，可以把注意力放在标题与正文的距离，以及各段内容之间怎样留出空间。有些页面元素很少，仍然能让人迅速找到重点，排版在其中起了很大作用。
让 AI 调整现有页面时，可以限定修改范围。
保留现有信息和操作，减少重复的边框与阴影。通过字号、间距和文字颜色区分层级，让页面的阅读顺序更清楚。
留白要服从使用任务。工作台需要频繁查看的数据，不必为了模仿官网而被推到下一屏。
网址 https://refero.design/
Refero 的 Web 产品界面参考
做管理系统、数据工作台或 SaaS，Refero 值得优先看。它按页面类型、用户流程、交互模式和界面元素组织真实产品参考，可以围绕仪表盘、表格或筛选等具体问题查找。
以订单列表为例，页面需要同时容纳状态、客户和金额等信息，还要留出筛选与批量操作的位置。这时可以观察同类产品怎样安排字段，哪些信息默认显示，次要内容又在哪里展开。
参考这张图的列表结构，把订单编号和客户作为主要识别信息，金额右对齐。筛选区与表格操作分开，选中数据后再显示批量操作。
信息密度合适，用户才能在一屏里完成判断。后台页面的精致感，也需要建立在这个基础上。
网址 https://www.dark.design/
Dark 收录的深色主题网站
Dark 专门收集深色主题网站，包含软件、AI 和硬件等分类。做深色产品官网时，可以从这里看背景、文字与强调色怎样组合。
观察时，先分辨页面背景与内容区域用了几档明度，再看次要文字是否仍然清楚。把这些关系拆出来，比只记住一组颜色更有用。
为页面背景、卡片和悬浮层分别设置颜色。正文与辅助说明保持清楚的对比，状态标签同时使用文字和颜色表达含义。
这些网站能提供视觉参考。用到长期操作的后台时，还需要单独检查表格可读性、键盘焦点和不同状态的辨识度。
网址 https://www.designspells.com/
Design Spells 的交互细节案例
Design Spells 收集数字产品里的交互与动效细节。页面的基本结构确定后，可以来这里找按钮反馈、展开收起和状态变化的参考。
例如用户点击保存，界面怎样告诉他请求已经发出，成功后怎样确认结果，失败时怎样继续操作。这些反馈决定了用户会不会反复点击同一个按钮。
给保存按钮补全处理中、成功和失败状态。处理中阻止重复提交，失败后保留输入内容，并提供重试操作。过渡效果保持简短。
静态截图只能说明某个瞬间。参考动效时，最好打开原案例，确认触发条件和结束状态。
网址 https://www.lapa.ninja/
Lapa Ninja 的落地页设计案例
Lapa Ninja 收集落地页设计，适合软件官网、产品发布页和作品集。可以重点观察首屏怎样组合标题、产品画面和行动按钮。
如果官网首屏迟迟说不清产品用途，就找几个相近产品看一看。主标题给出了什么信息，产品截图证明了什么，用户又会被引导到哪里。
首屏说明产品服务的用户和主要用途，展示一张能说明核心功能的界面图。设置一个主要行动按钮，详细功能放在后续区域展开。
营销页面的参考用在官网上很合适。进入软件工作区后，布局还要围绕用户的日常任务重新安排。
网址 https://www.typewolf.com/
Typewolf 的字体与网页排版参考
Typewolf 关注字体选择、搭配和网页排版。页面颜色已经协调，却仍然显得松散时，可以从这里观察标题大小与正文行宽的关系。
英文案例里的大标题，换成中文后可能需要重新安排换行。后台还有金额、小数和长名称，最好都放进页面里一起检查。
为标题、正文和辅助说明建立固定的字号与行高。使用中文长标题和长项目名检查换行，金额列采用一致的数字格式，并保持右对齐。
参考字体风格时，也要查看实际选用字体的授权范围。示例里的字体搭配，未必适合直接用于自己的产品。
网址 https://loadmo.re/
Loadmo.re 的移动端网页设计参考
Loadmo.re 的明确定位是移动端网页设计灵感库。它适合用来研究手机屏幕里的排版与交互，也能找到一些富有实验性的视觉表达。
做活动页、品牌专题或移动端作品集时，可以观察内容如何随着滚动展开，菜单怎样收起，以及文字在窄屏里怎样形成节奏。
保留这个案例在手机屏幕上的阅读顺序，采用它的菜单展开方式。正文保持正常滚动，主要操作不要依赖鼠标悬停。
把参考放到手机上打开，会比只看桌面截图更容易发现问题。文字大小和触控区域都需要在实际尺寸下判断。
网址 https://bestdesignsonx.com/
Best Designs on X 的设计作品页面
Best Designs on X 汇集来自 X 的设计作品，可以从感兴趣的条目继续查看作者和原帖。
它适合寻找比较新的界面表达，也适合追着一个具体细节往下看。遇到喜欢的作品，先确认它展示的是概念、原型还是已上线产品，再决定参考到什么程度。
把动图中的效果交给 AI 前，可以先写清楚它的行为。
点击后展开侧边面板，保留当前列表位置。面板内可以编辑信息，关闭时返回原位置。请补全键盘关闭和焦点返回的行为。
这段描述已经能用于开发讨论。仅凭一张漂亮的画面，还无法确定交互是否完整。
03
BUILD AND REVIEW
把参考变成一个能检查的页面
找齐参考后，先做一个有代表性的页面。项目管理系统可以从任务列表开始，因为导航、筛选和详情入口都会在这里出现。
把业务要求和参考图一起提供给支持图片输入的 AI 编程工具，或者把参考特点写成文字。已有项目可以沿用现有组件，先修改这一页；从头开始则先生成能在浏览器运行的界面原型。启动预览后，再逐项检查和调整。
下面这段可以作为起点，替换其中的业务内容即可使用。
请制作项目管理系统的任务列表页，供项目负责人每天查看和处理任务。
左侧放项目导航，顶部提供搜索和新增任务入口。主体采用表格，显示任务名称、负责人、截止日期和状态，支持筛选与批量操作。
参考图 A 的导航结构，只借鉴图 B 的表格密度。视觉采用浅灰背景、白色内容区和一种强调色，避免装饰占用主要工作空间。
表格需要处理长任务名，并展示无数据和加载失败的状态。删除操作需要确认，保存失败后保留用户输入。
先完成这个页面，使用明确标识的示例数据。在浏览器中检查宽屏与窄屏表现，再继续扩展其他页面。
第一版出来后，直接指出可见的问题。例如“筛选区占了两行，压缩后保持常用条件可见”，或者“列表里的辅助文字太淡，调到能轻松辨认的程度”。每一轮处理一个明确问题，修改结果就容易判断。
确认这页以后，再统一按钮、输入框和弹窗的样式，复用到其他页面。接入真实项目时，还要用实际数据接口验证筛选和保存，让界面里的权限状态与系统规则一致。
交付前，有五处值得专门检查。
参考用途是否合适。 官网构图适合介绍产品，操作页面还要验证日常任务是否顺手。
业务数据能否放得下。换成长中文名称和较大金额，查看表格是否拥挤、内容是否截断。
异常状态有没有处理。 无数据、无权限和请求失败，都需要给用户一个清楚的后续动作。
操作反馈是否完整。 连续点击提交、打开后取消、编辑失败再重试，都应当能继续完成任务。
不同设备能否正常使用。 检查窄屏布局，并走一遍键盘操作，确认焦点可见、弹窗能关闭。
今天就可以从手头最常用的一页开始。选一张同类产品的参考，把希望借鉴的地方写清楚，再用自己的真实业务数据检查第一版。
设计资源线索与站点截图参考 Dreameryanyan 的分享。
原帖 https://x.com/yanliudreamer/status/2110649301257060368
页面内容以各站实际展示为准。
我是 Nanford，记录 AI 工具与实战方法。
如果你觉得今天这篇有收获，欢迎点赞、在看、转发三连，我们下篇见。
