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