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

  • 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

  • X-Post:Manish Kumar

    Sammlung von Plattformen für DESIGN.md und KI-fähige Design-Systeme

    Manish Kumar hat eine Liste von Webseiten zusammengestellt, die Werkzeuge, Vorlagen und Bibliotheken rund um DESIGN.md-Dateien bereitstellen. Diese strukturierten Markdown-Dateien dienen als maschinenlesbare Design-Spezifikationen für Entwicklungs- und KI-Tools wie Cursor, Claude oder GitHub Copilot.

    2559Lesezeichen66.372Aufrufe

    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

  • 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

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.