frontend-design-extractor
✓프런트엔드 코드베이스에서 재사용 가능한 UI/UX 디자인 시스템(디자인 토큰, 전역 스타일, 구성 요소, 상호 작용 패턴, 페이지 템플릿)을 추출합니다. 프로젝트 전체에서 재사용할 수 있도록 UI/UX를 문서화하거나 마이그레이션하기 위해 프런트엔드 저장소(React/Vue/Angular/Next/Vite/등)를 분석할 때 사용합니다. UI/UX에만 집중하세요. 비즈니스 로직과 도메인 워크플로를 명시적으로 무시합니다.
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.
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/xsir0/xsir-skills --skill frontend-design-extractor- 카테고리
- </>개발 도구
- 인증됨
- ✓
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
frontend-design-extractor이란?
프런트엔드 코드베이스에서 재사용 가능한 UI/UX 디자인 시스템(디자인 토큰, 전역 스타일, 구성 요소, 상호 작용 패턴, 페이지 템플릿)을 추출합니다. 프로젝트 전체에서 재사용할 수 있도록 UI/UX를 문서화하거나 마이그레이션하기 위해 프런트엔드 저장소(React/Vue/Angular/Next/Vite/등)를 분석할 때 사용합니다. UI/UX에만 집중하세요. 비즈니스 로직과 도메인 워크플로를 명시적으로 무시합니다. 출처: xsir0/xsir-skills.
frontend-design-extractor 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/xsir0/xsir-skills --skill frontend-design-extractor 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/xsir0/xsir-skills