OilOil UI/UX Guide (Claude Skill) — 安装 & 实时演示

为什么要用

核心特性

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

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "oiloil-ui-ux-guide-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oil-oil/oiloil-ui-ux-guide",
        "~/.claude/skills/oiloil-ui-ux-guide"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "oiloil-ui-ux-guide-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oil-oil/oiloil-ui-ux-guide",
        "~/.claude/skills/oiloil-ui-ux-guide"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "oiloil-ui-ux-guide-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oil-oil/oiloil-ui-ux-guide",
        "~/.claude/skills/oiloil-ui-ux-guide"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标，然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "oiloil-ui-ux-guide-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oil-oil/oiloil-ui-ux-guide",
        "~/.claude/skills/oiloil-ui-ux-guide"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "oiloil-ui-ux-guide-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oil-oil/oiloil-ui-ux-guide",
        "~/.claude/skills/oiloil-ui-ux-guide"
      ]
    }
  ]
}

Continue 使用服务器对象数组，而非映射。

~/.config/zed/settings.json

{
  "context_servers": {
    "oiloil-ui-ux-guide-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/oil-oil/oiloil-ui-ux-guide",
          "~/.claude/skills/oiloil-ui-ux-guide"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add oiloil-ui-ux-guide-skill -- git clone https://github.com/oil-oil/oiloil-ui-ux-guide ~/.claude/skills/oiloil-ui-ux-guide

一行命令搞定。用 claude mcp list 验证，claude mcp remove 卸载。

使用场景

实战用法： 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

替代方案

OilOil UI/UX Guide 对比其他方案

替代方案	何时用它替代	权衡
ai-friendly-web-design-skill	You want web-design-specific guidance	Narrower scope

OilOil UI/UX Guide