Dimensional Drawing: AI skill for technical UI component schematics

X postEnes ÖztürkTool

Enes Öztürk has launched dimensional-drawing, an open-source skill package that guides AI agents to create detailed technical spec sheets for UI components inspired by Apple's accessory guidelines.

Key points

  1. Transforms UI components from source files, Storybook stories, URLs, or screenshots into dense single-page HTML schematics.
  2. Measures and documents paddings, gaps, radii, exploded layers, and viewport constraints using variable relationships instead of hardcoded numbers.
  3. Leaves out concrete copy and branding, ensuring the architectural blueprint remains valid across text changes.
  4. Works across Claude Code, Claude Desktop, Cursor, Codex, and other coding agents via SKILL.md files or the skills CLI.
  5. Includes a motion extension that turns drawings into ~10-second animated clips via Claude Motion or a headless Playwright and ffmpeg pipeline.

Why it matters

Handing off component specs between design and engineering often requires tedious manual drafting. Automating architectural drawings directly via AI prompts provides consistent, blueprint-style documentation straight from code.

Analysis

Borrowing technical drawing conventions from industrial engineering strips away superficial styling to emphasize core layout architecture. Strict conventions—such as monochrome linework, slot abstractions, and explicit TBD placeholders—keep agent output grounded and prevent speculative visual noise.

Original post

Enes

@enesozturkdev · 24 October 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

3.3k likes41 replies4.1k bookmarks135.8k views

View on X
More posts in the 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.
Selected replies (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

Mentioned links

Links and tools from this entry

Summary generated by AI (Gemini 3.8 Flash, 27 October 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Repository:amaancoderx/npxskillui

    SkillUI: Reverse-Engineer Design Systems into Claude Code Skills

    SkillUI is a Node.js CLI tool that extracts design systems from URLs, local projects, or Git repositories. Using pure static analysis without AI models or API keys, it gathers colors, typography, spacing, components, and screenshots into formatted context files for Claude Code.

    2kstarsTypeScript

    AI & LLMs· Tool

  • X post:Elaya

    ai-design-skills: Open-source design rules for Claude Code and Cursor

    Designer Elaya has released an open-source repository of design skills for AI coding tools like Claude Code, Cursor, and Windsurf. The markdown rule sets guide language models in generating landing pages and animations.

    18.6kbookmarks742.3kviews

    AI & LLMs· Resource

  • X post:Meng To

    Anatomy: Agent Skill for Animated Isometric SVG Explainers

    Meng To showcases 'Anatomy', an open-source agent skill by developer Ryan (@wheresryan22) that enables coding agents like Claude Code to generate interactive isometric SVG and WebGL visualisations.

    3.4kbookmarks101.5kviews

    AI & LLMs· Tool

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.