Guide · Open source
How to use ai-design-skills: install and apply landing page design rules
Updated · written with AI from the project's own documentation and checked against our catalogue data
ai-design-skills is an open-source collection of markdown files that give AI coding tools design instructions. This guide is for developers, designers and marketers who want an AI assistant to follow a consistent approach when building a landing page. By the end you will know which skill to pick, how to install it into Claude Code, Cursor or another rules-file tool, and how to adjust its design values.
AI Design Skillselayadesign/ai-design-skills · ★ 13.5k · MIT Install options & downloads Quick start
- 1Pick a skill. Choose landing-page-design from the skills table, since it is the only skill listed in the README.
- 2Install it for your tool. Follow the Claude Code, Cursor, or other tool instructions to place the SKILL.md content where your tool reads rules.
- 3Ask for a landing page. Describe the page in plain language so the assistant can run the intake questions from the skill.
- 4Answer the intake questions. The skill starts with intake questions covering the page's purpose and content.
- 5Review structure and copy. Check that the page structure and conversion copy match your goals before generating code.
- 6Apply the visual system. Confirm the type, spacing, radius and motion choices match your brand, or edit them in your fork.
What ai-design-skills is and what it does
Each skill in the repository is a self-contained folder containing a markdown file of design instructions. The AI tool reads that file as guidance when you ask it for work. The skills are plain text and do nothing on their own.
The one skill listed in the README is landing-page-design. It covers building a landing page from scratch, including intake questions, page structure, conversion copy, and a visual system for type, spacing, radius and motion.
Check whether this skill fits your job
Use it if you are building a new landing page with an AI coding or rules-file tool. It suits developers, designers who want an assistant to follow a defined visual system, and marketers drafting conversion-focused copy.
- Not for upgrading an existing site. The README points to a separate redesign-skill repository for that.
- Not for anyone without an AI coding or rules-file tool, because the skills need one to be read.
- Not for anyone who needs a finished, runnable component library or framework.
Install the skill in Claude Code
Clone the repository to a temporary folder, then copy the skill folder you want into your project's .claude/skills/ directory. Replace <skill-name> with the folder name from the skills table, which is landing-page-design for the current skill.
After installing, ask for what the skill covers in plain language.
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/Install the skill in Cursor
Download the skill's SKILL.md file as a rules file into .cursor/rules/. You can also paste the file into Settings → Rules for AI.
mkdir -p .cursor/rules
curl -o .cursor/rules/<skill-name>.md \
https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills/<skill-name>/SKILL.mdUse other tools and Claude.ai
For Codex, Windsurf, Cline or other tools, copy the skill's SKILL.md into the file that tool uses for project rules. The README lists AGENTS.md for Codex, .windsurfrules for Windsurf and .clinerules for Cline. For a generic tool, paste the content into your system prompt.
Without a terminal, download the SKILL.md file and upload it to a Claude.ai Project, or attach it to a chat and say that the assistant should follow it.
- Codex: AGENTS.md
- Windsurf: .windsurfrules
- Cline: .clinerules
- Generic: paste into your system prompt
Customize the design values
The skill's design values for fonts, colors, spacing and motion sit in one section near the bottom of its file. To change them, fork the repository, edit that section and use your fork as the source for your copy. The rest of the skill follows those values automatically.
What people use it for
- Generating a landing page from scratch with an AI coding tool that follows a set visual system
- Drafting conversion-focused landing page copy with an assistant
- Keeping spacing, type and motion consistent across pages built with the same rules file
- Forking the repository to set your own font, colour and motion values
Frequently asked questions
Is ai-design-skills free to use?
The repository is licensed under MIT. The README says you may use it, fork it, ship it and sell what you build with it, and no attribution is needed.
What do I need to install ai-design-skills?
The source does not list prerequisites. In practice you need an AI coding or rules-file tool such as Claude Code, Cursor, Codex or Windsurf, or Claude.ai, because the skills are plain instructions that do nothing on their own.
Which tools does ai-design-skills work with?
The README names Claude Code, Cursor, Codex and Windsurf, and says it works with anything that reads a markdown rules file. It also documents Cline and Claude.ai uploads.
Can I use it to redesign an existing website?
The landing-page-design skill is for building new pages. The README says upgrading an existing site is covered by a separate redesign-skill repository.
How do I change the colours or fonts in the skill?
Fork the repository and edit the section near the bottom of the skill file that holds fonts, colours, spacing and motion. The rest of the skill follows those values.
Are there alternatives to ai-design-skills?
The source does not name comparable projects, so this guide cannot compare it with others. You can look at the separate redesign-skill repository the README links to if you are working on an existing site.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use ai-design-skills if you already work with an AI coding or rules-file tool and want consistent design guidance for new landing pages, especially if you are willing to edit the values section in a fork. Pick something else if you are redesigning an existing site, want a finished component library, or do not use an AI tool that reads rules files.
Install options & downloads