How do I see all available styles?

You can use the command 'list all available styles' to see the full directory of 50+ curated visual identities.

Can I combine different design styles?

Yes, you can use the blending feature to mix styles with specific ratios, such as a 70/30 blend of Art-Deco and Cyberpunk.

Does this skill work with CSS frameworks?

The skill focuses on design tokens and semantic HTML/CSS, making it adaptable to most modern frontend frameworks and CSS-in-JS solutions.

What are the 'Anti-AI-Slop' principles?

These are specific rules that prevent Claude from using overused, generic patterns like basic blue gradients or default system fonts, ensuring your design looks professional and unique.

AI Design System & Style Manager

Name: AI Design System & Style Manager
Author: Lobbi-Docs

byLobbi-Docs

0•

デザインツール

Applies and manages a library of 50+ professionally curated visual styles to create distinctive, token-based frontend interfaces without generic patterns.

The AI Design System skill empowers developers to move beyond generic 'AI-generated' aesthetics by providing access to over 50 distinctive visual styles across 10 categories, including Brutalist, Art Deco, and Cyberpunk. It utilizes a sophisticated token management system to ensure consistency across typography, colors, and spacing. With advanced features like weighted style blending and strict 'Anti-AI-Slop' principles, this skill allows Claude to generate production-grade components that feel intentional, cohesive, and unique to your project's brand identity.

主な機能

01Built-in 'Anti-AI-Slop' guidelines to ensure high-quality, non-generic UI output

02Library of 50+ curated styles across minimalist, retro, futuristic, and cultural categories

03Advanced style blending with custom weighted ratios (e.g., 80/20 mix)

04Hierarchical design token management for colors, typography, and interactions

05Automated generation of styled components using active design tokens

060 GitHub stars

ユースケース

01Transforming existing generic components into a cohesive, branded design system

02Generating accessible, production-ready UI components that adhere to WCAG standards

03Rapidly prototyping themed landing pages with specific aesthetics like Japandi or Solarpunk

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lobbi-docs/claude design-system

For use in Claude.ai and ChatGPT

Download Skill