elayadesign/ai-design-skills

Worth a look if you already use an AI coding tool to produce marketing pages and want a repeatable design procedure instead of starting from a blank prompt; it is a single-skill collection today, not a design system.

The problem

You want a landing page for a new product, and your AI coding tool is happy to write HTML and Tailwind, but the output drifts: vague section order, placeholder copy, and type/spacing choices made ad hoc per prompt. The work before-and-after is narrow but real. Instead of prompting "make me a landing page" and then rewriting sections and spacing by hand, you drop one markdown skill into the tool's rules directory and ask for the page in plain language. The tool then works through intake questions, page structure, conversion copy and a defined visual system — fonts, spacing, radius, motion — before producing the page.

What's different

Each skill is a self-contained folder whose main artifact is a SKILL.md file. The mechanism is not a plugin or an npm package: it is a prompt document that the coding tool reads as project rules. Installation is therefore a copy step — into .claude/skills for Claude Code, .cursor/rules for Cursor, or AGENTS.md, .windsurfrules, .clinerules and a system prompt for other tools install instructions. Claude.ai users without a terminal can upload the file to a Project or attach it to a chat instead.

The practical benefit is that the design decisions live in one editable section near the bottom of the file; fork the repo, change the fonts, colors, spacing and motion values, and the rest of the skill follows project instructions. The most important trade-off follows from that same design: this is a general recipe, and its specificity is the author's taste rather than a validated conversion framework. Nothing in the repository demonstrates that pages built with it perform better; the skill's contents adapt content realism and motion ideas from another MIT-licensed skill repository, credited at the end of the skill file landing page skill. If your brand already has a token set and component library, you will be replacing the skill's values rather than using them.

Who should try it

Good fit: a solo developer or small team using Claude Code, Cursor or a similar tool to ship a first marketing page, who wants the AI to ask intake questions and commit to a coherent type and spacing system instead of inventing one each time. Also a reasonable fit for an agency-style workflow where the skill is forked once and the values section becomes the house style.

Poor fit: teams with an existing design system who need the page to consume their tokens and components — the skill supplies its own visual values instead. Also a poor fit if you are redesigning an existing site rather than building new; the author keeps that as a separate repository, redesign-skill, which adds a second install surface redesign skill.

Requirements and limitations

You need a coding tool that reads project rules or skill folders, or an AI chat where you can attach the file. The README covers Claude Code, Cursor, Codex, Windsurf, Cline and a generic system-prompt path project overview. No build tooling, runtime or dependency is involved, so ongoing upkeep is mostly re-copying the file when the upstream skill changes, plus reviewing edits you make to the values section.

The collection currently lists exactly one skill, with "more on the way." Skills are installed individually rather than as a set, so there is no single install that covers future additions. Finally, the output quality depends on the model following a long procedural prompt; treat the first generated page as a draft to review, not a finished site.

HotRepo's take

HotRepo recorded one daily-board observation: 9,086 stars on 2026-10-27, +1,395 that day, on the daily trending board. The repository was created 2026-07-29 and the sample spans a single date, so persistence of interest cannot be judged from this evidence. Before adopting, read the values section at the bottom of the landing page skill and check whether its fonts and spacing assumptions match your project landing page skill.