extract-design-system

仓库创建 2026年7月25日最近提交 1 天前SkillHot 收录 1 天前

▸ 精选理由

快速把现网视觉抽成可复用 token，节省建系统前期工作。

▸ 风险提示

会访问并抓取外部网站，存在网络请求隐私/频率风险

这个 Skill 做什么

从公开网站反向抽取设计原子并生成入门代币文件。

把公开网站当样板，自动抓取颜色、字号、间距等设计原子，并生成项目可用的 tokens 和入门资产文件，帮你快速搭起设计系统的起点。适合想快速复刻某个视觉风格或为项目生成 starter token 时使用。要注意的是会产出 token 和 starter 资源，但不是完整的组件库，组件实现仍需人工补完。

▸ 展开 SKILL.md 英文原文

Extract design primitives from a public website and generate starter token files for your project.

开发编程提取设计设计代币反向工程通用

Stars

Forks

仓库内 Skill

积累中

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/webiscorp/designskill-open/main/skills/extract-design-system/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/webiscorp/designskill-open/main/skills/extract-design-system/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# Extract Design System

Use this skill when the user wants to reverse-engineer a public website's design primitives into project-local starter token files.

## Before You Start

Ask for:

- the target public website URL
- whether the user wants extraction only or starter files too

Set expectations:

- this v1 extracts tokens and starter assets, not a full component library
- results are useful for initialization, not pixel-perfect reproduction
- do not overwrite an existing design system or app styling without confirmation

## Workflow

1. Confirm the target URL is public and reachable.
2. Run:

```bash
npx playwright install chromium
npx extract-design-system <url>
```

3. Review `.extrac

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有