메뉴
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/whyzsm/tiny-agents --skill ui-audit명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
| name | ui-audit |
| description | AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco. |
Evaluate interfaces against proven UX principles. Based on Making UX Decisions by Tommy Geoco.
Speed ≠ Recklessness. Designing quickly is not automatically reckless. Recklessly designing quickly is reckless. The difference is intentionality.
references/00-core-framework.md — 3 pillars, decisioning workflow, macro betsreferences/01-anchors.md — 7 foundational mindsets for design resiliencereferences/02-information-scaffold.md — Psychology, economics, accessibility, defaultsreferences/10-checklist-new-interfaces.md — 6-step process for designing new interfacesreferences/11-checklist-fidelity.md — Component states, interactions, scalability, feedbackreferences/12-checklist-visual-style.md — Spacing, color, elevation, typography, motionreferences/13-checklist-innovation.md — 5 levels of originality spectrumreferences/20-patterns-chunking.md — Cards, tabs, accordions, pagination, carouselsreferences/21-patterns-progressive-disclosure.md — Tooltips, popovers, drawers, modalsreferences/22-patterns-cognitive-load.md — Steppers, wizards, minimalist nav, simplified formsreferences/23-patterns-visual-hierarchy.md — Typography, color, whitespace, size, proximityreferences/24-patterns-social-proof.md — Testimonials, UGC, badges, social integrationreferences/25-patterns-feedback.md — Progress bars, notifications, validation, contextual helpreferences/26-patterns-error-handling.md — Form validation, undo/redo, dialogs, autosavereferences/27-patterns-accessibility.md — Keyboard nav, ARIA, alt text, contrast, zoomreferences/28-patterns-personalization.md — Dashboards, adaptive content, preferences, l10nreferences/29-patterns-onboarding.md — Tours, contextual tips, tutorials, checklistsreferences/30-patterns-information.md — Breadcrumbs, sitemaps, tagging, faceted searchreferences/31-patterns-navigation.md — Priority nav, off-canvas, sticky, bottom nav00-core-framework.md for the decisioning workflow10-checklist-new-interfaces.mdWhen facing a UI decision:
1. WEIGH INFORMATION
├─ What does institutional knowledge say? (existing patterns, brand, tech constraints)
├─ What are users familiar with? (conventions, competitor patterns)
└─ What does research say? (user testing, analytics, studies)
2. NARROW OPTIONS
├─ Eliminate what conflicts with constraints
├─ Prioritize what aligns with macro bets
└─ Choose based on JTBD support
3. EXECUTE
└─ Apply relevant checklist + patterns
Companies win through one or more of:
| Bet | Description | Design Implication |
|---|---|---|
| Velocity | Features to market faster | Reuse patterns, find metaphors in other markets |
| Efficiency | Manage waste better | Design systems, reduce WIP |
| Accuracy | Be right more often | Stronger research, instrumentation |
| Innovation | Discover untapped potential | Novel patterns, cross-domain inspiration |
Always align micro design bets with company macro bets.
A design decision is "good" when it:
There is no universally correct UI solution—only contextually appropriate ones.
When asked to audit a design, generate a comprehensive report. Always include these sections:
{
"title": "Design Name — Screen/Flow",
"project": "Project Name",
"date": "YYYY-MM-DD",
"figma_url": "optional",
"screenshot_url": "optional - URL to screenshot",
"macro_bets": [
{ "category": "velocity|efficiency|accuracy|innovation", "description": "...", "alignment": "strong|moderate|weak" }
],
"jtbd": [
{ "user": "User Type", "situation": "context without 'When'", "motivation": "goal without 'I want to'", "outcome": "benefit without 'so I can'" }
],
"visual_hierarchy": {
"title": "Visual Hierarchy",
"checks": [
{ "label": "Check name", "status": "pass|warn|fail|na", "notes": "Details" }
]
},
"visual_style": { ... },
"accessibility": { ... },
"priority_fixes": [
{ "rank": 1, "title": "Fix title", "description": "What and why", "framework_reference": "XX-filename.md → Section Name" }
],
"notes": "Optional overall observations"
}
Visual Hierarchy: heading distinction, primary action clarity, grouping/proximity, reading flow, type scale, color hierarchy, whitespace usage, visual weight balance
Visual Style: spacing consistency, color palette adherence, elevation/shadows, typography system, border/radius consistency, icon style, motion principles
Accessibility: keyboard operability, visible focus, color contrast (4.5:1), touch targets (44px), alt text, semantic markup, reduced motion support
Navigation: clear current location, predictable menu behavior, breadcrumb presence, search accessibility, mobile navigation pattern
Usability: feature discoverability, feedback on actions, error prevention, recovery options, cognitive load management, loading states
SOC 직업 분류 기준
