kimi-render — Công Thức Render UI Như Kimi

CHO BIẾT TRƯỚC

Đây là skill spec-first + pattern-driven. Không "sáng tạo tự do".

Nguyên lý:  UI đẹp KHÔNG đến từ model giỏi.
            UI đẹp đến từ SPEC ÉP CHẶT + 7 PATTERN LẶP LẠI.

Kimi đẹp:    vì có bộ 3 file md (design/outline/interaction) ép model fill trước khi code.
Wanderlust:  đẹp vì lặp lại 7 pattern ở 100% các section.
Commerce:    xấu vì mỗi agent render 1 kiểu, không có spec chung.

KHI NÀO INVOKE

Invoke skill này khi:

• User yêu cầu build landing/marketing/storefront/SaaS UI từ đầu
• User nói "render đẹp như Kimi/Wanderlust/Vivu"
• User yêu cầu prototype HTML single-file (no build step)
• Build page mới mà chưa có design system (brand chưa rõ)
• Refactor UI xấu → đẹp, cần follow công thức chặt

KHÔNG dùng khi:

• Đã có design system production rồi → dùng frontend-design
• Admin dashboard đã có theme (như Apple light) → dùng theme hiện tại
• Task nhỏ: sửa 1 button, đổi 1 text → không cần spec
• Mobile app (Flutter/RN) → dùng mobile-design

WORKFLOW BẮT BUỘC — 3 GIAI ĐOẠN

Giai đoạn 1: SPEC TRƯỚC (không được skip)

Khi page/feature lớn (>1 section), BẮT BUỘC tạo bộ 3 file md trong .design/ của project TRƯỚC KHI viết code:

<project>/.design/<feature-name>/
├── design.md        # Design system: color/font/spacing/animation
├── outline.md       # File structure + page sections + libraries
└── interaction.md   # Micro-interactions + user journey + mobile

Format 3 file này xem trong references/spec-templates.md.

Nếu skip spec → output sẽ giống "generic AI UI" (xám xịt, thiếu linh hồn). Đã verify nhiều lần.

Giai đoạn 2: CHỌN TEMPLATE STARTER

Có 2 template single-file sẵn:

Copy template → fill brand colors → tweak sections theo spec.

Giai đoạn 3: APPLY 7 PATTERN TRÊN MỌI SECTION

Đây là phần KHÔNG được phá. Mỗi section trên page PHẢI có đủ 7 pattern sau.

7 PATTERN LẶP LẠI (công thức Wanderlust)

Pattern 1: Eyebrow Tag (nhãn nhỏ trên heading)

<span class="inline-block px-4 py-1.5 bg-[accent-bg] text-[primary]
             text-xs font-bold uppercase tracking-widest rounded-full mb-4">
  KHÁM PHÁ
</span>

• Luôn uppercase + tracking-widest + font-bold text-xs
• Background = màu secondary/accent nhạt (10-20% opacity primary)
• Text = primary color
• rounded-full (pill shape)
• Đặt TRÊN mọi section heading (trừ hero)

Pattern 2: Display Heading 3-cấp

<!-- Section heading -->
<h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-dark mb-4 leading-tight">
  Điểm đến nổi bật
</h2>

<!-- Hero heading -->
<h1 class="font-display text-4xl sm:text-5xl lg:text-7xl font-bold leading-tight">
  Khám phá thế giới<br>
  <span class="text-transparent bg-clip-text bg-gradient-to-r from-[c1] to-[c2]">
    cùng Wanderlust
  </span>
</h1>

• 2 font: font-display (Poppins/Fraunces) + font-sans (Inter/Be Vietnam Pro)
• Hero: 4xl → 7xl responsive
• Section: 3xl → 5xl responsive
• leading-tight trên heading, leading-relaxed trên body
• Gradient accent chỉ trên 1-2 từ quan trọng nhất trong hero

Pattern 3: Subtitle Muted

<p class="text-slate-500 max-w-xl mx-auto leading-relaxed">
  Những địa điểm du lịch được yêu thích nhất...
</p>

• Text text-slate-500 hoặc text-[ink-500] (không phải đen)
• max-w-xl hoặc max-w-2xl → giới hạn chiều ngang
• mx-auto nếu section center, bỏ nếu left-aligned
• leading-relaxed cho dễ đọc

