AI Design Skills — Landing Page Design Skill

Saw a tweet from Shlcy (@CY160909) that opens with a plain statement of taste: this design genuinely landed on the aesthetic.

The screenshot is the evidence. A phone showing a gallery page, two columns of landing page thumbnails, and they do not look like each other. A Mediterranean coastal town in cream and dusty blue. A blue sky with a traffic light and a speed limit sign. A teal underwater scene with sharks. A peach gradient with a CV card floating in it. A navy page with a marionette on strings. A deep red page with a figure in a conical hat.

Twelve thumbnails, twelve different worlds, and no shared template underneath them.

What it actually is

The thing behind it is open source: AI Design Skills.

Right now the repo ships a landing-page-design skill, and it works with Claude Code, Cursor, Codex — anything that can read a rules file.

The important part is what it is not. It is not a finished page template you swap text into. It is a set of production rules, from content through to visuals, and the tweet breaks them into three layers.

Page planning comes first. Work out what the product sells, who it sells to, and what action a visitor is supposed to take. Only then lay out the hero, the selling points, the usage steps, the FAQ and the call to action.

Then the visual system: unify typeface, type scale, spacing, corner radius, palette and scroll motion. The stated goal is to stop AI from producing the same default-looking page every time.

Then delivery detail. Button hover states, loading states, empty states, error states, form validation, plus mobile and basic accessibility.

The layer that usually goes missing

Delivery detail is where most generated pages fall apart. Ask a model for a landing page and you get a hero section that screenshots well; ask it what happens when the form submit fails and the answer is often nothing.

The repo has moved a little past the tweet. The README now lists two skills, not one. Alongside landing-page-design there is design-to-motion, which takes a static design and turns it into a pixel-exact animated showcase — empty state through to loaded, every element acting out its story on a loop, background left untouched, exported as an MP4 for X plus website and 800×500 GIFs.

Install is deliberately unglamorous. For Claude Code, clone the repo and copy the skill folder into your skills directory. For Cursor, download the SKILL.md file into a rules file, or paste it into Settings. For Codex, Windsurf and Cline, it goes wherever that tool keeps project rules — AGENTS.md, dot windsurfrules, dot clinerules. For Claude dot ai with no terminal at all, download the file, upload it to a Project, and say follow this.

There is also a make-it-yours section worth knowing about. Every skill keeps its design values — fonts, colours, spacing, motion — in one section near the bottom of its own file. Fork the repo, edit that section, and the rest of the skill follows.

MIT licensed. Use it, fork it, ship it, sell what you build with it. No attribution needed.

The replies are unusually useful

Which suggests the rules are landing on a real pain point.

One person (@aqua1450) added a form detail the skill should probably absorb: after a failed submit, do not clear what the user already typed — carry it back to the field that errored. Fill in a long form, lose it all, and no amount of visual polish will stop people closing the tab.

@ntyxg picked up on the same layer from a different angle: empty states and error states are specified, so acceptance testing is not just staring at the hero section.

@growaiskills pushed further on empty states — do not just write no data yet, give an example and a clear first step, so someone arriving from the landing page can act immediately.

@ContextSprite turned delivery detail into an actual test plan: fill the form with the phone keyboard open, navigate the whole page with Tab only, simulate a failed submit. Put those operations into the rules, and you find out whether the page works far more reliably than from one screenshot of the top fold.

Everyone agreed on the order

More than one person backed the planning sequence, which is the part that has nothing to do with pixels.

@AetrixEmby: decide what you are selling and to whom before talking about visuals — without content holding it up, even complete rules are an empty shell.

@HM: putting what-and-who ahead of colour is the right order. If the hero does not say what the product solves, the motion design is just a screensaver.

And the complaint that started it is also in there. @tylerthesmurf96, writing front-end in Cursor: the most painful thing is a screen full of default Tailwind grey, and putting interaction states and visual specs directly into the rules saves a lot of grief.

Numbers

As of October 25, 2026:

• 432 likes, 36 retweets, 479 bookmarks, 19,843 views, 20 replies

Bookmarks again outrun likes — 479 against 432.

Original tweet: https://x.com/CY160909/status/2114213361621540994 Repo link (author's own reply): https://x.com/CY160909/status/2114213361982296227 Repository: https://github.com/elayadesign/ai-design-skills