> ## Content Index > Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt > Use this file to discover other available public pages before exploring further. # Gemini 3.1的5个UI设计用例 - URL: https://www.hubwiz.com/blog/5-ui-design-use-cases-for-gemin-3-1/ - Published: 2026-02-25T14:59:15.000Z - Updated: 2026-02-25T14:59:15.000Z - Author: admin - Tags: #Import 2026-10-14 14:41 谷歌最近发布了其新的 AI 模型 Gemini 3.1。该模型在 UI 和网页设计方面表现出色。在本文中，我想分享我最喜欢的 5 个用例，以及你可以使用的提示词示例。 ## 1、从零开始设计着陆页 Gemini 3.1 在从零开始设计着陆页方面表现出色。你不是像素推动，而是描述网页布局的"感觉"。Gemini 3.1 Pro 会将抽象主题转化为布局选择。 ### 提示词示例： > 从零开始为一位受到 Emily Brontë 作品启发的角色的个人作品集设计一个着陆页。氛围应该是阴郁的、维多利亚时代的，但具有现代感：使用深色衬线字体、"风扫"动作效果的过渡效果。 ### Gemini 3.1 设置 如果你选择 Canvas 模式，你将看到输入字段中选择的 *Gemini 3.1 Pro*。 ![None](https://www.hubwiz.com/blog/content/images/2026/02/1-sCAZUZ6Zj3yOauGRcKbiTw.png) ### Gemini 3.1生成的输出 如果你选择Canvas模式，会看到代码以及一个可以切换Code/预览的开关： ![](https://www.hubwiz.com/blog/content/images/2026/02/image-102.png) 如果你选择预览，你将看到页面的实际实时版本： ![](https://www.hubwiz.com/blog/content/images/2026/02/image-111.png) ## 2、使用低保真设计作为基础 Gemini 3.1 Pro 同样擅长将低保真设计（如草图或线框）转化为代码原型。 #### **提示词示例和参考草图：** 我将要求 Gemini 3.1 Pro 使用与我之前使用的相同视觉风格将以下草图转换为着陆页。 ![](https://www.hubwiz.com/blog/content/images/2026/02/image-106.png) > 我已经附上了未来的着陆页草图。将其转换为受 Emily Brontë 作品启发的角色的个人作品集。氛围应该是阴郁的、维多利亚时代的，但具有现代感：使用深色衬线字体、"风扫"动作效果的过渡效果。 #### Gemini 3.1 生成的输出 ![](https://www.hubwiz.com/blog/content/images/2026/02/image-107.png) ## 3、交互式动画 SVG 3.1 Pro 的最突出特点之一是生成网站就绪的、基于代码的动画 SVG，这些动画不会损失质量。 #### 提示词示例： > 生成一个用于 3D 效果信用卡的纯 SVG 代码。当我悬停在上面时，卡片应该轻微倾斜（视差效果），角落里的全息标志应该闪烁。保持文件大小在 50kb 以下。 #### Gemini 3.1 生成的输出 ![](https://www.hubwiz.com/blog/content/images/2026/02/image-108.png) ## 4、动态数据可视化（遥测仪表板） Gemini 3.1 Pro 可以将复杂数据流连接到可视化设计。在这个示例中，我将要求 Gemini 3.1 生成一个以 JSON 文件提供的实时数据的仪表板。 #### 提示词示例： > 使用深色主题和霓虹蓝调色设计一个实时卫星追踪仪表板。创建一个中央地图可视化（使用 D3.js 或类似）和三个侧边栏小部件，用于高度、速度和信号强度。使用模拟实时数据的模拟 JSON 数据。 #### Gemini 3.1 生成的输出 ![](https://www.hubwiz.com/blog/content/images/2026/02/image-112.png) ## 5、将逻辑图转化为 UI Gemini 3.1 Pro 的一个主要优势是它能够连接功能逻辑和代码之间的点。例如，你可以上传流程图或代表特定流程或工作流的逻辑图，而 Gemini 将构建代表该逻辑的多步表单或向导。 #### 提示词示例和视觉： > 我正在上传一个抵押申请的逻辑流程。在 React 中构建一个遵循此确切决策树的"向导"UI。在顶部包括一个进度条，并确保"下一步"按钮在页面上所有必填字段都被填写之前被禁用。 #### Gemini 3.1 生成的输出 ![](https://www.hubwiz.com/blog/content/images/2026/02/image-110.png) --- 原文链接：[Gemini 3.1 for UI Design](https://medium.com/ux-planet/gemini-3-1-for-ui-design-3a4a5ebc9256?ref=hubwiz.com) 汇智网翻译整理，转载请标明出处