sometimeswedie/one-page-design-skill

> Based on Stone Librande's One-Page Designs (talk "One Page Design Philosophy", while creative director at EA Maxis): watch the video. The idea and the method are his; this repo packages them as an agent skill. Not affiliated with or endorsed by Stone Librande or Electronic Arts.
An agent skill that turns one bounded system (a process, a cycle, a supply chain, a product, a roadmap) into a single wall-ready page: an editable HTML and SVG diagram, rendered, linted, critiqued and exported as PNG and PDF from A4 to A1.
## What is a one-page design?
Stone Librande's idea: instead of a long document that chops a design into sections, put the whole model on one page. People read headlines and pictures, not long text, and a single page shows how the parts connect. A good page has a title that says why it exists, plenty of white space, one main illustration or diagram in the middle, short callouts around it, and three tiers of information (glance, label, detail). You print it, hand it over and write on it. This skill encodes those principles (paraphrased, with timestamps into the talk in references/one-page-principles.md) as a step-by-step workflow with quality gates.
## When to use it, and when not
Use it for: process maps, production or delivery cycles, value and supply chains, factory flow, product anatomy, roadmaps, game or UX systems, "a poster for the wall", visual specs.
Do not use it for: prose executive summaries, single-page websites, slide decks, data dashboards, or decorative posters with no explanatory model.
## Features
Render, lint, critique loop. render.py drives headless Chrome (standard library only), exports PNG, tiles, zoomed regions and a vector PDF; lintpage.js checks type size, contrast, text overflow, connectors, SVG scale, whitespace and density. The agent must look at the render before it claims success.
Print sizes A4 to A1, landscape or portrait, with type floors per sheet and a one-page PDF check.
Light and dark themes, WCAG contrast, colour-blind-safe palette, meaning never by colour alone.
Brand tokens: link a project's tokens.css and logo, with fallbacks.
Nine layout recipes (R1 to R9) plus a generator: newpage.py --recipe R1 ... R9 or --spec schedule.json for a time-scaled swimlane with the critical path computed from data.
Quality gates G1 to G10 and four operating modes (discovery, exploration, reference, revision) plus an unattended mode.
## Install
Requirements: Python 3.8+ and Google Chrome or Chromium (tested on macOS; poppler is optional for PDF checks).
bash
git clone https://github.com/sometimeswedie/one-page-design-skill.git
cd one-page-design-skill
# Claude Code (all projects; or use /.claude/skills/)
cp -r one-page-visual-design ~/.claude/skills/
# Codex
cp -r one-page-visual-design ~/.codex/skills/
Quick check that the tooling works (writes outside the skill folder):
bash
python3 one-page-visual-design/scripts/render.py examples/coffee-order/coffee-order.html --out /tmp/opd-check --strict