Extract Design System from Frontend Code

google-labs-code/stitch-skills

Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code."

Материал обновлён:

В коллекцииGoogle Stitch Skills ↗
Открыть на GitHub
npx skills add google-labs-code/stitch-skills --skill stitch::extract-design-md
8 963Звёзды1 069ФоркиПоследний push репозитория

Об этом Skill

Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code."

Почему мы его выбрали

Summarized from the original google-labs-code/stitch-skills SKILL.md by Google Stitch; the original upstream instructions were used.

Для каких задач подходит

  • Use this workflow when the task matches the original Extract Design System from Frontend Code instructions.

Перед использованием

  • Read the original SKILL.md and referenced files in google-labs-code/stitch-skills.

Источники и материалы

Ссылки на оригинальные материалы приведены ниже. Практические идеи предложены редакцией SkillHey.