frontend-design-extractor
從前端代碼庫中提取可重用的 UI/UX 設計系統：設計令牌、全局樣式、組件、交互模式和頁面模板。在分析任何前端存儲庫（React/Vue/Angular/Next/Vite/等）時使用，以記錄或遷移 UI/UX 以在項目之間重用。僅關注 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 設計系統：設計令牌、全局樣式、組件、交互模式和頁面模板。在分析任何前端存儲庫（React/Vue/Angular/Next/Vite/等）時使用，以記錄或遷移 UI/UX 以在項目之間重用。僅關注 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 中使用
這個 Skill 的原始碼在哪？
https://github.com/xsir0/xsir-skills