SuperDesign

What It Does

Whether you're building a landing page, a dashboard, or a reusable component library, this skill ensures the output follows contemporary design standards rather than generic boilerplate.

It covers every stage of the design workflow — from ASCII wireframe sketching and theme definition to animation planning and responsive implementation.

Super. Design is a structured frontend design skill that gives AI agents expert-level guidelines for building beautiful, modern user interfaces.

Key Features

• Structured 4-Step Design Workflow — Every UI is approached through Layout Design, Theme Design, Animation Design, and Implementation — in that order. This prevents jumping straight to code before structure and aesthetics are considered, resulting in more coherent outputs.
• Modern Color System with oklch() — The skill explicitly avoids dated generic palettes (like Bootstrap blue) and promotes `oklch()` for perceptually uniform, modern color definitions. Pre-built theme patterns for **Dark Mode (Vercel/Linear style)**, **Neo-Brutalism**, and **Glassmorphism** are included with ready-to-use CSS variables.
• Curated Font & Icon Recommendations — A hand-picked list of Google Fonts across sans-serif, monospace, serif, and display categories is provided, alongside CDN-ready integration for Lucide icons and Flowbite components — eliminating guesswork on typography choices.
• Animation Micro-syntax & Timing Guidelines — A concise notation system for planning micro-interactions (e.g., `button: 150ms [S1→0.95→1] press`) keeps animations intentional. Recommended timing ranges for entry animations, hover states, button press, and page transitions are defined.
• Accessibility-First Implementation Rules — Guidelines enforce semantic HTML, proper heading hierarchy, ARIA labels, a minimum 4.5:1 color contrast ratio, and keyboard navigation support — ensuring outputs meet baseline accessibility standards without extra prompting.
• Component-Level Design Patterns — Opinionated best practices for Cards, Buttons, Forms, and Navigation are baked in — covering shadow depth, touch target sizing, focus states, loading/disabled states, and sticky header behavior.

Use Cases

• Landing Page Generation — Ask your agent to build a SaaS landing page and SuperDesign ensures it follows a structured layout (header → hero → features → footer), picks a modern font pairing, applies a coherent color theme, and generates mobile-first responsive CSS — all without manual design direction.
• Dashboard UI Prototyping — When prototyping an analytics or admin dashboard, the skill guides the agent to wireframe the layout first, apply consistent spacing and subtle card shadows, and include hover/animation states — producing a prototype that looks production-ready.
• UI Component Library — Use this skill to generate a cohesive set of buttons, form fields, and navigation components that share the same design tokens (CSS variables for color, radius, shadow) and pass accessibility checks.
• Themed Dark/Light Mode Interface — When building an interface that must support both light and dark modes, the skill's CSS variable approach and `oklch()` color guidelines help the agent produce a theme-aware system from the start, rather than retrofitting dark mode later.