Claude Design System — Experimental / Graphic / Web-Art Register

A curated training package for Claude's design system feature. Focus: artistic, experimental, graphic, award-tier web design — the aesthetic of studios like Build in Amsterdam, Ochi, Active Theory, and awarded Awwwards SOTDs.

Structure

claude-design-system/
├── clones/        9 reverse-engineered sites (Next.js 16, Tailwind v4, shadcn primitives)
├── references/    10 curated open-source reference repos matching the experimental register
├── fonts/         Free/open fonts vendored per clone
└── docs/          (reserved)

clones/ — Nine reverse-engineered sites

Built with the AI Website Cloner template (Next.js 16 + React 19 + Tailwind v4). Each clones/<site>/src/components/ contains the extracted React components; clones/<site>/public/ contains real assets downloaded from the live site.

Site	Register	Honest status
nogood-studio	Marketing-agency scroll reveal	Pre-upgrade — structural skeleton, hero visual incomplete
fluid-glass	Corporate glass/architectural	Pre-upgrade
inversa	Creative-studio dark editorial	Pre-upgrade
amaterasu-ai	Mental-health brand with WebGL portrait	Pre-upgrade — hero portrait missing, empty hero
cambiumcarbon	Timber/sustainability with canvas scroll-morph	Pre-upgrade — canvas placeholder as empty <div>
donmolinico	Spanish heritage food brand, Lenis + sticky product showcase	Post-upgrade — Lenis smooth scroll, lerp cursor, sticky flavor-tied showcase; marquee hero incomplete
joondalupfestival	Festival brand with live Three.js scene	Post-upgrade — @react-three/fiber + 120 firefly particles + time-of-day button + IntersectionObserver scroll transitions
opal-tadpole	Hardware product with scroll-scrub ImageSequence	Post-upgrade — 321-frame canvas ImageSequence + GSAP ScrollTrigger + Lenis + 5 product videos
synchronized-studio	Digital creative studio	Post-upgrade — Canvas 2D hero (18 rotating stars + 12 streaks) + mouse parallax + marquee nav + IntersectionObserver reveals

The 5 pre-upgrade clones represent earlier cloning-pipeline runs before the "Signature Moments Are Non-Negotiable" rule (Principle 10) was codified. They preserve layout structure and copy, but frequently show empty hero placeholders where canvases/videos should be. Treat them as layout references, not as full-experience examples. The 4 post-upgrade clones (donmolinico, joondalupfestival, opal-tadpole, synchronized-studio) encode the signature-moment preservation behavior — scroll-linked choreography, canvas reproduction or rasterization fallback, mouse parallax, smooth-scroll integration.

references/ — Ten curated corpus repos

Selected from a 98-repo design-reference library for the experimental / graphic / web-art register. Node_modules, .next, .git, dist stripped to keep bundle lean.

Repo	Teaches
GSAP-Awwwards-Website	Flagship Awwwards-tier scroll choreography with GSAP + ScrollTrigger
award-winning-website	Curated award-winner patterns (animation, transitions, layout)
ochi-website-clone	Ochi.design — canonical experimental studio aesthetic
gsap_cocktails	Scroll-scrub product hero with GSAP pinning
awesome-design-md-skills	57 aesthetic SKILL.md docs (glassmorphism, brutalism, minimal, editorial, organic, brutalist, dark, 3D, etc.) — the taxonomy spine
grain	Grain texture overlay (core premium-aesthetic building block)
cursor-effects	Custom cursor patterns (lerp-smoothed, trailing, morphing)
MotionVariants	Framer-Motion animation variant library
threejs-page-transition	3D page-transition shader patterns
Brutalist-Framework	Brutalist register (raw, typographic, experimental)

fonts/ — Vendored typography

Free/open typefaces downloaded during the cloning runs. Organized by source-site for provenance. Includes Bricolage Grotesque, Super (donmolinico's display face), SuisseIntl derivatives, MosaicRegular (joondalup), and the custom Font-A/B/C/E family used by synchronized.studio.

Aesthetic keywords (for design-system prompt intake)

Artistic, experimental, graphic, award-tier web design · Scroll-driven choreography (pin, scrub, progress-linked) · Canvas / WebGL heroes (real, not placeholder) · Smooth scroll (Lenis / Locomotive) · Mouse parallax · Custom cursors · Grain textures · Oversized display typography · Horizontal marquees · Time/state-cycling hero scenes · IntersectionObserver reveal stagger · Three.js particles + shader materials · Canvas 2D image-sequence scrubbing · Brutalist typographic experiments · Monochrome or warm-earth palettes · Asymmetric grids

Upload notes

• The Claude design system form accepts one folder via "Link code from your computer." Point it at the repo root or at a specific subfolder (e.g., clones/synchronized-studio/src/ for the cleanest single-aesthetic signal).
• .fig field: empty — no Figma source for any of these.
• Notes field suggestion: "Experimental / graphic / art-tier web design. Scroll-driven signature moments are non-negotiable — never substitute empty divs for canvas/video/WebGL elements. See README for post-upgrade vs pre-upgrade clone distinction."