What makes style-extractor notable?

1K downloads. Trust evidence available

How should style-extractor be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

style-extractor

从 URL、截图或前端项目源码中逆向提取 UI 视觉风格，产出三层 Design Token 系统（Primitive → Semantic → Component），封装为可复用的 WorkBuddy 通用风格技能。 Skill: style-extractor Owner: namepain Summary: 从 URL、截图或前端项目源码中逆向提取 UI 视觉风格，产出三层 Design Token 系统（Primitive → Semantic → Component），封装为可复用的 WorkBuddy 通用风格技能。 Tags: latest:0.1.0 Version history: v0.1.0 | 2026-08-10T07:42:30.846Z | auto Style Extractor 2.0.0 introduces a comprehensive design token extraction and packaging pipeline for web projects, images, and codebases. - Extracts full UI design systems from URLs, scr

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.0k

Updated

Oct 11, 2026

Version

0.1.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 10/11/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 11, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 11, 2026
Adoption signal: 1K downloadsadoption · observed Oct 11, 2026
Latest release: 0.1.0release · observed Aug 10, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s173xe0t6gv3a8j1p6atk0v1cs8c6x4v:style-extractor

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-namepain-style-extractor/snapshot"

Run-check

$0.02 USD

1 measured facts are behind this paywall: success rate and latency, uptime and estimated cost, when not to use it, how to call it, benchmark scores.

Agents pay $0.02 in USDC. A card payment is $0.50, the smallest a card allows.

Documentation

CLAWHUB

58,648 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: style-extractor
version: 2.0.0
title: "Style Extractor — UI 视觉风格提取与 Design Token 系统构建"
description: "从 URL、截图或前端项目源码中逆向提取 UI 视觉风格，产出三层 Design Token 系统（Primitive → Semantic → Component），封装为可复用的 WorkBuddy 通用风格技能。"
author: namepain
type: command
category: development
tags:
  - ui
  - design-system
  - design-tokens
  - css
  - visual-style
invocation: "/style-extractor"
difficulty: intermediate
permissions:
  read:
    - project files
    - web pages
  write:
    - project files
  network: required
examples:
  - input: "/style-extractor https://linear.app 的设计风格"
    output: "抓取页面 CSS → 提取设计变量 → 生成三层 Token → 封装 brand-style-linear 技能"
  - input: "/style-extractor 这张截图里的 UI 风格给我封装成 skill"
    output: "多模态分析截图 → 推断配色/排版/间距 → 标志为证据 A 级 → 生成技能供用户确认"
  - input: "/style-extractor ./my-nextjs-app 的 tailwind 主题"
    output: "扫描 tailwind.config + globals.css → 提取 Primitive 色阶/Semantic 角色 → 生成品牌技能"
agent_created: true
---

# Style Extractor

Extract a complete design system from any web page, image, or codebase and package it as a reusable WorkBuddy style skill.

## Overview

This skill provides a multi-phase pipeline with optional mode splitting:

| Phase | Mode | Output |
|-------|------|--------|
| Phase 1 — Audit | Audit-only mode | Evidence inventory, raw values, duplicates, drift, exceptions |
| Phase 2 — Design | Design mode | Three-layer tokens (Primitive → Semantic → Component), naming, theme mappings |
| Phase 3 — Package | Generate mode | Complete WorkBuddy style skill with all references |
| Phase 4 — Verify | Verify mode | Format, reference, theme, and state validation + optional demo page |

By default, run all phases. The user can request audit-only, design-only, or verify-only mode.

## Core Principles

### Evidence Grading

Every extracted value MUST be tagged with one of four evidence levels:

| Grade | Label | Meaning |
|-------|-------|---------|
| **D** | 已定义 (Defined) | Found in existing CSS variables, theme config, or design token files |
| **M** | 已测量 (Measured) | Confirmed from source code references, browser computed styles, or rendered output |
| **I** | 有依据的归纳 (Inferred) | Reasonably deduced from repeated patterns across multiple pages/components |
| **A** | 暂时假设 (Assumed) | Best guess based on limited data; MUST be explicitly flagged for user review |

Never present an assumed value as a confirmed fact. The evidence grade determines how aggressively the token can be used in migration.

### Three-Layer Token Architecture

Tokens are organized into three layers, NOT a flat list:

```
Primitive (原材料)    →  color.blue.600, space.4, radius.md, font.size.lg
                            ↑ reference only — do not use in components directly
Semantic (设计角色)   →  color.action.primary, color.bg.surface, space.container.padding
                            ↑ components use these
Component (组件特化)  →  button.primary.bg.default, input.border.focus, dialog.shadow
                            ↑ only when semantic tokens are insufficient
```

