SkillUI: Design-Systeme analysieren und für Claude Code aufbereiten

Repositoryamaancoderx/npxskilluiTool

SkillUI ist ein Node.js-Kommandozeilenwerkzeug, das Design-Systeme aus Webseiten, lokalen Projekten oder Git-Repositories extrahiert. Ohne KI-Modelle oder API-Schlüssel sammelt es Farben, Schriften, Abstände, Komponenten und Screenshots und bereitet diese als Kontextdateien für Claude Code auf.

Das Wichtigste

  1. Extrahiert Design-Tokens, Typografie, Abstände, Animationen und CSS-Variablen aus Webseiten oder Quellcode.
  2. Funktioniert im Standardmodus über reine statische Analyse ohne Browser, API-Schlüssel oder KI.
  3. Bietet einen Ultra-Modus mit Playwright für Screenshots, Interaktions-Diffs und Animationserkennung.
  4. Erstellt automatisch Projektdateien (CLAUDE.md und SKILL.md), die von Claude Code direkt gelesen werden.
  5. Unterstützt lokale Verzeichnisse mit CSS, SCSS, Tailwind-Konfigurationen und React-Code sowie öffentliche Git-Repositories.

Warum das relevant ist

Große Sprachmodelle scheitern oft daran, bestehende Benutzeroberflächen visuell exakt nachzubauen, weil ihnen präzise Design-Tokens und visuelle Anhaltspunkte fehlen. SkillUI schließt diese Lücke, indem es die visuelle Identität einer bestehenden Seite strukturiert erfasst und direkt als Arbeitsanweisung für KI-Assistenten bereitstellt.

Einordnung

Das Tool löst ein konkretes Problem beim Frontend-Prototyping mit KI-Unterstützung. Anstelle manueller Copy-Paste-Arbeit von Farbcodes und Layouts automatisiert SkillUI die Vorbereitung des Kontextfensters für Claude Code. Technologisch basiert das CLI auf Node.js (ab Version 18), TypeScript und optional Playwright. Es richtet sich primär an Frontend-Entwickler, die Claude Code nutzen, um Oberflächen basierend auf Referenzdesigns zu generieren. Mit über 2.000 Sternen auf GitHub und npm-Paketen wirkt das Projekt aktiv genutzt, befindet sich jedoch im Stadium eines spezialisierten Entwicklerwerkzeugs.

Erwähnte Links

Gefunden in

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

Ähnliche Einträge

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

  • Repository:jakubkrehel/skills

    jakubkrehel/skills: Agent-Skills für UI- und Design-Engineering

    jakubkrehel/skills ist eine kuratierte Sammlung modularer Agent-Skills, die KI-Assistenten wie Claude Code fundiertes Wissen über Interface-Design, Typografie, Barrierefreiheit und UI-Engineering bereitstellen.

    5773SterneMarkdown

    KI & AI· Tool

  • Repository:per-simmons/clone-app-pat-pro-public

    clone-app-pat-pro: Pixelgenaues Klonen von Web-Apps mit Claude Code

    clone-app-pat-pro ist ein Skill für Claude Code, der Web-Apps anhand einer URL exakt nachbaut. Statt Layouts anhand von Screenshots zu schätzen, analysiert das Tool den realen gerenderten Code, extrahiert Design-Tokens, lädt Assets herunter und prüft die Kopie automatisiert über berechnete CSS-Werte.

    245SterneJavaScript

    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

  • 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:Magentix Studio

    Design Extractor: Design-Systeme als DESIGN.md für KI-Coding-Agenten extrahieren

    Design Extractor analysiert öffentliche Websites und fasst deren Design-System in einer strukturierten DESIGN.md-Datei zusammen. Das Format kombiniert maschinenlesbare YAML-Tokens mit Erläuterungen in Markdown, damit KI-Coding-Agenten wie Claude Code oder Cursor konsistente Frontends erstellen können.

    KI & AI· Tool

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.