research-designer

15 specs live motion and 3D demos CC BY 4.0

# research-designer **No time to design it. Too proud to ship it ugly.** A pack of **design skills for coding agents.** Point Claude Code, Cursor, or Codex at one spec file and get a project page, dashboard, eval UI, or poster that doesn't look like a default template โ€” motion and 3D included. Agents can already build the page. What they can't do is make the design *decisions*: type scale, color restraint, motion timing, what to leave out. Each `themes/*.md` encodes those decisions as one self-contained spec your agent follows exactly. 15 specs, 4 with live interactive demos (motion & 3D don't survive a screenshot โ€” open them). ๐Ÿ‘‰ **Live gallery:** https://meow-at-me.github.io/research-designer/

Scroll-through of a research project page built from one spec โ€” motion, charts, and layout (fictional content)

## Quickstart ```bash git clone https://github.com/meow-at-me/research-designer ~/research-designer ``` Then prompt your agent: > Build the page as a single HTML file. Follow > `~/research-designer/themes/experiment-dashboard.md` exactly, > including the Don't section. Or pin one spec to a project so "follow DESIGN.md" is the whole prompt: ```bash cp ~/research-designer/themes/experiment-dashboard.md ./DESIGN.md ``` ## Previews Grouped by what you're building. Two views per static spec; one per live archetype. Click a caption to open its spec. ### Research & project pages Paper / project landings, case studies and scroll-driven data stories.
research-project-page preview
themes/research-project-page.md		 dark-editorial-scroll preview
themes/dark-editorial-scroll.md
scrolly-data preview
themes/scrolly-data.md
### Dashboards & consoles Metrics, ablations, run comparison and monitoring UIs.
experiment-dashboard preview
themes/experiment-dashboard.md		 aurora preview
themes/aurora.md
graphite preview
themes/graphite.md		 marine-grid preview
themes/marine-grid.md
lumen preview
themes/lumen.md		 nocturne preview
themes/nocturne.md
pulse preview
themes/pulse.md		 lab-console preview
themes/lab-console.md
### Annotation interfaces & posters Human-verification / rating UIs and fixed-aspect posters (screen + print-to-PDF).
eval-interface preview
themes/eval-interface.md โ€” text workbench		 eval-interface image variant preview
examples/eval-interface-image.html โ€” image variant
research-poster preview
themes/research-poster.md
### Motion & 3D showcase Pure character studies โ€” reuse their techniques inside any archetype.
liquid-chrome preview
themes/liquid-chrome.md		 prism-glass preview
themes/prism-glass.md
> [!NOTE] > The interactive archetype demos are published on **GitHub Pages** โ€” open the gallery at **https://meow-at-me.github.io/research-designer/**. Static-spec previews above are screenshots rendered at 1280px. ## Themes Each `themes/*.md` is a self-contained spec: color tokens, typography, layout, components, motion, and a Don't list. The four research archetypes pair 1:1 with an interactive demo in `examples/`; the adopted specs are static, from the `theme-park.md` vocabulary. ### Research & project pages | Spec | What it is | |---|---| | `themes/research-project-page.md` | Paper / project landing: title, authors, abstract, interactive 3D teaser, method, results, BibTeX โ€” Tier 2 (three.js) | | `themes/dark-editorial-scroll.md` | Research/paper landing, sticky title column, bright figure cards on near-black | | `themes/scrolly-data.md` | Light scroll-driven data essay, serif editorial voice, live charts | ### Dashboards & consoles Collection-wide rule: every chart datapoint is **traceable to its source log line** โ€” hover a point and the tooltip shows the exact `file:line` it came from. Wired into all eight dashboard demos. | Spec | What it is | |---|---| | `themes/experiment-dashboard.md` | Metrics, ablations & run comparison โ€” charts, KPI cards, readouts; hover any point for its source `file:line` โ€” Tier 1 (Motion) | | `themes/aurora.md` | Light analytics dashboard, dark sidebar, purple accent, donut/bar viz | | `themes/graphite.md` | Matte charcoal industrial console, color only in data, ink-in reveal | | `themes/marine-grid.md` | Square-corner corporate sensor board, deep marine blue, hairline panels | | `themes/lumen.md` | Navy instrument panel, radial gauges, uniform-ramp heatmaps, mono readouts | | `themes/nocturne.md` | Dense slate night-ops board, frost accent, packed 12-col panels | | `themes/pulse.md` | Consumer-soft monitor, one blue, springy count-ups, large rounded cards | | `themes/lab-console.md` | Light engineering console, dense run tables, live metrics | ### Annotation interfaces & posters | Spec | What it is | |---|---| | `themes/eval-interface.md` | Human-verification annotation **workbench** โ€” keyboard-first pairwise / Likert / span, plus an **image variant** (A/B, quality, bounding-box); light & dark โ€” Tier 0 | | `themes/research-poster.md` | Fixed-aspect A0 poster โ€” renders on screen *and* prints to PDF in one system โ€” Tier 0 | ### Motion & 3D showcase | Spec | What it is | |---|---| | `themes/liquid-chrome.md` | Near-black premium; a real chrome torus-knot (three.js + RoomEnvironment) โ€” Tier 2 | | `themes/prism-glass.md` | Frosted glass over a living fbm-aurora shader (three.js) โ€” Tier 2 | ## Approach: three-tier progressive enhancement | Tier | Layer | Dependencies | |---|---|---| | 0 | Native CSS scroll-driven animations + View Transitions + WAAPI | none | | 1 | Motion orchestration โ€” **Motion** (default), **GSAP** when SplitText/ScrollTrigger is needed | CDN, pinned + SRI | | 2 | Real 3D โ€” **three.js** (custom scenes), `` (drop-in), OGL/curtains (shader backgrounds) | CDN, pinned + SRI | Every live spec declares the highest tier it uses, and reaches for Tier 1/2 only when motion or 3D is core to the task โ€” never as decoration. Static specs are Tier 0 by definition. All third-party libraries are MIT / Apache / free-for-commercial; see [`TOOLING.md`](TOOLING.md) for the tool catalog + license verdicts, [`GUIDELINES.md`](GUIDELINES.md) for the standing rules, and [`LICENSES.md`](LICENSES.md) for the dependency manifest. ## Usage ``` git clone https://github.com/meow-at-me/research-designer ~/research-designer ``` Then, from any project, prompt your assistant: > Build the page as a single HTML file. > Follow `~/research-designer/themes/experiment-dashboard.md` exactly, including the Don't section. Optionally pin a spec to a project: `cp ~/research-designer/themes/experiment-dashboard.md ./DESIGN.md` โ€” then "follow DESIGN.md" is the whole prompt. Live archetype demos open at the [GitHub Pages gallery](https://meow-at-me.github.io/research-designer/). > [!IMPORTANT] > One spec per page. Mixing two defeats the purpose. ## Repo layout ``` index.html landing / gallery page (GitHub Pages root) themes/ specs (.md), one per page โ€” live archetypes + showcase + adopted static specs examples/ self-contained interactive demos (.html), 1:1 with the live specs โ€” published as live pages shared/tokens/ DTCG design tokens (primitive + semantic) โ€” source of truth for shared values build/ generated CSS variables (build/variables.css) โ€” demos inline a copy assets/ self-made or CC0 assets only โ€” previews, 3D models, lottie, banner GUIDELINES.md standing rules ยท TOOLING.md external-tool catalog ยท LICENSES.md dependency manifest ``` Shared values (durations, easings, colors, radii, spacing) live as **DTCG design tokens** in `shared/tokens/` and build to CSS custom properties with **Style Dictionary** (`npm run build:tokens` โ†’ `build/variables.css`). This is **additive** โ€” demos stay single self-contained HTML and inline a copy, so nothing needs a build to open. See [`shared/tokens/README.md`](shared/tokens/README.md) and [`TOKENS_STUDIO_HANDOFF.md`](TOKENS_STUDIO_HANDOFF.md). ## License Docs: CC BY 4.0 ยท Code samples: MIT ยท Third-party libraries: see [`LICENSES.md`](LICENSES.md). Independent design-pattern study. Not affiliated with any company; no brand assets included; all demo content (people, companies, datasets, venues, and metrics) is fictional.