Frontend Aesthetics — Prompt Claude tạo UI đẹp hơn

Một trong những frustraciones phổ biến nhất khi dùng Claude Code hay Claude API để tạo frontend: nhận được UI "hoạt động được" nhưng trông không đẹp — layout cứng nhắc, typography nhàm chán, màu sắc không nhất quán. Vấn đề không phải ở Claude, mà ở cách bạn describe visual intent.

Bài này là collection những techniques và prompts đã được prove để ra UI đẹp hơn đáng kể.

Nguyên tắc cốt lõi: Tư duy như Designer

Trước khi viết prompt, hãy tự hỏi:

• Mood/Personality: Professional? Playful? Minimal? Bold?
• Audience: Enterprise users? Consumers? Developers?
• Reference brands: Trông giống Stripe? Linear? Notion?
• Primary action: User cần làm gì đầu tiên?

Technique 1: Describe với Design Vocabulary

Thay vì nói "làm đẹp", dùng design terminology cụ thể:

# Prompt tệ
"Create a dashboard page. Make it look nice."

# Prompt tốt
"""Create a SaaS analytics dashboard with:

Visual Style:
- Dark theme with #0F172A background (Slate 950)
- Glassmorphism cards: backdrop-blur, 10% white opacity, 1px white border
- Accent color: Electric blue #3B82F6 for primary actions
- Subtle gradients: cards have gradient from slate-800 to slate-900

Typography:
- Font: Inter (Google Fonts)
- Heading: 2xl/3xl, font-weight 700, tight tracking
- Data numbers: 4xl, tabular-nums, font-weight 800
- Labels: xs, uppercase, letter-spacing wider, muted color

Layout:
- Top nav: 64px height, company logo left, user avatar right
- KPI row: 4 equal cards, gap-4, each with icon + number + delta indicator
- Main content: 2/3 chart + 1/3 sidebar
- Responsive: stack to single column on mobile

Micro-interactions:
- Hover: cards lift with shadow-2xl + scale 1.01 transition
- Loading states: skeleton with pulse animation
- Numbers: animate count-up on page load"""

Technique 2: Reference Real Designs

Claude có kiến thức về design systems phổ biến — leverage điều này:

"""Build a pricing page similar to Stripe's aesthetic:
- Clean white background
- Centered layout, max-width 1200px
- 3-tier pricing cards (hobby/pro/enterprise)
- Highlighted 'Pro' tier with blue border and 'Popular' badge
- Feature checklist with checkmark icons
- Consistent 8px spacing system (Tailwind defaults)
- CTA buttons: rounded-full, generous padding
- Footer with minimal links

Reference visual language: Stripe.com pricing page"""

# Hoặc
"""Create a sidebar navigation like Linear's app:
- Dark sidebar, 240px wide
- Icon + label nav items
- Active state: subtle blue highlight + left border indicator
- Grouped sections with small caps labels
- Smooth hover transitions
- Keyboard shortcut hints (right-aligned, opacity 50%)"""

Technique 3: Design Token System

Define design tokens trước, rồi instruct Claude dùng chúng nhất quán:

DESIGN_SYSTEM_PROMPT = """
Before writing any code, use this design system consistently:

COLOR TOKENS:
--color-primary: #6366F1 (Indigo 500)
--color-primary-dark: #4338CA (Indigo 700)
--color-surface: #FFFFFF
--color-surface-elevated: #F8FAFC
--color-border: #E2E8F0
--color-text-primary: #0F172A
--color-text-secondary: #64748B
--color-success: #10B981
--color-danger: #EF4444
--color-warning: #F59E0B

SPACING:
Use 4px base unit (0.25rem). Prefer: 4, 8, 12, 16, 24, 32, 48, 64px

RADIUS:
- Small elements (badges, inputs): 6px
- Cards: 12px
- Modals: 16px
- Buttons: 8px (or rounded-full for CTA)

SHADOWS:
- Subtle: 0 1px 3px rgba(0,0,0,0.08)
- Card: 0 4px 16px rgba(0,0,0,0.08)
- Elevated: 0 8px 32px rgba(0,0,0,0.12)
- Focus ring: 0 0 0 3px rgba(99,102,241,0.25)

TYPOGRAPHY:
- Font: system-ui, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif
- Scale: 12/14/16/18/20/24/30/36/48px
- Weights: 400 (body), 500 (medium), 600 (semibold), 700 (bold)
- Line heights: 1.5 (body), 1.2 (headings), 1.0 (numbers)

Now build: [YOUR COMPONENT HERE]
"""

Technique 4: Component-First Approach

Thay vì xây page ngay, build design system components trước:

