SkillUI: Reverse-Engineer Design Systems into Claude Code Skills

Repositoryamaancoderx/npxskilluiTool

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.

Key points

  1. Extracts design tokens, typography, spacing, animations, and CSS variables from websites or codebases.
  2. Runs static analysis in its default mode without requiring a browser, external APIs, or AI.
  3. Includes an ultra mode powered by Playwright for interaction diffs, animations, and screenshots.
  4. Automatically packages findings into CLAUDE.md and SKILL.md files consumed by Claude Code.
  5. Supports local directories containing CSS, SCSS, Tailwind configurations, or React code, as well as public Git repositories.

Why it matters

AI coding assistants often struggle to replicate visual styles accurately without exact design tokens and component structures. SkillUI automates the extraction of these details, giving AI agents the context needed to recreate user interfaces with matching design systems.

Analysis

SkillUI addresses friction in AI-assisted frontend development by turning any web UI or repository into structured context for Claude Code. Built with Node.js and TypeScript, with optional Playwright integration for cinematic rendering analysis, it requires no API keys or third-party AI to perform the extraction. It is intended for developers aiming to build matching interfaces quickly using Claude Code. With over 2,000 GitHub stars, the repository shows active interest and adoption as a specialized CLI workflow tool.

Mentioned links

Found in

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: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: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

  • Repository:nextlevelbuilder/ui-ux-pro-max-skill

    UI UX Pro Max Skill: Design Intelligence for AI Coding Assistants

    The open-source UI UX Pro Max Skill equips AI coding tools with structured UI/UX knowledge, integrating 192 reasoning rules and 79 searchable design styles for cross-platform interface development.

    132.1kstarsPython

    AI & LLMs· Tool

  • Repository:elayadesign/ai-design-skills

    ai-design-skills: Markdown-based Design Skills for AI Coding Tools

    The elayadesign/ai-design-skills repository provides modular Markdown rule sets for AI coding assistants. These skills can be integrated into tools such as Claude Code, Cursor, and Windsurf to produce structured landing pages and consistent UI systems.

    2kstars

    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.