doccker

Style Extract — Design skill for Claude Code

Design community

description: 从代码或设计图提取样式变量 allowed-tools: Read, Grep, Glob 从 Vue 组件或设计图中提取样式规范.

How to install Style Extract

Installs to ~/.claude/commands/doccker-cc-use-exp-style-extract.md

Terminal

mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/doccker/cc-use-exp/HEAD/.claude/commands/style-extract.md -o ~/.claude/commands/doccker-cc-use-exp-style-extract.md

Restart Claude Code, or start a new session, for it to be picked up.

What Style Extract does

description: 从代码或设计图提取样式变量 allowed-tools: Read, Grep, Glob

从 Vue 组件或设计图中提取样式规范。

输入

「$ARGUMENTS」

**支持的输入类型**：

输入	示例	说明
目录	`web/src`	扫描所有样式文件
文件	`Card.vue`	分析单个组件
图片	`design.png`	识别设计稿样式
空		默认扫描 `web/src`

模式 A：代码提取（目录/文件）

A1. 扫描样式文件

查找以下文件：

*.vue 中的块
*.css / *.scss 文件
Element Plus 主题变量覆盖

A2. 提取变量

类别	提取内容
颜色	`--el-color-*`、自定义颜色变量
字体	`font-size`

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Planning With Files — Claude Code skill implementing Manus-style persistent markdown planning — the workflow pattern behind the $2B 17.4k ★
Explanatory Output Style — Educational output mode with insights about implementation choices 14k ★