Pattern 4: Gradient Button + Colored Shadow

<button class="px-6 py-3.5 bg-gradient-to-r from-[primary] to-[primary-dark]
               text-white font-semibold rounded-xl
               shadow-lg shadow-[primary]/30
               hover:shadow-xl hover:shadow-[primary]/40
               transition-all active:scale-[0.98]
               flex items-center justify-center gap-2">
  <i class="fa-solid fa-magnifying-glass"></i>
  Tìm kiếm
</button>

4 tầng chiều sâu:

1. Gradient background (2 tone primary)
2. Colored shadow có opacity (25-30% → 40% khi hover)
3. transition-all smooth
4. active:scale-[0.98] → tactile feedback khi click

Secondary button thì: bg-white border border-slate-200 + no shadow.

Pattern 5: Card với Hover Lift

<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-sm">
  <img class="w-full h-48 object-cover" />
  <div class="p-6">
    <h3 class="font-display text-xl font-bold mb-2">Title</h3>
    <p class="text-slate-500 text-sm mb-4">Description</p>
    <div class="flex items-center justify-between">
      <span class="text-primary font-bold">1.200.000đ</span>
      <button class="...">Chi tiết</button>
    </div>
  </div>
</div>

<style>
.card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
</style>

• rounded-2xl (không dùng rounded-md/lg → quá nhỏ)
• Shadow đậm dần khi hover
• translateY(-8px) → lift effect
• Cubic-bezier Material: (0.4, 0, 0.2, 1)

Pattern 6: Form Input với Focus Ring

<div>
  <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">
    Địa điểm
  </label>
  <div class="relative">
    <i class="fa-solid fa-location-dot absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400"></i>
    <input type="text" placeholder="Bạn muốn đi đâu?"
           class="w-full pl-10 pr-4 py-3
                  bg-slate-50 border border-slate-200 rounded-xl text-sm
                  focus:outline-none focus:ring-2 focus:ring-[primary]/20 focus:border-[primary]
                  transition-all">
  </div>
</div>

• Label uppercase text-xs tracking-wider → editorial feel
• Input bg-slate-50 (không phải trắng) → mềm hơn
• Icon absolute trong input (left-3.5)
• Focus: ring 2px với opacity + border primary
• rounded-xl cho input
• Placeholder là GỢI Ý cụ thể (không trùng label)

Pattern 7: Stagger Animation trên Reveal

<div class="fade-in stagger-1">...</div>
<div class="fade-in stagger-2">...</div>
<div class="fade-in stagger-3">...</div>

<style>
.fade-in { animation: fadeIn 0.6s ease-out forwards; opacity: 0; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.25s; }
.stagger-3 { animation-delay: 0.4s; }
.stagger-4 { animation-delay: 0.55s; }
</style>

• Hero elements: entrance immediate
• Below-fold elements: Intersection Observer + .reveal.show class
• Stagger delay: 0.1s → 0.25s → 0.4s → 0.55s (exponential cảm giác)
• KHÔNG dùng delay >0.8s (user impatient)

BRAND COLOR RECIPE (3 tầng)

Mỗi brand CẦN định nghĩa đủ 3 tầng:

// tailwind.config inline
colors: {
  // TẦNG 1: BRAND (signature)
  primary: '#0ea5e9',       // sky-500 — CTA, links, accent
  secondary: '#f0f9ff',     // sky-50 — eyebrow bg, card bg nhẹ

  // TẦNG 2: SEMANTIC
  accent: '#22c55e',        // green — success, badge
  accentOrange: '#f97316',  // orange — hot/sale badge
  danger: '#ef4444',        // red

  // TẦNG 3: INK (text + structure)
  dark: '#0f172a',          // slate-900 — heading, footer bg
  ink: {
    700: '#334155',         // body text
    500: '#64748b',         // muted
    300: '#cbd5e1',         // disabled
  }
}

KHÔNG dùng màu random (purple/pink/teal) trừ khi có lý do brand. Stick với 1 brand color + neutrals.

TYPOGRAPHY PAIRING RECIPE

Chọn 1 trong 3 combo này:

Load qua Google Fonts inline trong <head>:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Define trong tailwind.config:

