Cowork UI Kit — Hướng dẫn sử dụng thực tế

Đọc trong 5 phút · áp dụng được ngay

Bắt đầu 1 project mới? Đây là cách dùng kit.

File này hướng dẫn anh sử dụng Cowork UI Kit khi bắt đầu 1 công việc thực tế — từ "anh có idea" đến "có UI chạy trên browser". Không lý thuyết, chỉ workflow.

3 scenario phổ biến nhất + decision tree chọn aesthetic + code snippet copy-paste + checklist QC trước deploy.

TL;DR · 30 giây

Quy trình chuẩn 4 bước

1

Chọn archetype (page type)

Dashboard? Landing? Editorial? Mở _previews/index.html, nhìn 6 cái, chọn 1.
2

Aesthetic đã có sẵn theo archetype

Dashboard / Tool → Dark P4. Landing / Editorial / PWA → Warm P1. Không cần chọn thêm.
3

Setup tokens vào project

Next.js → copy tokens/tailwind.preset.js. WordPress/HTML → import tokens/tokens.css.
4

Copy component từ showcase

Mở showcase/0X-*.html, view source, copy block HTML cần dùng. Paste vào project. Xong.

Step 1 · chọn archetype

Anh đang định làm gì?

Trả lời câu hỏi → cây dẫn anh đến file mockup tương ứng.

Có chart, KPI, table, filter không?

Vd: báo cáo doanh thu, ads dashboard, BI tool, analytics

Có → A · Dashboard

Có CRUD, sidebar, list/detail (workspace tool)?

Vd: admin panel, task tool, CMS, internal tool

Có → B · Tool

Public-facing brand page — bán hàng / giới thiệu?

Vd: landing An Nhien, KHI Wellness home, BetterBuy DTC

Có → C · Landing

Long-form content reading — bài viết, blog, magazine?

Vd: A-Kryphan blog, BetterBuy chapters, brand storytelling

Có → D · Editorial

Slide deck — pitch, annual report, present?

Vd: KHI deck cho nhà đầu tư, BB chapters present

Có → E · Deck

Mobile app / PWA — member, funnel client?

Vd: KHI member app, khi-funnel, KWM mobile

Có → F · PWA

Không rơi vào case nào? → 80% là 1 hybrid của 2 archetype. Vd "admin + landing" → dùng B cho admin, C cho marketing page. Cùng 1 brand có thể chạy nhiều archetype.

Step 2 · aesthetic đã chốt theo archetype

Anh không phải chọn lại

Mỗi archetype đã map cứng vào 1 aesthetic — đừng pha trộn.

Warm

P1 · Terracotta Sand

Archetype C / D / E / F

Landing, editorial, deck, mobile PWA — bất cứ thứ gì người dùng cuối sẽ chạm vào.

Brand fit: KHI, An Nhien, BetterBuy DTC, Xanh, A-Kryphan

Font: Instrument Serif italic + Inter sans

Không dùng: mono font, grid lines, terminal vibe

Dark

P4 · GRAPHITE AURORA

Archetype A / B

Dashboard, internal tool, BI — bất cứ thứ gì người trong team dùng để ra quyết định.

Brand fit: KHI Funnel admin, Cakeinsights, FB Ads, home.dang.pm

Font: Inter tight + IBM Plex Mono labels

Không dùng: Instrument Serif body, emoji, soft shadow

Step 3 · setup theo scenario

3 scenario phổ biến

Pick scenario phù hợp + làm theo từng bước.

SCENARIO A

Start project Next.js mới

Vd: KHI Studio v2, KHI Drive, BetterBuy admin, AI Tools dashboard mới

A.1 Tạo Next.js project + cài Tailwind

# Trong 00-dev/
npx create-next-app@latest khi-studio --typescript --tailwind --app
cd khi-studio

A.2 Copy Tailwind preset vào project

cp ../../00-templates/ui-kit/tokens/tailwind.preset.js ./tailwind.preset.js

A.3 Wire preset vào tailwind.config.ts

import type { Config } from "tailwindcss";
import coworkPreset from "./tailwind.preset.js";

const config: Config = {
  presets: [coworkPreset],
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
};
export default config;

A.4 Add Google Fonts vào app/layout.tsx

// Warm aesthetic dùng Instrument Serif + Inter + Plus Jakarta Sans
// Dark aesthetic dùng Inter + IBM Plex Mono

