The render-aware judgment layer behind StyleSeed.

StyleSeed is the public product and open-source design-method engine. Pixelmind is retained only as the internal repository and npm package namespace (@pixelmind/*) while existing integrations are migrated without a breaking rename.

A render-aware feedback loop for LLM-generated UI. Three primitives that close the gap between code space (where your LLM thinks) and pixel space (where users actually look).

import { render, see, critique, refine } from "@pixelmind/sdk"

const { png }   = await render({ code, viewport: "desktop" })
const verdict   = await see({ screenshot: png, intent: "fintech dashboard" })
const fixPrompt = critique(verdict)

Or wire the whole loop in one call:

const result = await refine({
  initialCode,
  intent: "fintech dashboard, three KPI cards, trustworthy tone",
  threshold: 85,
  maxIters: 3,
  generate: (code, fix) => myLLM.complete(`${code}\n\n${fix}`),
})
// → { finalCode, finalScore: 85, iterations: 3, converged: true,
//     history: [{score:79,issueCount:9}, {score:83,issueCount:6}, {score:85,issueCount:4}] }

Because see() is a consistent, render-grounded judge, you can point it at any design-coding agent and get comparable numbers. pixelmind bench runs a set of standardized UI prompts against every agent, scores the rendered output, and writes a leaderboard. Same prompt, same judge, same metric.

pixelmind bench --fixtures bench/fixtures --agents claude-code,codex --out bench/results

First baseline (20 fixtures × 2 agents, judge = Codex CLI):

Scores are nearly tied; the sharper signal is elsewhere — both agents are weakest on accessibility (~65/100), and Claude Code timed out on the single heaviest dashboard even at 240s. Full methodology, per-category and per-fixture breakdowns, and how to add your own agent or fixture: bench/README.md.

LLMs generate code in code-space (p-4 gap-2 grid-cols-3). Users see pixels. The translation is lossy — the LLM thinks it shipped a great dashboard, the rendered output is awkward. Today, every vibe coder closes the gap by hand: screenshot the result, eyeball it, type "the spacing is off, the KPI cards feel cramped" back into the chat. The StyleSeed Vision Engine closes the loop automatically.

1. render(code, viewport) — headless Chromium renders TSX/HTML, captures the screenshot
2. see(screenshot, intent) — a vision LLM judges the screenshot against 9 categories: hierarchy, spacing, typography, color, alignment, density, consistency, accessibility, brand-fit
3. critique(verdict) — the structured verdict becomes a natural-language fix prompt your LLM can act on

The 9-category rubric is grounded in StyleSeed's 69 production design rules — design knowledge as visual scaffolding, not just code lint.

# Install
npm i @pixelmind/sdk

# One-time: install the Playwright Chromium binary
npx playwright install chromium

Pick a vision backend:

The SDK auto-detects whichever is available, preferring an installed Codex CLI when present.

git clone https://github.com/bitjaru/pixelmind
cd pixelmind && npm install && npm run build
node scripts/smoke-refine.mjs

The script starts from a sparse JSX dashboard (iter-0.tsx), runs three refinement passes via Codex, and writes scripts/iter-{0,1,2}.{png,tsx,json} so you can see exactly what changed. Last run on this repo: 79 → 83 → 86 in three iterations, ~3 minutes wall time, $0 cost.

// Verdict shape — same from every backend
type Verdict = {
  overallScore: number          // 0-100, weighted across categories
  scores: Record<Category, number>
  issues: Array<{
    type: Category
    severity: "low" | "med" | "high"
    desc: string                // what's wrong, specifically
    suggestion: string          // imperative fix the LLM can act on
  }>
  strengths: string[]           // preserve these on rewrite
  meta: { model: string; rubric: string; judgedAt: string }
}

# Score a file and print the fix prompt
npx @pixelmind/cli fix src/components/Dashboard.tsx --intent "fintech dashboard"

# Score only, no fix prompt
npx @pixelmind/cli score src/components/Dashboard.tsx --intent "..."

# Run the bench across agents
npx @pixelmind/cli bench --fixtures bench/fixtures --out bench/results

# Short alias
npx pm fix src/components/Dashboard.tsx --intent "..."

v0.2.0. The SDK pipeline (render → see → critique → refine) is end-to-end validated against Codex CLI and OpenAI/Anthropic APIs, and the new bench harness produces a reproducible leaderboard across design-coding agents (Claude Code, Codex today; Cursor next).

Roadmap: more bench agents and fixtures, a hosted leaderboard, and a brand-aware scoring track. Star the repo to follow along.

MIT — see LICENSE