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.
Optional React toolkit: three URL-installable motion components
with host-theme defaults. Agent discovery index: llms.txt.
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.
Works with your stack. The skill builds on whatever the project already uses, from GSAP, Motion, Anime.js and Lenis to Three.js, Spark splats, Rive and Lottie, and records each tool's licence, status and fallback in the stack shelf. Offline simulations and renders reach a page through the bake pipeline; films about the work follow the video pipeline.
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.
The motion grammar stays consistent; the art direction does not. Browse the complete visual collection, including every original editorial and all eleven visual systems.
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.
The book
The Cinematic Web: Scroll-Driven Web Design with Claude Code, Codex and Reusable AI Skills (Simone Leonelli, 2026) is the long-form version of these skills: twelve chapters on the motion grammar, the visual systems, the 60 fps contract, proving fallbacks, auditing any page and selling the work, each ending with prompts you can paste. Kindle edition · Free sample chapter: the twelve scroll patterns
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.
See CONTRIBUTING.md for skill proposals, media rules and pull request checks.
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. The photos and videos the live site plays live on the media branch, which the Pages workflow overlays on main at deploy time. A fresh clone therefore shows the example pages without images; to preview them locally run git fetch origin media && git restore --source=origin/media --worktree -- examples assets and leave those files uncommitted.
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 [email protected].
