Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Web Design Studio
Three free agent skills for websites people remember: build it, prove it, make it convert.
<a href="https://mustbesimo.github.io/web-design-studio/"><img src="assets/brand/social-preview.jpg" alt="Web Design Studio: the web, with a human touch. Original Renaissance-inspired artwork beside the studio identity." width="100%"></a>
| 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-studioPick 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 →](https://mustbesimo.github.io/web-design-studio/) · [Watch the 46-second film →](https://github.com/MustBeSimo/web-design-studio/releases/download/media-2026-10/promo-linkedin__web-design-studio-linkedin.mp4)
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.
| Aureus [01 · Aureus](https://mustbesimo.github.io/web-design-studio/examples/aureus-flythrough/)<br><sub>Liquid chrome · camera descent</sub> | Atelier Marne [02 · Atelier Marne](https://mustbesimo.github.io/web-design-studio/examples/gallery-flythrough/)<br><sub>Art halls · architectural flythrough</sub> |
| Verdant [03 · Verdant](https://mustbesimo.github.io/web-design-studio/examples/jungle-flythrough/)<br><sub>Instanced foliage · sunlight</sub> | Aether [04 · Aether](https://mustbesimo.github.io/web-design-studio/examples/flagship/)<br><sub>Object · world · field · figure</sub> |
| Obsidian [05 · Obsidian](https://mustbesimo.github.io/web-design-studio/examples/crystalline-monolith/)<br><sub>Faceted glass · material response</sub> | Weather [06 · Weather](https://mustbesimo.github.io/web-design-studio/examples/volumetric-aether/)<br><sub>Cloud volume · density control</sub> |
| Nexus [07 · Nexus](https://mustbesimo.github.io/web-design-studio/examples/immersive/)<br><sub>Particles · wave displacement</sub> | [Explore all 28 examples →](https://mustbesimo.github.io/web-design-studio/)<br><br>Try a live scene, then copy its build prompt and adapt it to your subject. |
<details> <summary><strong>All 28 examples: more than one aesthetic</strong></summary>
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.
</details>
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/skillsClaude Code marketplace:
/plugin marketplace add MustBeSimo/web-design-studio
/plugin install cinematic-scroll@mustbesimoSince 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.mdandtokens/), eleven one-file visual systems inthemes/and nine named components incomponents/. - Verification.
cinematic-doctorscores 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.mdfor 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-JSA 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 benchmarkThree/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.
<p> <a href="https://buy.stripe.com/cNi7sLdNBbief0L0uFfnO09"><img src="assets/brand/studio-pro-button.svg" alt="Get Web Design Studio Pro, open checkout" width="320" height="64"></a> </p>
Compare editions · See how the stack fits
<sub>The free edition remains available for unlimited personal and commercial projects.</sub>
Develop and verify this repo
Follow the release guide for version updates, trusted npm publishing and the separate ClawHub release.
npm install
npm testThe 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.comPromo 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 [email protected].