Zum Inhalt springen
Apps with loveApps with loveAWL Claude Code

awl-design

AWL Design System — token lookup, component generation, and design compliance review

Version 0.0.4 · Keywords design-system design-tokens component-generation ui-compliance

Terminal-Fenster
claude plugin install awl-design@appswithlove
Name Type What it does
component-gen Skill Generates React, Vue, Angular, or Svelte UI components using AWL design tokens (colors, spacing, typography, shadows).
design-review Skill Audits UI code (React, Vue, Svelte, CSS, HTML) against AWL design system tokens — flags hardcoded hex colors, wrong font families, non-token spacing, missing focus-visible, and missing dark mode.
design-tokens Skill Looks up exact AWL design token values — brand colors (green, cyan, red, purple, pink, turquoise, orange), neutrals, typography scale, spacing grid, shadows, border-radius, breakpoints, z-index, an…