import { Inter, Instrument_Serif, IBM_Plex_Mono } from "next/font/google";

const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
const serif = Instrument_Serif({ weight: "400", subsets: ["latin"], variable: "--font-serif" });
const mono  = IBM_Plex_Mono({ weight: ["400", "500"], subsets: ["latin"], variable: "--font-mono" });

A.5 Mở showcase → copy component cần dùng

Vd cần Button warm:

Mở showcase/01-primitives.html trong browser → tìm section "Button" → view source → copy block warm

// Paste vào component React của anh
<button className="bg-warm-coral hover:bg-warm-coral-deep text-white px-6 py-3 rounded-2xl shadow-md font-medium transition">
  Start subscription
</button>

A.6 Đặt mesh background warm/dark cho layout

// Warm landing hero
<section className="bg-mesh-warm min-h-screen">...</section>

// Dark dashboard background
<div className="bg-dark-base text-dark-text min-h-screen">...</div>

A.7 QC trước commit

Trong cli: /kry-qc ui — em sẽ check font ≥12px, không hardcode hex, contrast 4.5:1, tap target ≥32px.

SCENARIO B

Tạo 1 page HTML standalone

Vd: landing microsite, presentation slide, ladning ads campaign, mockup gửi đối tác

B.1 Copy file mockup gần nhất làm starter

# Vd cần landing warm
cp 00-templates/ui-kit/_previews/page-C-landing.html ./annhien/04-marketing/landing-may-2026.html

B.2 Replace content thật

Murmur → An Nhien Trầm Hương, headline "Coffee that meets you" → headline brand mới, photo blob coffee → photo trầm hương... Giữ nguyên cấu trúc layout + token color.
B.3 Thêm component khác từ showcase

Cần testimonial carousel? Mở showcase/04-patterns.html tìm section "Testimonial" → copy block → paste vào file của anh.
B.4 Test browser + deploy

Mở file qua file:// protocol → check render. Deploy: upload lên VPS hoặc host static (Cloudflare Pages, Vercel).

SCENARIO C

Add aesthetic vào WordPress existing

Vd: tramhuongannhien.vn, tweak Elementor section, custom block

C.1 Enqueue tokens.css vào theme

// functions.php của theme
function enqueue_cowork_tokens() {
  wp_enqueue_style('cowork-tokens', get_template_directory_uri() . '/cowork-tokens.css');
}
add_action('wp_enqueue_scripts', 'enqueue_cowork_tokens');

C.2 Dùng CSS variables trong Elementor Custom CSS

/* Custom CSS trong Elementor section */
.cta-button {
  background: var(--w-coral);
  color: white;
  border-radius: var(--r-2xl);
  padding: var(--sp-3) var(--sp-6);
  box-shadow: var(--shadow-md);
}

.cta-button:hover {
  background: var(--w-coral-deep);
}

C.3 Hero section → dùng class .mesh-warm

/* Elementor section custom class: mesh-warm đã có trong tokens.css */
/* Section settings → Advanced → CSS Classes: mesh-warm */

C.4 Test contrast + responsive

Coral trên cream phải pass 4.5:1. Test mobile breakpoint Elementor responsive control. Cache: LiteSpeed/Rocket purge.

Step 4 · rules quan trọng

Việc cấm vs việc bắt buộc

Đây là rule em đã enforce qua /kry-qc ui. Tránh để bị nhắc lại.

Không bao giờ làm

×
Hardcode hex color trong JSX/HTML. Phải dùng bg-warm-coral hoặc var(--w-coral).
×
Text dưới 12px. Không dùng text-[10px] hoặc text-[11px].
×
Mix aesthetic. Dashboard mà dùng Instrument Serif italic — sai. Landing mà dùng IBM Plex Mono — sai.
×
Mặc định cùng 1 màu cho 2 brand. KHI sage không phải An Nhien sage. Mỗi brand sẽ có preset riêng (sắp build).
×
Tap target nhỏ hơn 32px. Mobile ≥44px. Đặt min-h-[44px] hoặc py-3 cho button mobile.
×
Wrap rớt hàng "mồ côi" — như filter chip 4 cái rớt thành 2 hàng + Export rớt riêng 1 hàng. Phải whitespace-nowrap + tách row rõ ràng.

Luôn làm

