Why 'Make it Pretty' Fails with AI Design — From Vibe Coding to Toss Design System
Bottom Line Upfront: Guide the AI’s Decision Criteria, Don’t Expect Visual Taste
Building apps rapidly using AI tools like ChatGPT, Cursor, or Antigravity is great for functionality, but the UI often ends up looking generic — repetitive rounded cards, blue buttons, and identical layouts.
The solution is simple: instead of asking AI to “make it look pretty,” provide clear decision-making criteria (visual hierarchy, style rules, and anti-patterns).
Here is what I picked up from three UI/UX articles I read today, written up in my own words.
I read tech blogs and news fairly often, and it started to bother me that all of it stays scattered and eventually gets lost. So from now on I’m collecting them here under TIR - Today I Read. 😊
1. The Real Reason Vibe-Coded UIs Look Generic
Without Guidelines, AI Always Plays It Safe
Without explicit constraints, AI defaults to safe, familiar patterns (rounded cards, drop shadows, 3-card grids). That’s why every app starts looking identical.
6 Essential Directives in a Design Prompt
- Target User
- Screen Purpose
- Desired Tone & Feel
- Visual Hierarchy (What to highlight first)
- Design System Style (Apple Minimal, Bento Grid, etc.)
- Anti-patterns to Avoid (No card abuse, minimal gradients)
Building the guidelines properly - the same way you would write a prompt for a design system - turned out to be the whole point. Even when you hand the work over to AI, giving it clear rules and direction is what gets you a UI worth shipping.
2. Maintaining UX Consistency (Toss Consumer UX Guide)
Seamless Alignment Within an Ecosystem
Mini-apps inside the Toss ecosystem must maintain strict alignment so users don’t experience jarring friction.
- UX Writing: Consistent polite, active, positive tone.
- No Dark Patterns: Ban intrusive entry popups or blocked back navigation.
- Graphic Elements: Place only one key graphic per screen to prevent visual clutter.
I liked how deliberately the whole thing is designed to stay consistent so nothing feels foreign inside an ecosystem that large. Details like these - making a mini-app feel like you never left the main Toss app - are what create a real difference in usability.
3. The Secret to Building Hundreds of Screens Fast: Toss Design System (TDS)
Assembling UI Like Lego Blocks
Instead of creating UI elements from scratch every time, TDS provides over 40 pre-verified, standardized components (buttons, input fields, bottom sheets, badge styles) alongside primary color rules and typography guidelines.
- “Allow developers to focus on business logic rather than spending time reinventing UI.”
- Toss’s web and mobile front-end is built on React and TypeScript / JavaScript. The Toss team actively open-sources their internal React utilities and libraries (such as
slash,@toss/use-funnel).
My Thoughts
Discovering the Design System concept was fascinating. Creating pre-verified components makes building and managing custom UI parts effortless. I plan to build useful components one by one for my own blog and future projects.
Summary
In the end, what I took away was the whole arc: Prompting Guidelines → Brand UX Consistency → Reusable Design Systems.