frontend-design-extractor
Extrahieren Sie wiederverwendbare UI/UX-Designsysteme aus Frontend-Codebasen: Design-Tokens, globale Stile, Komponenten, Interaktionsmuster und Seitenvorlagen. Verwenden Sie es bei der Analyse eines beliebigen Frontend-Repositorys (React/Vue/Angular/Next/Vite/etc.), um UI/UX zur projektübergreifenden Wiederverwendung zu dokumentieren oder zu migrieren. Konzentrieren Sie sich nur auf UI/UX; Geschäftslogik und Domänenworkflows werden explizit ignoriert.
Installation
SKILL.md
Overview Extract a reusable UI/UX design spec from a frontend codebase by inventorying UI sources, documenting foundations, cataloging components, and capturing page-level patterns and behaviors. Exclude business logic and domain-specific workflows. Framework-agnostic: adapt to the actual stack in the target repo.
Quick start 1) Confirm mode: new project (greenfield) or refactor existing. Clarify that business logic is out of scope. 2) If existing repo: run scripts/scanuisources.sh to scan the repo root (no directory layout assumptions). It uses common globs + keyword hits, and ignores common build/cache dirs and extraction output folders by default.
3) Optionally: scripts/scanuisources.sh [outfile] [extraglob ...] or --root/--out/--ignore for nonstandard layouts. 4) Create the output folder (default ./ui-ux-spec) via scripts/generateoutputskeleton.sh and write all extraction results inside it.
Fakten (zitierbereit)
Stabile Felder und Befehle für KI/Such-Zitate.
- Installationsbefehl
npx skills add https://github.com/xsir0/xsir-skills --skill frontend-design-extractor- Quelle
- xsir0/xsir-skills
- Kategorie
- </>Entwicklung
- Verifiziert
- —
- Erstes Auftreten
- 2026-02-01
- Aktualisiert
- 2026-02-18
Schnelle Antworten
Was ist frontend-design-extractor?
Extrahieren Sie wiederverwendbare UI/UX-Designsysteme aus Frontend-Codebasen: Design-Tokens, globale Stile, Komponenten, Interaktionsmuster und Seitenvorlagen. Verwenden Sie es bei der Analyse eines beliebigen Frontend-Repositorys (React/Vue/Angular/Next/Vite/etc.), um UI/UX zur projektübergreifenden Wiederverwendung zu dokumentieren oder zu migrieren. Konzentrieren Sie sich nur auf UI/UX; Geschäftslogik und Domänenworkflows werden explizit ignoriert. Quelle: xsir0/xsir-skills.
Wie installiere ich frontend-design-extractor?
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/xsir0/xsir-skills --skill frontend-design-extractor Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code oder Cursor
Wo ist das Quell-Repository?
https://github.com/xsir0/xsir-skills
Details
- Kategorie
- </>Entwicklung
- Quelle
- user
- Erstes Auftreten
- 2026-02-01