Skip to content

使用 AI 辅助创建原型和线框图

在正式编码前，通过原型 (Prototype) 和线框图 (Wireframe) 来具象化产品是至关重要的一步。它能帮助团队在投入大量开发资源前，验证设计、收集反馈。AI 虽然不能直接取代 Figma 或 Sketch 这类专业设计工具，但它可以在原型设计的多个环节提供强大的辅助。

场景一：生成界面文案 (UI Copy)

一个好的界面需要简洁、清晰、友好的文案。开发者和设计师常常不擅长此道。AI 可以快速生成高质量的占位符文案或最终文案。

Prompt 示例:

扮演一个专业的 UX Writer。

我们的场景是： 一个文件上传成功后的提示框。

你的任务： 为这个提示框编写三个版本的文案，分别对应不同的语气：

  1. 简洁专业
  2. 友好鼓励
  3. 轻松有趣

要求： 每个版本都包含一个标题和一个简短的描述。

AI 可能的输出:

当然，这里是三个版本的 UI 文案：

1. 简洁专业

  • 标题: 上传成功
  • 描述: 您的文件 report-final.docx 已成功上传。

2. 友好鼓励

  • 标题: 干得漂亮！
  • 描述: 文件已安全上传。现在您可以与团队共享或查看它。

3. 轻松有趣

  • 标题: 搞定！
  • 描述: 您的文件已经安家落户，随时等候您的调遣。

场景二：构思用户流程 (User Flow)

在设计界面前，需要先理清用户完成一个任务需要经过哪些步骤。AI 可以帮助我们思考完整的用户流程，避免遗漏关键环节。

Prompt 示例:

扮演一个用户体验设计师。

我们的目标是： 设计一个电商 App 的“密码重置”功能。

你的任务： 列出用户从点击“忘记密码”到成功设置新密码并登录的完整步骤流程。请考虑所有可能的状态，包括成功和失败路径。

AI 可能的输出:

好的，这是一个典型的密码重置用户流程：

  1. 触发: 用户在登录页面点击“忘记密码？”链接。
  2. 请求重置:
    • 界面: 显示一个输入框，要求用户输入注册时使用的电子邮件地址。
    • 操作: 用户输入邮箱后点击“发送重置链接”按钮。
  3. 系统处理:
    • 成功路径: 系统验证邮箱存在，并向该邮箱发送一封包含有时效性的密码重置链接的邮件。界面提示“重置链接已发送，请检查您的收件箱”。
    • 失败路径: 如果邮箱地址不存在，界面提示“该邮箱未注册”。
  4. 用户查收邮件: 用户打开邮件，点击里面的重置链接。
  5. 设置新密码:
    • 界面: 链接打开一个新的页面，包含两个输入框：“新密码”和“确认新密码”。页面需要显示密码强度要求（如长度、包含字母数字等）。
    • 操作: 用户输入新密码并确认。
  6. 完成重置:
    • 成功路径: 系统验证两次输入的密码一致且符合强度要求，更新用户密码。界面提示“密码重置成功！您现在可以用新密码登录了”，并提供一个“立即登录”的按钮。
    • 失败路径 (链接失效): 如果链接已过期或已被使用，提示“链接无效，请重新申请”。
    • 失败路径 (密码不匹配): 如果两次输入的密码不一致，提示“两次输入的密码不匹配”。

场景三：生成原型代码 (Prototype Code)

对于一些简单的界面，AI 甚至可以直接生成 HTML/CSS 或特定前端框架（如 React, Vue）的代码，用于快速搭建可交互的前端原型。

Prompt 示例:

扮演一个前端工程师。

你的任务： 使用 HTML 和 CSS 创建一个简单的登录表单线框图。它应该包含：

  • 一个标题 "Login"
  • 一个用于输入邮箱的文本框
  • 一个用于输入密码的密码框
  • 一个“登录”按钮

要求：

  • 样式要简洁、居中显示。
  • 不需要任何 JavaScript 功能。

这个 Prompt 可以直接在支持代码生成的 AI 工具（如 ChatGPT, Gemini, Copilot Chat）中运行，它会输出一个可以直接在浏览器中打开和预览的 .html 文件内容。

总结

在原型设计阶段，AI 是一个宝贵的创意和效率工具。它能：

  • 填充内容: 让原型看起来更真实。
  • 梳理逻辑: 确保用户流程的完整性和健壮性。
  • 加速实现: 快速生成基础代码，让想法能被更快地看到和触摸到。