由于 AI 设计和代码生成器在设计过程中迅速发挥积极作用，因此了解如何充分利用这些工具至关重要。如果您使用过 Cursor、Bolt、Lovable 或 v0，您就会知道，输出的好坏取决于输入。
以下是我用来引导 AI 实现实用、可用且美观的 UI 的结构化提示格式。它包含 5 个部分：
快速提示：如果您想了解如何使用此提示格式生成真实的 UI，请查看本教程：
首先用一句话清晰地定义你的设计内容。这有助于 AI 在深入视觉效果之前理解页面/屏幕的目的和范围。
定义 context 时执行以下操作：
定义上下文时应避免这种情况：
描述应该简短扼要地阐述此设计最重要的方面。解释最重要的方面：用户目标、内容优先级和交互细节。这将引导 AI 朝着正确的方向发展，使其专注于功能，而不仅仅是美观。
撰写描述时请执行以下操作：
快速提示：在解释 AI 在设计屏幕/页面时应该考虑哪些因素时，请尝试将重点从输出转移到结果。“帮助用户了解当前的市场趋势，并提供快速操作，以便他们能够根据看到的信息快速采取行动。”
指定设备和操作系统以帮助符合平台指南和限制，例如屏幕尺寸、布局行为和该平台上可用的本机组件。
这样做：
避免这种情况：
定义基调和感觉。你希望你的设计如何被用户感知？它应该平静吗？企业风格？还是年轻？添加可访问性需求（例如对比度或可读性）和样式方向（例如，模块化、卡片式、微妙的渐变）。
在描述视觉风格时这样做：
描述视觉风格时应避免这种情况：
快速提示：为 AI 提供对比度和可访问性指导：“确保文本对比度为 4.5:1。支持暗模式和亮模式。 ”
分解屏幕上需要显示的内容。思考结构（顶部导航、正文、页脚）和叙事（用户首先看到的内容以及他们应该采取的操作）。使用占位符和示例来支持描述，以便 AI 准确呈现细节。
描述组件时请执行以下操作：