fontFamily: {
  display: ['Poppins', 'system-ui', 'sans-serif'],
  sans: ['Inter', 'system-ui', 'sans-serif'],
}

SECTION ANATOMY (xương sống mỗi section)

Mọi section content (không phải hero) phải follow anatomy này:

<section class="py-20 lg:py-28 bg-[bg-color]">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

    <!-- HEADER BLOCK -->
    <div class="text-center mb-14">
      <!-- 1. Eyebrow -->
      <span class="eyebrow">KHÁM PHÁ</span>
      <!-- 2. Display heading -->
      <h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
        Điểm đến nổi bật
      </h2>
      <!-- 3. Subtitle -->
      <p class="text-slate-500 max-w-xl mx-auto">...</p>
    </div>

    <!-- CONTENT BLOCK -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <!-- cards / items -->
    </div>

    <!-- OPTIONAL: Footer CTA -->
    <div class="text-center mt-12">
      <a href="#" class="text-primary font-semibold hover:underline inline-flex items-center gap-1">
        Xem tất cả <i class="fa-solid fa-arrow-right text-xs"></i>
      </a>
    </div>

  </div>
</section>

Spacing rule:

• Section padding: py-20 lg:py-28
• Container: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
• Header → Content: mb-14
• Grid gap: gap-6 (cards), gap-4 (small items), gap-8 (large blocks)

Alternating backgrounds:

• Section 1: bg-white
• Section 2: bg-slate-50
• Section 3: bg-white
• ... → tạo rhythm

SELF-CHECK TRƯỚC KHI SHIP

Prompt ép model tự check:

□ Mỗi section có ĐỦ 3 phần: eyebrow → heading → subtitle? (trừ hero)
□ Button chính có gradient + colored shadow + active:scale?
□ Card có rounded-2xl + hover lift (translateY(-8px))?
□ Input có label uppercase + icon absolute + focus ring với opacity?
□ Font pairing: 1 display + 1 sans, load từ Google Fonts?
□ Color palette: 1 primary + 1 secondary + semantic + ink scale?
□ Animation: fadeIn stagger 0.1/0.25/0.4/0.55s?
□ Section padding py-20 lg:py-28, container max-w-7xl?
□ Responsive: sm: / lg: breakpoints có mặt ở grid và typography?
□ Không dùng màu lạ (purple/pink) trừ khi brand yêu cầu?
□ Text tiếng Việt CÓ DẤU đầy đủ?
□ Mobile 375px: test grid 1 cột, stat không vỡ, form không tràn?

Nếu 1 ô FAIL → fix trước, không ship.

KHI USER BẢO "RENDER 1 CÂU" NHƯ KIMI

Công thức ngắn gọn:

INPUT:  "Tạo landing cho app du lịch"
OUTPUT: 1 file HTML single-page có 7 section:
        1. Header (logo + nav + CTA)
        2. Hero (headline + subtitle + search box nổi + stats)
        3. Destinations grid (4 cards)
        4. Featured hotels (3 cards với price + rating)
        5. Blog/offers (3 cards horizontal)
        6. Newsletter CTA (gradient bg)
        7. Footer (4 cols + social + copyright)

        Mỗi section follow anatomy chuẩn.
        Apply đủ 7 pattern.
        Dùng template saas-landing.html làm starter.

KHÔNG hỏi user "bạn muốn màu gì?" ở vòng đầu. Chọn blue-primary default (#0ea5e9 sky-500) — brand màu an toàn nhất. User thấy rồi sẽ nói nếu muốn đổi.

FILES TRONG SKILL NÀY

• SKILL.md — file này
• references/spec-templates.md — template cho design.md/outline.md/interaction.md
• references/patterns-cookbook.md — 7 pattern với variations
• templates/saas-landing.html — starter cho SaaS/booking/marketplace
• templates/editorial.html — starter cho editorial/portfolio/brand

KẾT HỢP VỚI SKILL KHÁC

• frontend-design: xem TRƯỚC skill này (7 công thức typography/spacing chi tiết)
• mobile-design: thay thế skill này cho mobile app
• feature-dev: orchestrate khi build full-stack feature

Thứ tự invoke đúng:

1. frontend-design (fundamentals)  →
2. kimi-render (render patterns + spec)  →
3. code