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

X-PostElayaTool

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.

Das Wichtigste

  1. Das Repository enthält standardisierte Instruktionen für KI-Tools, darunter die Fähigkeit landing-page-design.
  2. Die Regeln decken Anforderungsfragen, Seitenstruktur, Konversionstexte sowie Designvorgaben wie Typografie, Abstände, Radien und Animationen ab.
  3. Die Konfigurationen lassen sich flexibel in Tools wie Claude Code (.claude/skills), Cursor (.cursor/rules), Windsurf (.windsurfrules), Codex (AGENTS.md) oder Cline einbinden.
  4. In einer früheren Demonstration kombinierte Elaya das Framework mit Claude, Higgsfield und Kling 3 zur Erstellung von Video- und Web-Inhalten.
  5. Das Projekt steht unter der MIT-Lizenz und erlaubt Anpassungen der Designparameter am Ende der jeweiligen SKILL.md-Datei.

Warum das relevant ist

KI-Coding-Assistenten erzeugen ohne präzise Vorgaben oft generische oder unausgereifte Designs. Vordefinierte Skill-Dateien standardisieren Designentscheidungen und Workflows direkt im Projektkontext verschiedener Entwicklungswerkzeuge.

Einordnung

Das Projekt ai-design-skills adressiert eine typische Schwachstelle beim Prompting: das wiederholte Definieren von Design-Systemen und Seitenarchitekturen. Durch modulare Markdown-Regeln können Entwickler Designvorgaben versionieren und konsistent über verschiedene Agenten hinweg anwenden. Die Integration nutzt die nativen Regelformate moderner Editoren wie Cursor und Claude Code, wodurch sich der Aufwand für Prompt-Engineering pro Seite verringert.

Original-Post

Elaya

@elayadesigns · 6. August 2026

Full landing page Skill used: t.co/Gs1RT1BZxi t.co/3mOFHj6DN6 t.co/xneoFta5RW

284 Likes9 Antworten404 Lesezeichen31.577 Aufrufe

Auf X ansehen

Links und Tools aus diesem Beitrag

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

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

  • X-Post:Elaya

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

    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.

    18.584Lesezeichen742.255Aufrufe

    KI & AI· Sammlung

  • 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

  • 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

  • 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

  • Repository:Motionsites-AI/claude-skill

    MotionSites Web Builder: Claude-Skill für hochwertige Landingpages

    Der kostenlose Claude-Skill von MotionSites hilft KI-Modellen, visuell anspruchsvolle Websites mit echten Medien und Animationen zu erstellen. Statt generischer Layouts nutzt Claude Design-Vorlagen, ein Media-Archiv und Playwright-Screenshots zur automatischen Selbstkorrektur.

    555SternePython

    KI & AI· Tool

  • 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

Sprechen wir über Ihr Projekt.

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.