Design System
If you're tired of every AI-generated interface looking like the same purple gradient with Inter font, this gives you 50+ actual design systems to work with. You can apply art-deco, brutalist, cyberpunk, or blend styles with weighted ratios like "japandi 80, scandinavian 20." It includes full design tokens for each style (colors, typography, spacing, shadows) and generates components using those tokens instead of magic numbers. The anti-slop guidelines are refreshingly opinionated about what not to do. Best for prototyping distinctive interfaces quickly or exploring visual directions without manually defining every design decision from scratch.
- skills.sh installs
- 129
- GitHub stars
- 12
- last updated
- Jun 3, 2026
Install
$ npx -y skills add lobbi-docs/claude --skill design-system --agent claude-codeInstalls into .claude/skills of the current project.
Files
AI Design System Skill
You have access to an AI-powered design system with 50+ professionally curated visual styles. This skill enables you to apply cohesive, distinctive aesthetics to components and interfaces while avoiding generic "AI slop" patterns.
Core Capabilities
1. Style Application
Apply any of 50+ curated styles to components:
"apply art-deco style"
"use brutalist aesthetic"
"make it look cyberpunk"
2. Style Blending
Combine multiple styles with weighted blending:
"blend japandi with scandinavian 80/20"
"mix brutalist with glassmorphism 60/40"
"combine art-deco with cyberpunk 50/50"
3. Component Generation
Generate styled components with current active style:
"create button with current style"
"generate card component in art-deco style"
"build navigation bar using brutalist tokens"
4. Token Management
Access and apply design tokens:
"show available tokens for art-deco"
"list all minimalist styles"
"what colors are in cyberpunk theme?"
Style Categories (50+ Styles)
1. Minimalist & Modern (5 styles)
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/lobbi-docs/claude
- Categories
- Documentation, Design & UI/UX
- First seen
- Jun 3, 2026
More from lobbi-docs/claude
All 3Recommended
More Documentation
morphing-iconsraphaelsalaja/userinterface-wikiBuild icon components where any icon morphs into any other through SVG line transformation. Use when asked to "create morphing icons", "build icon transitions",120skills.sh installs
cw-story-critiquehaowjy/creative-writing-skillsCreative writing skill for analyzing and critiquing story content. Use when the user requests feedback, critique, or analysis of their writing. Provides balance118skills.sh installs
add-yourself-to-team-langfuselangfuse/langfuse-docsAdd a new team member to Langfuse's canonical team data and shared team table. Use when onboarding a new employee who needs to appear on the website team, press0skills.sh installslangfuse-integration-pagelangfuse/langfuse-docsCreate a new Langfuse integration page in the langfuse-docs repo. Use this skill whenever the user wants to add, create, draft, or scaffold an integration page,0skills.sh installs
setup-matt-pocock-skillsmattpocock/skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the othe1.1Mskills.sh installs