Gemini 3.1的5个UI设计用例
谷歌最近发布了其新的 AI 模型 Gemini 3.1。该模型在 UI 和网页设计方面表现出色。在本文中，我想分享我最喜欢的 5 个用例，以及你可以使用的提示词示例。
1、从零开始设计着陆页
Gemini 3.1 在从零开始设计着陆页方面表现出色。你不是像素推动，而是描述网页布局的"感觉"。Gemini 3.1 Pro 会将抽象主题转化为布局选择。
提示词示例：
从零开始为一位受到 Emily Brontë 作品启发的角色的个人作品集设计一个着陆页。氛围应该是阴郁的、维多利亚时代的，但具有现代感：使用深色衬线字体、"风扫"动作效果的过渡效果。
Gemini 3.1 设置
如果你选择 Canvas 模式，你将看到输入字段中选择的 Gemini 3.1 Pro。
Gemini 3.1生成的输出
如果你选择Canvas模式，会看到代码以及一个可以切换Code/预览的开关：
如果你选择预览，你将看到页面的实际实时版本：
2、使用低保真设计作为基础
Gemini 3.1 Pro 同样擅长将低保真设计（如草图或线框）转化为代码原型。
提示词示例和参考草图：
我将要求 Gemini 3.1 Pro 使用与我之前使用的相同视觉风格将以下草图转换为着陆页。
我已经附上了未来的着陆页草图。将其转换为受 Emily Brontë 作品启发的角色的个人作品集。氛围应该是阴郁的、维多利亚时代的，但具有现代感：使用深色衬线字体、"风扫"动作效果的过渡效果。
Gemini 3.1 生成的输出
3、交互式动画 SVG
3.1 Pro 的最突出特点之一是生成网站就绪的、基于代码的动画 SVG，这些动画不会损失质量。
提示词示例：
生成一个用于 3D 效果信用卡的纯 SVG 代码。当我悬停在上面时，卡片应该轻微倾斜（视差效果），角落里的全息标志应该闪烁。保持文件大小在 50kb 以下。
Gemini 3.1 生成的输出
4、动态数据可视化（遥测仪表板）
Gemini 3.1 Pro 可以将复杂数据流连接到可视化设计。在这个示例中，我将要求 Gemini 3.1 生成一个以 JSON 文件提供的实时数据的仪表板。
提示词示例：
使用深色主题和霓虹蓝调色设计一个实时卫星追踪仪表板。创建一个中央地图可视化（使用 D3.js 或类似）和三个侧边栏小部件，用于高度、速度和信号强度。使用模拟实时数据的模拟 JSON 数据。
Gemini 3.1 生成的输出
5、将逻辑图转化为 UI
Gemini 3.1 Pro 的一个主要优势是它能够连接功能逻辑和代码之间的点。例如，你可以上传流程图或代表特定流程或工作流的逻辑图，而 Gemini 将构建代表该逻辑的多步表单或向导。
提示词示例和视觉：
我正在上传一个抵押申请的逻辑流程。在 React 中构建一个遵循此确切决策树的"向导"UI。在顶部包括一个进度条，并确保"下一步"按钮在页面上所有必填字段都被填写之前被禁用。
Gemini 3.1 生成的输出
汇智网翻译整理，转载请标明出处