skills.rest
Ezequielpereyraa
EzequielpereyraaCOMMUNITY
Explore all skills by this author →
Website𝕏@EzhePereyraGitHub

design-init

Scan Tailwind and CSS projects to extract design tokens and generate DESIGN.md.

Updated Mar 5, 2026
Search Tags:#tailwind#tokens#design-system#css-variables#design-tokens#design-init
One-click install
npx skills add https://github.com/Ezequielpereyraa/ai-config --skill design-init-ezequielpereyraa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-init
Source: https://github.com/Ezequielpereyraa/ai-config/tree/main/cursor/skills/design-init
Command: npx skills add https://github.com/Ezequielpereyraa/ai-config --skill design-init-ezequielpereyraa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the discovery of design tokens from a project's fonts, colors, spacing, and animations, and generates a pre-populated DESIGN.md for design-system improvements.

Core Features & Use Cases

  • Scans tailwind.config, globals.css, and key design-related files to extract tokens.
  • Detects duplicates and scalability issues to suggest improvements.
  • Generates .cursor/DESIGN.md pre-populated with design recommendations.

Quick Start

Run /design-init in your project to generate a pre-populated DESIGN.md with design-token recommendations.

Frequently Asked Questions about design-init

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens from a Tailwind config and CSS variables?▼

You can extract design tokens by scanning your tailwind.config, globals.css, and key layout files to pull existing fonts, colors, spacing, and animations into a consolidated structure.

How do I audit my design system for duplicate tokens and scalability issues?▼

Auditing your design system for duplicate tokens involves scanning project files to identify redundant CSS variables and spacing values, then generating recommendations to consolidate tokens for better scalability.

Can I generate a design system documentation file from existing project tokens?▼

Yes, you can generate a pre-populated DESIGN.md file by reading your project's existing design tokens and outputting a document with proposed design-system improvements and token recommendations.

Does this design token extraction work with projects using only CSS variables?▼

Yes, the token extraction works with frontend projects using CSS variables, reading your global CSS files to audit token usage, identify duplicates, and suggest design-system enhancements.

What is the best way to consolidate scattered design tokens in a frontend project?▼

The best way to consolidate scattered design tokens is to scan your project's configuration and CSS files to detect duplicates, identify scalability issues, and output a structured design-system improvement plan.

Why do I need a DESIGN.md file for my Tailwind design system?▼

A DESIGN.md file provides a pre-populated reference for your design system, documenting extracted tokens and proposed enhancements to maintain consistency and scalability across your Tailwind project.

Related Skills

Explore More Design & Creative Skills→
pdovhomiljapdovhomilja

Frontend CSS

Standardize frontend CSS styles using Tailwind, BEM, or CSS Modules.

Community
Basic
RaNDoM6913RaNDoM6913
1

design-system-reviewer

Analyze frontend components for design system token compliance and hardcoded values.

Community
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
Marcu-LoretoMarcu-Loreto

reversa-design-system

Extract design tokens from CSS, theme files, and screenshots into documentation.

Community
Advanced