pixel-council

Pixel Council

A Claude Code plugin that produces production-grade UI — not AI-generated boilerplate. It encodes the real design specifications from Google Material Design 3, Apple Human Interface Guidelines, and IBM Carbon Design System into 129 reference files that Claude reads before writing any code.

The Problem

AI-generated UIs look AI-generated. Excessive gradients, inconsistent spacing, random colors, missing interaction states, and generic layouts that scream "vibe-coded."

The Solution

Pixel Council gives Claude the actual design system specs — resolved hex values, exact dimensions, complete CSS with every state, dark mode, animations, accessibility. Claude reads the spec, then implements. No guessing.

• Semantic color tokens with resolved hex values (light + dark)
• Consistent spacing from a 4px/8px grid system
• Proper typography hierarchy with exact font sizes, weights, line-heights
• All interaction states (hover, focus-visible, active, disabled, loading)
• Dark mode from the start (both @media and .dark class)
• Accessibility (WCAG AA contrast, ARIA attributes, keyboard nav, 44px touch targets)
• Responsive layouts with breakpoint-specific behavior

Design Systems Included

Company	Coverage
Google Material Design 3	32 components + 3 page-level refs (icons, editorial type, page patterns), 34 color roles, elevation, typescale, Material Symbols, motion easing
Apple HIG	33 components + 3 page-level refs (SF Symbols, editorial type, page patterns), 15 system colors, SF Pro, Liquid Glass, shadow system
IBM Carbon	38 components + 4 page-level refs (icons, pictograms, editorial type, page patterns), 4 themes (White/G10/G90/G100), IBM Plex, sharp corners, Layer tier system, AI surface tokens, Apache 2.0 — every component embeds verbatim Storybook source code (React + Web Components)
Blended (default)	12 components combining Google's systematic tokens with Apple's refinement

Plugin Components

Type	Name	What It Does
Skill	pixel-council	Builds UI from reference specs. Auto-triggers on UI requests or via /pixel-council:pixel-council
Agent	ui-reviewer	Reviews existing UI code against reference specs for design system compliance

Installation

Option A: Add marketplace and Install (Recommended)

/plugin marketplace add blinkz-ai/pixel-council
/plugin install pixel-council

Restart Claude Code (or open a new session), then run:

/plugin

You should see pixel-council listed.

Option B: Local Plugin Install

Clone the repo and load it directly as a plugin:

git clone https://github.com/blinkz-ai/pixel-council.git
claude --plugin-dir ./pixel-council

To load it every session, add to your shell profile:

alias claude-ui="claude --plugin-dir /path/to/pixel-council"

Option C: Manual Skill Install

If you prefer the traditional skill approach without the plugin system:

git clone https://github.com/blinkz-ai/pixel-council.git
cd pixel-council

# Copy skill + references
mkdir -p ~/.agents/skills/pixel-council
cp skills/pixel-council/SKILL.md ~/.agents/skills/pixel-council/
cp -r skills/pixel-council/references ~/.agents/skills/pixel-council/

# Copy agent
mkdir -p ~/.claude/agents
cp agents/ui-reviewer.md ~/.claude/agents/

# Create symlink
mkdir -p ~/.claude/skills
ln -sf ../../.agents/skills/pixel-council ~/.claude/skills/pixel-council

Verify Installation

Restart Claude Code (or open a new session), then:

/skills

You should see pixel-council listed. If installed as a plugin, skills are namespaced: /pixel-council:pixel-council.

---

Usage

Building UI (Skill)

The skill auto-triggers when you ask Claude to build any UI:

build a login screen
create a pricing page with cards
make this look more polished
design a dashboard with sidebar navigation

Or invoke explicitly:

/pixel-council:pixel-council build a settings page with profile info and notification toggles
/pixel-council:pixel-council create a card component, Apple style

Reviewing UI (Agent)

The ui-reviewer agent audits your existing UI code against the reference specs:

Review my Button component against the M3 spec
Audit this settings page for design system compliance
Check if my dark mode implementation matches the spec

Choosing a Design System

What you say	What Claude uses
Just describe the UI (default)	Blended — best of Google + Apple
"Google style" / "Material style" / "M3"	Google Material Design 3 specs
"Apple style" / "iOS style" / "HIG"	Apple Human Interface Guidelines specs
"IBM" / "Carbon" / "enterprise dashboard" / "data table" / "AI app"	IBM Carbon Design System specs (verbatim Storybook source)

What Happens Behind the Scenes