ai-design-skills

Overview

A growing collection of design skills packaged as self-contained markdown rules files for AI coding assistants such as Claude Code, Cursor, Codex, and Windsurf. Each skill installs individually; the first builds landing pages with intake questions, page structure, conversion copy, and a full visual system. Fonts, colors, spacing, and motion live in one editable section for easy customization.

README Preview

# AI Design Skills\n\nA growing collection of design skills for AI coding tools — Claude Code, Cursor, Codex, Windsurf, and anything else that reads a markdown rules file.\n\nEach skill is a self-contained folder. Install the ones you need.\n\n---\n\n## Skills\n\n| Skill | What it does |\n|---|---|\n| [`landing-page-design`](./skills/landing-page-design/SKILL.md) | Builds a landing page from scratch — intake questions, page structure, conversion copy, plus a full visual system (type, spacing, radius, motion) |\n\nMore on the way. [Upgrading an existing site instead of building new?](https://github.com/elayadesign/redesign-skill) That one lives in its own repo since it predates this collection.\n\n---\n\n## Install\n\nPick a skill from the table above, then swap `` below for its folder name.\n\n\nClaude Code\n\n```bash\nmkdir -p .claude/skills\ngit clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills\ncp -r /tmp/ai-design-skills/skills/ .claude/skills/\n```\n\nThen just ask, in plain language, for what that skill covers.\n\n\n\nCursor\n\n```bash\nmkdir -p .cursor/rules\ncurl -o .cursor/rules/.md \\n  https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills//SKILL.md\n```\n\nOr paste the file into **Settings → Rules for AI**.\n\n\n\nCodex / Windsurf / other\n\nCopy the skill's `SKILL.md` into whatever your tool uses for project rules:\n\n| Tool | Path |\n|---|---|\n| Codex | `AGENTS.md` |\n| Windsurf | `.windsurfrules` |\n| Cline | `.clinerules` |\n| Generic | paste into your system prompt |\n\n\n\nClaude.ai (no terminal)\n\nDownload the skill's `SKILL.md` and upload it to a Project, or attach it to a chat and say *"follow this."*\n\n\n---\n\n## Make it yours\n\nEvery 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.\n\n---\n\n## Credits\n\n`landing-page-design` adapts content realism and