Ever told your AI coding tool to "make it look better" and got back a generic purple gradient with glass cards? You're not alone. The word "premium" or "advanced" is way too vague — AI needs a style name and direction to produce consistent, intentional design.
I found an incredible Chinese article by 萤柳 that catalogs 50 modern UI styles with reference images and AI prompt keywords. I've researched, organized, and expanded it into a reusable ui_design skill for anyone building with AI coding tools.
Source article: AI 时代 Vibe Design 必备的 50 种 UI 风格名词！ — all credit to 萤柳 for the original compilation.
When you prompt an AI with "Make me a dashboard", you get randomness. But when you say "Data-dense dashboard, compact spacing, KPI cards, dark mode OLED, high contrast accents" — the AI knows exactly what you want.
This is what the article calls Vibe Design: naming the visual direction so precisely that AI doesn't have to guess your taste.
| Style | AI Keywords |
|---|---|
| Bento Box Grid | modular cards, asymmetric grid, varied sizes, clear hierarchy |
| Minimalism & Swiss Style | Swiss grid, clean typography, white space, high contrast |
| Glassmorphism | frosted glass, transparent cards, blurred background, thin border |
| Neubrutalism | bold borders, hard shadows, primary colors, flat blocks |
| Exaggerated Minimalism | oversized typography, extreme whitespace, high contrast, one accent color |
| Flat Design | flat colors, simple shapes, clean icons, no decorative shadows |
| Dimensional Layering | overlapping layers, z axis, soft shadow, foreground focus |
| Soft UI Evolution | soft depth, better contrast, clear focus state, subtle shadow |
| Dark Mode OLED | deep black, muted white, high contrast accents, night viewing |
| Style | AI Keywords |
|---|---|
| Hero-Centric Design | large hero, clear value proposition, single CTA, product visual |
| Minimal & Direct | single column, minimal copy, direct message, one clear action |
| Conversion-Optimized | form focused, single conversion goal, trust signal, high contrast CTA |
| Social Proof-Focused | testimonials, client logos, case metrics, verified reviews |
| Interactive Product Demo | embedded demo, interactive walkthrough, hover reveal, try live |
| Feature-Rich Showcase | feature grid, benefit cards, product demonstration, comparison |
| Trust & Authority | certification, security indicator, expert credential, case metric |
| Storytelling-Driven | narrative sections, visual progression, brand journey, chapter structure |
| Style | AI Keywords |
|---|---|
| Executive Dashboard | high level KPI, summary view, trend indicator, at a glance |
| Data-Dense Dashboard | dense grid, data table, KPI cards, compact spacing |
| Real-Time Monitoring | live data, status indicator, alert notification, streaming chart |
| Comparative Analysis | side by side comparison, period over period, benchmark, variance |
| Predictive Analytics | forecast line, confidence interval, scenario model, anomaly detection |
| Drill-Down Analytics | hierarchical data, expandable detail, breadcrumb, summary to detail |
| User Behavior Analytics | funnel, user flow, cohort, journey map |
| Financial Dashboard | revenue metrics, profit and loss, budget tracking, cash flow |
| Sales Intelligence | deal pipeline, quota tracking, territory performance, win loss |
| Heat Map | color matrix, intensity map, correlation, gradient scale |
| Style | AI Keywords |
|---|---|
| Organic Biophilic | organic shapes, natural texture, soft green, flowing layout |
| Memphis Design | geometric shapes, playful pattern, bright palette, postmodern |
| Y2K Aesthetic | chrome, iridescent, bubblegum color, glossy surface |
| Vaporwave | neon gradient, retro grid, glitch, nostalgic future |
| Aurora UI | mesh gradient, luminous color, soft blend, atmospheric |
| Retro-Futurism | vintage sci fi, CRT line, neon geometry, retro interface |
| Cyberpunk UI | neon terminal, dark HUD, glitch accent, system panel |
| Vibrant & Block-based | bold blocks, high saturation, geometric layout, strong contrast |
| Brutalism | raw layout, default type, stark contrast, unpolished edge |
| Skeuomorphism | real texture, physical metaphor, depth, tactile control |
| Claymorphism | soft 3D, chunky form, toy like, rounded volume |
| Neumorphism | embossed, debossed, soft UI, single light source |
| Liquid Glass | flowing glass, refraction, translucent layer, fluid motion |
| Style | AI Keywords |
|---|---|
| AI-Native UI | conversational UI, assistant, voice input, agent state |
| Zero Interface | voice first, ambient UI, predictive action, invisible control |
| Micro-interactions | subtle animation, tactile feedback, responsive state, gesture cue |
| Motion-Driven | smooth transition, scroll motion, entrance animation, reduced motion |
| Kinetic Typography | animated type, morphing letters, typing motion, headline rhythm |
| Parallax Storytelling | layered scroll, cinematic sequence, progressive reveal, depth cue |
| 3D & Hyperrealism | realistic texture, 3D model, spatial depth, tactile surface |
| Style | AI Keywords |
|---|---|
| Accessible & Ethical | keyboard navigation, visible focus, screen reader, WCAG |
| Inclusive Design | color safe signal, semantic clarity, multiple feedback channels, large type |
| Swiss Modernism 2.0 | grid system, Helvetica, modular layout, digital clarity |
ui_design SkillI turned this entire reference into a reusable ui_design skill on NXagents that contains all 50 styles organized by category with descriptions, use-case guidance, and proxy-ready reference image URLs.
The skill structure is simple — a SKILL.md file anyone can copy and use with their AI coding tools:
---
name: ui_design
description: Master reference for 50 modern UI design styles
---
## How to Use
1. Browse categories to find a style
2. Copy the AI prompt keywords into your AI coding tool
3. For reference images: instant_media(content_type="image_proxy", image_url="<url>")
As the original article wisely suggests, ask yourself:
Style names help AI find the direction. Information structure and use-case determine whether the page works.
Source article: AI 时代 Vibe Design 必备的 50 种 UI 风格名词！ by 萤柳 on Toutiao (Chinese)
Full ui_design skill: Available on the NXagents platform — includes all 50 styles with descriptions, image URLs, and AI-ready prompt keywords.
Built on: NXagents.net — where persistent SQLite, instant tools, and the skill system make shipping ideas this fast possible.