Mempercantik Tampilan via LLM & SkillsMempercantik Tampilan via LLM & Skills

In the previous chapters, you already learned how to turn designs into code with AI IDEs and how to use component libraries to build interfaces quickly. But you may also have noticed an awkward problem: even with the same requirement, AI-generated pages often feel a bit generic. The font is always Inter, the color palette is some overused purple gradient, the layout is a perfectly symmetrical card grid, and the page gives off a strong "AI-generated" feeling.In the previous chapters, you already learned how to turn designs into code with AI IDEs and how to use component libraries to build interfaces quickly. But you may also have noticed an awkward problem: even with the same requirement, AI-generated pages often feel a bit generic. The font is always Inter, the color palette is some overused purple gradient, the layout is a perfectly symmetrical card grid, and the page gives off a strong "AI-generated" feeling.

This is not really AI's fault. The real issue is that you never told it what kind of style you wanted.This is not really AI's fault. The real issue is that you never told it what kind of style you wanted.

Imagine going to a hair salon. If you only say, "Give me a haircut," the stylist will probably choose something safe but forgettable. But if you say, "I want a soft Japanese-style layered wave, curtain bangs, shoulder length, and strong texture," you are much more likely to get exactly what you want.Imagine going to a hair salon. If you only say, "Give me a haircut," the stylist will probably choose something safe but forgettable. But if you say, "I want a soft Japanese-style layered wave, curtain bangs, shoulder length, and strong texture," you are much more likely to get exactly what you want.

The same is true for AI. It needs a clear aesthetic direction before it can generate a beautiful and distinctive interface.The same is true for AI. It needs a clear aesthetic direction before it can generate a beautiful and distinctive interface.

This chapter introduces two practical ways to make AI-generated interfaces look much better:This chapter introduces two practical ways to make AI-generated interfaces look much better:

1. Well-designed prompt templates so you can describe the exact aesthetic you wantWell-designed prompt templates so you can describe the exact aesthetic you want
2. Frontend Skills plugins so AI automatically loads reusable design rulesFrontend Skills plugins so AI automatically loads reusable design rules

What you will learnWhat you will learn

1. Why AI-generated interfaces often look "normal" by defaultWhy AI-generated interfaces often look "normal" by default
2. How to describe a design style through 5 dimensions: typography, color, layout, motion, and detailsHow to describe a design style through 5 dimensions: typography, color, layout, motion, and details
3. How to use 3 helpful Skills plugins for UI beautificationHow to use 3 helpful Skills plugins for UI beautification
4. How to generate better-looking interfaces through prompts + Skills across three practical scenariosHow to generate better-looking interfaces through prompts + Skills across three practical scenarios

1. Why do AI-generated interfaces look "ordinary" by default?1. Why do AI-generated interfaces look "ordinary" by default?

AI was trained on massive amounts of frontend code, and most of that code uses safe, highly repeated choices:AI was trained on massive amounts of frontend code, and most of that code uses safe, highly repeated choices:

Dimension	AI's default choice	Problem
Typography	Inter, Roboto, Arial	Too common, no personality
Color	Purple gradients, blue primary colors	Overused in the tech world, visually tiring
Layout	Symmetrical grids, stacked cards	Predictable, not memorable
Motion	Fade-ins, simple hover effects	Not refined enough, lacks depth
Background	Solid colors, simple gradients	Flat and low-texture

Each of these choices is fine on its own. But once every AI-generated page uses all of them, they start to feel generic and interchangeable.Each of these choices is fine on its own. But once every AI-generated page uses all of them, they start to feel generic and interchangeable.

> 💡 Key insight: AI can design, but by default it gravitates toward the statistical average. Your job is to tell it how to move away from that average.> 💡 Key insight: AI can design, but by default it gravitates toward the statistical average. Your job is to tell it how to move away from that average.

2. Method One: describe style through prompts2. Method One: describe style through prompts

