Designlang Design Extract

作者 reason-machines2384a003145a無授權條款83 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫3 個月前更新

Extract complete design systems from any website — colors, typography, spacing, shadows, and more — using the designlang CLI.

僅含說明Design & Creative
AI 產生的概覽

從網站擷取設計系統——顏色、字體、間距、陰影——並產生權杖、Tailwind、React、shadcn 與 Figma 檔案。

功能
這個技能介紹 designlang CLI：它以無頭瀏覽器爬取網站，並從即時 DOM 擷取運算後的樣式。它會產生八個輸出檔案，包括針對 AI 最佳化的 markdown、HTML 預覽、W3C 設計權杖、Tailwind 設定、React 主題、shadcn/ui 主題、Figma 變數與 CSS 自訂屬性。內容也涵蓋評分、比較、套用、複製、監控與同步設計等用法。
適用情境
當你想逆向分析某個網站的設計語言、從現有網站產生主題檔案，或把結構化的設計描述提供給 AI 代理時使用。它也適合比較各品牌的設計，或監控網站的設計變更。
執行需求
需要 Node.js 與 designlang CLI，可透過 npx 執行或全域安裝；爬取需要無頭瀏覽器（Playwright，並安裝 chromium）。需要能連線至目標網站的網路，受保護頁面還需提供 cookie 或自訂標頭。這個技能不含指令碼，只有說明文件。

DESIGNLANG — Design System Extraction

Skill by ara.so — Daily 2026 Skills collection.

designlang crawls any website with a headless browser (Playwright), extracts every computed style from the live DOM, and generates 8 output files: AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS custom properties.

Installation

bash
# No install needed — run directlynpx designlang https://stripe.com
# Install globallynpm install -g designlang
# Install as an agent skillnpx skills add Manavarya09/design-extract

Core Commands

Basic Extraction

bash
# Extract everything from a sitenpx designlang https://stripe.com
# Extract everything with all captures enablednpx designlang https://stripe.com --full
# Custom output directory and file prefixnpx designlang https://stripe.com --out ./tokens --name stripe
# Wait for SPA to load before extractingnpx designlang https://app.example.com --wait 2000
# Crawl multiple internal pages for site-wide tokensnpx designlang https://stripe.com --depth 3

Specialized Extraction

bash
# Extract dark mode stylesnpx designlang https://vercel.com --dark
# Capture at 4 responsive breakpointsnpx designlang https://stripe.com --responsive
# Capture hover/focus/active interaction statesnpx designlang https://stripe.com --interactions
# Take component screenshots (buttons, cards, nav, hero)npx designlang https://stripe.com --screenshots
# Everything at oncenpx designlang https://stripe.com --full

Authentication

bash
# With cookies for protected pagesnpx designlang https://internal-app.com --cookie "session=abc123" --cookie "user_id=42"
# With custom headersnpx designlang https://internal-app.com --header "Authorization:Bearer $TOKEN"
# Combinednpx designlang https://app.example.com \  --cookie "session=$SESSION_COOKIE" \  --header "X-API-Key:$API_KEY"

Utility Commands

bash
# Score a site's design quality (A-F rating, 7 categories)npx designlang score https://vercel.com
# Compare two sites side-by-sidenpx designlang diff https://stripe.com https://paddle.com
# Compare N brands in a matrixnpx designlang brands stripe.com vercel.com github.com linear.app
# Apply extracted design directly to your project (auto-detects framework)npx designlang apply https://stripe.com --dir ./my-app
# Generate a working Next.js starter with extracted designnpx designlang clone https://stripe.com
# Monitor a site for design changes hourlynpx designlang watch https://stripe.com --interval 60
# Sync local tokens with live sitenpx designlang sync https://stripe.com --out ./src/tokens
# View design change historynpx designlang history https://stripe.com

Output Files

Running npx designlang https://stripe.com produces:

