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

RepositoryMotionsites-AI/claude-skillTool

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.

Das Wichtigste

  1. Enthält 40 kuratierte Beispiel-Prompts, Designregeln für Typografie und Spacing sowie 55 Code-Rezepte (u. a. Three.js).
  2. Zugriff auf ein Medienarchiv mit über 50 Video-Loops, 30 3D-Cutouts und 29 Bildern via Kontaktbögen.
  3. Iterativer Look-and-Fix-Loop prüft erstellte Seiten per Playwright auf mobile Overflows, Fonts und Asset-Fehler.
  4. Kompatibel mit Claude.ai, Claude Desktop sowie Claude Code und bietet Prompt-Generierung für Tools wie v0, Cursor oder Lovable.

Warum das relevant ist

Die Erweiterung zeigt, wie KI-Webentwicklung durch vordefinierte Designregeln, visuelle Feedback-Schleifen und echte Medien von generischen Platzhaltern zu professionellen Layouts geführt werden kann.

Einordnung

Problemstellung und Ansatz

Standardmäßig von Sprachmodellen generierte Websites wirken oft austauschbar. Als Hauptursachen nennt das Projekt vage Vorgaben, fehlendes Bild- und Videomaterial sowie eine fehlende visuelle Überprüfung des Resultats. Das Open-Source-Repository von MotionSites bindet diese Komponenten direkt als Claude-Skill ein.

Funktionsweise und Werkzeuge

Der Ablauf strukturiert die Webseitenerstellung in drei Abschnitte:

  • Spezifikation: Vor dem Schreiben von Code erstellt Claude eine detaillierte Spezifikation und gleicht diese mit 40 Vorlagen ab.
  • Assets und Rezepte: Ein öffentlich gehostetes Medienregal liefert Hero-Videos, transparente 3D-Grafiken und Bilder. 55 Rezepte decken Effekte wie Three.js-Einbindungen, Scroll-Stories und Liquid-Glass-Elemente ab.
  • Automatisierte Qualitätskontrolle: Über Python und Playwright fertigt das Modell Bildschirmfotos der Website an, analysiert Darstellungsfehler oder Font-Probleme und korrigiert den Code iterativ nach einem Bewertungsschema.

Zielgruppe und Reifegrad

Das Tool richtet sich an Webentwickler und Designer, die Claude direkt nutzen oder spezialisierte Prompts für Plattformen wie Cursor, v0 oder Bolt erzeugen möchten. Mit über 550 Sternen und modularen Installationsoptionen für Claude.ai und Claude Code ist das Projekt praxistauglich, setzt für die visuelle Selbstprüfung jedoch eine funktionierende Playwright-Umgebung voraus.

Erwähnte Links

Gefunden in

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

Ähnliche Einträge

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

  • Repository:MengTo/Skills

    Agent Skills: Wiederverwendbare Playbooks für KI-Coding-Agenten

    Das GitHub-Repository MengTo/Skills bündelt strukturierte Anleitungen und Prompts ('Agent Skills') im Markdown-Format. Es richtet sich an Designer und Entwickler, die Coding-Agenten wie Codex, Claude oder Cursor für Webdesign, Interaktionen und 3D-Szenen einsetzen.

    6243SterneHTML

    KI & AI· Sammlung

  • Repository:oso95/scroll-world

    scroll-world: Agent-Skill für nahtlose 3D-Scroll-Landingpages

    scroll-world ist ein Agent-Skill für Claude Code, Codex und SKILL.md-kompatible Tools. Das Werkzeug erstellt Landingpages mit nahtlosen Kameraflügen durch KI-generierte Szenen beim Scrollen.

    8963SterneJavaScript

    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

  • Repository:humanlayer/skills

    HumanLayer Skills: Erweiterungen für Claude Code

    Das GitHub-Repository 'skills' von HumanLayer bietet eine Sammlung modularer Erweiterungen für Claude Code. Die Befehle unterstützen bei der Optimierung von Konfigurationen, Typdefinitionen und agentischen Workflows.

    1387SterneTypeScript

    KI & AI· Tool

Zurück zur Wissensbasis

Lassen Sie uns über Ihr Projekt sprechen

Kontakt aufnehmen

Standorte

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

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.