components_sequence = [
    # 1. Foundation
    "Create a Button component: variants=[primary, secondary, ghost, danger], sizes=[sm, md, lg], states=[default, hover, active, disabled, loading]",

    # 2. Form elements
    "Create an Input component: label + input + helper text + error state. Style: floating label animation when focused",

    # 3. Cards
    "Create a Card component: padding variants, optional header/footer, hover effect. Support: default, elevated, bordered styles",

    # 4. Navigation
    "Create a Navbar: logo, nav links, CTA button, mobile hamburger menu with slide-out drawer",

    # 5. Assemble
    "Using the Button, Input, Card, and Navbar components above, create a SaaS landing page with: hero section, features grid, pricing, CTA section"
]

def build_ui_system(client, components):
    """Build UI incrementally — each step builds on previous"""
    context = ""
    for component_prompt in components:
        response = client.messages.create(
            model="claude-opus-4-5",
            max_tokens=4000,
            system="You are an expert frontend developer creating a cohesive design system. Write clean, modern HTML/CSS/JS. Use CSS custom properties for theming.",
            messages=[{
                "role": "user",
                "content": f"{context}

Next task: {component_prompt}"
            }]
        )
        code = response.content[0].text
        context += f"

Previous component code:
{code[:500]}..."  # Summarize for context
        print(f"Built: {component_prompt[:50]}...")
    return code

Technique 5: Tailwind + Specific Classes

Khi dùng Tailwind CSS, specific classes > vague descriptions:

"""Create a notification toast component using Tailwind CSS:

Structure:
<div class="fixed bottom-4 right-4 z-50 animate-slide-up">
  <div class="flex items-start gap-3 rounded-xl bg-white p-4 shadow-xl ring-1 ring-black/5 max-w-sm">
    <!-- Icon (colored based on type) -->
    <div class="flex-shrink-0 w-5 h-5 mt-0.5">...</div>
    <!-- Content -->
    <div class="flex-1 min-w-0">
      <p class="text-sm font-semibold text-slate-900">Title</p>
      <p class="mt-1 text-sm text-slate-500">Description</p>
    </div>
    <!-- Close button -->
    <button class="text-slate-400 hover:text-slate-600 transition-colors">...</button>
  </div>
</div>

Types: success (green icon), error (red), warning (amber), info (blue)
Animation: slide in from right, auto-dismiss after 4s, progress bar at bottom"""

Technique 6: Iterate với Screenshot Context

Khi muốn cải thiện existing UI:

improvement_prompt = """
Current UI has these issues (from user feedback):
1. Cards feel cramped — not enough breathing room
2. CTA button not prominent enough
3. Mobile layout breaks at 375px — text overflows
4. No visual hierarchy — everything looks same weight
5. Color scheme feels dated

Please refactor this component addressing all 5 issues:

Current code:
[PASTE YOUR CURRENT CODE HERE]

Requirements:
- Increase card padding to 24px minimum
- CTA: larger (py-3 px-8), gradient background, shadow effect
- Mobile: ensure nothing wraps below 320px width
- Hierarchy: clear size/weight difference between h1, h2, body
- Colors: update to modern palette (suggest slate + indigo)"""

Technique 7: Animation và Micro-interactions

animation_prompt = """
Add these micro-interactions to the existing component:

1. Page load:
   - Hero text: fade-in + slight translate-y from below, 0.6s ease-out
   - Cards: staggered fade-in (0ms, 100ms, 200ms delay for each)

2. Hover states:
   - Cards: translateY(-4px) + shadow-lg, 200ms ease
   - Buttons: slight scale(1.02) + brightness(1.1)
   - Links: underline slides in from left (pseudo-element)

3. Interactive elements:
   - Toggle/switch: smooth width transition + color change
   - Accordion: height animation (not display toggle — use max-height)
   - Modal: scale from 95% + opacity 0 to 100% + opacity 1

4. Feedback:
   - Success actions: brief green flash + checkmark
   - Errors: shake animation (3 quick left-right) + red border
   - Loading: skeleton with shimmer effect

Use CSS animations/transitions only — no JavaScript animation libraries."""

Quick Reference: UI Quality Checklist

Trước khi submit UI prompt, kiểm tra bạn đã specify:

Tổng kết

UI quality từ Claude phụ thuộc trực tiếp vào visual vocabulary trong prompt của bạn. Đầu tư 5 phút define design tokens, reference styles, và micro-interactions — output sẽ khác biệt hoàn toàn so với prompt "make it look nice".

Key insights:

• Specific beats vague: "#3B82F6" tốt hơn "blue"
• Reference real products Claude biết (Stripe, Linear, Notion)
• Build design system components trước, assemble sau
• Include interaction states (hover/active/disabled) từ đầu
• Iterate với list of specific improvements thay vì "make it better"

Tìm hiểu thêm: Claude Skills — Tạo Excel, PowerPoint, PDF để tự động hóa document generation.