2.1 The 5 dimensions of design style2.1 The 5 dimensions of design style

To generate a visually strong interface, describe what you want across these five dimensions:To generate a visually strong interface, describe what you want across these five dimensions:

Dimension	What to describe	Example keywords
Typography	Display font for headings, readable body font for text	Space Grotesk, Playfair Display, JetBrains Mono
Color	Primary color + accent color, not evenly distributed	Primary #4F46E5 + accent #F59E0B
Layout	Asymmetry, overlap, grid-breaking structure	Bento Grid, asymmetrical sections, floating elements
Motion	Meaningful page-load and micro-interactions	staggered reveals, scroll-triggered motion
Details	Backgrounds, shadows, borders, textures	grain, geometry, gradient mesh

2.2 Seeing the difference: generic prompt vs aesthetic prompt2.2 Seeing the difference: generic prompt vs aesthetic prompt

Let's compare two prompts for the same landing page.Let's compare two prompts for the same landing page.

Generic prompt:Generic prompt:

text 📋 Salin📋 Copy

Please build a landing page for an AI writing assistant. Include a navbar, hero section, feature section, pricing section, and footer.

Beautified prompt:Beautified prompt:

text 📋 Salin📋 Copy

Please build a landing page for an AI writing assistant with the following style requirements: **Aesthetic style: Neubrutalism** **Typography:** - Headings: Space Grotesk, weight 700-900 - Body: IBM Plex Sans, weight 400 **Colors:** - Primary: #000000 - Accent: #FF6B00 - Background: #FFFDF0 - Borders: 3px solid black **Layout:** - Asymmetrical composition - Bold black dividers between regions - Cards with hard shadows (box-shadow: 8px 8px 0px #000) - Strong contrast through generous whitespace **Motion:** - Elements pop in from below on page load - Buttons shift upward by 2px on hover **Details:** - All corners set to 0px - Buttons should feel strongly 3D - Add subtle grain texture to the background

The second prompt gives AI enough direction to produce something bold and memorable instead of something merely functional.The second prompt gives AI enough direction to produce something bold and memorable instead of something merely functional.

2.3 A resource list of frontend beautification Skills2.3 A resource list of frontend beautification Skills

You do not need to invent every style prompt from scratch. Here are some useful resources:You do not need to invent every style prompt from scratch. Here are some useful resources:

