Design
Plugin
ai-design-skills
A growing collection of design skills for AI coding tools — Claude Code, Cursor, Codex, Windsurf, and anything else that reads a markdown rules file. Each skill is a self-contained folder. Install the ones you need.
Plugin Signal53/100Fair
maintained65
capable14
documented75
adopted72
Install
$ npx -y skills add elayadesign/ai-design-skills --agent claude-code
What's inside
README
AI Design Skills
A growing collection of design skills for AI coding tools — Claude Code, Cursor, Codex, Windsurf, and anything else that reads a markdown rules file.
Each skill is a self-contained folder. Install the ones you need.
Skills
| Skill | What it does |
|---|---|
landing-page-design | Builds a landing page from scratch — intake questions, page structure, conversion copy, plus a full visual system (type, spacing, radius, motion) |
More on the way. Upgrading an existing site instead of building new? That one lives in its own repo since it predates this collection.
Install
Pick a skill from the table above, then swap <skill-name> below for its folder name.
mkdir -p .claude/skills
git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/
Then just ask, in plain language, for what that skill covers.
mkdir -p .cursor/rules
curl -o .cursor/rules/<skill-name>.md \
https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills/<skill-name>/SKILL.md
Or paste the file into Settings → Rules for AI.
Copy the skill's SKILL.md into whatever your tool uses for project rules:
| Tool | Path |
|---|---|
| Codex | AGENTS.md |
| Windsurf | .windsurfrules |
| Cline | .clinerules |
| Generic | paste into your system prompt |
Download the skill's SKILL.md and upload it to a Project, or attach it to a chat and say "follow this."
Make it yours
Every skill's design values (fonts, colors, spacing, motion) live in one section near the bottom of its file. Fork this repo, edit that section, and the rest of the skill follows automatically.
License
MIT. Use it, fork it, ship it, sell what you build with it. No attribution needed.
File tree
FAQ
ai-design-skills is a Claude Code plugin with 1 hand-picked skill for design work, indexed on Flowy. Install it with the command on its page. It includes landing-page-design. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is ai-design-skills?
- A growing collection of design skills for AI coding tools — Claude Code, Cursor, Codex, Windsurf, and anything else that reads a markdown rules file. Each skill is a self-contained folder. Install the ones you need.
- How do I install ai-design-skills?
- Run these in Claude Code: npx -y skills add elayadesign/ai-design-skills --agent claude-code. Then prompt normally.
- Does ai-design-skills auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is ai-design-skills free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it