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

X-PostEnes ÖztürkTool

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.

Das Wichtigste

  1. Wandelt UI-Komponenten aus Quellcode, Storybook, URLs oder Screenshots in dichte, einseitige technische Zeichnungen (HTML) um.
  2. Erfasst Paddings, Gaps, Eckradien, Ebenen und Layout-Logik (Slots, Flex, Fill, Hug) anhand mathematischer Variablen statt statischer Werte.
  3. Verzichtet bewusst auf konkrete Texte und Branding, damit die Architekturspezifikation auch bei Content-Änderungen gültig bleibt.
  4. Kompatibel mit Claude Code, Claude Desktop sowie weiteren Coding-Agenten (wie Cursor oder Codex) via SKILL.md oder npx skills CLI.
  5. Enthält ein separates Motion-Skill, das die Zeichnung als rund zehnsekündiges Video animiert (über Claude Motion oder headless via Playwright und ffmpeg).

Warum das relevant ist

Die Dokumentation von UI-Komponenten zwischen Design und Frontend ist oft uneinheitlich oder aufwendig in Figma gepflegt. Ein systematischer KI-Skill automatisiert präzise Architektur-Blaupausen direkt aus dem Code und schafft klare Referenzen für Entwicklerteams.

Einordnung

Der Ansatz überträgt die Nüchternheit von Industrie- und Hardware-Blaupausen auf Frontend-Komponenten. Durch strenge Regeln – Monochromie, Ebenen-Explosionsansichten und TBD-Markierungen bei unklaren Werten – verhindert der Prompt typische KI-Halluzinationen und fokussiert strikt auf Layout-Geometrie und Flexbox-Architektur.

Original-Post

Enes

@enesozturkdev · 24. Oktober 2026

Made a skill for dimensional drawings of UI components. Inspired by Apple's accessory drawings, it documents a component's architecture into a spec sheet. t.co/KKb9sOgTN8 t.co/0Z0Kpjk6bD

3287 Likes41 Antworten4112 Lesezeichen135.778 Aufrufe

Auf X ansehen
Weitere Posts im Thread (4)
  1. Got the idea from @avstorm's post on Apple's dimensional drawings: t.co/BZTS2tXL9N
  2. Dimensions of Card. t.co/WDOoqyHTdk
  3. @thiagobrez 🫡
  4. @techduckyyy Looks so good.
Ausgewählte Antworten (5)
  • @techduckyyy @enesozturkdev Saw your skill this morning while working on a client’s video. Made the first scene look cool thanks to your skill. t.co/hGSJSC0zG1
  • @Ivrqen @enesozturkdev making flexbox look like aerospace engineering actually goes so hard
  • @nujhongc @enesozturkdev I've always had something similar but it looked so bad in my Figma! Now it's much better! It also reminded me of t.co/o4vwDMyizL so I threw it at Claude too t.co/zYfKis5Vaz
  • @thiagobrez @enesozturkdev wow this looks awesome!
  • @devanemoss @enesozturkdev @grok can this be a mind map to visualize and design all ui/ux all at once

Erwähnte Links

Links und Tools aus diesem Beitrag

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. Oktober 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

  • X-Post:Elaya

    ai-design-skills: Open-Source-Designregeln für Claude Code und Cursor

    Designer Elaya hat eine Open-Source-Sammlung von Design-Skills für KI-Tools wie Claude Code, Cursor und Windsurf veröffentlicht. Die Markdown-Regeln leiten Sprachmodelle bei der Erstellung von Landing Pages und Animationen an.

    18.584Lesezeichen742.255Aufrufe

    KI & AI· Sammlung

  • X-Post:Meng To

    Anatomy: Agent-Skill für animierte, isometrische SVG-Erklärungen

    Meng To demonstriert das Open-Source-Agent-Skill 'Anatomy' von Entwickler Ryan (@wheresryan22). Damit können KI-Coding-Assistenten wie Claude Code interaktive, isometrische SVG- und WebGL-Visualisierungen erzeugen.

    3419Lesezeichen101.470Aufrufe

    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.