# AI use cases for AI Design Skills (elayadesign/ai-design-skills) Repo: [elayadesign/ai-design-skills](https://github.com/elayadesign/ai-design-skills) | Use cases: 3 | Page: https://dedupedai.com/use-cases/elayadesign-ai-design-skills/ AI Design Skills is a collection of design skills for AI coding tools such as Claude Code, Cursor, Codex and Windsurf. Each skill is a self-contained folder; the first, landing-page-design, builds a landing page from scratch with intake questions, page structure, conversion copy and a full visual system for type, spacing, radius and motion. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Build a landing page in Claude Code with intake questions and conversion copy: https://dedupedai.com/use-cases/elayadesign-ai-design-skills/build-a-landing-page-in-claude-code-with-landing-page-design/ - Add the landing page design skill as a Cursor rule: https://dedupedai.com/use-cases/elayadesign-ai-design-skills/add-landing-page-design-as-a-cursor-rule/ - Fork the skill and swap in your own brand fonts and colors: https://dedupedai.com/use-cases/elayadesign-ai-design-skills/fork-ai-design-skills-to-use-your-brand-values/ ## How to build a landing page in Claude Code with intake questions and conversion copy with AI Design Skills Repo: [elayadesign/ai-design-skills](https://github.com/elayadesign/ai-design-skills) | Difficulty: Beginner | Time: 30 minutes | Basis: From the README Copy the landing-page-design skill into Claude Code and ask for a page in plain language. **Who it is for:** A solo founder who needs a launch page and wants the agent to ask the right questions first. **The problem:** Agents jump straight to code without asking about audience, offer or structure, so the copy is generic. **The outcome:** A landing page built from your answers, with page structure, conversion copy and a full visual system. ### Steps 1. Run `mkdir -p .claude/skills` 2. Run `git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills` 3. Copy skills/landing-page-design from that clone into .claude/skills/ 4. Ask Claude Code in plain language for a landing page for your product 5. Answer its intake questions, then review the structure and copy before the visual pass ### Prompt to paste into your agent ```text Install the landing-page-design skill from elayadesign/ai-design-skills into .claude/skills, then build a landing page for . Ask me the intake questions first and show the page structure before writing code. ``` ### Caveat Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/elayadesign-ai-design-skills/build-a-landing-page-in-claude-code-with-landing-page-design/ ## How to add the landing page design skill as a Cursor rule with AI Design Skills Repo: [elayadesign/ai-design-skills](https://github.com/elayadesign/ai-design-skills) | Difficulty: Beginner | Time: 10 minutes | Basis: From the README Drop the skill into .cursor/rules or Settings so Cursor follows the same landing page process. **Who it is for:** A Cursor user who wants design rules applied to every landing page request in a project. **The problem:** Without project rules, every new chat starts from zero design choices. **The outcome:** A Cursor project that applies the landing-page-design process whenever you ask for a page. ### Steps 1. Run `mkdir -p .cursor/rules` 2. Download skills/landing-page-design/SKILL.md from the repo into .cursor/rules with curl, as the README shows 3. Or paste the file into Settings, Rules for AI 4. Ask Cursor for a landing page and check that it follows the skill's intake and structure ### Prompt to paste into your agent ```text Add elayadesign/ai-design-skills landing-page-design SKILL.md to .cursor/rules in this project, then build a landing page for following it. ``` ### Caveat Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/elayadesign-ai-design-skills/add-landing-page-design-as-a-cursor-rule/ ## How to fork the skill and swap in your own brand fonts and colors with AI Design Skills Repo: [elayadesign/ai-design-skills](https://github.com/elayadesign/ai-design-skills) | Difficulty: Beginner | Time: 20 minutes | Basis: From the README Edit the one design values section in a fork so every page the agent builds uses your brand. **Who it is for:** A small studio that wants agent-built pages to match their house style every time. **The problem:** Default design values make every agent-built page look like the skill author's taste, not yours. **The outcome:** A forked skill whose fonts, colors, spacing and motion match your brand, used by Codex, Windsurf or Claude Code. ### Steps 1. Fork elayadesign/ai-design-skills on GitHub 2. Open skills/landing-page-design/SKILL.md and find the design values section near the bottom 3. Change fonts, colors, spacing and motion; the rest of the skill follows automatically 4. Copy the edited SKILL.md into AGENTS.md for Codex, .windsurfrules for Windsurf or .clinerules for Cline 5. Build one test page and compare it with your brand guide ### Prompt to paste into your agent ```text In my fork of elayadesign/ai-design-skills, set the design values section of landing-page-design to these brand values: . Then copy it into AGENTS.md and build a test landing page for . ``` ### Caveat Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/elayadesign-ai-design-skills/fork-ai-design-skills-to-use-your-brand-values/