CodeariaAcademy
GitHub repositorycommit this monthDesignDevelopment

AI Design Skills

6.6k

Two skills for your agent: one takes you from questions about the product to a finished landing page with a strict visual system, the other turns a static Figma mockup or screenshot into live animation exported as video and GIF. MIT.

We have not run it ourselves: described from the docs and the repository.

Open on GitHub

In numbers

skills in the set, more promised by the author
GitHub stars as of 26.10.2026
preview GIF, plus an MP4 for X and a GIF for the site
licence

See it in action

What it is

Ask an agent for a landing page and it usually jumps straight into code, handing back a page that looks like a thousand others. AI Design Skills changes the order of work. The landing-page-design skill first asks, in a single list, about the goal, the audience, objections and proof, then lays out the structure and copy, and only after that builds the page under strict rules: which fonts, spacing, corner radii, icons and animations are allowed and which are not. The second skill, design-to-motion, takes a finished mockup and brings it to life: elements appear from an empty screen, charts and lists play out their story on a loop, and the output is a clip for X plus two GIFs.

What sets it apart from its neighbours in this catalogue is scope. Emil Kowalski Skills teaches an agent the finer points of motion inside an interface; here one skill covers the whole path of a landing page from brief to styling rules, and the other covers showing off a finished design. The set is for anyone building a site with Claude Code, Cursor or Codex who wants the agent to think about a page that sells, not just about layout.

How it works

.claude/skills
In Claude Code you copy the skill's folder into the project's .claude/skills and then ask in plain words. For Cursor, Codex, Windsurf and Cline the SKILL.md file goes into their rules file; in Claude.ai you upload it to a project.
Part A · Part B
landing-page-design runs in two steps: first the questionnaire, page structure and copy, then the visual system. Before writing code the agent shows the plan, the above-the-fold copy, the FAQ and its choice of page type.
design-to-motion
Rebuilds the mockup in HTML one to one (from Figma via the API or from a screenshot), then adds a load-in from an empty state and an endless animation for each visual. Frames are captured step by step rather than by screen recording, and encoded with ffmpeg.
showcase · website
The animation has two modes: a standalone showcase clip, or sections right on the site where only the visual cards come alive, triggered on scroll.
Make it yours
Fonts, colours, spacing and motion settings live in one section of the file: edit it for your brand and the rest of the skill follows.

Know before installing

The rules impose a single taste: only Geist, Manrope or Poppins, icons from Phosphor, Solar or Iconamoon, no background gradients. If your project has its own design system, you will need to rewrite that section.
design-to-motion works best with a Figma link and an access token; from a flat image the layers don't separate perfectly, and the skill warns you about this itself.
A skill for redesigning an existing site is not part of the set; it lives in a separate repository by the same author.
Open on GitHub

Also read

Less code, more tests: Ponytail teaches Claude Code to stop writing what you don't needOctober 18, 2026Job Hunting With Claude Code: a Tailored Resume and Cover Letter for Every Posting in One Command (Setup From Scratch)October 17, 2026

Comments