Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add modu-ai/moai-cowork --skill design-gui-guidegit clone --depth 1 https://github.com/modu-ai/moai-coworkWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/modu-ai/moai-cowork/design-gui-guide)<a href="https://agentmods.dev/skills/modu-ai/moai-cowork/design-gui-guide"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-cowork/design-gui-guide/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/modu-ai/moai-cowork/design-gui-guide"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-cowork/design-gui-guide.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00242 | $0.05801 |
| Opus 5 | $0.00121 | $0.02900 |
| Sonnet 5 | $0.00048 | $0.01160 |
| Haiku 4.5 | $0.00024 | $0.00580 |
Grade A, and why
design-gui-guide scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 262 lines — stays where its author put it; the contents beside it link to each section on GitHub.
design-gui-guide — 10 GUI 요소 사용성 가이드라인 SSOT
목적과 근거
거의 모든 화면은 10개 표준 GUI 요소로 조립된다. 각 요소는 40년+ 다윈 필터를 통과한 관습이다 — Jakob's Law(사용자는 다른 사이트에서 보던 대로 너의 것도 작동하길 기대한다)가 익숙한 버전을 늘 더 낫게 만든다. 혁신 예산은 새 체크박스 종자를 만드는 데 쓰지 말고 콘텐츠와 서비스에 써라.
근거: UX Tigers, Jakob Nielsen, "10 GUI Design Elements Build Every User Interface" (2026-07-29) — 86개 증거 기반 가이드라인 + 보너스 2. 본 스킬은 이를 한국어 실용 지침으로 증류하고 shadcn 63종과 매핑한다. 원문 가이드라인(사용성 원칙·방법)을 재서술한 것이지 복사한 것이 아니다.
세 가지 상위 명제 (모든 86개 지침은 이 아래 있다):
- 기억시키지 말 것 — 인식(recognition) 우위 유지
- 추측시키지 말 것 — 시각 문법·관습을 훼손하지 말 것
- 기다리게 하지 말 것 — 반응·완결에 엄격한 예산
소비 지점
| 소비자 | 사용 방법 |
|---|---|
design-prompt-builder 패턴 3 |
디자인 시스템 생성 시 각 컴포넌트를 해당 요소 가이드라인에 맞춰 설계 |
design-prompt-builder 패턴 6 |
사용성 감사 시 Nielsen 10 휴리스틱 + 본 86개 지침(컴포넌트 단위)으로 평가 |
design-system-prep |
DESIGN.md Component recipes 품질 기준 |
design-slop-check |
카피 중심 검수의 보완 — 컴포넌트 동작·레이아웃 품질은 본 스킬 |
1. Buttons — 누르면 무언가 일어난다
shadcn: Button · Button Group
버튼은 세계를 바꾸는 유일한 요소(링크·탭은 옮기고, 메뉴·다이얼로그는 대화를 재배열할 뿐). 그래서 라벨 규칙이 가장 엄격하다 — 잘못된 링크는 Back 한 번이지만, 잘못된 버튼은 고객 한 명을 잃는다.
- 누를 수 있게 보이게. 닫힌 형태 + 배경 대비 + 누름 시 상태 변화. 플랫 디자인으로 테두리/그림자를 걷어내면 "어떤 글자가 명령인지" 사용자가 추측하게 된다.
- 모든 버튼에 결과를 나타내는 동사 라벨. "Save Invoice"지 "OK"가 아니다. 효과가 2–4단어 안에 안 들어오면 라벨 문제가 아니라 더 깊은 문제.
- 화면마다 시각적으로 우세한 주 액션 정확히 1개. 주 액션이 2개 경쟁하면 주 액션이 없는 것.
- Fitts's law 준수. 자주 쓰는 액션은 크고 가깝게. 터치 타깃 최소 1×1cm.
- 모든 누름을 0.1초 안에 인지. 반응한 것처럼 느끼는 한계.
- 비활성 버튼은 주 색의 흐린 버전 + 왜 비활성인지/어떻게 켜는지 설명. 숨기지 말 것.
- 액션엔 버튼, 이동엔 링크. 두 시각 언어를 섞지 말 것.
- 버튼은 작업이 끝나는 자리에. 필드·콘텐츠 뒤, 읽기 흐름의 자연스러운 끝.
Split button: 주 액션(큰 영역, 1클릭) + 변형(작은 영역, 화살표/3점). 한 명령이 빈도로 압도적일 때만. 두 영역 사이 가시적 구분자 필수. 기본 하나가 안 정해지면 일반 메뉴 버튼을 써라.
2. Input Fields & Forms — 돈이 오가는 자리
shadcn: Input · Input Group · Input OTP · Textarea · Label · Field · Select · Native Select · Combobox · Date Picker · Checkbox · Radio Group · Switch · Toggle · Toggle Group · Slider
폼은 체크아웃·가입·리드 발생 — 사용성이 수익으로 직결된다(UX = profits). 가장 강한 지침은 뺄셈: 불필요한 필드 하나마다 완료율이 떨어진다. 선택 필드도 필드 세금(주의를 소모)을 매긴다 — DB에서 선택이어도 사용자 주의에선 선택이 아니다.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 7d ago First seen · 262 lines · 242 tokens per session scan A 58e5ced95bf9
design-gui-guide is a skill published in the GitHub repository modu-ai/moai-cowork (300 stars, last pushed 7d ago), licensed Apache-2.0. It adds 242 tokens to every session and 5,801 once invoked, about $0.0012 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
instant-ui
Build a BenAI-branded HTML page in the neo-brutalist instant-ui design language (cream background, near-black ink, 3px hard borders, 6px zero-blur shadows, a blue/green/amber gradient stripe, system font plus SF Mono, weight-900 headings). Use for any BenAI landing page, offer, sales, or pricing page, onboarding or…
colors
Color systems for web interfaces — OKLCH conversion and palette generation, contrast measurement (APCA/WCAG), gamut and P3 fallbacks, theming, one meaning per color. INVOKE PROACTIVELY when converting color values, building or extending a palette or token set, checking or reporting contrast, or theming light and dark…
ui-polish
Design-engineering details that make an interface feel polished — border radius, optical alignment, shadows and elevation, animations and micro-interactions, press feedback, icons. INVOKE PROACTIVELY when building or reviewing UI components, adding motion or hover/active states, or when the user says "make it feel…
layout
Layout structure for web interfaces — grouping, alignment, negative space, reading order, progressive disclosure, breakpoints, direction-aware (RTL) structure. INVOKE PROACTIVELY when structuring a page or component, spacing or aligning controls, deciding what collapses at small sizes, or reviewing frontend structure.…
motion-system
Define the app's motion language before animating anything -- a small set of durations, easings, and named moves that every animation draws from, so the app feels designed instead of decorated. Use before writing the first animation in a project, or when existing motion feels scattered.
polish-pass
The de-AI pass -- audit a vibe-coded app for template smell in design and copy, then fix it with editorial layout, purposeful motion, and human-sounding words. Use after any build session, before anyone else sees it.