Extract design tokens, typography, and palettes from Vue/Nuxt projects into DESIGN.md.
npx skills add https://github.com/lasswellt/blitz-cc --skill design-extract
Please help me install this Agent Skill. Skill: design-extract Source: https://github.com/lasswellt/blitz-cc/tree/main/skills/design-extract Command: npx skills add https://github.com/lasswellt/blitz-cc --skill design-extract
Brownfield Vue/Nuxt + Firebase projects often lack a centralized, portable design system source of truth, forcing manual alignment between UI build tools and design critics and leading to inconsistent aesthetic output across development workflows.
Use the design-extract skill to scan your current Vue/Nuxt + Firebase project's existing design assets and generate a complete DESIGN.md file at the repository root.
High-intent search queries and answers about installing and using this skill.
You can extract design tokens from Tailwind configs, CSS variables, and Vue source code to generate a portable DESIGN.md file. This automated token extraction captures typography rules, color palettes, and component usage samples to establish a centralized source of truth for legacy project bootstrap.
A DESIGN.md file is a centralized, portable design system source of truth documenting design tokens, typography, and color palettes. You need one for brownfield Vue/Nuxt + Firebase projects lacking aligned aesthetic standards across development workflows and downstream UI build tools.
Yes, you can audit design tokens in Firebase projects using this extraction approach. It automatically identifies design tone, font pairings, accent colors, and motion patterns from extracted assets, providing clear open questions for ambiguous inference cases during design system audits.
Yes, automated design token extraction works with Tailwind configs and CSS variables. It scans existing project files including Vue source code to extract design tokens, typography rules, and color palettes, generating a Google Labs Apache-2.0 compliant DESIGN.md source of truth.
The best way to bootstrap a legacy Vue project with scattered Tailwind color extends is running automated token extraction to generate a standardized DESIGN.md file. This eliminates manual DESIGN.md creation and aligns all future UI build steps and design critic workflows.
When aesthetic inference encounters ambiguous design patterns during extraction, it generates clear open questions for those inference cases. This ensures the emitted DESIGN.md file accurately documents design tone, font pairings, and motion patterns without guessing on unclear aesthetic signals.
Pabloprogramador23Extract design tokens from CSS, Tailwind themes, and screenshots into a design-system reference.
markus41Apply curated visual styles and tokens to UI components.
molaei2000Builds universal Vue apps with SSR, file-based routing, and Nitro deployment for Kubernetes and edge environments.
Kevin-Liu-01Generate a DESIGN.md encoding UI rules for Google Stitch screen generation.
