Design infrastructure for agents that need to ship visual artifacts, not screenshots of good intentions.
Tokens, editorial defaults, p5.js motion grammar, fixed-canvas checks, and print export on one Bun path.
English · 中文 · Agent Guide · Workflow Index · CSO Audit
Quick Start · Why · Use Cases · Creator OS · Evolution Engine · Packages · Loop · Trust Boundary
Agent-built visual work fails in the same boring ways.
It looks fine in chat, then clips in the browser. It exports a PDF with broken spacing. It uses six different spacing systems. The motion sketch is cool, but nobody can reuse it. The final video works on one laptop and dies when someone else tries to compress it.
dash-design-infra is the layer underneath the artifact:
- design tokens that keep color, type, spacing, and page geometry in one place;
- document defaults that make one-pagers and reports feel intentionally typeset;
- p5.js motion presets that turn experiments into named grammar;
- browser measurement so fixed-canvas work fails before the client sees it;
- print/PDF export that uses the same HTML path;
- public-safe workflow docs for motion and video delivery.
This is not a theme pack. It is the boring machinery that makes designed output survive contact with reality.
bun install
bun x playwright install chromium
bun tokens:build
bun metrics:build
bun typecheck
bun p5:motion-check
bun creator:motion-storyboard-check
bun creator:contact-sheet-check
bun creator:social-card-check
bun creator:pdf-zine-check
bun creator:p5-sketch-check
bun creator:remotion-scene-check
bun creator:manim-scene-check
bun creator:touchdesigner-tox-check
bun creator:browser-demo-check
bun creator:skill-package-check
bun docs:links
bun security:scan
bun hackathon:scoreCheck the public fixed-canvas path:
bun measure:check -- examples/one-pager.html
bun print:render -- examples/one-pager.html /tmp/dash-one-pager.pdf --canvas=1684x1191Use the motion helpers:
import { createMotionTimeline, createTileGrid, layoutTileFrame, p5MotionPresets } from '@dash/p5-motion';
const tiles = createTileGrid(720, 960, 3, 3);
const frame = layoutTileFrame(tiles, 0.42);
const timeline = createMotionTimeline(p5MotionPresets.electricArchive.timeline);
const state = timeline.atFrame(42);
console.log(p5MotionPresets.memoryWeatherReport.layers);
console.log(frame[0]);
console.log(state.phases.scanExposure.eased);Agents should start with AGENTS.md. Humans can start here.
If you are an agent deciding which path to run, start with the Workflow Index. It maps each artifact job to an entry file, package layer, command path, QA gate, and public boundary.
| You need to make | Start with | What survives |
|---|---|---|
| Creator-facing frontier visual | Creator Frontier Capsule |
A compact creative memory unit: intent, grammar, surface, proof, and remix rule |
| Prompt DNA for image/video models | Creator Prompt DNA Adapter |
Public-safe prompt genetics, preview recipe, blocked outputs, and proof gate without raw generated media |
| Contact-sheet QA for motion | Creator Contact-sheet QA |
Regenerated ignored .artifacts proof before raw video or renderer work |
| Social post / link-preview image | Creator Social Card and examples/creator-social-card.html |
Crop-safe 1200x630 card with hook, proof stamp, public boundary, and creator:social-card-check |
| Printable process zine | Creator PDF Zine and examples/creator-pdf-zine.html |
Six-panel one-sheet PDF handoff with capsule memory, proof path, public boundary, and creator:pdf-zine-check |
| p5.js creative-coding sketch | Creator P5 Sketch and examples/creator-p5-sketch.html |
Deterministic dash-flow-field frame probes, fixed preview board, public boundary, and creator:p5-sketch-check |
| Remotion sequence/composition | Creator Remotion Scene and examples/creator-remotion-scene.html |
Generated ignored TSX composition stub, fixed-canvas proof card, public boundary, and creator:remotion-scene-check |
| Manim explainer scene | Creator Manim Scene and examples/creator-manim-scene.html |
Generated ignored Python scene stub, fixed-canvas proof card, public boundary, and creator:manim-scene-check |
| TouchDesigner/twozero network | Creator TouchDesigner TOX and examples/creator-touchdesigner-tox.html |
Generated ignored topology/safety artifacts, fixed-canvas proof card, local-operator boundary, and creator:touchdesigner-tox-check |
| Browser-native demo | Creator Browser Demo and examples/creator-browser-demo.html |
Self-contained clickable HTML phenotype, generated smoke notes, browser interaction smoke, and creator:browser-demo-check |
| Creator Skill Package | skill-packages/creator-workflow/SKILL.md and Creator Skill Package Route |
A repo-local skill package with trigger, install boundary, example task, and creator:skill-package-check |
| Motion / video direction | Creator Motion Storyboard and examples/creator-motion-storyboard.html |
Six-frame fixed-canvas storyboard, timing, boundary, remix handles, and contact-sheet bridge before any raw media |
| One-page brief or report | examples/one-pager.html |
HTML that measures correctly and exports without surprise clipping |
| Editorial deck-like artifact | @dash/kami |
Warm page defaults, stable hierarchy, print-safe tags |
| Kinetic poster | @dash/p5-motion |
Named p5.js motion grammar instead of one-off sketch soup |
| Archive/evidence visual | Electric Archive |
Split archive/signal surface for memory, retrieval, and handoff stories |
| Weather-style evidence report | Memory Weather Report |
Pressure maps, fronts, radar texture, and forecast cards for complex signals |
| Flow-field / kinetic type / data-weather preset | P5 Motion v2 Spec and Frontier Research |
Flow fields, kinetic typography, data-weather mapping, and layer composition validated by bun p5:motion-check |
| Dense rendered motion piece | Windburn Render Workflow |
Chunked render, contact-sheet QA, bitrate-controlled WeChat delivery |
| Visual research board | Refero Visual Research |
Real-interface study converted into a synthetic, measurable pattern board |
| Skill / prompt optimization loop | Darwin Skill Ratchet |
External skill ideas vetted, abstracted, measured, and kept only if they improve the public workflow |
| Hard-constrained page | @dash/layout + @dash/measure |
Layout rules that can be solved, then checked in a real browser |
The source of truth flows downward.
Tokens / scale / metrics
│
├── Kami document taste ───────> reports, one-pagers, deck-like pages
│
├── p5 motion grammar ─────────> posters, archive fields, weather maps
│
└── layout + measure + print ──> fixed-canvas checks and PDF output
The public docs and usecases explain the work. The packages provide the reusable pieces. The verification commands prove the output path.
| Package | Job | Core dependency |
|---|---|---|
@dash/tokens |
Colors, type, spacing, page geometry, and motion values | style-dictionary |
@dash/scale |
Type and spacing scale generation, including --write |
utopia-core |
@dash/metrics |
Baseline-safe text metrics | @capsizecss/core |
@dash/kami |
Editorial defaults for reports, letters, resumes, portfolios, and decks | none |
@dash/p5-motion |
p5.js motion presets and deterministic helpers | peer p5 |
@dash/measure |
Browser overflow checks for fixed-canvas HTML | playwright |
@dash/layout |
Constraint layout helpers for hard geometry | @lume/kiwi |
@dash/print |
HTML-to-PDF rendering with paged-media support | pagedjs, playwright |
The hackathon loop is now explicit: review one surface, apply one narrow fix, score it, push it through CI, merge only when green, then repeat. The operating model is documented in docs/HACKATHON_SDD_LOOP.md, with the ClawSweeper reference map in docs/CLAW_SWEEPER_REFERENCE.md. External skill ideas now use the Darwin Skill Ratchet: vet first, extract the pattern, render a synthetic board, measure it, and keep only score-backed improvements. Creator-facing work starts with Creator OS and a Creator Frontier Capsule: idea -> capsule -> artifact -> proof -> remix trail. The retained creator route can also be consumed as a repo-local skill package via skill-packages/creator-workflow/SKILL.md after bun creator:skill-package-check; this is not an external release. Darwin-style work uses the Creator Evolution Engine: observe -> mutate -> render -> evaluate -> select -> retain -> regress. The current retained bridge from static artifact to video direction is the Creator Motion Storyboard, which must pass bun creator:motion-storyboard-check before any renderer or contact sheet. This is self-evolution machinery, not a dashboard.
The current retained social/export slice is the Creator Social Card, which turns capsule memory into a crop-safe 1200x630 proof before platform posting. The current retained print/process slice is the Creator PDF Zine, which turns capsule memory into a six-panel one-sheet PDF handoff before booklet tooling or private workshop notes enter the workflow. The current retained creative-coding adapter is the Creator P5 Sketch, which turns capsule memory into deterministic dash-flow-field frame probes before any p5 runtime or rendered media enters the workflow. The current retained timeline-code adapter is the Creator Remotion Scene, which emits a checked TSX composition stub before any external Remotion runtime or rendered video enters the workflow. The current retained explainer-scene adapter is the Creator Manim Scene, which emits a checked Python Scene stub before any external Manim runtime or rendered MP4 enters the workflow. The current retained browser-native adapter is the Creator Browser Demo, which emits a self-contained clickable HTML phenotype before any frontend framework, backend, analytics, hosting config, screenshot, or public deploy enters the workflow. The motion storyboard remains the retained bridge from static artifact to video direction. These are self-evolution machinery, not dashboards.
The local scoreboard proxy is:
bun hackathon:scoreIt is blunt on purpose: if a loop cannot improve public clarity, verification, installability, or boundary safety, it should not consume the next 30 minutes.
This repo is public-facing, so the boundary is explicit.
| Surface | Status |
|---|---|
| Private local paths | scanned, blocked by policy |
| Raw source video/audio | intentionally excluded |
| Private client text | intentionally excluded |
| Secrets and env files | ignored, scanned, not committed |
| Generated media | excluded unless deliberately small public preview |
| Dependency audit | bun audit --audit-level high, currently clean |
| Markdown link check | bun docs:links, currently clean |
| Public-boundary scan | bun security:scan, currently clean |
| Creator capsule check | bun creator:capsule-check, currently clean |
| Creator evolution check | bun creator:evolution-check, currently clean |
| Creator mutation check | bun creator:mutation-check, currently clean |
| Creator poster check | bun creator:poster-check, currently clean |
| Creator prompt DNA check | bun creator:prompt-dna-check, currently clean |
| Creator motion storyboard check | bun creator:motion-storyboard-check, currently clean |
| Creator social card check | bun creator:social-card-check, currently clean |
| Creator PDF zine check | bun creator:pdf-zine-check, currently clean |
| Creator p5 sketch check | bun creator:p5-sketch-check, currently clean |
| Creator Remotion scene check | bun creator:remotion-scene-check, currently clean |
| Creator Manim scene check | bun creator:manim-scene-check, currently clean |
| Creator browser demo check | bun creator:browser-demo-check, currently clean |
| Creator skill package check | bun creator:skill-package-check, currently clean |
| P5 motion v2 contract check | bun p5:motion-check, currently clean |
| Hackathon score | bun hackathon:score, currently maxed |
| Type safety | bun typecheck, currently green |
Read the current public-facing security posture in docs/PUBLIC_CSO_AUDIT.md. Report security issues through SECURITY.md.
AGENTS.md is the contract for future agents:
- what the repo provides;
- default verification commands;
- what must never be committed;
- how to add a public workflow;
- the quality bar for docs and examples.
The hackathon operating target lives in docs/HACKATHON_GOAL.md.
.
├── AGENTS.md
├── docs/
│ ├── HACKATHON_GOAL.md
│ ├── PUBLIC_CSO_AUDIT.md
│ └── assets/
├── examples/
├── packages/
│ ├── kami/
│ ├── layout/
│ ├── measure/
│ ├── metrics/
│ ├── p5-motion/
│ ├── print/
│ ├── scale/
│ └── tokens/
├── usecases/
│ ├── p5js/
│ ├── creator/
│ └── video/
├── README.md
├── README-zh.md
└── package.json
Ready now:
- token build pipeline;
@dash/scalegeneration and--write;- capsize CSS generation;
- Kami-inspired editorial preset;
- p5.js motion presets, including Electric Archive and Memory Weather Report;
- p5.js v2 preset contracts for flow fields, kinetic type, data-weather mapping, and layer composition;
- video workflow notes for chunked render QA and delivery compression;
- browser overflow checks;
- constraint-solver layout helpers;
- paged.js PDF export;
- public example and usecase docs;
- creator capsule, poster, prompt DNA, motion storyboard, social card, p5 sketch, Remotion scene, Manim scene, and skill package checks;
- CI for install, token build, metrics build, typecheck, dependency audit, docs link check, public-boundary scan, and hackathon score.
Still intentionally private or external:
- raw p5.js lab sources;
- source reference videos and frames;
- private project writing and client material;
- print vendor assets managed by consuming projects.
Special thanks to @tw93. Kami shaped the document-aesthetic layer here, and tools like Kaku and Mole have been part of the working environment that made this repo more useful in practice.
This is gratitude and attribution, not a claim that upstream authors are responsible for this repository's code.
See CONTRIBUTING.md.
High-level rule: keep changes small, reversible, public-safe, and verified on a real path.
MIT. See LICENSE.