vibe-design

Convert Figma screenshots and design descriptions into a DESIGN.md specification.

113|12|Updated May 19, 2026

Search Tags:#linting #ui-ux #design-system #design-tokens #design-specification #vibe-coding

Ready to run

npx skills add https://github.com/idiotLeoLYJ/Daliu-Awesome-Skills --skill vibe-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vibe-design
Source: https://github.com/idiotLeoLYJ/Daliu-Awesome-Skills/tree/main/plugins/qima/skills/vibe-design
Command: npx skills add https://github.com/idiotLeoLYJ/Daliu-Awesome-Skills --skill vibe-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md, and includes references (resource) components.

What problem does it solve?

This Skill solves the fragmentation and inconsistency in Vibe Coding visual design by transforming unstructured visual sources into a rigorous, spec-compliant design system.

Core Features & Use Cases

Structured Design Intake: Converts Figma screenshots, URLs, or design descriptions into a standardized design.md file.
Automated Validation: Runs linting and cross-checks against product requirements to ensure every page and component has a defined visual specification.
Use Case: When you have a collection of Figma mockups and need to ensure your prototype implementation strictly adheres to a unified set of design tokens, this Skill structures those visuals into a single source of truth.

Quick Start

Use the vibe-design skill to structure my provided Figma screenshots into a standard design.md file.

Frequently Asked Questions about vibe-design

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

FAQPage Schema

How do I structure Figma mockups into a design specification for vibe coding?▼

To structure Figma mockups into a design specification for vibe coding, you can convert unstructured visual sources like screenshots or URLs into a standardized, token-based design.md file. This creates a single source of truth for visual implementation.

What is a design.md file and how does it standardize UI-UX design systems?▼

A design.md file is a formal specification that standardizes UI-UX design systems by defining design tokens, interaction states, and WCAG compliance. It structures visual sources into a rigorous, spec-compliant format for vibe coding workflows.

Can I automate WCAG compliance linting for my design tokens?▼

Yes, you can automate WCAG compliance linting for your design tokens. The process runs automated validation and cross-checks against product requirements to ensure every component has a defined visual specification that meets accessibility standards.

Does this approach work with unstructured design descriptions and Figma URLs?▼

Yes, this approach works directly with unstructured design descriptions and Figma URLs. It performs structured design intake by converting these visual inputs into a formal Google DESIGN.md compliant specification.

What is the best way to maintain alignment between product ideas and visual implementation?▼

The best way to maintain alignment between product ideas and visual implementation is to use a token-based design system. It cross-references interaction states and product requirements against a formal design specification to prevent fragmentation.

Why do my vibe coding prototypes lack visual consistency across components?▼

Vibe coding prototypes lack visual consistency due to fragmentation from unstructured visual sources. Transforming these sources into a rigorous, spec-compliant design system with unified design tokens resolves the inconsistency.