Apply consistent design rules to AI coding tools for landing pages and Figma
When you ask an AI coding tool to 'create a landing page,' the result often lacks design sense. This repository organizes the standards AI should follow during design into Markdown files, ensuring the tool applies a consistent layout and color system. By installing only the skill folders you need, tools like Claude Code or Cursor automatically adhere to that style.
Two skills: landing pages and Figma
Currently, there are two skills: landing page creation and Figma design. The landing page skill gathers requirements through questions, then builds a visual system that includes page structure, conversion-focused copy, typography, spacing, border radius, and motion. The Figma skill generates actual structural designs featuring spacing and color variables, text styles, auto layout, and components with all states. It also creates base frames that update automatically when tokens change. A skill for revamping existing sites is managed separately because it predates this repository, so it is not included here.
Installing skills and applying them to tools
Node.js is required for installation. Running the npx skills add elayadesign/ai-design-skills command displays the list of skills in the repository and prompts you to select the skill to install and the AI tool to apply it to. You can use flags to install a specific skill or specify a particular tool. Installed skills are stored in the .claude/skills/ folder for Claude Code, and in the .agents/skills/ folder for other tools like Cursor and Codex. You can reflect changes using the npx skills update command. After installation, you simply request your desired design in natural language as usual.
Change only design values to match your style
At the bottom of each skill file, design values such as fonts, colors, spacing, and motion are grouped in a single section. After forking this repository, if you modify only that section, the rest of the skill automatically operates according to the modified values. You can adjust the AI's output to match your brand or project style by changing only the design tokens, without needing to touch complex logic.
License and scope of use
This repository follows the MIT license. You can freely use, fork, distribute, and sell what you create with it, with no obligation to attribute the source. The landing-page-design skill references content realism and motion ideas from Leon Lin's taste-skill, which is also under the MIT license. If you feel that design consistency is lacking when using AI coding tools, we recommend trying this skill. However, since the currently provided skills are limited to landing pages and Figma design, you must extend them yourself for other types of design work.
