AI Design Skills: Put landing-page design rules into AI coding tools
A landing-page design skill for AI coding tools that puts structure, copy, and visual rules into SKILL.md.
GitHub elayadesign/ai-design-skills Updated 2026-10-28 Branch main Stars 9.4K Forks 672
Markdown rules files AI coding tools landing-page-design Claude Code

🧭 Decision Guide

Why trending now: Cannot be determined from the available materials

Try it if you

  • You use Claude Code, Cursor, Codex, or Windsurf to generate a new landing page
    The README introduction explicitly supports Claude Code, Cursor, Codex, Windsurf, and other tools that read Markdown rules files
  • You need to constrain page structure, conversion copy, fonts, spacing, radius, and motion together
    The README Skills table describes landing-page-design as covering these areas

Skip it if you

  • You need to redesign an existing site rather than build a landing page from scratch
    The README explicitly directs existing-site redesign work to the separate redesign-skill repository
  • You need multiple mature skills, release history, or explicit framework support
    The README currently lists only landing-page-design; metadata shows 0 releases and a Mixed/Unknown tech stack

Requirements

  • You need an AI coding tool that reads Markdown rules files; the README lists Claude Code, Cursor, Codex, and Windsurf.
  • You need to choose a skill folder name from the Skills table, such as landing-page-design.
  • For Claude Code, copy the skill into .claude/skills; for Cursor, use .cursor/rules.

First step (verbatim from README)

mkdir -p .claude/skills

Watch out

  • The Cursor installation command still requires replacing <skill-name> with a folder name from the Skills table
    The Install section says to replace the placeholder with the skill folder name
  • Custom design values must be edited in the relevant bottom section of the skill file, not a separate config file
    The Make it yours section says fonts, colors, spacing, and motion live near the bottom of the file

Alternatives

  • redesign-skill：Better when an existing site needs redesigning rather than building a landing page from scratch
    Skills section of the README

Not stated in the README

  • The README does not specify the frontend framework, CSS approach, or component library generated by landing-page-design.
  • The README does not provide version requirements for Claude Code, Cursor, Codex, or Windsurf.
  • The README does not describe test cases, output examples, or supported browser coverage for the skill file.
  • The README does not state when skills beyond landing-page-design will be released.

💡 Deep Analysis

6
No I am using Windsurf to redesign an already-launched website rather than create a new marketing page from scratch. Should I install this repository’s `landing-page-design` skill?
For: A Windsurf developer who needs to redesign an existing site rather than create a new landing page

No, not directly, because the README limits landing-page-design to building a landing page from scratch, while redesigning an existing site is a different workflow.

  • The skill description says “Builds a landing page from scratch” and focuses on intake questions, page structure, conversion copy, and a full visual system.
  • The README explicitly links to a separate redesign-skill for “Upgrading an existing site instead of building new”.
  • That redesign skill is not contained in this repository, so the link should not be treated as a skill already included here.

The current repository is therefore better suited to a new landing page. Existing routes, components, content migration, and compatibility constraints should not be assumed to be covered by this skill.

  • Skills: `landing-page-design` — “Builds a landing page from scratch”
  • Skills: “Upgrading an existing site instead of building new? That one lives in its own repo”
  • Linked target: `https://github.com/elayadesign/redesign-skill`
Not stated in the README：The README does not specify which frameworks, installation paths, or redesign workflows the separate `redesign-skill` supports.；The README does not explain how the current skill handles existing routes, component libraries, or content models.
Yes I am using Claude Code to build a marketing landing page from scratch, and I want AI to handle intake questions, page structure, conversion copy, and the visual system. Is this project suitable for my workflow?
For: An independent developer using Claude Code to build a marketing landing page from scratch

Yes, it fits because the README explicitly defines landing-page-design as a skill for building a landing page from scratch and covers the four areas you listed.

  • Each skill is a self-contained folder whose main artifact is SKILL.md; no dedicated runtime or service is required.
  • For Claude Code, the documented installation copies the skill into .claude/skills/, after which you ask in plain language for work covered by the skill.
  • The visual system includes type, spacing, radius, and motion rather than only producing page code.

It is not a complete frontend generator, however. The README does not promise browser preview, automated testing, responsive validation, or conversion-rate measurement, so those capabilities still depend on your Claude Code project and review process.

  • Skills: `landing-page-design` — “Builds a landing page from scratch — intake questions, page structure, conversion copy, plus a full visual system”
  • Install / Claude Code: `mkdir -p .claude/skills` and `cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/`
  • Make it yours: design values include “fonts, colors, spacing, motion”
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/
Not stated in the README：The README does not specify a required Claude Code version.；The README does not specify compatibility with particular frontend frameworks, component libraries, or browser versions.
Yes I do not have terminal access and can work only in a Claude.ai Project or chat. I want Claude to follow `landing-page-design` for page structure, conversion copy, and visual rules. Is this project suitable?
For: A product manager or designer without terminal access who uses Claude.ai conversations to generate a landing page

Yes, it fits because the README provides a terminal-free Claude.ai workflow: download SKILL.md, upload it to a Project, or attach it to a chat and ask the model to follow it.

  • The skill covers page structure, conversion-oriented copy, and a full visual system including type, spacing, radius, and motion.
  • You do not need to run git clone, install dependencies, or configure a dedicated API; the rule file itself is the main deliverable.
  • The file can be saved and edited, with design values concentrated near the bottom for brand customization.

