dimensional-drawing: Technical Blueprint Drawings for UI Components via AI Agents

Repositoryenesozturk/dimensional-drawingTool

The open-source repository dimensional-drawing equips AI agents with the ability to create Apple-style one-page technical dimensional drawings and animations from UI components.

Key points

  1. Generates single-page HTML technical drawings from component code, Storybook stories, URLs, or screenshots.
  2. Documents structural anatomy such as paddings, gaps, corner radii, and layers, deliberately excluding text copy.
  3. Follows strict conventions: monochrome styling, formulas and variables instead of arbitrary numbers, and neutral identifiers.
  4. Includes a motion extension that turns blueprint sheets into ~10-second videos using Playwright/FFmpeg or Claude's Motion artifact.
  5. Compatible with Claude Code, claude.ai, Claude desktop, and agents like Cursor, Codex, or Gemini CLI via the skills CLI.

Why it matters

Design systems often struggle with specs being obscured by mock content or shifting copy. By generating calm, architectural blueprints focused entirely on layout metrics, teams gain clear implementation specs directly through AI tooling.

Analysis

The project consists of standardized agent skill definitions (SKILL.md), HTML templates, and headless export scripts. Targeted at frontend engineers and design system teams, it maintains over 1,000 GitHub stars under an MIT licence. It is not a heavy standalone compiler, but a well-curated prompt-and-template workflow for modern AI development environments.

Found in

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

Similar in content, found by the AI search.

  • X post:Enes Öztürk

    Dimensional Drawing: AI skill for technical UI component schematics

    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.

    4.1kbookmarks135.8kviews

    Web development· Tool

  • 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

  • Repository:superdesigndev/superdesign

    SuperDesign: AI Agent for UI Design in IDEs and Coding Assistants

    SuperDesign is an AI product design tool that generates UI mockups, wireframes, and code components directly from natural language prompts inside IDEs such as VS Code, Cursor, and Windsurf. While the original open-source extension repository is archived, the tool now operates primarily as a web canvas application with coding agent integration.

    7.3kstarsTypeScript

    AI & LLMs· Tool

  • X post:0xMarioNawfal

    Open-source repositories to upgrade UI design in AI coding agents

    An X post highlights open-source repositories designed to equip AI coding tools like Claude Code, Cursor, and Codex with design systems, MCP integrations, and anti-template guardrails.

    6.5kbookmarks264.2kviews

    AI & LLMs· Resource

  • Repository:jakubkrehel/skills

    jakubkrehel/skills: Agent Skills for UI and Design Engineering

    jakubkrehel/skills is a curated collection of agent skills designed to equip AI assistants such as Claude Code with best practices for interface design, typography, accessibility, and UI engineering.

    5.8kstarsMarkdown

    AI & LLMs· Tool

  • Repository:MengTo/Skills

    Agent Skills: Reusable Playbooks for AI Coding Agents

    The GitHub repository MengTo/Skills provides a curated collection of Markdown-based 'agent skills'. It enables designers and builders to guide AI coding agents like Codex, Claude, and Cursor through complex web design, interaction, and 3D rendering tasks.

    6.2kstarsHTML

    AI & LLMs· Resource

Let's talk about your project

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.