*

README.md

# Style Extractor

从 URL、截图或前端项目源码中逆向提取 UI 视觉风格，产出三层 Design Token 系统，封装为可复用的通用风格技能。

## 核心特性

- **三种输入源** — URL（自动抓取 CSS）、截图（多模态分析）、前端项目源码（解析 Tailwind/CSS/Theme）
- **三层 Token 架构** — Primitive（原材料）→ Semantic（设计角色）→ Component（组件特化），解耦值与角色
- **四级证据标注** — D（已定义）/ M（已测量）/ I（有依据归纳）/ A（暂时假设），每一条 token 都可追溯
- **多运行模式** — 审计（只盘点）/ 设计（建三层）/ 打包（生成技能）/ 验证（8 项检查 + demo 页）
- **通用输出格式** — 产出标准 WorkBuddy 风格技能，不限任何 AI 工具

## 快速开始

```
/style-extractor https://linear.app
/style-extractor ./my-nextjs-app
/style-extractor screenshot.png
```

## 工作流

| 阶段 | 模式 | 产物 |
|---|---|---|
| Phase 1 — 审计 | 审计模式 | 证据清单、原始值、冲突发现 |
| Phase 2 — 设计 | 设计模式 | 三层 Token（Primitive → Semantic → Component） |
| Phase 3 — 打包 | 生成模式 | 完整 WorkBuddy 风格技能 + 5 个参考文档 |
| Phase 4 — 验证 | 验证模式 | 格式/引用/层级/主题 8 项检查 + 可选 demo 页 |

## 输出技能结构

```
brand-style-{name}/
├── SKILL.md                    # 三层架构总览 + 快速参考
└── references/
    ├── colors.md               # Primitive 色阶 + Semantic 颜色角色 + 主题映射
    ├── typography.md            # Primitive 字号阶梯 + Semantic 文字角色
    ├── spacing.md               # Primitive 间距/圆角/阴影 + Semantic 布局角色
    ├── components.md            # Component 层 + 组件指纹
    └── known-gaps.md            # 来源冲突、待确认假设、设计例外、提取局限
```

## 内置参考

- `references/extraction-checklist.md` — 带证据标注的完整提取清单
- `references/output-format.md` — YAML + 三层 Token 输出格式规范
- `references/validation-checklist.md` — 8 项后验证检查
- `references/common-pitfalls.md` — 5 类常见翻车 + 避坑指南

## 设计理念

