/ Diretório / Playground / OilOil UI/UX Guide
● Comunidade oil-oil ⚡ Instantâneo

OilOil UI/UX Guide

por 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.

Por que usar

Principais recursos

Demo ao vivo

Como fica na prática

oiloil-ui-ux-guide-skill.replay ▶ pronto
0/0

Instalação

Repositório do autor · Documentação oficial de Skills do Claude

Casos de uso

Usos do mundo real: OilOil UI/UX Guide

Have Claude critique a UI screenshot against design principles

👤 Solo devs without a designer ⏱ ~15 min intermediate

Quando usar: You built a screen and want a structured critique before shipping.

Pré-requisitos
  • Server/skill installed and authenticated — See repo README
Fluxo
  1. Submit
    Using the UI/UX skill, review attached screenshot of the settings page.✓ Copiado
    → Critique grouped by CRAP + HCI laws
  2. Prioritize
    Rank the issues by impact and tell me the top 3 to fix.✓ Copiado
    → Top-3 list with reasoning

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

Armadilhas
  • 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.

Custo e limites

O que custa rodar

Cota de API
See provider docs for rate limits
Tokens por chamada
Varies by tool
Monetário
See repo README for pricing details
Dica
Cache tool results and avoid repeated identical calls.

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Use environment variables; never commit secrets
Saída de dados: Tool calls go to the provider's API as documented

Solução de problemas

Erros comuns e correções

critique is too generic

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

Verificar: Re-run with context
skill doesn't see images

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

Verificar: Test with a plain image first

Alternativas

OilOil UI/UX Guide vs. outros

AlternativaQuando usarTroca
ai-friendly-web-design-skillYou want web-design-specific guidanceNarrower scope

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills