Design

Figma and design system kit

For product designers and front-end developers building or maintaining a design system. We started with the design tools themselves, then added the pieces that connect design to code (component workshops, design-to-code plugins, DESIGN.md briefs for agents) and finished with free checkers for colour and accessibility.

1. 1
   FigmaAI toolWhere most teams keep components, variables and prototypes, with AI features for generating and editing designs.Freemium
2. 2
   PenpotAI toolAn open-source, self-hostable design and prototyping tool built on web standards.Open source
3. 3
   StorybookOpen sourceBuild, document and visually test coded components in isolation — the code-side home of a design system.★ 91.4k · MIT
4. 4
   shadcn/uiOpen sourceAccessible components you copy into your repo and own, which makes them easy to match to your tokens.★ 127k · MIT
5. 5
   StarkAI toolAccessibility checks for contrast and vision simulation inside Figma and the browser.Freemium
6. 6
   html.to.designAI toolImports any live website into Figma as editable layers, handy for auditing an existing UI.Freemium
7. 7
   AnimaAI toolTurns Figma designs into code you can keep iterating on.Freemium
8. 8
   Figma Design Knowledge GraphAgent skillReads a Figma file through the API and maps its screens, components and tokens into a browsable graph.Agent skill · MIT
9. 9
   Awesome DESIGN.mdOpen sourceDESIGN.md files describing well-known design systems, to use as a style brief for coding agents.★ 125k · MIT
10. 10
    CContrast CheckerBrowser toolCheck WCAG contrast for every text and UI colour pair, with the closest passing colour suggested.
11. 11
    CColor Palette GeneratorBrowser toolGenerate harmonious palettes and lock the colours you like while you explore.
12. 12
    HHEX, RGB & HSL Color ConverterBrowser toolConvert tokens between HEX, RGB, HSL and OKLCH when design and code disagree on formats.