🎁 Get the FREE AI Skills Starter Guide — Subscribe →
BytesAgainBytesAgain
BytesAgain › Skills › Extract Design
🦀 ClawHub

Extract Design

by @vintlin

Use this skill when the user wants to extract a webpage's design language into a reusable HTML style reference file, including typography, colors, spacing, s...

Versionv1.0.1
Downloads445
#translation#legal
TERMINAL
clawhub install extract-design

📖 About This Skill

name: extract-design description: Use this skill when the user wants to extract a webpage's design language into a reusable HTML style reference file, including typography, colors, spacing, surfaces, components, states, themes, motion, code-block styles, background atmosphere, decorative motifs, and art direction. The output should be a universal style specimen HTML for future AI-generated pages, not a 1:1 copy of the original page. Extracted style files are saved to the skill's own assets/theme/ directory, never to the user's project.

Extract Design

Output Location

CRITICAL: All extracted style files MUST be saved to the skill's own assets/theme/ directory — never to the user's project directory, never to a relative path from the current working directory.

Before writing any output file, resolve the skill directory by running:

Glob pattern: **/skills/extract-design/SKILL.md

The directory containing that SKILL.md file is SKILL_DIR. All output goes under SKILL_DIR/assets/theme/.

Output files use the source domain or project name as a prefix:

SKILL_DIR/assets/theme/
├── {name}-style-manifest.json    # Structured style manifest
└── {name}-style-specimen.html    # Universal style specimen HTML

Examples (where SKILL_DIR is whatever path the Glob resolved):

  • {SKILL_DIR}/assets/theme/ampcode-style-manifest.json
  • {SKILL_DIR}/assets/theme/ampcode-style-specimen.html
  • {SKILL_DIR}/assets/theme/vercel-style-manifest.json
  • {SKILL_DIR}/assets/theme/vercel-style-specimen.html

    • Create the assets/theme/ directory if it does not exist before writing.

    Reference Files

    The references/ directory inside this skill contains two files you MUST use during every extraction. Both paths are relative to SKILL_DIR (resolved via Glob above):

  • {SKILL_DIR}/references/extraction-checklist.md — comprehensive checklist for all extraction dimensions. Work through every section; note why if a dimension is not applicable.
  • {SKILL_DIR}/references/style-specimen.html — structural template for Output C. Your generated specimen must follow the same structure.

    • WARNING: The template contains /* REPLACE */ placeholders for every CSS token value. You MUST replace ALL of them with values measured from the target site. Do NOT keep any placeholder value in the final output. A /* REPLACE */ in the output file means the extraction is incomplete.

    When to use

    Use this skill when the user wants to:

  • 提取某个网页的视觉风格
  • 让 AI 学习一个网站的设计语言并生成同风格页面
  • 从网页中抽取字体、字号、字色、背景样式、图片背景、条纹/网格/纹理、动画、卡片样式、代码块样式
  • 将网页风格沉淀为一个可复用的 HTML 参考文件
  • 构建设计样张页 / style specimen / design reference file
  • 将一个具体网页抽象成更通用的设计系统表达
  • 抽取整页“氛围感 / atmosphere / art direction”，而不仅是组件样式

    • Do not use this skill if the user wants:

  • 仅截图网页
  • 仅复制页面 DOM 或下载页面资源
  • 仅修复某个单独 CSS 问题
  • 仅做像素级 1:1 复刻
  • 仅导出 raw CSS dump

    • This skill is for style system extraction, not page cloning.

    Core principle

    Your task is not to reproduce the page structure.

    Your task is to extract the page's visual system and represent it as:

    1. Primitive tokens 2. Semantic tokens 3. Background / atmosphere system 4. Decorative motif system 5. Component archetypes 6. Interaction rules 7. A universal style specimen HTML

    The final result must be a general-purpose reference file that another AI can read and use to generate new pages in the same style.

    Think in terms of:

  • design tokens
  • semantic roles
  • theme layers
  • background atmosphere
  • decorative motifs
  • component patterns
  • state behavior
  • motion language
  • responsive rules
  • art direction

    • Do not think in terms of:

  • copying all classes
  • mirroring page DOM
  • dumping raw CSS blindly
  • preserving irrelevant content text
  • flattening atmospheric styling into a single background color

    • The goal is:

    Preserve not only the component language, but also the page atmosphere, decorative motifs, and art direction. A faithful extraction must capture both system structure and visual mood.

    Output contract

    When using this skill, produce three outputs:

    Output A — Extraction summary

    A concise explanation of the extracted style system:

  • overall design character
  • typography system
  • color system
  • spacing/layout rhythm
  • surface/elevation language
  • background / atmosphere language
  • decorative motifs
  • motion language
  • component family
  • theme/responsive behavior
  • extraction confidence
  • limitations

    • Output B — Structured style manifest

    A required machine-readable JSON file saved to {SKILL_DIR}/assets/theme/{name}-style-manifest.json, describing:

  • meta
  • primitives
  • semantic tokens
  • background system
  • motifs
  • themes
  • motion tokens
  • component archetypes
  • responsive rules
  • accessibility notes
  • limitations

    • Output C — Universal style specimen HTML

    A single HTML file containing:

  • CSS tokens
  • theme layers
  • background/atmosphere layers
  • motif samples
  • component styles
  • specimen sections
  • a design manifest in