Web Design Studio

Three free agent skills for websites people remember: build it, prove it, make it convert.

Skill	Ask your agent for	Folder
cinematic-scroll	A distinctive scroll-driven, 3D or motion website in your brand, with the mobile, reduced-motion and no-JavaScript states built and checked.	skills/cinematic-scroll
scroll-audit	A scored review of any page's scroll experience (pacing, performance, accessibility, emotional arc) and a remediation plan.	skills/scroll-audit
launch-page-strategy	What a launch or landing page must say and prove before any design or motion: one action, objections answered, proof beside each claim.	skills/launch-page-strategy

Formerly Cinematic Scroll; the cinematic-scroll identifier, npm package and ClawHub listing are unchanged.

Install

npx skills add MustBeSimo/web-design-studio

Pick one skill or all three. The command works with Claude Code, Cursor, Codex, Hermes, Kimi Code, Gemini CLI, OpenClaw and the other agents the skills CLI supports (it needs Node 22 or newer; the npm installer below runs on Node 18). Each skill is a text-only folder, under 100 KB for all three, with no account, key or paid service required.

Then ask:

Use cinematic-scroll to turn this product into a one-page story. Match the brand and assets in this project, create one memorable scroll reveal, and prove the mobile and reduced-motion versions.

Use scroll-audit on https://your-site.example and write the remediation plan, highest-impact fix first.

Use launch-page-strategy to write the story brief for our waitlist page before we design anything.

More prompts: examples/PROMPTS.md. Other agents and routes: INTEGRATIONS.md.

See it

Everything below was built with the skill and is served from this repository.

Explore the live collection → · Watch the 46-second film →

Seven real-time 3D flagships

Seven live websites, seven different reasons to use depth. Every flagship is scrollable, source-visible, bounded by a performance budget, and backed by a designed fallback.

01 · Aureus Liquid chrome · camera descent	02 · Atelier Marne Art halls · architectural flythrough
03 · Verdant Instanced foliage · sunlight	04 · Aether Object · world · field · figure
05 · Obsidian Faceted glass · material response	06 · Weather Cloud volume · density control
07 · Nexus Particles · wave displacement	Explore all 28 examples → Try a live scene, then copy its build prompt and adapt it to your subject.

All 28 examples: more than one aesthetic

The motion grammar stays consistent; the art direction does not. Browse the complete visual collection, including every original editorial and all eleven visual systems.

Live example	Direction	Code
Classic Touch	Renaissance editorial	Source
Maya Torres	Brutalist creative studio	Source
Vantascope	Editorial sci-fi	Source
Maison Solenne	Quiet luxury	Source
Bloom	Playful product story	Source
Atelier Nocturne	Kinetic editorial	Source
Digital Wealth	Financial product story	Source
Kern	Mechanical instrument and calibration	Source
Meridian	symmetric monument	Source
Vanta Labs	clinical noir	Source
Polly & Plot	storybook geometry	Source
Obsidian	temporal monument	Source
Farsight	atmospheric sublime	Source
Keepsake	warm scrapbook	Source
Drift	naturalistic drift	Source
Concrete / Orange	brutalist kinetic	Source
Chroma	liquid chrome	Source
Verdant Press	botanical editorial	Source
Signal	data cinematic	Source
Naturally Rooted	A slower editorial study	Source
Novadeck	A playful digital throwback	Source

The visual systems live in themes/. The components live in components/. They are starting points, not a fixed house style.

If an example helps you build something, star the repository to keep it handy.

Why a skill and not a prompt

A skill packages the working standard so you reuse it instead of re-explaining it on every project. Your brand determines the look; the skill gives the agent a process to build and inspect it.

What you want	What the skill adds
A website that belongs to your brand	Brand precedence, visual references and a content-led story before effects.
Motion that explains the subject	Start → transformation → readable hold → exit, with reusable interaction patterns.
A page that remains usable	Explicit mobile, reduced-motion, no-JS and renderer-failure requirements.
Evidence you can inspect	Static checks and a five-profile browser proof workflow, with failures and missing evidence reported.

The honest part: a three-build comparison on one brief (plain prompt, expert prompt, skill, same model) found no correctness advantage for the skill. The skill buys consistency and verification, not magic. Read what was measured and what was not.

Other install routes

All routes install the same text-only skill folders.

# only one skill, or a specific agent
npx skills add MustBeSimo/web-design-studio --skill scroll-audit
npx skills add MustBeSimo/web-design-studio --agent cursor

# OpenClaw / ClawHub (cinematic-scroll)
openclaw skills install cinematic-scroll

# npm installer, no dependencies
npx cinematic-scroll-skill
npx cinematic-scroll-skill --skill cinematic-scroll --dir .cursor/skills

Claude Code marketplace:

