dimensional-drawing: Technische Baupläne für UI-Komponenten via AI-Agenten

Repositoryenesozturk/dimensional-drawingTool

Das Open-Source-Projekt dimensional-drawing bringt KI-Agenten bei, strukturierte technische Zeichnungen und Animationen von UI-Komponenten im Stil von Apples Maßzeichnungen zu generieren.

Das Wichtigste

  1. Erzeugt aus Quellcode, Storybook-Stories, URLs oder Screenshots einseitige technische HTML-Zeichnungen von Komponenten.
  2. Dokumentiert Architektur und Layoutmaße wie Paddings, Gaps, Radien und Ebenen, blendet konkrete Texte jedoch gezielt aus.
  3. Arbeitet nach festen Gestaltungsregeln: Monochromie, Formeln/Variablen statt fixer Pixelzahlen und neutrale Bezeichner.
  4. Enthält eine Motion-Erweiterung, die Baupläne über Playwright und FFmpeg oder Claudes Motion-Artefakt in ca. 10-sekündige Videos verwandelt.
  5. Unterstützt Claude Code, claude.ai, den Desktop-Client sowie Tools wie Cursor, Codex und Gemini CLI via Skills-CLI.

Warum das relevant ist

Bei der Entwicklung von Design-Systemen und Komponenten geht die strukturelle Dokumentation von Abständen, Flex-Verhalten und Radien oft in wechselnden Textinhalten unter. Das Projekt standardisiert technische Spezifikationen direkt über vorhandene AI-Agenten.

Einordnung

Das Repository liefert vorgefertigte Skill-Dateien (SKILL.md) sowie HTML-Templates. Es richtet sich an Frontend-Entwickler und UI-Designer, die Spezifikationen für Komponenten festhalten wollen. Mit über 1.000 Sternen auf GitHub und MIT-Lizenz bietet es ein strukturiertes Regelwerk, basiert jedoch primär auf Prompt-Definitionen und Vorlagen für Agenten statt auf einer eigenständigen Software-Suite.

Gefunden in

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

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

  • 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

  • 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:superdesigndev/superdesign

    SuperDesign: KI-Agent für UI-Design in IDEs und Code-Assistenten

    SuperDesign ist ein KI-gestütztes Design-Tool, das direkt in Entwicklungsumgebungen wie VS Code, Cursor oder Windsurf UI-Mockups, Wireframes und Komponenten aus Text-Prompts generiert. Das ursprüngliche Open-Source-Repository der IDE-Extension dient als Archiv, während das Projekt zu einer Web-App mit Anbindung an Agenten wie Claude Code weiterentwickelt wurde.

    7312SterneTypeScript

    KI & AI· Tool

  • X-Post:0xMarioNawfal

    Open-Source-Repositories für besseres UI-Design mit Coding-Agenten

    Ein X-Post stellt quelloffene Repositories vor, mit denen KI-Werkzeuge wie Claude Code, Cursor und Codex hochwertigere Benutzeroberflächen statt generischer Standard-Designs erzeugen können.

    6477Lesezeichen264.163Aufrufe

    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

  • 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

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.