# Kry Ui

> Act 4 — Ngôn ngữ thiết kế (cửa 1 chiều nhẹ). Trigger khi user gõ /kry-ui, hoặc nói 'định hình thiết kế', 'ngôn ngữ thiết kế cho app', 'hướng design', 'mood/visual cho app', 'thiết kế trông thế nào', sau khi đã có /kry-system. Skill ĐỊNH NGHĨA TƯƠI ngôn ngữ thiết kế riêng cho app này từ intent của nó — mood + 3-5 nguyên tắc + 1 TRỤC ĐỘT PHÁ + token sinh từ product. KHÔNG bốc archetype/template có…

- **Type:** Skill
- **Install:** `agentstack add skill-dangpm-kry-build-pipeline-kry-ui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [dangpm](https://agentstack.voostack.com/s/dangpm)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [dangpm](https://github.com/dangpm)
- **Source:** https://github.com/dangpm/kry-build-pipeline/tree/master/skills/kry-ui

## Install

```sh
agentstack add skill-dangpm-kry-build-pipeline-kry-ui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# /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](https://github.com/dangpm)
- **Source:** [dangpm/kry-build-pipeline](https://github.com/dangpm/kry-build-pipeline)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-dangpm-kry-build-pipeline-kry-ui
- Seller: https://agentstack.voostack.com/s/dangpm
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.