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

替代方案