Designer Stack
Stacks
SWE Stack23 skills: coding agents prove it before they say done. $99 Designer Stack New6 skills: motion design, storytelling, taste and proof. Free
Download free

6 skills · Claude Code and Codex · free, MIT

Your agent designs it, animates it and tells the story.

Motion-design films written as code, hooks that stop the scroll, taste with a real-browser gate. Built and run with Claude Opus 5.5. The film on this page was written by Opus 5.5 with motion-story.

Download the 6 skills See what each one does
28 s, 840 frames, each posed by its index. Smooth gate: pass.

Same model. Same brief. One skill.

Design flaws a page
29.22.2
Browser gate failures a page
45.40
Cost a page
$0.65 to $0.89

30 Sept 2026. Claude Opus 5.5 in Claude Code, all other skills off, one landing-page brief, 5 pages without skills and 5 with tastegate. Judged by impeccable 4.4.0 detect, which the skill never runs. Every plain page had three same-size icon cards, eyebrow labels and em dashes. None of the tastegate pages did.

The catalog

Load them together. Each one also works alone.

  1. 01

    motion-story

    Motion-design films as code. A story sheet first (one claim, the hook number on frame 0, 4 to 6 beats), then one shape that carries the story, spring motion, frame-index capture and a five-frame review.

    use motion-story to make a 25 s launch film for our app
  2. 02

    story-hooks

    The first line, the beats and the turn for posts, launches and films. Five hook patterns and a check every hook has to pass.

    write three hooks for this launch and keep the best
  3. 03

    tastegate

    Picks a design direction, builds on a craft floor, then renders the page at phone and desktop width and fails it on 17 rules: overlapping text, low contrast, AI gradients, equal-card grids.

    build the pricing page, use tastegate
  4. 04

    smooth-web-video

    Captures anything in a browser frame by frame, never by screen recording, and gates the file for stutter before it ships.

    render this page as a 1080x1350 video, smooth
  5. 05

    visual-qa

    Checks a page, screen, PDF or frame the way a person sees it, with a scan that catches text drawn over text.

    visual-qa the five frames of the film
  6. 06

    figma-bridge Beta

    Code to Figma and Figma to code through Figma's official MCP server: read a frame and build it, or send a gated page back to Figma as frames. Not yet run end to end on our own Figma account.

    build this Figma frame, then send the page back

How a film gets made

  1. story-hooksclaim, hook number, beats
  2. motion-storyone HTML stage, one shape
  3. smooth-web-videoframe-index capture, gate
  4. visual-qafive frames, no overlaps

Install in a minute

Unzip, copy the skills folder, ask your agent which skills it has. Video skills need Node 18+, ffmpeg and Playwright.

Download free, MIT 
# Claude Code
mkdir -p ~/.claude/skills
cp -r skills/* ~/.claude/skills/

# Codex
cp -r skills/* ~/.codex/skills/

The other stack

SWE Stack: 23 skills that make coding agents prove their work.

In 103 real requests its gate refused 36 "pass" claims the agent could not prove.

See SWE Stack