Design Resources

---
name: design-resources
description: Design persona craft and inspiration catalogue — curated Figma official learning, UX/UI theory (NN/g, Laws of UX, Refactoring UI), platform guidelines (Apple HIG, Material Design, Fluent), accessibility resources (WCAG, APG, WebAIM), design-system galleries, inspiration galleries (Mobbin, Dribbble, Lyssna), color/type/motion tools. Also covers the live browse→capture→translate workflow using Claude in Chrome. Invoke when the user asks "where do I learn X", "show me examples", or requests design inspiration/resources.
license: GPL-3.0-only
---

# Design Resources

## On-demand reading

This skill is loaded on demand — not globally auto-imported. Load it when:

- The designer asks "where do I learn X" or "show me how good products handle Y".
- Inspiration is needed for a UI pattern.
- The designer asks for platform-specific guidelines.

---

## Live browse → capture → translate workflow

When the designer asks "show me how good products do X" or "find inspiration for Y":

1. **Open Mobbin** (or another gallery) using Claude in Chrome.
2. **Capture 3–5 real screens** that demonstrate the pattern.
3. **Summarize the pattern** — what makes these examples effective?
4. **Translate to the project's UI library** — how would this look using shadcn/ui / MUI / Ant Design / Chakra / local components?

Inspiration is an **idea, not a spec** — translate patterns, not pixels. Never copy a competitor's exact visual design.

---

## Figma official learning

| Resource | URL |
|---|---|
| Figma Learn | https://help.figma.com/hc/en-us |
| Figma YouTube | https://www.youtube.com/@Figma |
| Auto Layout course | https://help.figma.com/hc/en-us/articles/5731482952599 |
| Variables guide | https://help.figma.com/hc/en-us/articles/14506587589655 |
| Dev Mode guide | https://help.figma.com/hc/en-us/articles/15023124644247 |

---

## UX/UI theory

| Resource | URL | Best for |
|---|---|---|
| NN/g Articles | https://www.nngroup.com/articles/ | Evidence-based UX principles |
| Laws of UX | https://lawsofux.com/ | Psychology principles applied to design |
| Refactoring UI | https://www.refactoringui.com/ | Practical visual design for developers |
| Nielsen's 10 Heuristics | https://www.nngroup.com/articles/ten-usability-heuristics/ | Usability evaluation framework |

---

## Platform guidelines

| Platform | URL |
|---|---|
| Apple Human Interface Guidelines | https://developer.apple.com/design/human-interface-guidelines/ |
| Material Design 3 | https://m3.material.io/ |
| Microsoft Fluent | https://fluent2.microsoft.design/ |
| Carbon Design System (IBM) | https://carbondesignsystem.com/ |
| Spectrum (Adobe) | https://spectrum.adobe.com/ |

---

## Accessibility resources

| Resource | URL |
|---|---|
| WCAG 2.2 Quick Reference | https://www.w3.org/WAI/WCAG22/quickref/ |
| ARIA Authoring Practices Guide | https://www.w3.org/WAI/ARIA/apg/ |
| WebAIM | https://webaim.org/ |
| Colour Contrast Checker | https://colourcontrast.cc/ |
| Deque axe DevTools | https://www.deque.com/axe/devtools/ |

---

## Design system galleries

| Resource | URL |
|---|---|
| Component Gallery | https://component.gallery/ |
| UI Guideline | https://www.uiguideline.com/ |
| Adele (design system index) | https://adele.uxpin.com/ |

---

## Inspiration galleries

| Resource | URL |
|---|---|
| Mobbin | https://mobbin.com/ |
| Dribbble | https://dribbble.com/ |
| Lyssna | https://www.lyssna.com/blog/ |
| Muzli | https://muz.li/ |
| Savee | https://savee.it/ |

---

## Color tools

| Tool | URL |
|---|---|
| Coolors | https://coolors.co/ |
| Palette.app | https://palette.app/ |
| Tints and Shades | https://maketintsandshades.com/ |
| Radix Colors | https://www.radix-ui.com/colors |

---

## Typography tools

| Tool | URL |
|---|---|
| Google Fonts | https://fonts.google.com/ |
| Typescale | https://typescale.com/ |
| Fontjoy (pairing) | https://fontjoy.com/ |

---

## Motion resources

| Resource | URL |
|---|---|
| Motion design principles (Stripe) | https://stripe.com/au/blog/designing-accessible-color-systems |
| Web Animations API | https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API |
| Framer Motion docs | https://www.framer.com/motion/ |