71 套品牌级设计系统知识库,覆盖 AI/LLM、开发工具、生产力、金融科技、电商、媒体、汽车等 8 大类别。 每套系统包含 9 段标准结构:视觉主题、色彩、排版、组件、布局、深度、注意事项、响应式、Agent 指南。 触发词:设计系统、选择风格、品牌风格、设计令牌、DESIGN.md、配色方案
Scanned 9/8/2026
Install to Claude Code
npx -y skills add infometa/workbuddyskills --skill design-systems --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Design Systems?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/infometa-design-systems)More formats (shields.io, HTML) on the badges page.
---
name: design-systems
description: |
71 套品牌级设计系统知识库,覆盖 AI/LLM、开发工具、生产力、金融科技、电商、媒体、汽车等 8 大类别。
每套系统包含 9 段标准结构:视觉主题、色彩、排版、组件、布局、深度、注意事项、响应式、Agent 指南。
触发词:设计系统、选择风格、品牌风格、设计令牌、DESIGN.md、配色方案
---
# 设计系统知识库
## 功能说明
提供 71 套经过验证的品牌级设计系统参考,帮助 AI 快速为项目选择合适的视觉方向并生成精确的设计令牌。
## 系统分类
| 类别 | 数量 | 代表品牌 |
|------|------|---------|
| AI & LLM | 10 | Claude, Cohere, Mistral AI, X.AI |
| 开发工具 | 19 | Cursor, Vercel, Linear, Supabase |
| 生产力 | 10 | Notion, Figma, Miro, Raycast |
| 金融科技 | 7 | Stripe, Coinbase, Mastercard |
| 电商消费 | 6 | Shopify, Airbnb, Nike |
| 媒体 | 5 | Spotify, PlayStation, Meta |
| 汽车 | 6 | Tesla, BMW, Ferrari |
| 其他/通用 | 8 | Apple, SpaceX, Default, Warm Editorial |
## 9 段结构规范
参考 @references/design-system-schema.md 了解完整的 DESIGN.md 9 段结构规范。
## 5 大视觉方向
参考 @references/visual-directions.md 了解 5 种预设视觉学派的详细定义。
## 品牌提取协议
参考 @references/brand-extraction-protocol.md 了解从用户已有品牌资产中提取设计规范的 5 步法。
## 使用方式
1. 根据需求摘要中的场景、调性、受众信息筛选候选系统
2. 参考对应设计系统的 DESIGN.md 获取完整规范
3. 根据项目需要定制设计令牌
4. 如用户有品牌资产,执行品牌提取协议
## 输出格式
生成项目专属的 DESIGN.md 文件,遵循 9 段标准结构。
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
Creating and refining Mermaid diagrams with live reload. Use when users want flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, or any other Mermaid visualization. Provides best practices for syntax, styling, and the iterative workflow using mermaid_preview and mermaid_save tools.
Use when the user wants to design a mobile app, create screens, build UI, or interact with their Sleek projects. Covers high-level requests ("design an app that does X") and specific ones ("list my projects", "create a new project", "screenshot that screen").
SwiftUI frontend visual design skill. Creates beautiful, distinctive iOS/macOS interfaces that avoid generic AI slop patterns. Covers design direction, layout systems, typography, color, spacing, brand integration, and design review. Use when designing new SwiftUI views, reviewing UI quality, creating iOS prototypes, choosing visual styles, improving app aesthetics, or when the UI looks generic or AI-generated.
Use when designing iOS interfaces, implementing accessibility (VoiceOver, Dynamic Type), handling dark mode, ensuring adequate touch targets, providing animation/haptic feedback, or requesting user permissions. Apple Human Interface Guidelines for iOS compliance.