Design

This bridges visual design and code by teaching Claude when to use Subframe's design tools instead of writing UI code directly. It handles the full design surface: pages, components, snippets, theme tokens, and design docs. The standout piece is theme verification. Before any design call, it compares your codebase's actual tokens against Subframe's to catch role mismatches, like when your "brand" only paints focus rings but Subframe's paints button backgrounds. It then asks whether to align them first. The skill enforces a workflow: design in Subframe, then implement with /subframe:develop, so your React/Tailwind output stays locked to your design system. Useful if you want design tools that respect existing token conventions rather than guessing.

Install to Claude Code

npx -y skills add subframeapp/subframe --skill design --agent claude-code