Kry Ui

/kry-ui — Act 4: Ngôn ngữ thiết kế (define tươi)

KHÔNG bốc khuôn. Mỗi product có ngôn ngữ thiết kế riêng, định nghĩa từ chính intent + user + brand của nó. Đây là chỗ quyết product trông & cảm thế nào — và bạn ghét "đẹp đều an toàn" (nguyên tắc: ưu tiên đột phá hơn UI an toàn).

> Vị trí: … /kry-system → /kry-ui → /kry-plan→cook→qc → /kry-done → /kry-docs → /kry-update ↺ > Kry UI kit / 6 archetype chỉ là hộp đồ nghề để rút component lúc build (act 5). Hướng thì define mới mỗi lần.

Nguyên tắc (LUẬT CỨNG)

• Define từ product, không từ thư viện. Mood/token sinh ra từ intent + user + brand, không pick "archetype #3".
• 1 trục đột phá: chọn 1 chiều để xuất sắc tới mức không ai đua (tốc độ / mật độ / cảm xúc / tin tưởng / chơi đùa), max nó. KHÔNG optimize jury-score trung bình → regression-to-mean.
• Delete trước khi add: xoá template-thinking trước khi vẽ.
• AI là engineer xếp component, không phải designer → research 2-3 reference hạng A + self-critique 5 điểm trước khi chốt.

Workflow

Bước 1 — Đọc intent

Brief (act 1) + UX spec (act 2): user là ai, tâm thế lúc dùng, brand tính cách gì, các màn chính. Có brand sẵn → đọc token/brand kit; chưa có → derive.

Bước 2 — Research + draft ngôn ngữ

1. Research 2-3 reference hạng A cùng ngành (Dribbble/Awwwards/Mobbin) — học gì, khác gì.
2. Draft: mood (3-5 từ) · 3-5 nguyên tắc thiết kế của app này · 1 trục đột phá (max chiều nào) · token (màu/type scale/spacing/radius/độ sâu — sinh từ product).
3. Định hướng 2-3 màn chủ chốt (hero/màn lõi) — không vẽ pixel, chỉ direction.

Bước 3 — Spawn challenger-ui

BẮT BUỘC spawn challenger-ui (thiên về gu thẩm mỹ): chống cliché, soi hierarchy/density/typography, ép trục đột phá, "chưa đủ tốt → làm lại". Nhận challenge → nâng. Lặp tới khi hết "đang trôi về tầm thường".

Bước 4 — Output

Design-direction doc: mood · nguyên tắc · trục đột phá · token set
+ direction 2-3 màn chủ chốt + reference hạng A

Đẩy cho bạn duyệt mắt. Token này dùng lúc build (act 5).

Bước 5 — Hand off /kry-plan

Cập nhật .kry/state.json (act=4 done, next=kry-plan) → /kry-plan chia lát build.

Anti-pattern

• ❌ "Pick archetype X + aesthetic warm" → KHÔNG, define tươi
• ❌ Từ rỗng "clean/modern/nice" → vô nghĩa, phải có trục cụ thể
• ❌ Optimize đẹp-đều (regression-to-mean) thay vì max 1 trục
• ❌ Bỏ qua challenger-ui
• ❌ Vẽ pixel-perfect mọi màn (đó là act 5 build từng lát)
• ❌ Output English

Triggers

• "/kry-ui", "ngôn ngữ thiết kế cho app", "định hình thiết kế", "hướng design", "mood/visual cho app"

Quan hệ

Agent: challenger-ui (thiên về gu). Trước: /kry-system. Sau: /kry-plan. Gate khi build: công cụ verify UI + design review của bạn. Khác việc onboard brand vào design system có sẵn — kry-ui define hướng riêng per app.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: dangpm
• Source: dangpm/kry-build-pipeline
• License: MIT

Install and usage instructions live in the source repository linked above.