ai-design-skills: Open-Source-Designregeln für Claude Code und Cursor

X-PostElayaSammlung

Designer Elaya hat eine Open-Source-Sammlung von Design-Skills für KI-Tools wie Claude Code, Cursor und Windsurf veröffentlicht. Die Markdown-Regeln leiten Sprachmodelle bei der Erstellung von Landing Pages und Animationen an.

Das Wichtigste

  1. Elaya erstellte mehrere Landing Pages mithilfe von Higgsfield, Claude, Cursor und maßgeschneiderten KI-Designer-Skills.
  2. Das Repository ai-design-skills bündelt strukturierte Markdown-Regeln (SKILL.md) für Coding-Tools wie Claude Code, Cursor, Codex, Windsurf oder Cline.
  3. Der Skill 'landing-page-design' deckt Strukturfragen, Seitenaufbau, Conversion-Texte sowie Designsystem-Vorgaben für Typografie, Abstände, Radien und Motion ab.
  4. Der Skill 'design-to-motion' überführt statische Designs in animierte Showcases und Loops für MP4- und GIF-Exporte.
  5. Die Skills stehen unter der MIT-Lizenz und basieren unter anderem auf Ideen aus Repositories von Leon Lin, Emil Kowalski und Dylan Tarre.

Warum das relevant ist

Viele KI-generierte Oberflächen leiden unter generischen Layouts und mangelnder Gestaltungsqualität. Systematische Regelwerke in Form von Skill- oder Rules-Dateien zwingen Coding-Assistenten dazu, definierte Designsysteme, Abstandsregeln und Typografievorgaben verbindlich einzuhalten.

Einordnung

Das Repository zeigt den Trend zur Modularisierung von Kontextregeln für KI-Editoren. Anstatt bei jedem Prompt Typografie, Farbschemata und Conversion-Ziele neu zu definieren, werden feste Designprinzipien in Konfigurationsdateien wie .cursor/rules oder .claude/skills hinterlegt. Entwickler und Designer können die Designwerte in den Dateien anpassen, um konsistente Layouts und Animationen zu erzeugen.

Original-Post

Elaya

@elayadesigns · 24. Oktober 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.744 Likes209 Antworten18.584 Lesezeichen742.255 Aufrufe

Auf X ansehen
Ausgewählte Antworten (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?

Erwähnte Links

Links und Tools aus diesem Beitrag

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. Oktober 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • X-Post:Elaya

    AI Design Skills: Regelwerke für Landingpages in KI-Coding-Tools

    Elaya demonstriert die Erstellung einer Landingpage mithilfe des Open-Source-Repositorys ai-design-skills. Das Repository liefert Markdown-basierte Regeldateien, die KI-Coding-Assistenten wie Claude Code, Cursor oder Windsurf mit Designsystemen, Inhaltsstrukturen und Konversionsregeln ausstatten.

    404Lesezeichen31.577Aufrufe

    KI & AI· Tool

  • Repository:elayadesign/ai-design-skills

    ai-design-skills: Markdown-Regeln für KI-gestütztes Webdesign

    Das GitHub-Repository elayadesign/ai-design-skills bündelt strukturierte Design-Anleitungen und Regelwerke im Markdown-Format für KI-gestützte Coding-Tools. Entwickler können diese Skills in Assistenten wie Claude Code, Cursor oder Windsurf einbinden, um konsistentere Landingpages und UI-Systeme zu generieren.

    1960Sterne

    KI & AI· Sammlung

  • Link:cuellarfr

    Design Skills: Kuratierte UI- und UX-Skills für KI-Agenten

    cuellarfr/design-skills stellt zehn strukturierte Wissenspakete für Entwicklungsagenten wie Claude Code, Cursor, Codex und OpenCode bereit. Die Sammlung deckt Disziplinen von UX Research über Barrierefreiheit bis hin zu Design Systems und UX Writing ab.

    KI & AI· Sammlung

  • X-Post:Adham Dannaway

    Design Skills for AI Agents: UX- und UI-Wissen für KI-Coding-Tools

    Adham Dannaway empfiehlt eine von Carlos Cuéllar erstellte Sammlung strukturierter Design-Skills für Coding-Agents wie Claude Code, Cursor und Codex. Das Repository liefert fundierte Heuristiken, Accessibility-Regeln nach WCAG 2.2 und Designsystem-Standards direkt in den Arbeitskontext der KI.

    100Lesezeichen5174Aufrufe

    KI & AI· Sammlung

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

    UI UX Pro Max Skill: Design-Intelligenz für KI-Coding-Assistenten

    Das Open-Source-Projekt UI UX Pro Max Skill rüstet KI-Entwicklungswerkzeuge mit strukturiertem UI/UX-Wissen aus. Es umfasst 192 Schlussfolgerungsregeln und 79 durchsuchbare Oberflächenstile für moderne Web- und App-Oberflächen.

    132.076SternePython

    KI & AI· Tool

  • X-Post:0xMarioNawfal

    Open-Source-Repositories für besseres UI-Design mit Coding-Agenten

    Ein X-Post stellt quelloffene Repositories vor, mit denen KI-Werkzeuge wie Claude Code, Cursor und Codex hochwertigere Benutzeroberflächen statt generischer Standard-Designs erzeugen können.

    6477Lesezeichen264.163Aufrufe

    KI & AI· Sammlung

Zurück zur Wissensbasis

Sprechen wir über Ihr Projekt.

Kontakt

Standorte

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

Ein Teil von diesem Inhalt wurde mit KI gemacht.