Liri Web Design Skill v2

Community

Design systems from colors.

Authorlirielgozi
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill automates the creation of production-ready design systems from color palettes, allowing users to visualize and select aesthetic directions before committing to code.

Core Features & Use Cases

  • Auto-Generated Palette Names: Creates evocative names for color palettes (e.g., "coral-lagoon").
  • Style Exploration: Generates 6 distinct style previews (HTML files) for user selection.
  • Unified Preview: Offers a single HTML file with a sidebar to switch between all styles live.
  • Use Case: A developer provides a set of colors, and the skill generates interactive previews of how those colors would look in minimal, glass, bold, soft, and neon design styles, enabling confident design choices.

Quick Start

Use the web-design skill to create a design system from the colors #e62a9a, #065772, #f62056.

Dependency Matrix

Required Modules

pypdfpdfplumberpdf2image

Components

scriptsreferencessub-agentsstyles

💻 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: Liri Web Design Skill v2
Download link: https://github.com/lirielgozi/liri-skills/archive/main.zip#liri-web-design-skill-v2

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 223,000+ vetted skills library on demand.