AI设计和代码生成器提示指南

因为AI设计和代码生成器很快在设计过程中发挥了重要作用，所以了解如何充分利用这些工具至关重要。如果你使用过Cursor、Bolt、Lovable或v0，你会发现输出的质量取决于输入。

以下是我用来引导AI生成实用、可用且美观的UI的结构化提示格式。它由5个部分组成：

1. 上下文（你想构建的内容）
2. 描述（AI应考虑的事情；设计优先级）
3. 平台（你的目标平台）
4. 视觉风格（你希望在AI生成的设计中看到的视觉属性）
5. 要包含的UI组件（页面/屏幕上要看到的具体组件列表）

小技巧：如果你想看看这个提示格式是如何用于生成真实UI的，请查看这篇教程：

1、上下文

从一个清晰的一句话开始，定义你在设计什么。这有助于AI在深入视觉之前理解页面/屏幕的目的和范围。

✅ 这样做：

• “设计一个现代投资应用的简洁信息丰富的主页。”
• “创建一个极简的食品配送应用结账屏幕。”
• “生成一个用于跟踪健身进度的移动仪表板UI。”

🚫 避免这样做：

• “为医疗保健应用制作一个漂亮的UI屏幕。”
• “为儿童玩具创建一个酷炫的主页。”

2、描述

描述应该是对设计最重要的事情的简短说明。解释最重要的是什么：用户目标、内容优先级以及交互细节。这将引导AI朝着正确的方向发展，使其专注于功能，而不仅仅是美学。

✅ 这样做：

• “用户应该能够立即看到关键的投资组合统计数据、最近的变化，并通过清晰的数据层次结构获得信心。”
• “突出每日变化和见解，同时保持‘查看投资组合’等操作易于访问。”

小技巧：在解释AI在设计屏幕/页面时应考虑的内容时，尝试将重点从输出转移到结果上。“帮助用户随时了解当前市场趋势，并提供快速行动的方式，以便他们可以根据所见信息迅速采取行动。”

3、平台

指定设备和操作系统，以帮助与平台指南和约束对齐，如屏幕尺寸、布局行为和该平台上可用的原生组件。

✅ 这样做：

• “iOS 17 / iPhone 14 (390 x 844)，使用Human Interface Guidelines”
• “Android Material 3 / Pixel 6 Pro (360 x 800)”
• “Web应用程序在桌面分辨率（1440x1024），响应式布局”

🚫 避免这样做：

• “移动设备”（太模糊）

4、视觉风格

定义语气和感觉。你希望用户如何看待你的设计？应该是平静的？企业化的？年轻的？添加无障碍需求（如对比度或可读性）和样式方向（例如模块化、基于卡片、微妙的渐变）。

✅ 这样做：

• “专业、平静且值得信赖。使用海军蓝、森林绿和柔和的灰色。”
• “模块化卡片布局，带有微妙的阴影和渐变。”
• “排版应优雅且在小尺寸下易读。”

🚫 避免这样做：

• “让它美丽”（美是主观的；描述属性）

小技巧：为AI提供对比度和无障碍指导：“确保文本的对比度比率为4.5:1。支持深色和浅色模式。”

5、要包含的UI组件

分解屏幕上需要的东西。思考结构（顶部导航栏、主体部分、页脚）和故事讲述（用户首先看到什么，应该采取什么操作）。用占位符副本和支持描述，使AI正确获取细节。

✅ 这样做：

• 从上到下开始。思考要在头部、主体和页脚中添加哪些组件。
• 在描述UI组件时，提到其应具有的具体视觉属性或功能行为。
• 提供内容和交互示例——例如，容器中的内容（即UI中卡片的内容）、表单输入字段的占位符文本等。这将使你的设计更贴近你要解决的任务。

原文链接：How to write better prompts for AI design & code generators

汇智网翻译整理，转载请标明出处