design extractor

    1

    Clone any website's design into a reusable DESIGN.md — colors, typography, spacing, components, and a ready-to-use rebuild guide.

    Free

    Security scanned

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    design extractor

    Example session with this skill installed

    Extract the design system from linear.app and create a design spec for a new project.

    • Read your context and instructions
    • Compiled the design extractor

    I have captured and analyzed the visual design system for linear.app. The site uses a sophisticated, high-contrast "dark mode" aesthetic with precise typography and subtle elevation.

    DESIGN.md — Linear (linear.app)

    1. Overview

    A minimalist, high-performance visual language characterized by a deep charcoal palette, crisp sans-serif typography, and subtle border-based elevation rather than heavy shadows. The vibe is professional, focused, and utilitarian.

    2. Color Palette

    TokenValueRole
    background#0b0c0dPrimary page background
    surface#161718Card and navigation background
    primary#5e6ad2Call-to-action buttons and accents
    text-main#eeeeeePrimary body and heading text
    text-muted#8a8f98Secondary labels and metadata
    border#2e3035Thin dividers and component outlines

    3. Typography

    • Primary Font: Inter (System sans-serif fallback)
    • Scale: 12px (tiny), 14px (base), 16px (ui), 24px (heading), 48px (hero)
    • Weights: 400 (regular), 500 (medium), 600 (semibold)

    4. Implementation Guide

    // tailwind.config.js snippet
module.exports = {
  theme: {
    extend: {
      colors: {
        linear: {
          bg: '#0b0c0d',
          surface: '#161718',
          brand: '#5e6ad2',
          border: 'rgba(255, 255, 255, 0.08)',
        }
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      borderRadius: {
        'linear': '6px',
      }
    }
  }
}

    Next steps

    1. Review the full-page screenshots in the /capture folder to see the component spacing in action.
    2. Run the provided Tailwind config to initialize your new project styles.
    3. Reference the DESIGN.md for specific button hover state transitions.
    DESIGN.md

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Stop guessing hex codes or manually inspecting elements to replicate a site's aesthetic. This skill automates the extraction of full design systems from any live URL, turning visual styles into a structured DESIGN.md specification. It bridges the gap between seeing a design and having the technical tokens needed to rebuild it.

    What it does

    • Automated capture runs a headless browser to snapshot layouts and extract computed styles from any domain.
    • Token extraction pulls exact hex values, font stacks, spacing scales, and border radii directly from the DOM.
    • Visual synthesis analyzes screenshots to define the "vibe" and component patterns that raw CSS data often misses.
    • Spec generation writes a comprehensive DESIGN.md including typography scales and elevation tokens.
    • Code generation outputs ready-to-use CSS custom properties and Tailwind CSS configuration snippets.

    How it works

    1. Capture phase executes a Python script to render the homepage and key sub-pages for visual and data analysis.
    2. Analysis phase correlates screenshots with tokens.json to identify primary actions, surface colors, and type hierarchies.
    3. Synthesis phase compiles the findings into a standardized markdown design document with implementation guides.

    Frameworks & tools

    Uses Python 3.9+, Playwright (Chromium), and CSS computed properties. Generates output compatible with Tailwind CSS and standard CSS variables.

    Why this beats prompting it yourself

    Standard prompts rely on the LLM's training data, which is often outdated or vague regarding specific site versions. This skill uses live execution to pull current, real-world computed values, ensuring your technical specs match the latest deployment of a target site.

    Use cases

    • Replicating a specific visual style for a new internal tool or dashboard.
    • Creating a design system for a client based on their existing legacy website.
    • Reverse-engineering the typography and spacing of high-end SaaS landing pages.
    • Building a Tailwind config that matches a reference site's branding exactly.

    Known limitations

    Heavy bot protection or login walls may restrict capture to a basic HTML/CSS scrape. Does not extract copyrighted assets or trademarked logos.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean 7 days ago

    • Free to download with an account

    Requires

    Python
    macOS

    Listed7 days ago

    What's inside

    Frequently Asked Questions