design_skill

Overview

This skill provides a complete playbook for premium UI design and implementation tailored to dashboards, SaaS UIs, admin interfaces, and any product that needs a polished, professional look. It covers design direction, core craft principles, and a 9-phase implementation roadmap that you can follow from typography to final polish. Use it to choose a personality, establish a consistent system, and avoid common pitfalls that create technical debt.

How this skill works

The skill guides you through three parts: choose a design direction (personality, color foundation, layout, and typography), apply core craft rules (4px grid, padding symmetry, depth strategy, color semantics), and execute a 9-phase implementation (typography, color, shadows, animation, components, layout, domain features, data display, pages). Each step includes concrete deliverables, CSS/Tailwind patterns, and implementation notes so designers and engineers can align quickly. Triggers include phrases like 'use design mode', 'design system', and 'design system upgrade' to enter full-access design guidance.

When to use it

• Starting a new dashboard, admin panel, or SaaS product and you need a coherent design system
• Upgrading an existing UI to be more polished, consistent, and accessible
• Defining visual personality and practical tokens before engineering work begins
• Building component libraries, design tokens, or Tailwind integrations
• Preparing product for dark mode, high-density data screens, or polished marketing screenshots

Best practices

• Commit to one design personality (or a deliberate blend) before styling components
• Use a 4px base grid and symmetrical padding to ensure visual rhythm and consistency
• Define HSL semantic tokens and integrate them with Tailwind using <alpha-value> for flexible opacity
• Choose one depth strategy (borders-only, subtle shadow, layered) and apply it consistently
• Treat controls as crafted components—avoid native form elements when you need full styling control
• Reserve color for meaning; use grayscale for structure and monospace for numeric data

Example use cases

• Designing a dense analytics dashboard that prioritizes scanability and chart clarity
• Reworking an enterprise admin with improved navigation, consistent cards, and elevation rules
• Building a design system repo with typography tokens, HSL color variables, and Tailwind config
• Adding reliable dark mode using border-based separation and adjusted semantic colors
• Creating data-focused components (tables, KPIs, chart palettes) with tabular numbers and mono fonts