asfakulsiam/asfakulsiam-motomation-design

**An agent skill that designs like a person with taste.**
Original, award-level websites that are minimal, modern and typography-led, with motion as the signature.
At the top tier, scrolling plays like a film.
**New here? Start here → what it is, who it's for, and what a session looks like** · **See it in action → worked examples** · **Cheatsheet → every command, flag and tier, with example prompts**
Above: examples/html/motomation-film.html , a complete Tier 5 Motomation page in one HTML file with no build step.
See it in action
Real sessions, copied with their commands, outputs, screenshots and gate results. Open one before reading the rest. All of them, with the agent, tier and result of each: examples/prompts/README.md.
| Example | What it shows |
|---|---|
| **Flagship: one prompt, the whole skill** | Every step of the full route on one page: collision draw, CSV choices, an Anti-Sameness Check that fails the first plan, Restraint Gate record, Tier 2 tide rail, gate and a stamp traced field by field |
| Tier 5 showcase: one film page, every step | A scroll-as-film page through its pipeline: storyboard, timing sheet, 270 reproducible frames, the gate with its Q and A axes, the stamp and --verify |
| Hero section | One viewport for a real craft: collision draw, memory check, build, gate, stamp, Restraint Gate log |
| Four-page site | A whole small site from one prompt: Thinking Sequence, data-file choices, one signature across pages, a gate and verified stamp per page |
| Fix an existing page | The short route on a real failing page: route stated, cause named, a 3-line fix, gate before (32 failures) and after (0) |
| Component swap | HoldToCommit dropped into an existing React app: search, choice, diff, typecheck, gate, interaction test |
---
Why this exists
Ask any AI for a website and you get the same page: a centred headline, two buttons, a logo wall, three icon features, a purple gradient. The page looks the same because the **thinking** is the same.
Motomation Design changes the thinking:
| | Typical AI output | With Motomation Design |
|---|---|---|
| **Starts with** | A layout template | A **tension** in the brief, resolved into a **concept** |
| **Structure** | Hero → logos → features → pricing | One of 20 **archetypes** (Ledger, Film Reel, Letter, Atlas…), deliberately **mutated** |
| **Ideas** | The most likely next token | A **collision** with an unrelated world, drawn by a real random engine |
| **Memory** | None. It repeats itself | A project log the agent checks, so the next design **actively avoids** recent structural choices |
| **Type** | Inter at 48px | Type is the image, chosen with a reason and set at 8–28vw |
| **Motion** | Fade-up on everything | Five tiers, four questions, reduced motion designed in, and **Motomation** at the top |
| **Delivery** | "Here's your page!" | A six-axis critique score, a 25-point AI-default scan, and a handoff note |
---
What's inside
- **The Thinking Sequence:** seven steps that make an agent think like a designer: tension → concept → archetype + mutation → forced collision → signature move → anti-sameness check → restraint gate.
- **Mad Artist Mode:** ten invention techniques plus a collision engine (collide.mjs) that draws constraints with a cryptographic random number generator instead of the model's most likely choice, without repeats inside a run. It pushes ideas away from the default; it can't promise an idea nobody has had.
- **Five motion tiers:** CSS → GSAP/ScrollTrigger/SplitText/Lenis → View Transitions, Flip, Lottie, Rive → WebGL, shaders, WebGPU → **Motomation**.
- **Motomation (Tier 5):** scroll-as-film. Storyboards with timecodes, image-sequence, video-scrub and DOM-timeline techniques, ffmpeg pipelines, frame budgets, and a designed reduced-motion storyboard.
- **22 signature moves**, each with idea, reason, code, the detail that matters, an off-switch, and a **paste-ready prompt** for any AI tool.
- **A house style:** minimal canvas, maximal type, one accent, editorial grid, motion with weight.
- **3 dials** (Energy, Rhythm, Motion, each 1–3), set from the brief; no presets.
- **12 site categories** and **10 visual styles**, each with its own guidance.
- **Searchable data:** 68 components, 80 fonts (with axes, licences and script coverage, 15 of them Bangla, Devanagari or Arabic), 40 contrast-verified palettes (light and dark pairs), 50 motion recipes with timings, 12 imagery directions (one per category), 20 archetypes, 12 mutations, 40 collision sources.