design-systems
Help users build and scale design systems. Use when someone is creating a component library, establishing design tokens, scaling brand consistency, or deciding when to invest in a design system.
- Installs
- 1.8K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/refoundai/lenny-skills --skill design-systems- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads design-systems automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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:
- Assess the need - Determine if they need consistency, speed, or both, and whether they're at the right stage for a design system
- Define the scope - Clarify whether they need a component library, design tokens, documentation, or all three
- Design for adoption - Help them make the system easy enough that non-designers can use it correctly
- 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
FAQ
What does the design-systems skill do?
Help users build and scale design systems. Use when someone is creating a component library, establishing design tokens, scaling brand consistency, or deciding when to invest in a design system.
How do I install design-systems?
Run npx skills add https://github.com/refoundai/lenny-skills --skill design-systems in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/design-systems/ (personal) or .claude/skills/design-systems/ (project).
Which AI agents can use design-systems?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is design-systems safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains design-systems?
It is published by refoundai in refoundai/lenny-skills. It has 1,827 recorded installs.
More from refoundai/lenny-skills
personal-productivity
refoundai/lenny-skills
Help users manage their time and tasks more effectively. Use when someone is overwhelmed with work, struggling with focus, trying to balance multiple responsibilities, or asking how to get more done.
writing-prds
refoundai/lenny-skills
Help users transform abstract ideas into actionable project specs that align engineering and design teams on the problem and success metrics.
ai-product-strategy
refoundai/lenny-skills
Help users decide where to apply AI effectively, manage the transition from deterministic to probabilistic software, and build long-term defensibility through verticalization and proprietary data.
competitive-analysis
refoundai/lenny-skills
Help users understand and respond to competition. Use when someone is positioning against competitors, evaluating market threats, running competitive war games, or deciding how much to focus on competitors versus customers.
founder-sales
refoundai/lenny-skills
Help users master the transition from product development to active selling by leveraging their unique status as founders to bridge the trust gap and define a scalable sales motion.
analyzing-user-feedback
refoundai/lenny-skills
Help users convert massive volumes of qualitative and quantitative feedback into high-confidence product decisions through rigorous synthesis and internal immersion.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure 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 other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.