design-to-tailwind
OfficialTurn design specs into Tailwind-ready HTML.
Authorviably-labs
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Design-to-code handoffs between designers and developers can be slow and error-prone; this skill translates design specs from Figma, Sketch, or Penpot into semantic HTML styled with Tailwind utility classes, reducing manual rework.
Core Features & Use Cases
- Automates design-to-code translation by mapping design frames to HTML structure with Tailwind utilities.
- Produces responsive HTML output with breakpoint-aware classes for common design systems.
- Maps typography, color, and spacing tokens to Tailwind equivalents to ensure consistent theming.
- Use Case: convert a UI kit panel from a design file into a reusable Tailwind-based HTML component.
Quick Start
Load a design file and request HTML output with Tailwind utilities for rapid prototyping.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-to-tailwind Download link: https://github.com/viably-labs/vibegent/archive/main.zip#design-to-tailwind Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 510,000+ vetted skills library on demand.