ai-design-skills: Open-source design rules for Claude Code and Cursor

X postElayaResource

Designer Elaya has released an open-source repository of design skills for AI coding tools like Claude Code, Cursor, and Windsurf. The markdown rule sets guide language models in generating landing pages and animations.

Key points

  1. Elaya created multiple landing pages over two months using Higgsfield, Claude, and Cursor alongside a custom AI designer skill.
  2. The ai-design-skills repository provides self-contained markdown files (SKILL.md) compatible with Claude Code, Cursor, Codex, Windsurf, and Cline.
  3. The 'landing-page-design' skill handles initial intake questions, page architecture, conversion copy, and visual design systems covering typography, spacing, radius, and motion.
  4. The 'design-to-motion' skill converts static interfaces into looped animation showcases exportable as MP4 or GIF.
  5. Released under the MIT license, the skills incorporate concepts from projects by Leon Lin, Emil Kowalski, and Dylan Tarre.

Why it matters

AI-generated web interfaces frequently suffer from repetitive, unpolished styling. Embedding explicit rules and design token constraints into prompt files helps coding assistants follow disciplined typography, spacing, and component hierarchies.

Analysis

This project illustrates the growing shift toward structured context files for AI code editors. Rather than repeatedly prompting for styling conventions, teams store design values in standard paths like .cursor/rules or .claude/skills. The separation of core logic from customisable design values allows developers to tailor output styles while keeping functional design routines intact.

Original post

Elaya

@elayadesigns · 24 October 2026

I designed all of these landing pages in the last two months, using @higgsfield , Claude, and Cursor with my custom AI designer skill. The skill is open source: t.co/Gs1RT1BZxi t.co/XhWtFFoLNu

10.7k likes209 replies18.6k bookmarks742.3k views

View on X
Selected replies (5)
  • @TheSlutBuster @elayadesigns @LexnLin @higgsfield Nigga did you have Claude write your apology?
  • @avir_oss @elayadesigns @higgsfield these look like tasteless, bubblegum approximations of what one would expect to see from the best design agencies (the kind that land on awwwards) as someone who was in that industry, there's a lot of mid-to-bottom bsns's who'd eat this up due to the gimmicks in themself
  • @Ochman98Ochman @LexnLin @elayadesigns @higgsfield hi, im working wirh Claude on Max since 06.2025, but i'm lame compared to you, Tell me where and how did you learned all that? can i yours repository commercialy if crédits noted or no. im reaching out to businesses Here in Fribourg (CH) but the stuff i offer inférior to yours .
  • @itsthedonhashim @elayadesigns @higgsfield @elayadesigns nice work! watch out for font consistency across pages, it can shift the vibe a lot.
  • @BlackshirtMedia @elayadesigns @higgsfield Sick...what do page speed load times look like?

Mentioned links

Links and tools from this entry

Summary generated by AI (Gemini 3.8 Flash, 27 October 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • X post:Elaya

    AI Design Skills: Rule Sets for Landing Pages in AI Coding Tools

    Elaya showcases a landing page workflow powered by the open-source repository ai-design-skills. The repository offers markdown-based rule files that equip AI coding tools such as Claude Code, Cursor, and Windsurf with structured design systems, page architectures, and conversion copy instructions.

    404bookmarks31.6kviews

    AI & LLMs· Tool

  • Repository:elayadesign/ai-design-skills

    ai-design-skills: Markdown-based Design Skills for AI Coding Tools

    The elayadesign/ai-design-skills repository provides modular Markdown rule sets for AI coding assistants. These skills can be integrated into tools such as Claude Code, Cursor, and Windsurf to produce structured landing pages and consistent UI systems.

    2kstars

    AI & LLMs· Resource

  • Link:cuellarfr

    Design Skills: Curated UI and UX Skills for AI Coding Agents

    cuellarfr/design-skills provides ten structured skill packages for developer agents including Claude Code, Cursor, Codex, and OpenCode. The library covers areas ranging from UX research and accessibility to design systems and UX writing.

    AI & LLMs· Resource

  • X post:Adham Dannaway

    Design Skills for AI Agents: Equipping Coding Agents with UX and UI Knowledge

    Adham Dannaway highlights 'Design Skills for AI Agents', an open collection developed by Carlos Cuéllar. The repository provides structured design heuristics, WCAG 2.2 accessibility rules, and design system frameworks for tools such as Claude Code, Cursor, and Codex.

    100bookmarks5.2kviews

    AI & LLMs· Resource

  • Repository:nextlevelbuilder/ui-ux-pro-max-skill

    UI UX Pro Max Skill: Design Intelligence for AI Coding Assistants

    The open-source UI UX Pro Max Skill equips AI coding tools with structured UI/UX knowledge, integrating 192 reasoning rules and 79 searchable design styles for cross-platform interface development.

    132.1kstarsPython

    AI & LLMs· Tool

  • X post:0xMarioNawfal

    Open-source repositories to upgrade UI design in AI coding agents

    An X post highlights open-source repositories designed to equip AI coding tools like Claude Code, Cursor, and Codex with design systems, MCP integrations, and anti-template guardrails.

    6.5kbookmarks264.2kviews

    AI & LLMs· Resource

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.