360 Secure SkillHub
360 安全技能中心

extract-design

通过 designlang 抓取目标网站的颜色、字体、间距、阴影、组件、断点与动画，生成 Markdown、HTML 预览、Tailwind、React、shadcn/ui、Figma、W3C 设计令牌和 CSS 变量等 8 类文件，并汇总 WCAG 可访问性评分。

Manavarya09
热度 31.74
最近更新 2026-10-19 04:12:04
分类：效率依赖：代码执行 / 读写文件 / 第三方 API应用场景：品牌素材 / 文件转换 / 代码生成 / 报告撰写

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add manavarya09/design-extract/extract-design
Metadata
name
extract-design
description
Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site use', or '/extract-design'.
allowed-tools
Bash, Read, Write, Glob

Extract Design Language

Extract the complete design language from any website URL. Generates 8 output files covering colors, typography, spacing, shadows, components, breakpoints, animations, and accessibility.

Prerequisites

Ensure designlang is available. Install if needed:

npm install -g designlang

Or use npx (no install required):

npx designlang <url>

Process

  1. Run the extraction on the provided URL:
npx designlang <url> --screenshots

For multi-page crawling: npx designlang <url> --depth 3 --screenshots For dark mode: npx designlang <url> --dark --screenshots

  1. Read the generated markdown file to understand the design:
cat design-extract-output/*-design-language.md

  1. Present key findings to the user:

    • Primary color palette with hex codes
    • Font families in use
    • Spacing system (base unit if detected)
    • WCAG accessibility score
    • Component patterns found
    • Notable design decisions (shadows, radii, etc.)

  2. Offer next steps:

    • Copy *-tailwind.config.js into their project
    • Import *-variables.css into their stylesheet
    • Paste *-shadcn-theme.css into globals.css for shadcn/ui users
    • Import *-theme.js for React/CSS-in-JS projects
    • Import *-figma-variables.json into Figma for designer handoff
    • Open *-preview.html in a browser for a visual overview
    • Use the markdown file as context for AI-assisted development

Output Files (8)

File Purpose
*-design-language.md AI-optimized markdown — the full design system for LLMs
*-preview.html Visual HTML report with swatches, type scale, shadows, a11y
*-design-tokens.json W3C Design Tokens format
*-tailwind.config.js Ready-to-use Tailwind CSS theme
*-variables.css CSS custom properties
*-figma-variables.json Figma Variables import format
*-theme.js React/CSS-in-JS theme object
*-shadcn-theme.css shadcn/ui theme CSS variables

Additional Commands

  • Compare two sites: npx designlang diff <urlA> <urlB>
  • View history: npx designlang history <url>

Options

Flag Description
--out <dir> Output directory (default: ./design-extract-output)
--dark Also extract dark mode color scheme
--depth <n> Crawl N internal pages for site-wide extraction
--screenshots Capture component screenshots (buttons, cards, nav)
--wait <ms> Wait time after page load for SPAs
--framework <type> Generate only specific theme (react or shadcn)