Skills
.Work. You
Rest

penny-design

Community

Generate Tailwind CSS design specifications for web page layouts.

Design & Creative#layout design#tailwind css#web design#design spec#css utility classes
Authordesduvauchelle
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the generation of detailed Tailwind CSS design specifications, simplifying the design process for web pages.

Core Features & Use Cases

  • Automated Design Spec Generation: Produces a section-by-section design specification document based on input project files.
  • Tailwind CSS Integration: Generates Tailwind utility class usage directly into the design spec for efficient styling.
  • Use Case: After using other skills in the Penny Page pipeline, use this skill to create a design spec for a web page, including color schemes, typography, and layout guidelines.

Quick Start

To generate a design specification for the landing page, run the penny-design skill with the project in the current working directory.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 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: penny-design
Download link: https://github.com/desduvauchelle/penny-page/archive/main.zip#penny-design

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.