Yu-aimaker

awesome-ds

Apply the AwesomeDesignSystem to build or refine sophisticated, modern (2026), human-feeling frontend UI that avoids generic "AI slop". Use when building or improving ANY web UI, component, landing page, dashboard, or app screen; when choosing color, typography, spacing, motion, or layout; or when the user asks to make something "modern", "polished", "sophisticated", "high-end", or "less AI-generated", or references Apple, Linear, Stripe, Vercel, Nothing, or Goodpatch. Loads the design system's taste layer first, then routes to ONLY the needed modules.

awesome-html

Turn Markdown, research notes, reports, or any content into a polished, self-contained single-file HTML document styled with the AwesomeDesignSystem. Use when the user asks to "make this into an HTML page/report/handout", "create a beautiful HTML doc", "turn this markdown into a webpage", build a single-file slide/one-pager, or wants a shareable, no-build HTML artifact that looks designed rather than default. Produces one .html file (inline tokens, distinctive type, tasteful CSS-only motion, dark mode, print-ready).

awesome-motion

Design and implement tasteful, purpose-driven motion and animation using the AwesomeDesignSystem — Motion (React, formerly Framer Motion) and CSS-only recipes. Use when the user asks to "add animation", "make it animate / move", "add transitions", "scroll effects", "page-load reveal", "stagger", "micro-interactions", "hover/press effects", or wants motion that feels considered rather than decorative. Produces working code with chosen easing/durations, reduced-motion fallbacks, and one orchestrated high-impact moment over scattered effects.

awesome-review

Audit an existing UI, component, page, or frontend codebase against the AwesomeDesignSystem standard — detect generic "AI slop", taste issues, and accessibility failures, then report prioritized, concrete fixes. Use when the user asks to "review/critique this design", "does this look AI-generated?", "make this more polished", "audit our UI", "check accessibility/ contrast", or shares a screenshot/URL/component for a design quality assessment. Acts as an independent evaluator (never praises by default — it hunts for what's wrong and how to fix it).

make-awesome-ds

Generate a complete, brand-specific design system (tokens + DESIGN.md + previews) for a company, product, brand, or app, grounded in the AwesomeDesignSystem method. Use when the user asks to "create a design system", "define our brand's design language", "set up design tokens", "establish a visual identity / style guide", or wants a reusable token + component foundation for a new or existing product. Produces an authored, non-generic system with an OKLCH palette, a distinctive type pairing, and the three dials set.