freemcplab / 目錄 / 演練場 / OilOil UI/UX Guide

● 社群 oil-oil ⚡ 即開即用

OilOil UI/UX Guide

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

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
每次呼叫 Token 數: 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

替代方案