The README does not specify Claude.ai Project file-size limits, rule persistence behavior, or precedence among multiple chat attachments. It also does not provide page preview or automated quality validation.

  • Claude.ai (no terminal): “Download the skill's `SKILL.md` and upload it to a Project, or attach it to a chat and say ‘follow this.’”
  • Skills: page structure, conversion copy, and a full visual system
  • Make it yours: design values are concentrated near the bottom of the skill file
Not stated in the README：The README does not specify Claude.ai Project attachment size, persistence, or context limits.；The README does not say whether Claude.ai will consistently follow the uploaded skill in every subsequent conversation.
Yes I use Cursor to build a landing page and already have brand fonts, colors, spacing, and radius values. Can I change only the design parameters without rewriting the entire AI workflow?
For: A product developer using Cursor who needs to encode existing brand fonts and colors into a rules file

Yes, it fits because the project centralizes design parameters near the bottom of each skill file, specifically so brand customization does not require rewriting the workflow.

  • The “Make it yours” section names fonts, colors, spacing, and motion, and says that editing this section makes the rest of the skill follow automatically.
  • Cursor can download SKILL.md to .cursor/rules/<skill-name>.md, or the file can be pasted into “Settings → Rules for AI”.
  • The rule is ordinary Markdown, so a team can read, version, and review it as part of the repository.

The boundary is that the README does not explain Cursor’s rule precedence, context limits, or behavior when multiple rules conflict. If your project already has design rules, the final precedence remains unspecified.

  • Make it yours: “Every skill's design values (fonts, colors, spacing, motion) live in one section near the bottom of its file.”
  • Install / Cursor: `curl -o .cursor/rules/<skill-name>.md https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills/<skill-name>/SKILL.md`
  • README introduction: “Each skill is a self-contained folder.”
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
Not stated in the README：The README does not specify precedence when existing Cursor project rules coexist with this skill.；The README does not say whether brand fonts require separate installation, hosting, or configuration.
Yes I use Cline, and my project cannot add a runtime, database, or server infrastructure. Can I still use this project as a version-controlled design-rule dependency?
For: A Cline developer who wants repository-based design rules without adding a runtime, database, or server infrastructure

Yes, it fits because the deliverable is a Markdown rule file rather than a deployable code-generation service or runtime component.

  • The README defines each skill as a self-contained folder and describes installation as copying or downloading SKILL.md.
  • Cline’s documented target is .clinerules, so the rule can live inside the project structure and be version-controlled.
  • The project data lists the main language as Unknown and provides no language distribution, package releases, or runtime components; the README requires no database, server, or build system.
  • The MIT License allows users to fork, modify, publish, and commercially use what they build.

It is not a conventional software-package dependency, however. The README does not guarantee model compliance or explain conflicts between this rule and existing project instructions.

  • README introduction: “Each skill is a self-contained folder.”
  • Codex / Windsurf / other: `Cline | .clinerules`
  • Project data: `main_language: Unknown`, `language_distribution: {}`, `release_count: 0`
  • License: “MIT. Use it, fork it, ship it, sell what you build with it.”
Not stated in the README：The README does not specify formal version tags, a changelog, or dependency-locking mechanisms.；The README does not specify Cline’s exact loading precedence for `.clinerules`.
It depends I switch among Codex, Windsurf, and Cline and do not want to maintain three separate design prompts for the same project. Can this repository let me reuse one `SKILL.md`?
For: An independent developer switching among Codex, Windsurf, and Cline who wants to reuse one landing-page design rule

It depends, because the project documents cross-tool file locations, but the README does not guarantee that every tool will follow the same Markdown rule completely.

  • Codex uses AGENTS.md, Windsurf uses .windsurfrules, Cline uses .clinerules, and the Generic option is to paste the content into a system prompt.
  • The skill is a self-contained SKILL.md, so the rule asset can be copied without being tied to a runtime or programming language.
  • The README shows one primary skill, landing-page-design, focused on building a landing page from scratch rather than every website-design task.

It is therefore suitable as a shared source of design rules, but the documented paths do not establish identical loading timing, context capacity, or instruction-following behavior across the three tools.

  • Codex / Windsurf / other: `Codex | AGENTS.md`, `Windsurf | .windsurfrules`, `Cline | .clinerules`
  • README introduction: “anything else that reads a markdown rules file”
  • Skills table: currently lists one skill, `landing-page-design`
Not stated in the README：The README does not specify rule precedence or context limits for Codex, Windsurf, and Cline.；The README provides no cross-tool output-consistency test results.

✨ Highlights

  • Supports Claude Code, Cursor, Codex, and Windsurf
  • landing-page-design covers structure, copy, and visual systems
  • The MIT license allows modification, distribution, and commercial use

🔧 Engineering

  • landing-page-design builds landing pages from intake questions through structure, conversion copy, and visual systems
  • SKILL.md can be copied into .claude/skills, .cursor/rules, or AGENTS.md
  • Fonts, colors, spacing, and motion are centralized near the bottom of the skill file for forking and editing

⚠️ Risks

  • The current README lists only landing-page-design; other skills are not yet provided
  • The project has 1 contributor, 0 releases, and 8 recent commits
  • The README does not specify the generated code framework, runtime environment, or test coverage

👥 For who?

  • Frontend developers building new landing pages with Claude Code or Cursor
  • AI coding teams that need to encode design rules in Markdown rules files
  • Projects using rules-file tools such as Codex, Windsurf, or Cline