Brand colors and a font in, full design system tokens out
Every project starts with the same grind — building color scales, type scales, spacing systems, and shadow tokens from scratch. Hand your Claw the brand colors and a font choice, and get a complete token set in CSS custom properties, Tailwind config, or SCSS variables.
Create a skill called "Token Forge". When I give you brand colors (as hex codes) and a font choice, generate a complete design token system. Include: color palette with shades from 50 to 950 for each color, semantic color tokens (success, warning, error, info), an accessible contrast matrix showing which foreground/background pairings meet WCAG AA (4.5:1) and AAA (7:1), a modular type scale from xs to 4xl with line heights and responsive sizes (configurable ratio, default 1.25), a spacing scale, shadow tokens from sm to 2xl, border radius tokens, and transition tokens. Output in my choice of CSS custom properties, Tailwind config, SCSS variables, or JSON. If I don't specify a format, default to CSS custom properties.
Give your Claw your brand's primary colors and font choice. It generates
a complete, mathematically consistent design token set — color shades from
50 to 950 with accessible contrast pairings, a modular type scale with
responsive sizes, a spacing scale, shadow system, border radii, and
transition tokens. All in your preferred output format.
Keep Figma design tokens and your codebase in sync automatically
Design tokens in design files and codebases drift apart quickly. This recipe compares token sources on a schedule, highlights the differences, and helps you sync them before the UI starts diverging across Figma and code.
Desktop layout in, responsive CSS for every screen size out
Designers spend 25-40% of design time creating responsive variants. This recipe takes a desktop layout and generates mobile and tablet CSS — intelligent stacking, readable type sizes, touch-friendly targets — not just a squished version of the desktop.
Generate button labels, error messages, tooltips, and empty states
Nobody budgets for UX writing but it makes or breaks usability. This recipe generates complete microcopy sets for your UI components — error messages that actually help, empty states that guide action, button labels that are clear, and tooltips that explain without patronizing.
Turn finished projects into polished portfolio pieces without the 10-hour writing slog
Your portfolio is 3 years outdated because writing case studies takes longer than the projects themselves. This recipe takes your project files, Figma history, and a few bullet points from you, and drafts a complete case study — challenge, process, solution, results.