/plugin marketplace add MustBeSimo/web-design-studio
/plugin install cinematic-scroll@mustbesimo

Since 3.0.0 the repository root has no skill file, so cloning the whole repository into a skills directory gives you the toolkit below, not a skill. See COMPATIBILITY.md for per-agent notes.

The toolkit in this repository

The skills are small on purpose. The rest of the repository is the craft around them:

• Interaction toolkit. Six text treatments, magnetic and depth surfaces, four original shader families and a shared scroll, pointer and proximity runtime, all MIT. React and Three.js adapters add demand rendering, adaptive quality, asset cleanup and context recovery. Start with FIELD, the effects lab and the runtime guide.
• Design system. A DTCG token contract (design.md and tokens/), eleven one-file visual systems in themes/ and nine named components in components/.
• Verification. cinematic-doctor scores static craft and exits non-zero below the threshold; the verifier adds browser evidence across desktop, mobile, reduced motion and no-JavaScript profiles.
• Templates and 3D. An optional Next.js starter for full release sites and ASSETS-3D.md for GLB/USDZ hand-off. Generated media through fal.ai is optional; demo mode and local assets work without a key.
• Benchmark. CinematicBench is the companion passive benchmark for pacing, performance, accessibility and motion craft.

npm run doctor -- examples/flagship/index.html                # static quality gate
node tools/verify/verify-build.mjs ./index.html --phase polish  # contract checks + browser evidence
node tools/page-proof/matrix.mjs ./index.html --out .verify/page-proof   # desktop, mobile, reduced motion, no-JS

A requested check that cannot run reports INCOMPLETE; a failed check reports FAIL. Neither is dressed up as success. Install browser-tool dependencies once with npm install; Chrome or Chromium is needed only for screenshot proof.

skills/                    the three installable skills (text only)
design.md + tokens/        DTCG color, type, spacing, and motion contract
themes/                    eleven one-file visual systems
components/                nine named patterns in HTML and React
references/                toolkit guidance: story, build, motion, performance, 3D, XR
examples/                  28 live references, prompts, and real-time 3D flagships
templates/nextjs/          optional full-site starter
tools/                     doctor, verifier, page-proof, media archive, skill validators
evals/ and bench/          triggering checks, workflow evals, passive benchmark

Three/types are pinned to 0.185.0 because the compatible postprocessing release excludes 0.186. Optional runtime code belongs to your output; there is no hosted service dependency or paid visual-effect tier.

Validation

On 12 September 2026, source v2.7.6 passed 6 reference fixtures and 9 verifier failure-path tests; FIELD returned clean reports in 5 browser profiles. Test scope and reproduction commands. The 3.0.0 release changes distribution, not the skill's build rules; the public comparisons that shaped those rules keep their builds, costs, screenshots and failures: first comparison · second run · latest sealed forward protocol.

Web Design Studio and Pro

The normal edition is the complete, useful product, not a trial.

Web Design Studio · free forever	Web Design Studio Pro · for repeat practice
Three skills: build, audit, strategy	Build on accumulated project knowledge
Story and motion planning	Intent-based pattern retrieval
28 references + 11 visual systems	Reuse tracking across builds
Components and real-time 3D patterns	Learned variants from your own language
Doctor + five-profile browser proof	Deeper iteration without starting cold
Optional TasteHQ matching	Proprietary Motif Engine

Make every project a head start.

Web Design Studio Pro adds the Motif Engine: retrieve patterns by intent, build on accumulated project knowledge, and develop variants from your own visual language. Bring what you learned into the next brief.

Compare editions · See how the stack fits

_{The free edition remains available for unlimited personal and commercial projects.}

Develop and verify this repo

Follow the release guide for version updates, trusted npm publishing and the separate ClawHub release.

npm install
npm test

The test suite checks tokens, themes, links, skill folders, the pointer stubs, components, the doctor, evals, benchmark behavior, verification semantics, browser-matrix orchestration, the npm payload, the media size gate and the TasteHQ adapter.

npm run skills:check          # every skills/* folder: text-only, self-contained, version-synced
npm run media:check           # no tracked file over 5 MB
npm run tokens:check
npm run themes:check
npm run proof -- examples/noir/index.html
npm run bench -- https://example.com

Promo media lives in the media-2026-10 release, not in the tree; node tools/media-archive.mjs --plan shows what would move.

Principles

• Content and brand lead; effects follow.
• Use real 3D only when spatial depth carries meaning.
• One scroll clock, reversible setup, and no global teardown.
• Mobile is a composition, not a shrunken desktop.
• Reduced motion restores readable flow; it does not merely set duration to zero.
• A static poster or readable page is a designed state, not an apology.
• References inform direction without copying assets, logos, text, or exact compositions.

License

MIT © 2026 Simone Leonelli. See LICENSE.

Built something with it? Submit it to the showcase or email simone@w230.net.