Pixel-Perfect Plugin

A frontend code generation plugin for Claude Code & Codex that produces pixel-perfect, design-system-aware components with distinctive aesthetics, full interactivity, responsive layouts, and accessibility.

Overview

This plugin guides every frontend generation request through six steps:

1. Context Detection - Identify the project's framework, styling approach, and existing design system
2. Input Analysis - Process the provided input (screenshot, text, code, tokens, or a combination)
3. Ambiguity Check - Identify unclear or insufficient input and ask targeted clarification questions
4. Design System Resolution - Use existing tokens or create a new token set
5. Code Generation - Produce framework-matched, responsive, interactive, accessible code
6. Quality Verification - Confirm responsive CSS, interactive states, semantic HTML, ARIA attributes, and token discipline

Skill

Skill	Description
pixel-perfect	Generate pixel-perfect frontend components from screenshots, text, or existing code

Trigger phrases: build a component, create a page, design a UI, reproduce this screenshot, match this design, implement this mockup, create a landing page, build a dashboard, design a form, style this component, make this responsive, add animations, extract design tokens.

Features

Capability	Description
Framework-aware	Detects React, Next.js, Vue, Nuxt, Svelte, Angular, or plain HTML/CSS/JS from project files
Design system resolution	Reads DESIGN.md, CSS custom properties, Tailwind config, or component library tokens
DESIGN.md support	Recognizes Google's DESIGN.md format as canonical source
Token-first	Never hardcodes color, spacing, or typography values when a token system is in scope
Responsive by default	Mobile-first breakpoints, clamp() for fluid sizing, container queries
Full interactivity	All hover, focus, active, disabled, loading, error, and empty states included
Accessible	Semantic HTML, ARIA labels, keyboard navigation, WCAG AA contrast
Distinctive aesthetics	Intentional creative direction; never generic fonts or cliched color schemes

Usage

Generating a Component

Once the plugin is enabled, the skill activates automatically when you describe a frontend task:

Build a pricing card component with three tiers

Reproduce this screenshot as a React component using our design system

The skill detects your stack, resolves your design system, and generates production-grade code.

DESIGN.md Integration

The skill treats DESIGN.md files as the highest-priority design system source. When a DESIGN.md is present in the project root, its YAML front matter tokens govern all generated output.

When no design system exists, the skill generates a DESIGN.md file alongside the component -- giving you a portable, lintable, and exportable token system from the start.

# Validate generated DESIGN.md for structural errors and WCAG contrast
npx @google/design.md lint DESIGN.md

# Export tokens to Tailwind theme config
npx @google/design.md export --format tailwind DESIGN.md > tailwind.theme.json

# Export to W3C DTCG format
npx @google/design.md export --format dtcg DESIGN.md > tokens.json

# Diff two versions to detect token regressions
npx @google/design.md diff DESIGN.md DESIGN-v2.md

Reference Files

File	Loaded When
references/design-tokens.md	Extracting tokens, creating a token system, or generating DESIGN.md output
references/framework-patterns.md	Generating idiomatic component code for a specific framework
references/aesthetic-guide.md	Designing without an existing system; needs typography, color, motion, or composition guidance

Hooks

Hook	Event	Description
lint-design-md	PostToolUse (Write|Edit)	Auto-runs npx @google/design.md lint whenever a DESIGN.md file is written or edited, surfacing broken token references, WCAG contrast violations, and structural errors back to the agent for self-correction

The hook is non-blocking: clean files exit silently, missing tooling (npx) is handled gracefully, and only actionable findings are surfaced. Requires Node.js with npx available on the PATH.

Installation

Claude Code

Add to your ~/.claude/settings.json:

{
  "enabledPlugins": {
    "pixel-perfect-plugin@pixel-perfect": true
  },
  "extraKnownMarketplaces": {
    "pixel-perfect": {
      "source": {
        "source": "url",
        "url": "https://github.com/Habib0x0/pixel-perfect-plugin.git"
      }
    }
  }
}

Then restart Claude Code.

Codex

This repository includes a Codex plugin manifest at .codex-plugin/plugin.json.

Install from GitHub:

codex plugin marketplace add Habib0x0/pixel-perfect-plugin

Or test the local checkout:

codex plugin marketplace add /path/to/pixel-perfect-plugin

Anti-Patterns

The skill explicitly avoids:

• Generic fonts (Inter, Roboto, Arial, system-ui) as the sole typographic choice when no design system specifies them
• Cliched color schemes: purple gradients on white, default blue links, generic gray palettes
• Fixed-width, non-responsive layouts
• Static mockups without state management for interactive components
• Hardcoded values when a token system exists or has been established
• Converging on the same aesthetic across different generations
• Reading .env files, credentials, or secrets directories
• Making external network requests or executing generated code

License

MIT