Trae.ai 中的视觉定制与自然语言提示
Source: Dev.to
请提供您希望翻译的完整文本内容，我将为您翻译成简体中文并保持原有的格式、Markdown 语法以及技术术语不变。谢谢！
如何精准塑造应用的外观与体验 —— 无需编写 CSS 或玩提示轮盘
“用 Trae AI 快速将创意转化为 MVP”系列第 2 部分，关于可靠的 vibe 编码。
阅读第 1 部分
Turn Vibe Coding from Sometimes Magic to Reliably Powerful
你已经构建了 MVP。它能运行，但当你向朋友展示时，他们会问：“这完成了吗？感觉有点…通用。”
于是你尝试修正它。你在 Trae.ai 中输入：
“让它看起来更现代、更友好。”
Trae 更新了一些内容：颜色变化，可能还有字体更换。但仍未完全符合你的想象。于是你再次尝试：
“使用更好看的颜色和更合理的间距。”
更多迭代。更多 token。更多挫败感。
这时你突然意识到：没有共享的词汇表，视觉意图很难传达。
但你已经忙于构建产品并与用户沟通，既没有时间也不想去学习设计术语或编写 CSS 代码。
在本文中，你将了解 Trae 如何帮助你把模糊的视觉需求转化为精准的提示，让 AI 能可靠地执行，从而轻松实现你的设想。
为 Trae 提供视觉指引的两种方式
1️⃣ 仅文本提示
使用清晰的语言描述您想要的外观和感受。
示例：
- “极简、现代的界面。”
- “活泼、富有玩味的配色方案。”
Trae 会将这些想法应用于布局、按钮和配色方案。
Note: 风格是主观的。“极简”或“现代”的含义可能因人而异，也会因不同的大语言模型（LLM）而不同。
2️⃣ 视觉参考 + 文本
提供能够捕捉您想要的风格的参考图片、网站 URL 或 Figma 设计。
Trae 会分析颜色、排版和间距等模式，然后将该风格应用到您的应用中。
这两种方法都可用于修改单个元素、多个组件或整个应用，从而快速简便地优化视觉体验。
何时使用哪种方法
| 情境 | 推荐方法 |
|---|---|
| 你能够清晰表达风格（例如，“极简主义”、“现代”、“活泼”），且不介意轻微的解释差异 | 文本提示 – 最快上手。 |
| 你需要复制特定的美学或设计模式（例如，竞争对手的登录页、Figma 原型） | 视觉参考 – 为 Trae 提供具体的分析示例。 |
| 你想要兼顾方向性和精确性 | 两者结合 – 先用文本提示设定整体方向，然后加入视觉参考进行细粒度控制。 |
在实际操作中，许多团队会先使用文本提示来设定基调，然后在需要结果匹配特定风格时加入视觉参考。此平衡既能保持迭代快速，又能让你对最终视觉体验拥有精确的控制。
观看演示
从 03:00 开始 查看工作流实际运行。
不需要猜测。也没有无止境的迭代。只需明确的指引，让你得到真正想要的 UI，节省时间并消耗更少的 token！
视觉美学风格
以下是视频课程使用的 Visual Aesthetic Styles.md。
视觉美学风格
| 样式名称 | “代码对话”描述（使用这些关键词） |
|---|---|
| Neubrutalism | “高对比度 UI，3px 实线黑色边框，硬阴影盒子（偏移 5px，0 模糊），鲜艳的高饱和度背景，以及零半径的角。” |
| Bento Grid | “模块化 矩形瓦片，有序的网格系统，大号 rounded‑3xl（24px）圆角，一致的间隙，以及通过不同瓦片尺寸展现的清晰层级。” |
| Aurora UI | “飘渺外观，配以 大面积模糊网格渐变，backdrop-filter: blur(100px)，半透明玻璃层，以及背景中充满活力的有机色块。” |
| Claymorphism | “3D ‘软绵’塑料外观。使用 双层阴影：外部 shadow-lg 和 内部内嵌阴影 来营造深度。极度圆角。” |
| Retro‑Pulp | “模拟魅力，配有 颗粒/噪点纹理，泥土感的‘脏’色调（偏白、焦橙），粗体衬线排版，以及 1px ‘不完美’的黑色描边。” |
| Cyberpunk | “暗色模式（#050505），霓虹发光效果（text-shadow），电光粉/青色点缀，以及 2px 实线边框，配以外部光晕和裁切角。” |
| Skeuomorphism | “触感 3D 效果。使用 双阴影（左上浅色，右下深色）使元素看起来像从背景中模塑而成。:active 时反转。” |
| Glassmorphism | “半透明‘磨砂玻璃’面板，使用 backdrop-blur-md，白色半透明边框（1px，20 % 不透明度），以及柔和的多彩渐变。” |
| Flat Design | “纯 2D 美学。零阴影，零渐变，实色哑光调色板，以及简洁的 8px 圆角，打造干净专业的效果。” |
| Minimalist | “单色调调色板，极致 留白，1px 细线边框，无阴影，高质量无衬线字体（Inter/Geist）排版。” |
玩得开心，尝试不同风格，看看它们如何改变你的应用外观和体验！
资源
- Trae AI（10× AI 工程师）
- 如何使用 Trae.ai（YouTube 播单）
这是一个三部分系列的第二篇文章：快速使用 Trae AI 将想法转化为 MVP。
敬请期待第 3 部分！
# Powerful!使用自然语言提示进行 Trae.ai 的视觉自定义
使用 Trae AI 进行调试和功能迭代