Repository	What it contains	Stars	Link
ui-ux-pro-max-skill	57 styles + 95 color systems + 56 font pairings	10k+	[GitHub](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)
antigravity-awesome-skills	Helps avoid generic AI visual patterns	-	[GitHub](https://github.com/sickn33/antigravity-awesome-skills)
superdesigndev/superdesign	AI-native UI development tooling	4.7k	[GitHub](https://github.com/superdesigndev/superdesign)
anthropics/skills/frontend-design	Anthropic's official frontend design Skill	-	[GitHub](https://github.com/anthropics/skills)

> 💡 For more style prompts, see the [Appendix: Style Prompt Cheatsheet](#style-prompts).> 💡 For more style prompts, see the [Appendix: Style Prompt Cheatsheet](#style-prompts).

2.5 Three reliable style templates2.5 Three reliable style templates

Here are three proven templates you can copy and adapt directly.Here are three proven templates you can copy and adapt directly.

Template 1: MinimalismTemplate 1: Minimalism

text 📋 Salin📋 Copy

**Aesthetic style: Minimalism** **Typography:** - Headings: PP Neue Montreal, weight 500-700 - Body: Inter, weight 400 **Colors:** - Primary: #FFFFFF - Text: #1A1A1A - Accent: #3B82F6, used sparingly **Layout:** - Large amounts of whitespace (minimum 64px section padding) - One-column or two-column centered layout - Use spacing instead of divider lines **Motion:** - Slow fade-in transitions (duration 600ms) - Soft color transitions on hover **Details:** - Radius: 8px - Shadows: subtle (0 4px 12px rgba(0,0,0,0.08)) - No decorative background elements

Template 2: GlassmorphismTemplate 2: Glassmorphism

text 📋 Salin📋 Copy

**Aesthetic style: Glassmorphism** **Typography:** - Headings: Outfit, weight 600-800 - Body: Plus Jakarta Sans, weight 400-500 **Colors:** - Background: gradient from #667eea to #764ba2 - Card background: rgba(255, 255, 255, 0.1) - Text: #FFFFFF **Layout:** - Floating card design - Slight overlap between cards **Motion:** - Cards appear in staggered sequence on page load - Cards scale to 1.05x on hover **Details:** - Radius: 20px - Blur: backdrop-blur-xl - Border: 1px rgba(255, 255, 255, 0.2) - Subtle glow effects

Template 3: Bento GridTemplate 3: Bento Grid

text 📋 Salin📋 Copy

**Aesthetic style: Bento Grid** **Typography:** - Headings: SF Pro Display, weight 700 - Body: SF Pro Text, weight 400 **Colors:** - Background: #F5F5F7 - Cards: #FFFFFF - Accent: #0071E3 **Layout:** - Grid-based composition with mixed card sizes - 16px gaps - 24px radius **Motion:** - Subtle hover lift - Press feedback on click **Details:** - Large cards for primary content - Smaller cards for secondary info - Use icons to replace some text - Clean shadows (0 4px 24px rgba(0,0,0,0.06))

3. Method Two: use Skills plugins to load design rules automatically3. Method Two: use Skills plugins to load design rules automatically

Writing style prompts by hand every time is tiring. Skills are reusable design-rule packages that can be installed once and applied repeatedly.Writing style prompts by hand every time is tiring. Skills are reusable design-rule packages that can be installed once and applied repeatedly.

3.1 Three Skills that make interfaces look better3.1 Three Skills that make interfaces look better

Skill	Key strength	Install command
UI/UX Pro Max	67 styles, 96 color systems, 57 font combinations	npm install -g uipro-cli && uipro init --ai claude
frontend-design	Anthropic official Skill focused on avoiding generic AI aesthetics	npx skills add anthropics/skills/frontend-design
SuperDesign	IDE plugin that generates multiple design variants	Search for SuperDesign in the VS Code extension marketplace

3.2 Install UI/UX Pro Max3.2 Install UI/UX Pro Max

UI/UX Pro Max is one of the most complete design-rule Skills packages available. It includes:UI/UX Pro Max is one of the most complete design-rule Skills packages available. It includes:

• 67 UI styles: Glassmorphism, Neumorphism, Brutalism, Bento Grid, and more67 UI styles: Glassmorphism, Neumorphism, Brutalism, Bento Grid, and more
• 96 color systems: organized by product type, such as SaaS, e-commerce, and social apps96 color systems: organized by product type, such as SaaS, e-commerce, and social apps
• 57 font pairings: validated combinations from professional designers57 font pairings: validated combinations from professional designers
• 100+ design rules: spacing, corner radius, shadows, and more100+ design rules: spacing, corner radius, shadows, and more

Installation steps:Installation steps:

bash 📋 Salin📋 Copy

# 1. Install the CLI globally npm install -g uipro-cli # 2. Initialize it for your AI tool uipro init --ai claude # or uipro init --ai cursor # or uipro init --ai trae

After installation, you can simply say:After installation, you can simply say:

text 📋 Salin📋 Copy

Use UI/UX Pro Max's Glassmorphism style to build me a landing page for an AI writing assistant.

The AI will then automatically apply the matching typography, color, and layout conventions.The AI will then automatically apply the matching typography, color, and layout conventions.

3.3 Install Anthropic's official frontend-design Skill3.3 Install Anthropic's official frontend-design Skill

This is Anthropic's official frontend design Skill, focused specifically on preventing generic AI output:This is Anthropic's official frontend design Skill, focused specifically on preventing generic AI output:

bash 📋 Salin📋 Copy

# Run in Claude Code npx skills add anthropics/skills/frontend-design

After installation, the AI will tend to avoid:After installation, the AI will tend to avoid:

• ❌ Inter, Roboto, Arial❌ Inter, Roboto, Arial
• ❌ Purple gradient backgrounds❌ Purple gradient backgrounds
• ❌ Symmetrical grid layouts❌ Symmetrical grid layouts
• ❌ Overly soft shadows❌ Overly soft shadows

And it will instead lean toward:And it will instead lean toward:

• ✅ More distinctive font combinations✅ More distinctive font combinations
• ✅ Strong primary colors with sharper accents✅ Strong primary colors with sharper accents
• ✅ Asymmetrical or overlapping layouts✅ Asymmetrical or overlapping layouts
• ✅ More textured backgrounds such as grain and geometry✅ More textured backgrounds such as grain and geometry

4. Practical scenario one: redesign a landing page with aesthetic prompts4. Practical scenario one: redesign a landing page with aesthetic prompts

Let's take what we just learned and turn a very ordinary landing page into a much more attractive one.Let's take what we just learned and turn a very ordinary landing page into a much more attractive one.

4.1 The plain version4.1 The plain version

Start by seeing what AI gives you with a generic prompt:Start by seeing what AI gives you with a generic prompt:

text 📋 Salin📋 Copy

Please build a landing page for a pet adoption platform. Include: - a navbar (logo, links, sign-up button) - a hero section (headline, subheadline, CTA button, pet image) - a pet gallery (three pet cards) - an about-us section - a footer

The result will probably work, but it will feel pretty average.The result will probably work, but it will feel pretty average.

4.2 The improved version4.2 The improved version

Now add style guidance:Now add style guidance:

text 📋 Salin📋 Copy

Please build a landing page for a pet adoption platform with the following design requirements: **Aesthetic style: warm, soft, with a hand-drawn feeling** **Typography:** - Headings: Nunito, weight 700-800 - Body: Nunito, weight 400-600 **Colors:** - Primary: #FFB347 - Secondary: #FFCCB3 - Background: #FFF8F0 - Text: #5D4037 **Layout:** - Rounded cards (border-radius: 24px) - Slightly tilted cards at different angles - Floating and overlapping elements **Motion:** - Elements slide in from both sides on page load - Pet cards slightly rotate on hover like an animal tilting its head - Buttons bounce on hover **Details:** - Use 16-24px radii throughout - Warm soft shadows (0 8px 24px rgba(255,179,71,0.3)) - Add paw-print decorations in the background - Use irregular image crops via clip-path - Use outline-style hand-drawn icons

That version will generate a much warmer, more emotionally convincing interface.That version will generate a much warmer, more emotionally convincing interface.

5. Practical scenario two: generate dashboards quickly with Skills5. Practical scenario two: generate dashboards quickly with Skills

Skills are especially useful for admin dashboards and internal systems where many pages share the same design language.Skills are especially useful for admin dashboards and internal systems where many pages share the same design language.

5.1 Using UI/UX Pro Max5.1 Using UI/UX Pro Max

text 📋 Salin📋 Copy

Use UI/UX Pro Max's Dashboard Dark style and build a dashboard page for a SaaS admin panel that includes: **Top:** Four stats cards (users, active users, revenue, API calls) **Middle:** - Left: 7-day user growth line chart - Right: subscription plan distribution pie chart **Bottom:** a recent activity list showing time, user, and action

The Skill will automatically apply a consistent dashboard look:The Skill will automatically apply a consistent dashboard look:

• dark gray backgrounds such as #1A1A2Edark gray backgrounds such as #1A1A2E
• high-contrast cards like #16213Ehigh-contrast cards like #16213E
• bright data colors such as blue, green, and orangebright data colors such as blue, green, and orange
• floating cards with mild glassmorphism effectsfloating cards with mild glassmorphism effects

5.2 Using frontend-design5.2 Using frontend-design

text 📋 Salin📋 Copy

Use the frontend-design skill and build a homepage for a personal blog. Make it distinctive and full of personality.

The AI will typically choose a more specific aesthetic direction, such as retro-futurism or editorial magazine style, and implement it with typography, color, and layout decisions that break out of generic patterns.The AI will typically choose a more specific aesthetic direction, such as retro-futurism or editorial magazine style, and implement it with typography, color, and layout decisions that break out of generic patterns.

6. Practical scenario three: create your own design system Skill6. Practical scenario three: create your own design system Skill

If your product already has a fixed brand style, you can create your own Skill so every AI-generated page automatically follows it.If your product already has a fixed brand style, you can create your own Skill so every AI-generated page automatically follows it.

6.1 Create the Skill file6.1 Create the Skill file

Create .claude/skills/my-brand/SKILL.md in your project:Create .claude/skills/my-brand/SKILL.md in your project:

`markdown 📋 Salin📋 Copy

--- name: my-brand description: My project's custom design system, ensuring every UI follows a consistent visual language --- # My Project Design System ## Brand Colors - Primary: #6366F1 (Indigo 500) - Secondary: #8B5CF6 (Violet 500) - Success: #10B981 - Warning: #F59E0B - Error: #EF4444 - Background: #F9FAFB - Card: #FFFFFF ## Typography - Headings: Plus Jakarta Sans - H1: 700, 48px - H2: 600, 36px - H3: 600, 24px - Body: Inter - Body: 400, 16px - Small: 400, 14px ## Spacing - Base unit: 4px - Component padding: 8px / 12px / 16px - Section spacing: 24px / 32px / 48px - Page margin: 64px ## Radius - Buttons: 8px - Cards: 12px - Inputs: 8px - Modals: 16px ## Shadows - Small: 0 1px 3px rgba(0,0,0,0.1) - Medium: 0 4px 12px rgba(0,0,0,0.1) - Large: 0 8px 24px rgba(0,0,0,0.12) ## Motion - Transition duration: 150ms / 300ms - Easing: cubic-bezier(0.4, 0, 0.2, 1) - Hover effect: slight scale-up (scale-105) ## Forbidden Styles - Do not use purple gradient backgrounds - Do not use fonts other than Inter for body text - Do not use radii larger than 16px - Do not use pure black (#000000); use #1F2937 instead

6.2 Use your custom Skill6.2 Use your custom Skill

After creating it, you can simply say:After creating it, you can simply say:

text 📋 Salin📋 Copy

Use my-brand skill to build me a user settings page.

The AI will automatically apply your colors, fonts, spacing system, and other design constraints.The AI will automatically apply your colors, fonts, spacing system, and other design constraints.

7. Summary7. Summary

There are two main ways to make AI generate better-looking interfaces:There are two main ways to make AI generate better-looking interfaces:

Method	Strength	Weakness	Best for
Prompt descriptions	Flexible, easy to vary every time	Must be repeated	One-off pages, style exploration
Skills plugins	Install once, benefits persist	Requires setup	Projects with a stable visual system

Suggested vibe-coding workflow:Suggested vibe-coding workflow:

1. Exploration phase: try different prompt styles to find an aesthetic direction you likeExploration phase: try different prompt styles to find an aesthetic direction you like
2. After choosing a style: install the matching Skill, such as UI/UX Pro Max or frontend-designAfter choosing a style: install the matching Skill, such as UI/UX Pro Max or frontend-design
3. For brand-driven products: build your own Skill so the entire project stays visually consistentFor brand-driven products: build your own Skill so the entire project stays visually consistent

PracticePractice

Try one of the following:Try one of the following:

1. Redesign one of your previous projects with a stronger visual style using prompt-based design instructionsRedesign one of your previous projects with a stronger visual style using prompt-based design instructions
2. Install UI/UX Pro Max and use one of its styles to generate a new pageInstall UI/UX Pro Max and use one of its styles to generate a new page
3. Create your own design-system Skill with your preferred colors and typographyCreate your own design-system Skill with your preferred colors and typography

------

Appendix: style cheatsheetAppendix: style cheatsheet

Style	Keywords	Best for	Example
Minimalism	whitespace, mono palette, clean	premium products, portfolios	Apple
Glassmorphism	frosted glass, blur, gradients	SaaS landing pages, tech tools	macOS Big Sur
Neubrutalism	heavy borders, hard shadows, solid fills	creative brands, art sites	Brassius
Bento Grid	modular cards, collage layouts	dashboards, feature showcases	Apple marketing pages
Retro Futurism	neon, synthwave, dark contrast	games, music, entertainment	Stranger Things aesthetics
Hand-drawn	irregular, soft, illustrated	education, children-oriented products	Duolingo vibes
Editorial / Magazine	oversized type, asymmetry, whitespace	blogs, content sites	Medium-inspired layouts
Dark Luxury	deep tones, gold accents, fine detail	premium and luxury products	luxury branding sites

Appendix: Skills install cheatsheetAppendix: Skills install cheatsheet

bash 📋 Salin📋 Copy

# UI/UX Pro Max npm install -g uipro-cli uipro init --ai claude # Anthropic frontend-design npx skills add anthropics/skills/frontend-design # Anthropic brand-guidelines npx skills add anthropics/skills/brand-guidelines # Check installed Skills in Claude Code /help

Appendix: recommended color systemsAppendix: recommended color systems

Palette	Primary	Accent	Background	Mood
Sunset	#F97316	#FBBF24	#FFF7ED	warm, energetic
Ocean	#0EA5E9	#06B6D4	#F0F9FF	fresh, professional
Forest	#10B981	#34D399	#ECFDF5	natural, healthy
Berry	#8B5CF6	#EC4899	#FAF5FF	romantic, creative
Coffee	#78350F	#D97706	#FFFBEB	warm, retro
Monostone	#6B7280	#9CA3AF	#F9FAFB	neutral, professional

Appendix: style prompt cheatsheet {#style-prompts}Appendix: style prompt cheatsheet {#style-prompts}

Useful visual directions you can try when prompting for better frontend interfaces:Useful visual directions you can try when prompting for better frontend interfaces:

Style categoriesStyle categories

Style	English keywords	Core visual traits	Example prompt fragment
Pop Art	Pop Art	Bold color clashes, black outlines, halftone textures	Pop art style website, bold colors and comic dots, vibrant
Minimalism	Minimalism	Lots of whitespace, very little ornament	Minimalist web design, ample white space, geometric, serene
Abstract Expressionism	Abstract Expressionism	Energetic brushstrokes, expressive splashes	Abstract expressionism background, dynamic paint splashes, emotional
Retro	Retro / Vintage	Vintage type, aged textures, retro palettes	Retro 80s website design, neon grid and synthwave color palette
Cyberpunk	Cyberpunk	Neon-on-dark contrast, glitch effects	Cyberpunk UI, neon lights on dark background, glitch effects
Neumorphism	Neumorphism	Soft highlights and shadows, raised or sunken surfaces	Neumorphism design style, soft shadows, clean and modern
Generative Art	Generative Art	Algorithmic flowing shapes and patterns	Generative art background, flowing algorithmic patterns, digital
Acid Graphics	Acid Graphics	Metallic texture, glass effects, chaotic type	Acid graphics web layout, glass morphism, chaotic typography
Immersive 3D	Immersive 3D	Highly spatial scenes and product depth	Immersive 3D website, interactive product model in space

← SebelumnyaPreviousSpesifikasi UI & Desain Multi-ProdukSpesifikasi UI & Desain Multi-Produk SelanjutnyaNext →Dari Prototipe Desain Menjadi Kode NyataDari Prototipe Desain Menjadi Kode Nyata