skills.rest
lirielgozi
lirielgoziCOMMUNITY
Explore all skills by this author →
GitHub

Liri Web Design Skill v2

Generate design systems with named palettes and interactive HTML previews from colors.

Updated Jan 31, 2026
Search Tags:#design system#color palette#web design#UI design#css generation#style exploration
One-click install
npx skills add https://github.com/lirielgozi/liri-skills --skill liri-web-design-skill-v2
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Liri Web Design Skill v2
Source: https://github.com/lirielgozi/liri-skills/tree/main/skills/web-design
Command: npx skills add https://github.com/lirielgozi/liri-skills --skill liri-web-design-skill-v2

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pypdf, pdfplumber, pdf2image, and includes scripts (resource) and references (resource) and sub-agents (resource) and styles (resource) components.

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.

Frequently Asked Questions about Liri Web Design Skill v2

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

FAQPage Schema
How do I generate a complete web design system from a custom color palette?▼

To generate a web design system from a color palette, provide your hex codes to automate color analysis, naming, scaling, and component styling. The system outputs an interactive HTML preview file containing multiple distinct UI style explorations for immediate visual selection.

Can I visualize multiple UI design styles using a single set of colors?▼

Yes, you can visualize multiple UI design styles using a single set of colors. The tool generates six distinct style explorations, such as minimal, glass, bold, soft, and neon, consolidating them into one interactive HTML preview file with a sidebar for live switching.

What is the best way to explore CSS generation and style exploration before writing code?▼

The best way to explore CSS generation before writing code is to generate interactive HTML style previews from your color palette. This allows you to visualize evocative palette names and component styling across multiple aesthetics, enabling confident design choices without early code commitment.

Do I need to manually name my color palettes for UI design?▼

No, you do not need to manually name your color palettes for UI design. The process utilizes a sub-agent architecture that automatically analyzes your provided colors and generates evocative palette names, such as coral-lagoon, alongside the style explorations.

How does color analysis and scaling work for generating design systems?▼

Color analysis and scaling for design systems works through a sub-agent architecture that processes your input colors. It focuses on analyzing the palette, generating evocative names, scaling the colors for component styling, and producing interactive HTML previews to visualize the results.

Related Skills

Explore More Design & Creative Skills→
archibatearchibate
6

color-themes

Provide curated color palettes as TOML files with hex codes for theming workflows.

Community
Basic
DarkArty07DarkArty07
3

popular-web-designs

Generate HTML/CSS using pre-analyzed design tokens from 54 brand websites.

Community
Intermediate
shaunandrewsshaunandrews
8

design-mockups

Prototype and preview HTML/CSS design mockups with a local server.

Community
Intermediate
docaohieu2808docaohieu2808

design

Orchestrate design tasks across brand identity, design tokens, and UI styling.

Community
Advanced