design-system by lobbi-docs/claude
npx skills add https://github.com/lobbi-docs/claude --skill design-system您可以使用一个由 AI 驱动的设计系统,该系统包含 50 多种专业策划的视觉风格。此技能使您能够为组件和界面应用连贯、独特的美学,同时避免通用的"AI 粗制滥造"模式。
将 50 多种策划风格中的任意一种应用于组件:
"apply art-deco style"
"use brutalist aesthetic"
"make it look cyberpunk"
通过加权混合来组合多种风格:
"blend japandi with scandinavian 80/20"
"mix brutalist with glassmorphism 60/40"
"combine art-deco with cyberpunk 50/50"
使用当前活动风格生成带样式的组件:
"create button with current style"
"generate card component in art-deco style"
"build navigation bar using brutalist tokens"
访问和应用设计令牌:
"show available tokens for art-deco"
"list all minimalist styles"
"what colors are in cyberpunk theme?"
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
设计令牌按层次结构组织:
src/design-system/
tokens/
styles/
{style-name}.json # 完整的风格定义
core/
colors.json # 基础调色板
typography.json # 字体定义
spacing.json # 间距比例
shadows.json # 阴影令牌
animations.json # 动效令牌
每个风格令牌文件包括:
切勿使用这些通用模式:
始终遵循这些规则:
生成组件时:
当按比例混合风格时(例如 80/20):
混合示例:
"blend art-deco with cyberpunk 70/30"
→ Art-deco 基础,搭配 cyberpunk 点缀色和偶尔的霓虹高光
"Hey coder, apply brutalist style to the dashboard components"
→ Coder 系统化地应用 brutalist 令牌
"Reviewer, check if components follow art-deco style guide"
→ Reviewer 验证令牌使用和风格一致性
"Planner, create a style migration plan from material to glassmorphism"
→ Planner 分解令牌替换策略
"list all available styles" - 显示所有 50+ 种风格"describe {style-name}" - 获取详细的风格信息"show {style-name} tokens" - 显示令牌值"apply {style-name}" - 设置活动风格"use {style-name} for {component}" - 为特定组件应用风格"restyle {component} as {style-name}" - 转换现有组件风格"blend {style-a} with {style-b}" - 50/50 混合"blend {style-a} with {style-b} {ratio}" - 自定义比例"what would {style-a} + {style-b} look like?" - 预览混合效果"create {component} in {style-name}" - 创建新的带样式组件"generate {component-set} using current style" - 生成多个组件"build {layout} with {style-name} tokens" - 构建复杂布局@references/style-guide.md - 详细的美学规则@references/prompt-templates.md - 即用型提示@references/token-schema.md - 令牌结构参考最后更新: 2025-12-03 版本: 1.0.0 可用风格: 50+
每周安装量
80
代码仓库
GitHub 星标数
9
首次出现
Jan 24, 2026
安全审计
安装于
gemini-cli72
codex70
opencode69
cursor67
github-copilot62
cline61
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.
Apply any of 50+ curated styles to components:
"apply art-deco style"
"use brutalist aesthetic"
"make it look cyberpunk"
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"
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"
Access and apply design tokens:
"show available tokens for art-deco"
"list all minimalist styles"
"what colors are in cyberpunk theme?"
Design tokens are organized hierarchically:
src/design-system/
tokens/
styles/
{style-name}.json # Complete style definition
core/
colors.json # Base color palette
typography.json # Font definitions
spacing.json # Spacing scale
shadows.json # Shadow tokens
animations.json # Motion tokens
Each style token file includes:
NEVER use these generic patterns:
ALWAYS follow these rules:
When generating components:
When blending styles with ratios (e.g., 80/20):
Example blend:
"blend art-deco with cyberpunk 70/30"
→ Art-deco base with cyberpunk accent colors and occasional neon highlights
"Hey coder, apply brutalist style to the dashboard components"
→ Coder applies brutalist tokens systematically
"Reviewer, check if components follow art-deco style guide"
→ Reviewer validates token usage and style consistency
"Planner, create a style migration plan from material to glassmorphism"
→ Planner breaks down token replacement strategy
"list all available styles" - Show all 50+ styles"describe {style-name}" - Get detailed style info"show {style-name} tokens" - Display token values"apply {style-name}" - Set active style"use {style-name} for {component}" - Style specific component"restyle {component} as {style-name}" - Convert existing component"blend {style-a} with {style-b}" - 50/50 blend"blend {style-a} with {style-b} {ratio}" - Custom ratio"what would {style-a} + {style-b} look like?" - Preview blend"create {component} in {style-name}" - New styled component"generate {component-set} using current style" - Multiple components"build {layout} with {style-name} tokens" - Complex layouts@references/style-guide.md - Detailed aesthetic rules@references/prompt-templates.md - Ready-to-use prompts@references/token-schema.md - Token structure referenceLast Updated: 2025-12-03 Version: 1.0.0 Styles Available: 50+
Weekly Installs
80
Repository
GitHub Stars
9
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli72
codex70
opencode69
cursor67
github-copilot62
cline61
AI Elements:基于shadcn/ui的AI原生应用组件库,快速构建对话界面
69,600 周安装