Token导航 LogoToken导航TokenDH.com
前端设计需要联网github未标认证来源可访问许可证需确认审计通过

design-systems设计系统

Agent Skill

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务,不应只堆装饰元素;涉及真实页面改动时,应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

总安装

26,664

周安装

1,102

GitHub Stars

734

下载量

8,712
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:design-systems(设计系统)
来源仓库:https://github.com/refoundai/lenny-skills
仓库路径:skills/design-systems
安装命令:
npx skills add https://github.com/refoundai/lenny-skills --skill design-systems
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

skills.shnpx skills
npx skills add https://github.com/refoundai/lenny-skills --skill design-systems

简介

Figma 和 Airbnb 的产品领导者提供基于框架的构建和扩展设计系统指南。

  • 涵盖四个核心原则:将概念设计与生产输出分离、利用设计系统进行组织扩展、创建自学资产以及超越平面设计向维度界面发展
  • 提供评估问题以确定范围(组件库、令牌、文档)、采用策略和成功指标
  • 标记常见的陷阱,包括过早的系统化、对非设计人员的过度设计、缺乏所有权、采用不佳以及将系统视为静态的而不是不断发展的
  • 指导用户分阶段部署,从定义最小的可行版本到规划长期维护和演进

SKILL.md

Design Systems

Help the user build and scale design systems using frameworks from 4 product leaders who have built design systems at companies like Figma and Airbnb.

How to Help

When the user asks for help with design systems:

  1. Assess the need - Determine if they need consistency, speed, or both, and whether they're at the right stage for a design system
  2. Define the scope - Clarify whether they need a component library, design tokens, documentation, or all three
  3. Design for adoption - Help them make the system easy enough that non-designers can use it correctly
  4. Plan for evolution - Guide them on how to maintain and evolve the system over time

Core Principles

Separate concept from production

Bob Baxley: "Once we locked down on the block frames, we could send it to an agency and they could do the full high-res comps in a day, because they knew exactly what they were doing." Use low-fidelity 'block brain diagrams' to lock down conceptual logic, then apply the design system for rapid high-fidelity output.

Design systems drive enterprise expansion

Claire Butler: "Design systems are one of the main reasons you upgrade from pro to org or enterprise. That became just the key thing we leaned in on." Design systems practitioners are key internal champions for organizational scaling.

Assets should teach their own usage

Jessica Hische: "My goal always when designing a logo is to design a logo that's so easy to use that you don't have to be an extremely skilled designer to design well with it." Design assets that 'teach' the user how to apply them through their inherent structure, prioritizing ease of use over complexity.

Flat design is evolving

Brian Chesky: "I think flat design is over or ending. We're going to move back into a world with color, texture, dimensionality, more haptic feedback." Interface design is shifting from flat aesthetics to more dimensional, tactile, and AI-enhanced experiences.

Questions to Help Users

  • "What's the biggest inconsistency problem you're facing today?"
  • "Who will be using this design system - designers only, or engineers too?"
  • "How will you measure adoption and success of the design system?"
  • "Do you have the resources to maintain and evolve the system over time?"
  • "What's the smallest viable version you could ship first?"

Common Mistakes to Flag

  • Building too early - Creating a design system before you have enough patterns to systematize
  • Over-engineering - Building complex systems that require expert designers to use correctly
  • No ownership - Creating a design system without dedicated resources to maintain it
  • Ignoring adoption - Building a beautiful system that no one actually uses
  • Static systems - Treating the design system as 'done' rather than continuously evolving

Deep Dive

For all 4 insights from 4 guests, see references/guest-insights.md

Related Skills

  • Running Design Reviews

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明,方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用;具体调用方式请以来源页面和 README 为准。

平台分布

Codex

34.09%
按下载量换算2,970

Claude

30.34%
按下载量换算2,643

Cursor

18.8%
按下载量换算1,638

Gemini CLI

10.02%
按下载量换算873

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API;具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源,正式发布前建议补源仓库或其他目录站核验。

来源信息

继续浏览同类 Skills