FilePurpose
stripe-com-design-language.mdAI-optimized markdown with all 19 design sections
stripe-com-preview.htmlVisual report with swatches, type scale, a11y score
stripe-com-design-tokens.jsonW3C Design Tokens format
stripe-com-tailwind.config.jsDrop-in Tailwind CSS theme
stripe-com-variables.cssCSS custom properties
stripe-com-figma-variables.jsonFigma Variables import (light + dark)
stripe-com-theme.jsReact/CSS-in-JS theme (Chakra, Stitches, etc.)
stripe-com-shadcn-theme.cssshadcn/ui globals.css variables

Full CLI Reference

bash
designlang <url> [options]
Options:  -o, --out <dir>         Output directory (default: ./design-extract-output)  -n, --name <name>       Output file prefix (default: derived from URL)  -w, --width <px>        Viewport width (default: 1280)      --height <px>       Viewport height (default: 800)      --wait <ms>         Wait after page load for SPAs (default: 0)      --dark              Also extract dark mode styles      --depth <n>         Internal pages to crawl (default: 0)      --screenshots       Capture component screenshots      --responsive        Capture at multiple breakpoints      --interactions      Capture hover/focus/active states      --full              Enable all captures      --cookie <val>      Cookie for auth pages (name=value, repeatable)      --header <val>      Custom header (name:value, repeatable)      --framework <type>  Only generate specific theme (react, shadcn)      --no-history        Skip saving to history      --verbose           Detailed progress output

Common Patterns

Pattern 1: Extract and apply to a Tailwind project

bash
# Extract design tokens from a reference sitenpx designlang https://linear.app --out ./design-tokens --name linear
# The generated tailwind.config.js can be merged into your project:# ./design-tokens/linear-tailwind.config.js

Generated tailwind.config.js looks like:

