design-explore

Generate and judge distinct visual-design directions against weighted criteria, then synthesize a recommendation.

1|Updated Apr 15, 2026
One-click install
npx skills add https://github.com/pnewsam/skills --skill design-explore-pnewsam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-explore
Source: https://github.com/pnewsam/skills/tree/main/archive/design-explore-evicted
Command: npx skills add https://github.com/pnewsam/skills --skill design-explore-pnewsam

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? When a UI's visual direction is open — a new screen, a restyle, or a mood shift — prescribing one answer prematurely leads to weak, convergent designs. This Skill replaces single-answer taste with a repeatable search procedure: generate genuinely different directions, judge them against explicit criteria, and synthesize the strongest result. ## Core Features & Use Cases - Parallel direction generation: Produces 3–5 directions, each committed to a different organizing idea (dense-utilitarian, airy-editorial, bold-expressive), with structured design tokens (palette hexes, radius, spacing, density). - Artifact-based judging: Renders each direction as a standalone HTML page, screenshots it with headless Chrome, and gates it against WCAG AA contrast before scoring — judges rate the artifact, not the prose. - Synthesis with verification: Takes the highest-scoring direction as a base, grafts the best moves from runners-up, and cross-checks contrast and spacing scale before handoff. - Use Case: Given a brief like "design a billing dashboard for a creative agency," run the workflow to get four rendered, contrast-gated directions with per-criterion scores and a final synthesized recommendation. ## Quick Start Use design-explore to generate four distinct visual directions for a new analytics dashboard, judge them against audience fit and clarity, and recommend one.

Frequently Asked Questions about design-explore

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate multiple UI design directions from a brief?▼

Run the design_explore.workflow.js script with a brief in args; it spawns parallel direction generators, each committed to a different organizing idea like dense-utilitarian or airy-editorial. Each direction emits a structured tokens block with palette hexes, radius, spacing, and density.

How are generated design directions evaluated and scored?▼

Each direction is scored 0–1 against every criterion (audience fit, mood, hierarchy, restraint, brand fit, accessibility) by an independent judge. Split verdicts are preserved rather than averaged, and the highest-scoring direction becomes the synthesis base.

Does the design direction renderer check WCAG contrast?▼

Yes. render_direction.mjs computes WCAG AA contrast ratios for every foreground/background pair the rendered page actually uses, including dark-mode variants. A direction failing the AA gate is rejected regardless of aesthetic scores.

What do I need to render and screenshot design directions?▼

You need Node.js and a Chrome or Chromium binary, located via CHROME_BIN or standard install paths. Run node render_direction.mjs with --directions, --out, and --shot; without Chrome it still produces HTML and contrast reports.

When should I not use a design direction search workflow?▼

Skip it when the visual direction is already decided and only mechanics remain — go straight to focused skills like ui-color and ui-spacing. Search adds value only when the look and feel is genuinely open.