---
name: thaihao-design
description: Use this skill to generate well-branded interfaces and assets for ThaiHao — a multi-tenant cross-border commerce platform connecting Thai SME producers with Chinese consumers through KOL/KOC live commerce. Five frontends share one design language (producer portal, KOL portal, admin console, consumer storefront, partner portal). Contains brand identity, design tokens, fonts, logo assets, component conventions, and high-fidelity UI kits.
user-invocable: true
---

# ThaiHao design — quick start

Read `README.md` in this folder first. It contains the full brand summary, content fundamentals, visual foundations, iconography rules, and an index of every other file. Then explore the rest of the folder as the task demands.

## File map

```
README.md                   — full brand + system documentation (read this first)
colors_and_type.css         — all CSS variables: colors, type, spacing, motion, borders, radii
assets/                     — logos and brand marks (mark, wordmark, wordmark-small)
preview/                    — design-system specimen cards
ui_kits/
  producer-portal/          — th-TH, mobile-first (Khun Somchai's surface)
  kol-portal/               — zh-CN, mobile-first (Li Wei's surface)
  admin-console/            — en-US, desktop-only (Sarah Tan's surface)
```

## What to do by output type

**Visual artifacts** (slides, mocks, throwaway prototypes, design exploration HTML):
- Copy `colors_and_type.css` (or just `@import` it) and the relevant assets out of this folder.
- Cross-reference the UI kit closest to your surface — copy components and patterns out by hand. Do not invent variants of existing components; extend the existing component's props.
- Use Tabler Icons via CDN: `https://unpkg.com/@tabler/icons-webfont@latest/dist/tabler-icons.min.css`.

**Production React + TypeScript + Tailwind code:**
- Treat the design tokens in `colors_and_type.css` as canonical. Map them into your Tailwind theme tokens.
- Match the path conventions in the master spec: `apps/web/` (producer), `apps/kol/`, `apps/admin/`, `apps/store/`, `apps/partner/`.
- Use `@tabler/icons-react` (not inline SVG).
- Every user-visible string goes through `t()`; the producer portal opens in `th-TH`, KOL in `zh-CN`, admin in `en-US`.

## The ten non-negotiable invariants (D1–D10)

Apply these to every design. Refuse drift and offer the closest compliant alternative.

1. **D1** — Two font weights only: 400 + 500. Never bold.
2. **D2** — Sentence case everywhere. `label-caps` is the only uppercase.
3. **D3** — No emoji in UI. Tabler outline icons exclusively. Locale flag in `LanguageFlag` is the one exception.
4. **D4** — All colors via CSS variables / Tailwind tokens. No hardcoded hex.
5. **D5** — Quad-column currency display: amount + ISO code + trust pill + fx context if cross-currency. Never strip to a single value. Never `$` without disambiguation.
6. **D6** — Every estimated monetary value carries a visible trust signal.
7. **D7** — `ReasonCodeSelector` gates every revoke / suspend / refund / override / force-unlock. Submit disabled until a reason is chosen.
8. **D8** — Every string through i18n. Open in the persona's locale.
9. **D9** — WCAG 2.1 AA: focus rings, ARIA labels, 4.5:1 body contrast, errors not by color alone.
10. **D10** — Every value derived from a state transition has an inline `AuditLink`.

## Persona universe (the only personas — never invent new ones)

Producer: `producer_owner` (Khun Somchai), `producer_brand_manager` (Khun Nattaya), `producer_staff` ·
KOL: `kol_individual` (Li Wei, Wang Jing), `agency_manager` (Wang Mei) ·
Admin: `platform_system_admin` (Sarah Tan), `platform_c_suite`, `platform_department_staff` (Alex Chen Sales, Pim Suksamran Finance) ·
Partner: `fulfillment_operator`, `partner_integration` ·
Consumer: `consumer_end`

## Placeholder universe

Producers: Khao Hom Thai (flagship · rice), Siam Cosmetic (multi-brand beauty), Bangkok Beauty, Thai Wellness, Northern Silk, Riang Mai Coffee, Krua Phuket.
Currencies: producer-side THB, KOL/consumer CNY, cross-border USD.
Realistic ranges: producer monthly revenue ฿200K–฿5M; KOL booking fee ¥50K–¥500K per live; settlement batch ¥1M–¥10M.

## If invoked without further guidance

Ask what the user wants to build, then:
1. Identify the **surface** (producer / KOL / admin / consumer / partner) — this fixes locale, density, device.
2. Identify the **persona** — this fixes what they want to see, must see, must not see, and can manage.
3. Identify the **screen state set** — empty / loading / populated / error / sensitive-action.
4. Sketch the components needed; if a component already exists in the catalog, use its name, don't invent a variant.
5. Produce the design — HTML artifact or production code as the user asked.

Never propose three variants when one decision is correct. When there is genuine ambiguity, raise it with a recommendation and a one-line "why not the alternatives".