js
/** @type {import('tailwindcss').Config} */module.exports = {  theme: {    extend: {      colors: {        primary: '#5E6AD2',        background: '#FFFFFF',        surface: '#F7F8F9',        // ... all extracted colors      },      fontFamily: {        sans: ['Inter', 'system-ui', 'sans-serif'],      },      fontSize: {        xs: ['11px', { lineHeight: '16px' }],        sm: ['13px', { lineHeight: '20px' }],        base: ['15px', { lineHeight: '24px' }],        // ... full type scale      },      borderRadius: {        sm: '4px',        md: '6px',        lg: '8px',        // ... extracted radii      },      boxShadow: {        card: '0 1px 3px rgba(0,0,0,0.12)',        // ... extracted shadows      },    },  },}

Pattern 2: Feed the markdown to an LLM

bash
# Extract the AI-optimized markdownnpx designlang https://stripe.com --out ./tokens
# Then use in a prompt:cat ./tokens/stripe-com-design-language.md | \  pbcopy  # macOS: copies to clipboard
# Or reference it directly in Claude/Cursor:# "Use the design language in ./tokens/stripe-com-design-language.md#  to style this component..."

Pattern 3: Compare competitors

bash
npx designlang brands stripe.com braintree.com paddle.com adyen.com
# Generates:# brands.md  — markdown comparison matrix# brands.html — visual side-by-side with color overlap analysis

Pattern 4: Apply to a shadcn/ui project

bash
# Auto-detect project structure and write to the right filesnpx designlang apply https://stripe.com --dir ./my-nextjs-app
# Or manually use the generated shadcn theme:# Copy stripe-com-shadcn-theme.css content into app/globals.css

Generated shadcn-theme.css:

css
@layer base {  :root {    --background: 0 0% 100%;    --foreground: 222.2 84% 4.9%;    --primary: 238 72% 57%;    --primary-foreground: 210 40% 98%;    --muted: 210 40% 96.1%;    --muted-foreground: 215.4 16.3% 46.9%;    --border: 214.3 31.8% 91.4%;    --radius: 0.5rem;    /* ... all extracted variables */  }}

Pattern 5: W3C Design Tokens for tooling

bash
npx designlang https://github.com --out ./tokens

Generated design-tokens.json:

json
{  "$schema": "https://design-tokens.github.io/community-group/format/",  "color": {    "primary": {      "$value": "#0969da",      "$type": "color"    },    "background": {      "default": {        "$value": "#ffffff",        "$type": "color"      }    }  },  "typography": {    "fontFamily": {      "sans": {        "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI'",        "$type": "fontFamily"      }    }  }}

Pattern 6: React theme object

bash
npx designlang https://chakra-ui.com --out ./tokens

Generated theme.js:

js
export const theme = {  colors: {    primary: '#319795',    secondary: '#553C9A',    // ...  },  fonts: {    body: 'Inter, system-ui, sans-serif',    heading: 'Inter, system-ui, sans-serif',  },  space: {    1: '4px',    2: '8px',    4: '16px',    8: '32px',    // ...  },  radii: {    sm: '4px',    md: '6px',    lg: '8px',    full: '9999px',  },}

Pattern 7: Monitor a design system for changes

bash
# Check every 30 minutes, output to a dedicated foldernpx designlang watch https://vercel.com \  --interval 30 \  --out ./design-monitoring
# Useful in CI — run once and diff against stored baselinenpx designlang diff \  https://vercel.com \  ./design-monitoring/vercel-com-design-tokens.json

Pattern 8: Clone a site's design as a Next.js starter

bash
npx designlang clone https://stripe.com
# Creates ./cloned-design/ with:# - Next.js app with extracted colors/fonts/spacing applied# - tailwind.config.js pre-populated# - globals.css with CSS variables# - Basic component stubs styled to match
cd cloned-designnpm installnpm run dev

What Gets Extracted

The markdown output covers 19 sections:

  1. Color Palette — all unique colors with usage context
  2. Typography — font families, weights, sizes, line heights, letter spacing
  3. Spacing — padding/margin/gap values used across the site
  4. Border Radii — all radius values with component context
  5. Box Shadows — elevation system
  6. CSS Custom Properties — all --var declarations
  7. Breakpoints — detected responsive breakpoints
  8. Transitions & Animations — duration, easing, properties animated
  9. Component Patterns — button, card, input, nav with full CSS snippets
  10. Layout System — grid columns, flex patterns, container widths
  11. Responsive Design — what changes across breakpoints (with --responsive)
  12. Interaction States — hover/focus/active deltas (with --interactions)
  13. Accessibility — WCAG 2.1 contrast scores for all fg/bg pairs
  14. Gradients — type, direction, stops, classification
  15. Z-Index Map — layer hierarchy, z-index wars detection
  16. SVG Icons — deduplicated, size/style classified, color palette
  17. Font Files — source (Google/self-hosted/CDN/system), @font-face CSS
  18. Image Style Patterns — aspect ratios, filters, shape treatments
  19. Quick Start — ready-to-use snippet to recreate the design

Design Scoring

bash
npx designlang score https://your-site.com

Scores 7 categories on a 0–100 scale with A-F grade:

  • Color Discipline — palette size, harmony, usage consistency
  • Typography — scale rationality, weight/size combinations
  • Spacing System — whether spacing follows a scale
  • Shadows — elevation system coherence
  • Border Radii — consistency across components
  • Accessibility — WCAG 2.1 contrast pass rate
  • Tokenization — CSS custom property usage

Troubleshooting

Site loads blank or styles are missing

bash
# Add wait time for JavaScript-heavy SPAsnpx designlang https://app.example.com --wait 3000
# Or use a higher viewport for desktop-only layoutsnpx designlang https://example.com --width 1440 --height 900

Authentication-protected pages

bash
# Get your session cookie from browser DevTools → Application → Cookiesnpx designlang https://app.example.com \  --cookie "auth_token=$AUTH_TOKEN" \  --cookie "csrf=$CSRF_TOKEN"

Output files are too large

bash
# Only generate a specific framework's themenpx designlang https://stripe.com --framework reactnpx designlang https://stripe.com --framework shadcn
# Single-page only (no depth crawling)npx designlang https://stripe.com --depth 0

Too many colors extracted (utility CSS sites)

bash
# Limit to the main page at desktop viewport, no deep crawlnpx designlang https://tailwindcss.com \  --depth 0 \  --width 1280 \  --no-history

Playwright/browser not found

bash
# Playwright needs browsers installednpx playwright install chromium
# Or if installed globally:npm install -g designlangplaywright install chromium

apply command doesn't detect my framework

bash
# Explicitly point to your project root with a tailwind config presentnpx designlang apply https://stripe.com --dir ./my-app
# Ensure ./my-app contains tailwind.config.js or tailwind.config.ts# for Tailwind detection, or components.json for shadcn detection

Integration with AI Agents

The -design-language.md file is specifically structured for LLM consumption. Feed it directly to Claude, GPT-4, or Cursor to:

  • Recreate UI components matching the extracted design
  • Generate new components consistent with the design system
  • Audit your own components against a reference design
  • Document your own site's design system automatically
bash
# Extract your own site's design language for agent contextnpx designlang https://your-production-site.com \  --out ./docs/design \  --name my-app
# Reference in CLAUDE.md or .cursorrules:# "When creating UI components, follow the design language#  documented in ./docs/design/my-app-design-language.md"

來源與署名

來源：reason-machines/trending-skills位於skills/designlang-design-extract提交2384a00

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 reason-machines/trending-skills 的技能

Yourvpndead Vpn Detection

reason-machines

介紹一款 Android 應用程式，用來偵測 VPN 用戶端並探測本機 SOCKS5 與 Clash API 連接埠是否外洩。

Security833 個月前更新

X Mentor Skill Nuwa

reason-machines

提供 X（Twitter）內容策略指引：推文與長推撰寫、鉤子評論、成長策略與帳號診斷。

Marketing & Sales833 個月前更新

Wildworld Dataset

reason-machines

介紹 WildWorld 動作條件 ARPG 世界建模資料集，並提供預期的載入、篩選與基準評測程式碼。

Data & Analytics833 個月前更新

Understand Anything Knowledge Graph

reason-machines

為程式碼庫建立可互動的知識圖譜，並支援視覺化探索、搜尋與提問。

Software Development833 個月前更新

Webphysics Avbd Engine

reason-machines

指導將實驗性 WebGPU AVBD 剛體與軟體物理引擎整合到瀏覽器專案中。

Software Development833 個月前更新

Ui Ux Pro Max Skill

reason-machines

依產品描述產生 UI/UX 設計系統，包含頁面結構、風格、配色、字體搭配與檢查清單。

Design & Creative833 個月前更新

更多Design & Creative技能

Theme Factory

anthropics

精選

提供 10 套預設配色與字型主題，並可即時產生新主題，為簡報、文件、報告與 HTML 頁面統一風格。

Design & Creative179K今天更新

Slack Gif Creator

anthropics

精選

為 Slack 製作尺寸與檔案大小經過最佳化的動畫 GIF，並提供 PIL 繪圖輔助、緩動函式與驗證工具。

包含腳本
Design & Creative179K今天更新

Frontend Design

anthropics

精選

在建立或改造使用者介面時，提供打造獨特、有意識視覺設計的指引。

Design & Creative179K今天更新

Canvas Design

anthropics

精選

依照寫好的設計理念創作原創視覺藝術，輸出 PNG 或 PDF，適合海報、藝術作品等靜態成品。

Design & Creative179K今天更新

Brand Guidelines

anthropics

精選

將 Anthropic 官方品牌配色與字體套用到需要呈現 Anthropic 外觀風格的各類成品上。

Design & Creative179K今天更新

Frontend Design

anthropics

精選

指導代理為新介面或改版介面進行獨特、有意的視覺設計。

Design & Creative149K今天更新