Extracts visual design systems from frontend source code using regex analysis.
npx skills add https://github.com/voidrot/agents --skill extract-design-md
Please help me install this Agent Skill. Skill: extract-design-md Source: https://github.com/voidrot/agents/tree/main/skills/design/extract-design-md Command: npx skills add https://github.com/voidrot/agents --skill extract-design-md
This Skill automates the extraction of a comprehensive design system document from frontend source code, enabling users to quickly understand and document the visual language of their applications.
Use the extract-design-md skill to analyze the source code of your web application and generate a DESIGN.md document.
High-intent search queries and answers about installing and using this skill.
To generate a design system document from frontend source code, this Skill analyzes your files using regex to automatically extract colors, typography, component styles, and layout principles into a DESIGN.md file.
Yes, you can extract a color palette and typography from React and Vue applications, alongside Svelte, Angular, and plain HTML/CSS, including frameworks like MUI, Chakra, and Ant Design.
Extracting visual design systems from source code does not require additional build tools; the Skill analyzes source files directly using regex, allowing you to document your visual language without running builds.
The best way to document component styles and layout principles is to automate the extraction process, which identifies visual elements directly from your codebase to provide design guidelines for team members.
A limitation when extracting design systems from frontend frameworks like Svelte or Angular is that the Skill relies entirely on regex and static source file analysis, meaning it cannot capture styles generated dynamically at runtime.
usenotraAnalyze UI code for Web Interface Guidelines compliance across HTML, CSS, and JS files.
bajajvinamrCreate a cohesive design system with typography, color, spacing, and motion rules.
fengjutianGenerate DESIGN.md files defining visual and interaction standards for Google Stitch.
AradotsoConvert webpage DOM layouts, computed styles, and assets into Figma-compatible JSON.
