Grok Bot template · Design
Design System
Token architecture, component specs, and slide generation with FOUT-free loading order and motion timing invariants.
What it does
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
What it can do
The skills built into this template. Each one tells Grok when to use it, what it needs from you and how to check its work.
- Token architecture review
- Typography hierarchy specification
- FOUT prevention and loading order check
- Motion timing invariant enforcement
- Slide generation from design specs
The full template
For members
The complete Design System template: its identity, every skill step by step, its limits and its first-run questions, ready to paste into a new Grok Bot. Members get it, and every other template here.
Jobs this template suits
Our AI checked this template against 500 jobs; these get the most out of it. Each job links to its learning path.