{"product_id":"frontend-aesthetics-prompt-claude-tạo-ui-dẹp-hơn","title":"Frontend Aesthetics — Prompt Claude tạo UI đẹp hơn","description":"\n\u003cp\u003eMộ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à ở \u003cstrong\u003ecách bạn describe visual intent\u003c\/strong\u003e.\u003c\/p\u003e\n\n\u003cp\u003eBài này là collection những techniques và prompts đã được prove để ra UI đẹp hơn đáng kể.\u003c\/p\u003e\n\n\u003ch2\u003eNguyên tắc cốt lõi: Tư duy như Designer\u003c\/h2\u003e\n\n\u003cp\u003eTrước khi viết prompt, hãy tự hỏi:\u003c\/p\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eMood\/Personality:\u003c\/strong\u003e Professional? Playful? Minimal? Bold?\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eAudience:\u003c\/strong\u003e Enterprise users? Consumers? Developers?\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eReference brands:\u003c\/strong\u003e Trông giống Stripe? Linear? Notion?\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003ePrimary action:\u003c\/strong\u003e User cần làm gì đầu tiên?\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch2\u003eTechnique 1: Describe với Design Vocabulary\u003c\/h2\u003e\n\n\u003cp\u003eThay vì nói \"làm đẹp\", dùng design terminology cụ thể:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e# Prompt tệ\n\"Create a dashboard page. Make it look nice.\"\n\n# Prompt tốt\n\"\"\"Create a SaaS analytics dashboard with:\n\nVisual Style:\n- Dark theme with #0F172A background (Slate 950)\n- Glassmorphism cards: backdrop-blur, 10% white opacity, 1px white border\n- Accent color: Electric blue #3B82F6 for primary actions\n- Subtle gradients: cards have gradient from slate-800 to slate-900\n\nTypography:\n- Font: Inter (Google Fonts)\n- Heading: 2xl\/3xl, font-weight 700, tight tracking\n- Data numbers: 4xl, tabular-nums, font-weight 800\n- Labels: xs, uppercase, letter-spacing wider, muted color\n\nLayout:\n- Top nav: 64px height, company logo left, user avatar right\n- KPI row: 4 equal cards, gap-4, each with icon + number + delta indicator\n- Main content: 2\/3 chart + 1\/3 sidebar\n- Responsive: stack to single column on mobile\n\nMicro-interactions:\n- Hover: cards lift with shadow-2xl + scale 1.01 transition\n- Loading states: skeleton with pulse animation\n- Numbers: animate count-up on page load\"\"\"\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eTechnique 2: Reference Real Designs\u003c\/h2\u003e\n\n\u003cp\u003eClaude có kiến thức về design systems phổ biến — leverage điều này:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e\"\"\"Build a pricing page similar to Stripe's aesthetic:\n- Clean white background\n- Centered layout, max-width 1200px\n- 3-tier pricing cards (hobby\/pro\/enterprise)\n- Highlighted 'Pro' tier with blue border and 'Popular' badge\n- Feature checklist with checkmark icons\n- Consistent 8px spacing system (Tailwind defaults)\n- CTA buttons: rounded-full, generous padding\n- Footer with minimal links\n\nReference visual language: Stripe.com pricing page\"\"\"\n\n# Hoặc\n\"\"\"Create a sidebar navigation like Linear's app:\n- Dark sidebar, 240px wide\n- Icon + label nav items\n- Active state: subtle blue highlight + left border indicator\n- Grouped sections with small caps labels\n- Smooth hover transitions\n- Keyboard shortcut hints (right-aligned, opacity 50%)\"\"\"\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eTechnique 3: Design Token System\u003c\/h2\u003e\n\n\u003cp\u003eDefine design tokens trước, rồi instruct Claude dùng chúng nhất quán:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eDESIGN_SYSTEM_PROMPT = \"\"\"\nBefore writing any code, use this design system consistently:\n\nCOLOR TOKENS:\n--color-primary: #6366F1 (Indigo 500)\n--color-primary-dark: #4338CA (Indigo 700)\n--color-surface: #FFFFFF\n--color-surface-elevated: #F8FAFC\n--color-border: #E2E8F0\n--color-text-primary: #0F172A\n--color-text-secondary: #64748B\n--color-success: #10B981\n--color-danger: #EF4444\n--color-warning: #F59E0B\n\nSPACING:\nUse 4px base unit (0.25rem). Prefer: 4, 8, 12, 16, 24, 32, 48, 64px\n\nRADIUS:\n- Small elements (badges, inputs): 6px\n- Cards: 12px\n- Modals: 16px\n- Buttons: 8px (or rounded-full for CTA)\n\nSHADOWS:\n- Subtle: 0 1px 3px rgba(0,0,0,0.08)\n- Card: 0 4px 16px rgba(0,0,0,0.08)\n- Elevated: 0 8px 32px rgba(0,0,0,0.12)\n- Focus ring: 0 0 0 3px rgba(99,102,241,0.25)\n\nTYPOGRAPHY:\n- Font: system-ui, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif\n- Scale: 12\/14\/16\/18\/20\/24\/30\/36\/48px\n- Weights: 400 (body), 500 (medium), 600 (semibold), 700 (bold)\n- Line heights: 1.5 (body), 1.2 (headings), 1.0 (numbers)\n\nNow build: [YOUR COMPONENT HERE]\n\"\"\"\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eTechnique 4: Component-First Approach\u003c\/h2\u003e\n\n\u003cp\u003eThay vì xây page ngay, build design system components trước:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003ecomponents_sequence = [\n    # 1. Foundation\n    \"Create a Button component: variants=[primary, secondary, ghost, danger], sizes=[sm, md, lg], states=[default, hover, active, disabled, loading]\",\n\n    # 2. Form elements\n    \"Create an Input component: label + input + helper text + error state. Style: floating label animation when focused\",\n\n    # 3. Cards\n    \"Create a Card component: padding variants, optional header\/footer, hover effect. Support: default, elevated, bordered styles\",\n\n    # 4. Navigation\n    \"Create a Navbar: logo, nav links, CTA button, mobile hamburger menu with slide-out drawer\",\n\n    # 5. Assemble\n    \"Using the Button, Input, Card, and Navbar components above, create a SaaS landing page with: hero section, features grid, pricing, CTA section\"\n]\n\ndef build_ui_system(client, components):\n    \"\"\"Build UI incrementally — each step builds on previous\"\"\"\n    context = \"\"\n    for component_prompt in components:\n        response = client.messages.create(\n            model=\"claude-opus-4-5\",\n            max_tokens=4000,\n            system=\"You are an expert frontend developer creating a cohesive design system. Write clean, modern HTML\/CSS\/JS. Use CSS custom properties for theming.\",\n            messages=[{\n                \"role\": \"user\",\n                \"content\": f\"{context}\n\nNext task: {component_prompt}\"\n            }]\n        )\n        code = response.content[0].text\n        context += f\"\n\nPrevious component code:\n{code[:500]}...\"  # Summarize for context\n        print(f\"Built: {component_prompt[:50]}...\")\n    return code\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eTechnique 5: Tailwind + Specific Classes\u003c\/h2\u003e\n\n\u003cp\u003eKhi dùng Tailwind CSS, specific classes \u0026gt; vague descriptions:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e\"\"\"Create a notification toast component using Tailwind CSS:\n\nStructure:\n\u0026lt;div class=\"fixed bottom-4 right-4 z-50 animate-slide-up\"\u0026gt;\n  \u0026lt;div class=\"flex items-start gap-3 rounded-xl bg-white p-4 shadow-xl ring-1 ring-black\/5 max-w-sm\"\u0026gt;\n    \u0026lt;!-- Icon (colored based on type) --\u0026gt;\n    \u0026lt;div class=\"flex-shrink-0 w-5 h-5 mt-0.5\"\u0026gt;...\u0026lt;\/div\u0026gt;\n    \u0026lt;!-- Content --\u0026gt;\n    \u0026lt;div class=\"flex-1 min-w-0\"\u0026gt;\n      \u0026lt;p class=\"text-sm font-semibold text-slate-900\"\u0026gt;Title\u0026lt;\/p\u0026gt;\n      \u0026lt;p class=\"mt-1 text-sm text-slate-500\"\u0026gt;Description\u0026lt;\/p\u0026gt;\n    \u0026lt;\/div\u0026gt;\n    \u0026lt;!-- Close button --\u0026gt;\n    \u0026lt;button class=\"text-slate-400 hover:text-slate-600 transition-colors\"\u0026gt;...\u0026lt;\/button\u0026gt;\n  \u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\n\nTypes: success (green icon), error (red), warning (amber), info (blue)\nAnimation: slide in from right, auto-dismiss after 4s, progress bar at bottom\"\"\"\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eTechnique 6: Iterate với Screenshot Context\u003c\/h2\u003e\n\n\u003cp\u003eKhi muốn cải thiện existing UI:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eimprovement_prompt = \"\"\"\nCurrent UI has these issues (from user feedback):\n1. Cards feel cramped — not enough breathing room\n2. CTA button not prominent enough\n3. Mobile layout breaks at 375px — text overflows\n4. No visual hierarchy — everything looks same weight\n5. Color scheme feels dated\n\nPlease refactor this component addressing all 5 issues:\n\nCurrent code:\n[PASTE YOUR CURRENT CODE HERE]\n\nRequirements:\n- Increase card padding to 24px minimum\n- CTA: larger (py-3 px-8), gradient background, shadow effect\n- Mobile: ensure nothing wraps below 320px width\n- Hierarchy: clear size\/weight difference between h1, h2, body\n- Colors: update to modern palette (suggest slate + indigo)\"\"\"\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eTechnique 7: Animation và Micro-interactions\u003c\/h2\u003e\n\n\u003cpre\u003e\u003ccode\u003eanimation_prompt = \"\"\"\nAdd these micro-interactions to the existing component:\n\n1. Page load:\n   - Hero text: fade-in + slight translate-y from below, 0.6s ease-out\n   - Cards: staggered fade-in (0ms, 100ms, 200ms delay for each)\n\n2. Hover states:\n   - Cards: translateY(-4px) + shadow-lg, 200ms ease\n   - Buttons: slight scale(1.02) + brightness(1.1)\n   - Links: underline slides in from left (pseudo-element)\n\n3. Interactive elements:\n   - Toggle\/switch: smooth width transition + color change\n   - Accordion: height animation (not display toggle — use max-height)\n   - Modal: scale from 95% + opacity 0 to 100% + opacity 1\n\n4. Feedback:\n   - Success actions: brief green flash + checkmark\n   - Errors: shake animation (3 quick left-right) + red border\n   - Loading: skeleton with shimmer effect\n\nUse CSS animations\/transitions only — no JavaScript animation libraries.\"\"\"\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eQuick Reference: UI Quality Checklist\u003c\/h2\u003e\n\n\u003cp\u003eTrước khi submit UI prompt, kiểm tra bạn đã specify:\u003c\/p\u003e\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n\u003cth\u003eCategory\u003c\/th\u003e\n\u003cth\u003eCần specify\u003c\/th\u003e\n\u003c\/tr\u003e\n  \u003c\/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n\u003ctd\u003eColors\u003c\/td\u003e\n\u003ctd\u003eExact hex codes hoặc Tailwind class names\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eTypography\u003c\/td\u003e\n\u003ctd\u003eFont family, size scale, weight, line height\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eSpacing\u003c\/td\u003e\n\u003ctd\u003ePadding\/margin values, gap system\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eBorder radius\u003c\/td\u003e\n\u003ctd\u003eSpecific values per element type\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eShadows\u003c\/td\u003e\n\u003ctd\u003eSubtle\/card\/elevated levels\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eStates\u003c\/td\u003e\n\u003ctd\u003ehover, active, disabled, focus, error, loading\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eResponsive\u003c\/td\u003e\n\u003ctd\u003eBreakpoints: mobile (320px), tablet (768px), desktop (1280px)\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eAnimations\u003c\/td\u003e\n\u003ctd\u003eDuration, easing function, trigger\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eAccessibility\u003c\/td\u003e\n\u003ctd\u003eARIA labels, keyboard nav, color contrast\u003c\/td\u003e\n\u003c\/tr\u003e\n  \u003c\/tbody\u003e\n\u003c\/table\u003e\n\n\u003ch2\u003eTổng kết\u003c\/h2\u003e\n\n\u003cp\u003eUI 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\".\u003c\/p\u003e\n\n\u003cp\u003eKey insights:\u003c\/p\u003e\n\u003cul\u003e\n  \u003cli\u003eSpecific beats vague: \"#3B82F6\" tốt hơn \"blue\"\u003c\/li\u003e\n  \u003cli\u003eReference real products Claude biết (Stripe, Linear, Notion)\u003c\/li\u003e\n  \u003cli\u003eBuild design system components trước, assemble sau\u003c\/li\u003e\n  \u003cli\u003eInclude interaction states (hover\/active\/disabled) từ đầu\u003c\/li\u003e\n  \u003cli\u003eIterate với list of specific improvements thay vì \"make it better\"\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003cp\u003eTìm hiểu thêm: \u003ca href=\"\/collections\/ung-dung\"\u003eClaude Skills — Tạo Excel, PowerPoint, PDF\u003c\/a\u003e để tự động hóa document generation.\u003c\/p\u003e\n","brand":"Minh Tuấn","offers":[{"title":"Default Title","offer_id":66959028715565,"sku":null,"price":0.0,"currency_code":"VND","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0763\/9531\/5245\/files\/frontend-aesthetics-prompt-claude-t_o-ui-d_p-h_n_d7bf3fb7-ebba-4cea-b5ed-cd5495e2f9ba.jpg?v=1782891866","url":"https:\/\/claudeae.com\/products\/frontend-aesthetics-prompt-claude-t%e1%ba%a1o-ui-d%e1%ba%b9p-h%c6%a1n","provider":"Claude.vn","version":"1.0","type":"link"}