Visual Customization with Natural Language Prompts in Trae.ai
Source: Dev.to
How to Precisely Shape Your App’s Look and Feel – Without Writing CSS or Playing Prompt Roulette
Part 2 of the “Turn Ideas into MVP Fast with Trae AI” series on reliable vibe coding with Trae.ai.
Read Part 1
Turn Vibe Coding from Sometimes Magic to Reliably Powerful
You’ve built your MVP. It works, but when you show it to a friend they ask, “Is this finished? It feels a bit… generic.”
You try to fix it. You type into Trae.ai:
“Make it look modern and friendly.”
Trae updates something: the colours shift, maybe a font changes. But it’s still not quite what you imagined. You try again:
“Use nicer colours and better spacing.”
More iterations. More tokens. More frustration.
Then you suddenly realise: visual intent is hard to convey without a shared vocabulary.
But you’re already busy building your product and talking to users, so you don’t want (or have time) to learn design jargon or write CSS code.
In this post you’ll learn how Trae enables you to turn vague visual requests into precise prompts that AI can reliably execute, bringing your vision to life easily.
Two Ways to Give Trae Visual Direction
1️⃣ Text‑only prompts
Describe the look and feel you want using clear language.
Examples:
- “Minimalist, modern interface.”
- “Vibrant, playful colour scheme.”
Trae applies those ideas across layouts, buttons, and colour schemes.
Note: Style is subjective. What “minimalist” or “modern” means can vary from person to person and between different Large Language Models (LLMs).
2️⃣ Visual references + text
Provide a reference image, website URL, or Figma design that captures the style you want.
Trae analyses patterns like colour, typography, and spacing, then applies that styling to your app.
Both methods can be used to modify a single element, multiple components, or the entire app, so refining the visual experience is fast and simple.
When to Use Which Method
| Situation | Recommended Approach |
|---|---|
| You can clearly articulate the style (e.g., “minimalist”, “modern”, “vibrant”) and don’t mind slight interpretation differences | Text prompt – fastest to start. |
| You need to replicate a specific aesthetic or design pattern (e.g., a competitor’s landing page, a Figma mockup) | Visual reference – gives Trae concrete examples to analyse. |
| You want a blend of direction and precision | Combine both – start with a text prompt for overall direction, then add visual references for fine‑grained control. |
In practice many teams start with text prompts to set the tone, then sprinkle in visual references when they need the result to match a particular style. This balance keeps iteration fast while giving you precise control over the final visual experience.
Watch the Demo
Start from 03:00 onwards to see the workflow in action.
No guessing. No endless iterations. Just clear direction that gets you the UI you actually want, saving you time and burning fewer tokens!
Visual Aesthetic Styles
Below is the Visual Aesthetic Styles.md used in the video lesson.
Visual Aesthetic Styles
| Style Name | The “Code‑Talk” Description (Use these keywords) |
|---|---|
| Neubrutalism | “High‑contrast UI, 3px solid black borders, hard box‑shadows (offset 5px, 0 blur), vibrant high‑saturation backgrounds, and zero‑radius corners.” |
| Bento Grid | “Modular rectangular tiles, organized grid system, large rounded‑3xl (24px) corners, consistent gaps, and clear hierarchy through varying tile sizes.” |
| Aurora UI | “Ethereal look with large blurred mesh gradients, backdrop-filter: blur(100px), translucent glass layers, and vibrant, organic colour blobs in the background.” |
| Claymorphism | “3D ‘squishy’ plastic look. Use double‑layered shadows: outer shadow-lg and inner inset shadows to create depth. Extremely rounded corners.” |
| Retro‑Pulp | “Analog charm with grainy/noise textures, earthy ‘dirty’ tones (off‑whites, burnt oranges), chunky serif typography, and 1px ‘imperfect’ black strokes.” |
| Cyberpunk | “Dark mode (#050505), neon glow effects (text-shadow), electric pink/cyan accents, and 2px solid borders with outer glows and clipped corners.” |
| Skeuomorphism | “Tactile 3D effect. Use dual‑shadows (light top‑left, dark bottom‑right) to make elements look molded from the background. Reverse on :active.” |
| Glassmorphism | “Translucent ‘frosted glass’ panels using backdrop-blur-md, white semi‑transparent borders (1px, 20 % opacity), and soft multi‑coloured gradients.” |
| Flat Design | “Pure 2D aesthetic. Zero shadows, zero gradients, solid matte colour palette, and simple 8px rounded corners for a clean, professional finish.” |
| Minimalist | “Monochromatic palette, extreme whitespace, 1px hair‑line borders, no shadows, and high‑quality sans‑serif (Inter/Geist) typography.” |
Have fun experimenting and see how different styles transform the look and feel of your app!
Resources
- Trae AI (10× AI Engineer)
- How to use Trae.ai (YouTube playlist)
This is the second post in a three‑part series: Turn Ideas into MVP Fast with Trae AI.
Stay tuned for Part 3!
# Powerful!
## Visual Customization with Natural Language Prompts in Trae.ai
## Debugging and Feature Iteration with Trae AI