✓
Dùng semantic token — bg-warm-coral, text-dark-text-2. Đổi brand → đổi preset, không phải sửa code.
✓
Test ở 4 breakpoint: mobile 390, tablet 768, desktop 1280, wide 1536. Mỗi viewport check không "rớt hàng mồ côi".
✓
Empty state, error state, loading state đầy đủ — đã có pattern trong showcase/04-patterns.html.
✓
Tab num cho số liệu — class .tab-num (đã có trong tokens.css). Để cột số align thẳng.
✓
Chạy /kry-qc ui trước push prod. Khi báo done.
✓
Khi cần thay đổi token — sửa trong tokens/tokens.css + tailwind.preset.js đồng thời. Không sửa lẻ.

Cheatsheet · 1 trang in được

Quick reference

WARM PALETTE

w-base #FAF6EE

w-surface #FDFAF3

w-coral #C97464

w-coral-deep #B5604F

w-sage #5E7355

w-amber #D4A574

w-ink #2D2E2A

DARK PALETTE

d-base #0A0A12

d-surface #12121A

d-violet #7C5CFF

d-cyan #22D3EE

d-emerald #10B981

d-amber #F59E0B

d-danger #EF4444

TOKENS KHÁC

rounded-2xl 24px (card warm)

rounded-3xl 32px (hero, big card)

rounded-md 8px (input, button dark)

text-xs 12px (label min)

text-sm 14px (table, dense)

text-base 16px (body)

text-lg 18px (article body)

shadow-md card hover warm

shadow-glow-violet CTA dark

bg-mesh-warm hero bg landing

bg-mesh-dark hero bg dashboard

.tab-num tabular nums

FONT

font-sans Inter

font-display Plus Jakarta Sans

font-serif Instrument Serif (warm only)

font-mono IBM Plex Mono (dark only)

SHORTCUT BUTTON

Warm primary:

bg-warm-coral text-white rounded-2xl px-6 py-3

Dark primary:

bg-dark-violet text-white rounded-md px-5 py-2.5

FILES QUICK

tokens/tokens.css

tokens/tailwind.preset.js

showcase/01-primitives.html

showcase/02-composites.html

showcase/03-dataviz.html

showcase/04-patterns.html

_previews/page-A-F.html

FAQ

Câu hỏi thường gặp

Em đang làm KHI nhưng cũng muốn warm aesthetic, được không? +

Được. Warm aesthetic fit KHI Wellness landing + member PWA hoàn hảo. Chỉ archetype A (dashboard) + B (admin tool) là dark vì data-dense. Trong cùng 1 brand có thể có 2 aesthetic — vd KHI Wellness public site warm, KHI Funnel admin dark.

Brand An Nhien dùng nâu trầm hương, không phải coral. Đổi như nào? +

Đó là vai trò của brand preset (chưa build xong). Khi build xong, mỗi brand override semantic token: An Nhien preset map w-coral → #8B4513 nâu trầm hương. Code vẫn dùng bg-warm-coral, render theo brand. Hiện tại tạm hardcode hex An Nhien trong file landing An Nhien — em sẽ migrate sau khi preset xong.

Mesh background lag/heavy không? Có nên dùng trên mobile? +

Mesh là CSS radial-gradient thuần — không phải PNG, không lag. OK trên mobile. Lưu ý: KHÔNG dùng nhiều mesh layer chồng (>4 gradient cùng selector) trên 1 page mobile cũ. Hero 1 lần là đủ.

Có dark mode toggle không? +

Chưa. 2 aesthetic warm/dark là theo archetype, không phải user preference toggle. Landing luôn warm. Dashboard luôn dark. Nếu cần dark mode cho landing (vd brand prefer dark), em build sau — cần thiết kế lại spec.

Em update kit (vd tokens.css), project existing có break không? +

Project Next.js: nếu copy preset từ kit, anh chủ động update khi cần (cp lại). Project WordPress: import từ kit thì cập nhật. Em không auto-push update — anh control timing.

Anh không code, có dùng được không? +

Anh nói "build landing cho An Nhien dùng archetype C aesthetic warm" → em (Claude Code) tự copy mockup, replace content brand An Nhien, deploy. Anh không phải đụng code. Kit này là tool cho em làm việc với anh — anh ra quyết định, em build.

Sẵn sàng bắt đầu?

Mở gallery, chọn archetype, copy mockup gần nhất, replace content. Xong 30 phút.

Mở gallery → Đọc INDEX.md