> ## 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.
# 用需求文本生成线框图
- URL: https://www.hubwiz.com/blog/text-requirements-to-wireframes/
- Published: 2024-11-19T14:19:03.000Z
- Updated: 2024-11-19T14:44:05.000Z
- Description: 我们没有找到任何使用 LLM 将 UX 需求列表直接转换为线框的探索。这篇文章介绍了我们的一些实验和结果，希望这能激励其他人也分享他们的工作。
- Author: admin
- Tags: APPLICATION, UI/UX, TAILWIND, BOOTSTRAP, CLAUDE, GPT-4o, OPENAI, LLAMA, MISTRAL, AUTO-COT, FEW-SHOT COT, #Import 2026-10-14 14:41
我们已经看到大型语言模型 (LLM) 被用于将“餐巾纸草图”转换为线框，并将线框转换为可运行的应用程序。但是，我们无法找到任何使用 LLM 将 UX 需求列表直接转换为线框的探索：
这篇文章介绍了我们的一些实验和结果，希望这能激励其他人也分享他们的工作。
## 1、探索方向
我们从两个不同的方向来解决这个问题 — HTML/CSS 和自由浮动轴对齐边界框 (AABB)：
HTML代码生成线框图
AABB描述生成线框图
除了基本的提示工程之外，我们还探索了每种方法的几种表示形式（下面的结果图像链接）。
- HTML/CSS：CSS 流布局、CSS 弹性框布局、CSS 网格布局、Bootstrap、Bulma、Tailwind。
- AABB：JSON、YAML、XML。
## 2、纸牌游戏示例
LLM 要求的输入：
- 玩家手牌：三个不同的区域，显示每个玩家持有的牌（活跃玩家面朝上，其他玩家面朝下）
- 弃牌堆：显示弃牌堆顶部牌的中央区域
- 抽牌堆：面朝下的剩余牌堆
- 回合指示器：显示轮到哪个玩家的视觉提示
- 牌数：显示每个玩家剩余牌数
- 动作区域：特殊动作（如抽牌或跳过回合）动画的空间
- 消息区域：游戏消息的空间（例如，“玩家 2 必须跳过自己的回合”）
- 得分显示：如果玩多轮游戏，则显示每个玩家当前得分的区域
- 设置/菜单按钮：用于访问游戏选项或返回主菜单
- 玩家头像或姓名：轻松识别每个玩家
结果：
CSS 流布局
CSS Flexbox 布局
CSS 网格布局
Bootstrap
Bulma
Tailwind
JSON
YAML
XML
我们还使用多个 LLM 进行了实验：
- Claude 3.5 Sonnet
- GPT 4o
- OpenAI o1-preview
- Llama 3.1 405b
- Mistral large
我们观察到 Claude 3.5 Sonnet 在几个关键领域中胜出：准确翻译需求、满足最大数量的需求以及使用适当的实用程序类和 UI 组件生成高质量代码。与其他模型的输出相比，生成的线框具有更好的视觉层次、语义一致性和均衡的元素。
## 3、餐厅游戏示例
LLM 的输入 要求：
- 订单显示：屏幕的一部分，显示当前要完成的订单，包括所需的米饭、鱼类和配菜。
- 计时器：进度条计时器（从 15 秒开始）以完成当前订单。
- 配料卡：16 张卡片的集合，代表玩家可以选择的可用配料（米饭、鱼类和配菜），以完成订单。
- 选择区域：指定区域，玩家可以拖放或单击以选择代表他们为当前订单选择的配料的卡片。
- 分数/金钱显示：根据正确的订单和惩罚，显示玩家的当前分数或赚取的金钱。
- 级别指示器：显示玩家当前级别的指示器，影响奖励和惩罚值。
- 连胜计数器：跟踪玩家当前连续正确订单的连胜次数的显示。
- 强化图标：表示可用强化（额外时间、双倍奖励、重掷顺序）及其剩余用途的图标或按钮。
- 强化激活按钮：在需要时激活相应强化的按钮或控件。
- 游戏状态显示：显示游戏当前状态的显示区域，例如“顺序正确”、“顺序错误”、“游戏获胜”或“游戏结束”。
- 暂停/恢复按钮：用于暂停或恢复游戏（如果适用）的按钮。
- 重启/退出按钮：用于重启游戏或退出并返回主菜单的按钮。
- 客户头像：下订单客户的头像。
结果：
Claude 3.5 Sonnet
GPT 4o
OpenAI o1-preview
Meta Llama 3.1 405B
Mistral Large
## 4、提示工程
思维链 (CoT) 提示：
- 使用 Auto-CoT：我们在提示中包含了“逐步思考”等短语。Zhang 等人 (2022) 提出的这种方法消除了生成推理链的手动操作。
- Few-Shot CoT：虽然 Auto-CoT 功能强大，但我们发现将其与少样本示例相结合可以获得更好的结果。扩展的要求提供了详细的空间布局和层次结构，作为 LLM 的思维导图。这种方法指导 LLM 从特定的视觉组织和空间关系的角度进行思考，从而产生更连贯和实用的 UI 设计。
例如，我们包含了一个这样的示例：
```
```
- 3 cards open in the middle
- 5 cards for each player
- 2 players (A player can only see their cards)
...
[Center of the table]
- 3 open cards (horizontally arranged):
Card 1: [Word 1]
Card 2: [Word 2]
Card 3: [Word 3]
...
```
```
- 结构化提示：Claude 熟悉处理结构化输入。使用类似 XML 的标签（例如 、 `` 和 `` ）有助于整合信息，提供清晰的背景和结构。
## 5、结束语
根据我们的实验，如图（链接）所示，我们发现 HTML/CSS 通常可以生成干净且平衡的线框。这可以产生一致的卡片大小和对齐方式。
在测试的框架中，Tailwind CSS 产生了最佳效果。我们观察到线框表现出几个理想的品质：平衡、明确定义的动作区域、适当大小的元素和一致的间距，并提供了更清晰的游戏状态表示，同时看起来具有视觉吸引力和用户友好性。
相比之下，AABB 方法在混乱和卡片大小不一致方面表现不佳。
---
原文链接：[Using LLMs to generate UX Wireframes](https://sonyinteractive.com/en/news/blog/using-llms-to-generate-ux-wireframes/?ref=hubwiz.com)
汇智网翻译整理，转载请标明出处