SkillUI: Design-Systeme für Claude Code automatisiert extrahieren

X-PostTom DörrTool

Tom Dörr empfiehlt SkillUI, ein quelloffenes CLI-Werkzeug, das vollständige Design-Systeme von Websites oder aus Codebases extrahiert und für Claude Code aufbereitet.

Das Wichtigste

  1. SkillUI analysiert Websites, Git-Repositories oder lokale Ordner mittels statischer Code-Analyse ohne eigene KI oder API-Keys.
  2. Das Tool erfasst Farb-Tokens, Typografie-Skalen, Abstände, Google Fonts sowie Komponenten.
  3. Ein optionaler Ultra-Modus nutzt Playwright für Screenshots, Interaktions-Diffs (Hover/Focus) und CSS-Keyframe-Erkennung.
  4. Die Ausgabe erfolgt strukturiert in CLAUDE.md, SKILL.md, JSON-Tokens und als .skill-Archiv, das Claude Code direkt als Kontext einliest.

Warum das relevant ist

Frontend-Entwickler verbringen viel Zeit damit, bestehende Gestaltungsrichtlinien manuell in KI-Prompts oder Token-Dateien zu übertragen. SkillUI schließt diese Lücke, indem es Design-Tokens automatisiert in ein maschinenlesbares Kontextformat für Claude Code überführt.

Einordnung

Das CLI-Tool setzt im Standardmodus bewusst auf deterministische statische Analyse statt auf unzuverlässige KI-Extraktion. Dadurch bleibt der Prozess schnell und benötigt keine API-Guthaben. Erst im Ultra-Modus wird ein Headless-Browser hinzugeschaltet. Die direkte Ausrichtung auf das Format von Claude Code (CLAUDE.md und SKILL.md) zeigt den Trend zu spezialisierten Vorbereitungstools für agentenbasierte Entwicklungsumgebungen.

Original-Post

Tom Dörr

@tom_doerr · 11. September 2026

Extracts complete design systems including colors, typography, and components from websites into a format readable by Claude Code for exact UI generation. t.co/GJ15DNp2Ec t.co/MJfL9MQmgM

217 Likes4 Antworten335 Lesezeichen13.542 Aufrufe

Auf X ansehen
Ausgewählte Antworten (4)
  • @Sudeep53397490 @tom_doerr If Anthropic updates the Claude Code parsing engine, does the extracted format risk breaking the UI generation downstream? Relying on an LLM to interpret structured design tokens can fail if its parsing behavior shifts.
  • @darki_ux @tom_doerr This is actually insane, saving hours of manual work right here.
  • @MrBrjan @tom_doerr if the output's accurate, it could save hours in manual UI work for devs
  • @DugganJared @tom_doerr Nice

Erwähnte Links

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.

Ähnliche Einträge

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

  • Repository:amaancoderx/npxskillui

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

    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.

    2020SterneTypeScript

    KI & AI· Tool

  • 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

  • X-Post:Enes Öztürk

    Dimensional Drawing: KI-Skill für technische UI-Komponentenspezifikationen

    Enes Öztürk hat das Open-Source-Projekt dimensional-drawing veröffentlicht. Es bringt KI-Agenten bei, strukturierte technische Maßzeichnungen von Web-UI-Komponenten im Stil von Apples Hardware-Spezifikationen zu erstellen.

    4112Lesezeichen135.778Aufrufe

    Webentwicklung· Tool

  • Link:Railly

    Tinte: Design-Systeme als Plugins für Coding-Agents kompilieren

    Tinte ist ein CLI-Werkzeug, das Design-Systeme in maschinenlesbare Plugins für Coding-Agents wie Claude Code, Cursor und Codex übersetzt. Aus einer zentralen Konfigurationsdatei erzeugt das Tool Token-APIs, Regelwerke für LLMs sowie Themes für Editoren und Terminals.

    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

  • X-Post:angel

    Anthropic Skill „Frontend Design“ gegen generische KI-Webdesigns

    Laut einem Beitrag von angel (@angeldot_) bietet Anthropic mit „Frontend Design“ einen Open-Source-Skill, der generischen Webdesigns durch LLMs entgegenwirken soll. Das Tool zwingt das Modell dazu, vor der Codegenerierung ein festes visuelles Konzept festzulegen.

    5776Lesezeichen413.040Aufrufe

    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.