设计提取

80 / 100 · Low risk

Fine to try.

By ahang1598/doubao-workbuddy-qwenwork-skills (GitHub) · design · 97 stars · scanned at commit 5e45653

设计系统提取（Design System Extract）。三模式：① 外部模式——薄包装 designlang CLI，从任意线上站点反向抽取完整 design tokens（颜色 / 字体 / 间距 / 圆角 / 阴影 / 动效等 19 类），产物供 /竞品拆解 / /视觉情绪板 / /设计简报借鉴；② 内部模式——扫描自己的代码仓库（package.json / tailwind.config / components/ / 含 styled-components & emotion 的 CSS-in-JS AST 解析），把已实现的设计语言固化为 design.md；③ Figma 模式——通过 Figma MCP 从设计稿源头抽 Variables / Local Styles，作为设计师 native 入口。三种模式输出统一 schema（meta.source.type 区分），可链入下游 Brief / Board / Bench / 下一个项目 Flow Web，或作为 AI 编程（Cursor / Claude Code）的上下文锚点，也可反哺 SparkDes…

Works with any agent that supports SKILL.md skills.

What this skill can do

Downloads and installs other software

The author does not mention this.

Found in 8 places.

qwenwork/experts/product-design/skills/extract/SKILL.md, line 125| "我要 designlang 的 watch / sync / score / diff" | 直接走 `npx designlang <subcommand>` | 本 Skill 不包装这些运维向命令，原生 CLI 更直接 |
qwenwork/experts/product-design/skills/extract/SKILL.md, line 127**与 designlang CLI 的关系**：本 Skill 是 designlang 在 SparkSkillsHub 链路里的**薄包装层**——加四件事：① 模式识别（外部 / 内部 / Figma 三选一）；② 统一 schema（三种产出对齐）；③ SparkDesign 适配 diff（命名 + 语义双
qwenwork/experts/product-design/skills/extract/SKILL.md, line 281- 检查 `npx designlang --version` 能否解析 → 否则提示 `npm install -g designlang` 或走 fallback

Show 5 more

qwenwork/experts/product-design/skills/extract/SKILL.md, line 282- 检查 `npx playwright install --dry-run chromium` → 缺失时引导安装
qwenwork/experts/product-design/skills/extract/SKILL.md, line 329npx designlang <url> \
qwenwork/experts/product-design/skills/extract/SKILL.md, line 58810. **外部模式必须走 designlang CLI**（v0.5.3 新增）：默认路径必须是 `npx designlang extract`；浏览器 JS computed style 抓取仅限红线 10 描述的 fallback 场景，且必须显式标 `fallback_applied=["browser-js
qwenwork/experts/product-design/skills/extract/SKILL.md, line 60510. **外部模式禁止用浏览器 JS computed style 替代 designlang CLI**（v0.5.3 新增）：外部模式底层**必须**调 `npx designlang extract <url> --interactions`。浏览器 puppeteer / `getComputedStyle`
qwenwork/experts/product-design/skills/extract/SKILL.md, line 6496. **不做 watch / sync / score / diff 子命令**：designlang 原生支持，本 Skill 不包装；用户需要时直接走 `npx designlang score|diff|watch|sync`（README 有直通段落说明）

Runs commands on your computer

The author does not mention this.

Found in 1 place.

qwenwork/experts/product-design/skills/extract/SKILL.md, line 329npx designlang <url> \

Install

Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.

if [ -e ~/.agents/skills/'extract' ] || [ -L ~/.agents/skills/'extract' ]; then echo 'A skill folder named extract already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/ahang1598/doubao-workbuddy-qwenwork-skills' "$d" && git -C "$d" checkout --quiet '5e45653f59a2e4a2a65f575e8aaf7637165674d5' -- 'qwenwork/experts/product-design/skills/extract' && mkdir -p ~/.agents/skills && cp -R "$d"/'qwenwork/experts/product-design/skills/extract' ~/.agents/skills/'extract' && rm -rf "$d"; fi

Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'extract' ~/.claude/skills/'extract' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.

Badge for your README

The badge for ahang1598/doubao-workbuddy-qwenwork-skills shows the score of its lowest-scoring skill.

SkillTrust badge for ahang1598/doubao-workbuddy-qwenwork-skills

[![SkillTrust](https://zalavijaysinh.github.io/skilltrust/badges/ahang1598/doubao-workbuddy-qwenwork-skills.svg)](https://zalavijaysinh.github.io/skilltrust/repos/ahang1598/doubao-workbuddy-qwenwork-skills/)

Score history

Date	Version	Score
2026-11-07	`5e45653`	80