From loopkit
Guides frontend UI design with systematic principles for type, color, spacing, motion, and hierarchy. Makes output look intentional, not AI-generated.
How this skill is triggered — by the user, by Claude, or both
Slash command
/loopkit:design-systemWhen to use
building UI, a component, a page, "make this look good"
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Default AI UI is gray, centered, and timid. Don't ship that.
Default AI UI is gray, centered, and timid. Don't ship that.
npx claudepluginhub archive228/loopkitCreates distinctive production-grade frontend UIs for web components, pages, and apps, emphasizing intentional visual design, typography, color, layout, and motion.
Produces frontend UI with explicit token systems, deliberate color use, and real states. Use when building or restyling interfaces that look polished instead of generic.
Generates distinctive, production-grade frontend code with bold aesthetics for web components, pages, or apps. Avoids generic AI designs.