基于 [Kryon 的文章](https://mp.weixin.qq.com/s/SwzGgLLW9RC2fTDw1cWRZQ) 和 [skillui](https://www.npmjs.com/package/skillui) 的实践，融合了三层 Token 架构、证据分级系统和后验证闭环。

**不要做的事**比**应该做什么**更有价值——详见 `references/common-pitfalls.md`。

## 作者

- **Author**: [namepain](https://github.com/namepain)
- **GitHub**: https://github.com/namepain/style-extractor

_meta.json

{
  "ownerId": "kn7dqfmkmy25x2hq1p4jt5kycd8c6bj3",
  "slug": "style-extractor",
  "version": "0.1.0",
  "publishedAt": 1786347750846
}

references/common-pitfalls.md

# Common Pitfalls in Design Token Extraction

These are the five most common mistakes when extracting design tokens from existing UI. Understanding them saves more time than any extraction technique.

---

## Pitfall 1: Treating Frequency as Design Intent

**The mistake:** Counting occurrences — "this value appears 47 times, it must be a token."

**Why it's wrong:**
- A value appearing 50 times may just be early copy-paste code replicated across the codebase
- A value appearing once (e.g., brand title font, maximum page width, top-layer modal shadow) may be the most important design decision in the entire system
- Frequency indicates "where to look," not "what matters"

**The fix:**
For each candidate value, ask:
1. Does it express a stable design role (not an accident of history)?
2. Would changing it break the design coherence?
3. Should it change together with other instances?
4. Does it need to vary by theme?

A value that scores yes on 1-2 of these is a strong candidate. A value that scores yes on all four is a mandatory token.

---

## Pitfall 2: Force-Merging Near-Duplicates

**The mistake:** Seeing 15px, 16px, 17px and averaging them to 16px to get a "clean 4px scale."

**Why it's wrong:**
- 15px may be a button height constrained by the font's x-height
- 16px may be a text size set by the design system's base unit
- 17px may be a table row height with a 1px border compensation
- Differences from font metrics, component sizing constraints, responsive scaling, or intentional optical adjustments are NOT drift — they serve a purpose

**The fix:**
1. List all "near-duplicate" values with their locations
2. For each, determine whether the difference is intentional (font metrics, component identity, responsive) or accidental (copy-paste drift)
3. Only merge values confirmed to be accidental drift
4. For intentional differences, either keep separate tokens OR document as a known exception
5. Never let "looks nicer on a 4px grid" override functional intent

---

## Pitfall 3: Skipping Browser Rendering

**The mistake:** Running a global regex search for hex codes and pixel values, cataloging everything found in source files.

**Why it's wrong:**
- CSS specificity can override values declared in theme files
- Theme scopes (`.dark`, `[data-brand="x"]`) can remap variables at runtime
- Third-party component libraries may inject their own styles that override yours
- Media queries can change values at different viewports
- Some CSS variables may reference other variables that resolve differently at runtime
- Deprecated code may still exist in files but has no effect

**The fix:**
If the project can run:
1. Open key pages in a browser
2. Inspect actual computed styles on real elements
3. Check `getComputedStyle()` for final resolved values
4. Note which theme variables are actually being consumed
5. Flag values that exist in source but are overridden at runtime

If the project cannot run:
1. Flag ALL values as grade I (inferred) or A (assumed)
2. Docu

references/extraction-checklist.md

# Extraction Checklist

Comprehensive checklist for extracting design tokens from any source. Each item should be tagged with an evidence grade and a target token layer.

## Evidence Grades

| Grade | Label | Meaning |
|-------|-------|---------|
| **D** | 已定义 (Defined) | Found in CSS variables, theme config, or design token files |
| **M** | 已测量 (Measured) | Confirmed from source code or browser computed styles |
| **I** | 有依据的归纳 (Inferred) | Reasonably deduced from patterns across multiple components |
| **A** | 暂时假设 (Assumed) | Best guess; MUST be reviewed by user |

## Token Layers

| Layer | Purpose | Naming Rule |
|-------|---------|-------------|
| **Primitive** | Raw materials (color scales, spacing steps, font sizes) | Name what it IS: `color.blue.500`, `space.4`, `radius.md` |
| **Semantic** | Design roles (backgrounds, text, actions, statuses) | Name what it DOES: `color.action.primary`, `color.bg.page` |
| **Component** | Per-component overrides | Name what it's FOR: `button.primary.bg.default`, `input.border.focus` |

## Colors

For each color discovered, record:

- [ ] **Hex value** (e.g., `#3B82F6`) — include alpha channel if used (e.g., `#165DFF14`)
- [ ] **Evidence grade:** D (from CSS variable) / M (from computed style) / I (from visual sampling) / A (assumed)
- [ ] **Target layer:** Primitive (raw color) → Semantic (role) → Component (per-element)
- [ ] **Current role(s):** What elements use this color (buttons, headings, backgrounds, borders, icons)
- [ ] **Theme variation:** If source has light/dark mode, document both — different themes may map to the same primitive
- [ ] **Same-value warning:** If this hex value also appears in a DIFFERENT semantic role, flag it — they must become separate semantic tokens

### Extraction Methods by Source

**URL:** Extract from CSS `color`, `background-color`, `border-color`, `--*` variables (D), Tailwind `bg-*`, `text-*` classes (D), computed styles (M)
**Screenshot:** Identify dominant colors by visual sampling (I); accent, surface, and text colors are more reliable than subtle variations
**Project:** Parse theme configs (D), CSS variables (D), design token JSON (D), SCSS `$variables` (D), computed styles from browser (M)

### Three-Layer Organization

```markdown
## Primitive: Color Scales (evidence: D)

| Token | Hex | Evidence | Notes |
|-------|-----|----------|-------|
| `color.blue.50` | `#E8F3FF` | D | Lightest blue |
| `color.blue.100` | `#BEDAFF` | D | |
| ... | | | |
| `color.blue.500` | `#165DFF` | D | Default interaction blue |
| `color.blue.600` | `#0E42D2` | D | Hover state |
| ... | | | |
| `color.blue.900` | `#001B4D` | D | Darkest blue |
| `color.gray.50` | `#F7F8FA` | D | Lightest gray |
| ... | | | |
| `color.gray.900` | `#1D2129` | D | Darkest gray |

## Semantic: Design Roles (evidence: I)

| Token | Maps To | Light Theme | Dark Theme | Evidence |
|-------|---------|-------------|------------|----------|
| `color.action.primary` | `color.blue.500` | `#165DFF` | `#4080

Github ReposUpdated 2d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.

MCPOPENCLAW

Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular