Screenshot to Design System

Extracts color tokens and component styles from UI screenshots by reading each control region individually (not full-page layout). Generates a complete design system demo with tokens.css and components.html. Ignores backgrounds and icons. Use when the user uploads a UI screenshot, asks for design tokens, color palette extraction, or component library generation from a reference image.

6 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add WCF900905/screenshot-to-design-system --skill screenshot-to-design-system

Manual install

git clone --depth 1 https://github.com/WCF900905/screenshot-to-design-system.git /tmp/screenshot-to-design-system
mkdir -p ~/.claude/skills
cp -r /tmp/screenshot-to-design-system/. ~/.claude/skills/screenshot-to-design-system

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Screenshot to Design System

Compatible with [Agent Skills](https://agentskills.io) tools: **Cursor** (`~/.cursor/skills/`), **Claude Code** (`~/.claude/skills/`), **OpenAI Codex** (`~/.agents/skills/`). Install: `curl -fsSL .../scripts/install.sh | bash`

从参考图中**逐个读取控件区域**（非整页），提取配色 token 与控件样式，生成控件库 Demo。**不还原页面布局**，只关心控件与配色；**忽略背景与 icon**。

## 核心原则：读控件，不读页面

| 读 | 不读 |
|----|------|
| 截图中每个独立控件的样式 | 整页布局、页面背景、装饰层 |
| 控件自身的填充色、边框、圆角、阴影、字号 | 状态栏、导航栏所在「页面」结构 |
| 控件之间的样式规律（归纳 token） | 控件在页面中的位置关系 |

输入可以是 App 截图、控件展示板、设计稿局部——**一律按控件区域处理**，不按整屏页面处理。

## 范围

| 提取 | 忽略 |
|------|------|
| 各控件区域的配色、尺寸、圆角、阴影 | 页面背景图、渐变底、插画 |
| 控件形状与变体 | icon 图形、logo、头像内容 |
| 文字层级（来自控件内文案） | 地图、3D、复杂装饰 |

整页高保真复刻 → 转用 `image2_UI_skill`。

## 输出

`demo/<slug>/`：

```
tokens.json / tokens.css
components-list.md
style-guide.html / components.html
analysis.md / ui-review-report.md
reference.png / screenshots/
```

## 工作流

```
- [ ] Step 1: 控件区域检测（非整页）
- [ ] Step 2: 逐控件取色与 token 归纳
- [ ] Step 3: 控件识别与补全
- [ ] Step 4: 生成 Demo HTML
- [ ] Step 5: 浏览器截图
- [ ] Step 6: 子 Agent 走查（仅 1 次）
- [ ] Step 7: 修复严重与中等问题
- [ ] Step 8: 交付用户
```

**修复完成前不得告知用户任务结束。**

### Step 1: 控件区域检测

1. 读图，判断输入类型（控件展示板 / App 截图 / 拍屏 / 无 UI）。规则见 [references/input-detection.md](references/input-detection.md)。
2. **划定控件区域**：枚举图中每个可独立识别的 UI 控件（按钮、输入框、卡片、列表行、Tab、Chip 等），记录类别与大致位置。
3. **排除非控件区域**：页面背景、留白、状态栏、装饰插画、icon 图形——不纳入分析。
4. 推断平台与设计语境（iOS / Android），画布尺寸仅作参考，**不作为页面复刻目标**。
5. 将检测结果写入 `analysis.md` 的「控件区域清单」。

Read the full skill on GitHub

Details

Skill name: screenshot-to-design-system
Repository: WCF900905/screenshot-to-design-system
License: MIT
Repo updated: 5 July 2026

FAQ

What does the Screenshot to Design System skill do?

How do I install the Screenshot to Design System skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add WCF900905/screenshot-to-design-system --skill screenshot-to-design-system. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Screenshot to Design System popular?

It lives in WCF900905/screenshot-to-design-system, which has 6 GitHub stars and 0 forks.

Related skills

Art Director

NewenergyEric/art-director-skill

Help art directors turn references, taste and samples into a shareable project pack, then guide teammates and agents to create, review and deliver consistent components. Use for art-direction setup, visual systems, multi-category production and revisions in games, UI and campaigns.

Frontend & Design

Salgadoia Web Design Engineer Pro

Luispitik/salgadoia-web-design-engineer-pro

Skill end-to-end para construir webs y landings profesionales con Next.js 16, React 19, Tailwind CSS v4, shadcn/ui y Framer Motion. Pensada para que un usuario sin conocimientos técnicos pueda PREVISUALIZAR estilos en su navegador antes de elegir, y completar la página de principio a fin (intake, brief, diseño, build, QA, deploy). Combina 8 direcciones visuales narrativas (Editorial Serif, Swiss Minimal, Luxury Dark Warm, Corporate Bold, Understated Elegance, Neo-Brutalist, Playful Gradient, Retro Terminal) con 10 paletas y 10 emparejamientos tipográficos en un sistema mix-and-match con build-

Frontend & Design

Frontend

adamholter/frontend-skill

Always read anytime you're making any UI the user will see, whether that's a one-off HTML file or a tool they're building. Any visual artifact at all.

Frontend & Design

Quasar Vue3

felixyakubov91/claude-quasar

Comprehensive Quasar Framework (v2) and Vue 3 development assistance. Use this skill when working with Quasar projects, components, plugins, directives, composables, CLI configuration, or building apps (SPA, SSR, PWA, Electron, Capacitor, Cordova, Browser Extensions). Triggers on Quasar-specific questions, quasar.config.js, Q-prefixed components (QBtn, QInput, QTable, etc.), Quasar CLI commands, or Vue 3 Composition API with Quasar.

Frontend & Design

Mente Designer

eulucasduty/mente-designer

DNA de design de 20 sites premium (engenharia reversa via DevTools) — a fórmula Webflow/HTML + Lenis + GSAP/ScrollTrigger destilada em leis, calibres medidos e 22 efeitos nomeados com código. Use ao criar landing pages animadas, sites com scrollytelling, heroes tipográficos, vídeo-fundo, marquees, pin/scrub ou qualquer página que precise de "feel" de agência de elite.

Frontend & Design

Qiaomu Tldraw Skill

joeseesun/qiaomu-tldraw-skill

Official-first Qiaomu tldraw creation skill and workflow for building, editing, recreating, scripting, linting, testing, migrating, and packaging tldraw canvases or tldraw SDK apps with the official CLI and official LLM-friendly documentation. Use when the user asks to 画 tldraw、复刻成可编辑画布、制作流程图/信息图/课件、创建交互或动画画布、写 custom ShapeUtil/document script、检查 .tldraw 文件， or scaffold and migrate a tldraw React application using official sources only.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.