Frontend Design Extractor
Extract a reusable UI/UX design specification from a frontend codebase by inventorying UI sources, documenting design foundations, cataloging components, and capturing page-level patterns and behaviors. Framework-agnostic tool supporting both greenfield projects and existing codebase refactoring.
🚀 Extract and document your UI/UX design system from any frontend codebase. This skill inventories components, design tokens, and page patterns—then organizes them into a reusable spec. Perfect for understanding existing designs or building new ones from scratch, all without touching business logic.
💡 Use it to audit current projects, plan design refactors safely, or create a foundation for new products. Works with any framework (React, Vue, Angular, etc.) and adapts to your actual tech stack.
✨ Get a complete design spec with tokens, components, templates, and migration guidance—all in one structured output folder.
Requirements
No additional requirements.