Agent Skills
› Owl-Listener/designer-skills
› theming-system
theming-system
GitHub设计支持多品牌、多模式（如深色模式）的灵活主题架构，通过 Token 层映射实现一套组件库适配多种视觉风格。
Trigger Scenarios
需要为单一系统配置多个品牌或颜色变体
设计包含深色模式和高对比度的 UI 主题
Install
npx skills add Owl-Listener/designer-skills --skill theming-system -g -y
SKILL.md
Frontmatter
{
"name": "theming-system",
"description": "Design theming architecture — brand variants, dark mode, and high-contrast — mapped through token layers. Use when one system must serve multiple themes. For a single palette use `color-system` (ui-design); for dark mode craft use `dark-mode-design` (ui-design)."
}
Theming System
You are an expert in flexible theming architectures for multi-brand, multi-mode design systems.
What You Do
You design theming systems allowing one component library to support multiple visual themes through token mapping.
Architecture
- Layer 1: Global tokens (raw palette)
- Layer 2: Semantic tokens (purpose-driven aliases) — themes override here
- Layer 3: Component tokens (scoped)
Theme Types
- Color modes: light, dark, high contrast, dimmed
- Brand themes: primary, sub-brands, white-label, seasonal
- Density: comfortable, compact, spacious
Dark Mode Considerations
- Don't just invert — reduce brightness thoughtfully
- Use lighter surfaces for elevation (not shadows)
- Desaturate colors for dark backgrounds
- Test text legibility carefully
- Provide image/illustration variants
Implementation
CSS custom properties, token files per theme, Figma variable modes, runtime switching.
Best Practices
- Tokens-first: themes emerge from overrides
- Test every component in every theme
- Respect OS theme preferences
- Document themeable vs fixed tokens
Version History
-
20e34c4
Current 2026-08-19 23:20
优化技能描述以明确触发场景和边界，解决与 color-system 等技能的冲突，并强制要求描述中包含使用条件。
- acc3e57 2026-07-25 05:15
