1---2name: design-toolkit3description: Complete design toolkit - 7 specialized skills, 3 templates, and a workflow router for visual design, frontend design, theming, and design-system work.4---56# Design Toolkit78This toolkit restores the workflow-level entry point that previously lived in `claude-skills/design`. Use it when the user needs design intent routing rather than jumping straight to one leaf skill.910## Routing Guide1112| User Intent | Primary Skills | Templates |13|---|---|---|14| Generative visuals, procedural art, animated assets | [algorithmic-art](../development/algorithmic-art/SKILL.md), [slack-gif-creator](slack-gif-creator/SKILL.md) | [design-brief](templates/design-brief.md) |15| Posters, brand-aligned visuals, canvas compositions | [canvas-design](canvas-design/SKILL.md), [brand-guidelines](brand-guidelines/SKILL.md) | [design-brief](templates/design-brief.md), [style-guide](templates/style-guide.md) |16| UI systems, themed interfaces, React artifacts | [frontend-design](../development/frontend-design/SKILL.md), [web-artifacts-builder](../development/web-artifacts-builder/SKILL.md), [theme-factory](theme-factory/SKILL.md) | [design-brief](templates/design-brief.md), [design-review-checklist](templates/design-review-checklist.md) |17| Design standards, consistency, review, accessibility | Use this router with [style-guide](templates/style-guide.md) and [design-review-checklist](templates/design-review-checklist.md) | [style-guide](templates/style-guide.md), [design-review-checklist](templates/design-review-checklist.md) |1819## Quick Actions2021- **"Create generative art"** -> [algorithmic-art](../development/algorithmic-art/SKILL.md)22- **"Design a poster"** -> [canvas-design](canvas-design/SKILL.md)23- **"Apply brand constraints"** -> [brand-guidelines](brand-guidelines/SKILL.md)24- **"Build a themed UI"** -> [frontend-design](../development/frontend-design/SKILL.md) + [theme-factory](theme-factory/SKILL.md)25- **"Create a React artifact"** -> [web-artifacts-builder](../development/web-artifacts-builder/SKILL.md)26- **"Review design quality"** -> [design-review-checklist](templates/design-review-checklist.md)27- **"Define tokens and standards"** -> [style-guide](templates/style-guide.md)2829## Templates3031| Template | Use Case |32|---|---|33| [design-brief](templates/design-brief.md) | Scope a visual, UI, or motion design project |34| [style-guide](templates/style-guide.md) | Define tokens, typography, spacing, and component rules |35| [design-review-checklist](templates/design-review-checklist.md) | Review hierarchy, consistency, accessibility, and performance |3637## Related Skills3839- [cli-demo-gif](cli-demo-gif/SKILL.md) for terminal demos rendered as GIFs40- [asciinema-recorder](asciinema-recorder/SKILL.md) for terminal capture workflows41- `design/web-asset-generator` remains available as a submodule-backed asset utility
LeoLin990405