SkillUI: Automated Design System Extraction for Claude Code

X postTom DörrTool

Tom Dörr highlights SkillUI, an open-source CLI tool that extracts complete design systems from websites or codebases into structured contexts for Claude Code.

Key points

  1. SkillUI scans live websites, Git repositories, or local directories using pure static analysis without requiring AI or API keys.
  2. It extracts colour tokens, typography scales, spacing grids, components, and local Google Fonts.
  3. An optional ultra mode uses Playwright to capture scroll screenshots, hover/focus state diffs, and CSS keyframe animations.
  4. Outputs include CLAUDE.md, SKILL.md, JSON design tokens, and a .skill package that Claude Code reads automatically.

Why it matters

Transferring visual design tokens manually into LLM prompts is tedious and prone to errors. SkillUI automates the extraction of design systems directly into formats tailored for Claude Code, accelerating interface recreation.

Analysis

By default, the CLI relies purely on deterministic static analysis rather than an LLM parser, avoiding API overhead and token limits while ensuring reproducibility. The integration of Playwright in ultra mode bridges the gap to dynamic states and animations. The tool illustrates an increasing shift towards custom CLI utilities designed to feed tailored project context into coding agents.

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 replies335 bookmarks13.5k views

View on X
Selected replies (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

Mentioned links

Links and tools from this entry

Summary generated by AI (Gemini 3.8 Flash, 27 September 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

  • Link:Railly

    Tinte: Compile Design Systems into Agent Plugins

    Tinte is a CLI tool that compiles design systems into machine-readable plugins for coding agents such as Claude Code, Cursor, and Codex. Based on a single configuration file, it generates token APIs, LLM composition rules, and matching themes for editors and terminals.

    AI & LLMs· Tool

  • Repository:per-simmons/clone-app-pat-pro-public

    clone-app-pat-pro: Pixel-Accurate Web App Cloning with Claude Code

    clone-app-pat-pro is a Claude Code skill designed to reproduce web applications from a URL with pixel-level precision. Instead of guessing from screenshots, it analyses live rendered code, extracts design tokens, downloads assets, and verifies copies using computed-style assertions.

    245starsJavaScript

    AI & LLMs· Tool

  • X post:Manish Kumar

    Curated Directory of DESIGN.md Resources and AI-Ready Design Systems

    Manish Kumar shared a curated collection of websites offering tools, repositories, and extractors for DESIGN.md files. These structured Markdown files define design tokens and system specifications tailored for AI coding assistants such as Cursor, Claude, and GitHub Copilot.

    2.6kbookmarks66.4kviews

    AI & LLMs· Resource

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.