freemcplab / 디렉터리 / 플레이그라운드 / OilOil UI/UX Guide

● 커뮤니티 oil-oil ⚡ 바로 사용

OilOil UI/UX Guide

Name: OilOil UI/UX Guide (Claude Skill)
Author: oil-oil

제작: oil-oil · oil-oil/oiloil-ui-ux-guide

Modern UI/UX guidance covering CRAP, HCI laws, and design system thinking.

A skill that teaches Claude design fundamentals — CRAP principle, Hick's law, Fitts's law, Gestalt — and how to apply them to wireframes and component design. Catches the 'AI design slop' that makes everything look like the same dashboard.

▶ 데모 보기 📦 설치 💡 사용 사례

왜 쓰나요

핵심 기능

CRAP principle checklist (Contrast, Repetition, Alignment, Proximity)
Common HCI laws with concrete examples
Design system thinking (tokens, components, patterns)
Critique mode: 'review this UI against these principles'
Pairs well with frontend code-gen skills

라이브 데모

실제 사용 모습

oiloil-ui-ux-guide-skill.replay ▶ 준비됨

0/0

설치

작성자 저장소 · Claude Skills 공식 문서

사용 사례

실전 활용법: OilOil UI/UX Guide

Have Claude critique a UI screenshot against design principles

👤 Solo devs without a designer ⏱ ~15 min intermediate

언제 쓸까: You built a screen and want a structured critique before shipping.

사전 조건

Server/skill installed and authenticated — See repo README

흐름

Submit

Using the UI/UX skill, review attached screenshot of the settings page.✓ 복사됨

→ Critique grouped by CRAP + HCI laws
Prioritize

Rank the issues by impact and tell me the top 3 to fix.✓ 복사됨

→ Top-3 list with reasoning

결과: A short, ranked action list rather than 30 vibes.

함정

Visual critique from a screenshot misses interaction issues. Pair with a real Playwright walkthrough for flows. — Visual critique from a screenshot misses interaction issues. Pair with a real Playwright walkthrough for flows.

비용 및 제한

운영 비용

API 쿼터: See provider docs for rate limits
호출당 토큰: Varies by tool
금액: See repo README for pricing details
팁: Cache tool results and avoid repeated identical calls.

보안

권한, 시크릿, 파급범위

자격 증명 저장: Use environment variables; never commit secrets

데이터 외부 송신: Tool calls go to the provider's API as documented

문제 해결

자주 발생하는 오류와 해결

critique is too generic

Provide the screen's purpose and audience. The skill's quality improves with context.

확인: Re-run with context

skill doesn't see images

Ensure your Claude client supports image input; otherwise paste a Figma/HTML render.

확인: Test with a plain image first

대안