deterministic-design – skill Thiết kế & UI cho agent AI
Đo bố cục UI đã render bằng các chỉ số không gian có thể tái lập, cùng với đánh giá khả năng sử dụng riêng biệt; phân biệt số đo với nhận định chủ quan và kiểm thử người dùng.
Cài skill deterministic-design bằng một lệnh
Chọn công cụ bạn đang dùng, copy lệnh và dán vào terminal. Skill sẽ nằm trong thư mục skills của công cụ đó và sẵn sàng dùng ở phiên làm việc tiếp theo.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/deterministic-design-07e3f.tgz | tar xz -C ~/.claude/skills
Gọi trong Claude Code: /deterministic-design – rồi mô tả công việc bạn muốn làm.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/deterministic-design-07e3f.tgz | tar xz -C ~/.codex/skills
Gọi trong Codex: $deterministic-design – rồi mô tả công việc bạn muốn làm.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/deterministic-design-07e3f.tgz | tar xz -C ~/.hermes/skills
Gọi trong Hermes Agent: /deterministic-design – rồi mô tả công việc bạn muốn làm.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/deterministic-design-07e3f.tgz | tar xz -C ~/.deepcode/skills
Gọi trong DeepSeek: /deterministic-design – rồi mô tả công việc bạn muốn làm.
Nội dung SKILL.md
Nội dung SKILL.md gốc bằng tiếng Anh.
When to Use
Use to catch AI-generated UI that "looks off", is misaligned or centered-mush, or fails usability — when you need reproducible spatial measurements and an evidence-based usability review. Metrics do not prove user success, accessibility or overall design quality. Compose it with any taste/token design skill before reporting design "done".
_Source: [connerkward/deterministic-design-skill](https://github.com/connerkward/deterministic-design-skill) (MIT)._
deterministic-design
Thesis: determinism beats AI randomness. A model can't trust its own eye on layout — so
don't. Render the UI and *measure* it.
Two sub-skills (load as needed):
- [design-spatial](https://github.com/connerkward/deterministic-design-skill/blob/main/design-spatial/SKILL.md) — deterministic layout audit: explicit grid
+ 8-pt spacing, and layout-audit.js computes centroid / optical-center / pixel-oracle
balance and draws an annotated screenshot. Numbers, not vibes. Plus a render-then-
critique vision loop.
- [design-ux](https://github.com/connerkward/deterministic-design-skill/blob/main/design-ux/SKILL.md) — usability audit: scores the rendered UI against
Nielsen's 10 + interaction heuristics via an authorized separate judge or clearly disclosed self-review → prioritized fix list.
This improves existing design skills (including the default Anthropic one) by adding the
layer they lack — it doesn't just advise on taste, it renders, measures, and judges the
output. Composable with any design skill.
In central this lives as a subdir of ckw-design; it publishes separately as
deterministic-design-skill (its own distribution) via publish-skill. One of the two
flagship narratives — the *determinism* one; its sibling is human-in-the-loop (lookdev).
Example
User request:
> Review this interface with @deterministic-design, identify the highest-impact design problems, and propose an implementation-ready improvement.
Limitations
- Layout metrics and vision-judged audits catch many spatial and usability failures, but they are not a substitute for product judgment or user testing.
- The workflow requires a rendered UI or screenshot; record viewport, scale, fonts, capture state and measurement definitions. Separate layout measurements, subjective vision judgments and actual user/accessibility tests.
- The linked sub-skills and layout-audit.js are external, not bundled. Read and pin them before use; the link is not executable availability. Delegation requires existing explicit authorization, and screenshots may contain private data.
- Automated scoring can miss brand nuance, copy tone, accessibility needs, and domain-specific user expectations.
Skill liên quan
- diagram-generator – Tạo, chỉnh sửa, kiểm tra và render sơ đồ từ mô tả tự nhiên, ghi chú, code, schema hoặc…
- sketch – Bản mẫu HTML dùng một lần: 2-3 phương án thiết kế để so sánh.
- tailwind-design-system – Xây dựng design system có khả năng mở rộng với Tailwind CSS v4, design token, thư viện…
- docs-architect – Tạo tài liệu kỹ thuật toàn diện từ codebase có sẵn. Phân tích kiến trúc, mẫu thiết kế và…
- tamarind – Cung cấp quyền truy cập bộ công cụ mã nguồn mở về thiết kế phân tử và sinh học cấu trúc…
- domain-driven-design – Lập kế hoạch và định tuyến công việc Domain-Driven Design, từ mô hình hóa chiến lược đến…
- product-skills – Dùng khi điều phối công việc sản phẩm qua 12 kỹ năng con đi kèm (RICE, OKR, nghiên cứu…
- draw – Đồ họa vector và tạo sơ đồ, chuyển đổi định dạng (ODG/SVG/PDF) với LibreOffice Draw.