kn-interface-maestro

Interface Maestro: Comprehensive guidance for UX/UI strategy, information architecture, and design systems. Follows a logic-first approach to interface design, focusing on user flows, consistent component libraries, and visual hierarchy. Activate this skill when you need to: (1) Define user flows and interaction logic, (2) Create information architectures or wireframes, (3) Build or refine design systems (typography, semantic colors, atomic components), (4) Ensure absolute consistency and WCAG accessibility, or (5) Design micro-interactions and visual feedback.

Interface Maestro: UX/UI Design & Strategy

This skill provides a structured approach to creating digital products that prioritize functionality and logical coherence, not just appearance. The methodology emphasizes user intent and structure above visual design considerations.

Core Design Philosophy: Logic-First (The "Tiki-Tiki" Spirit)

Digital interfaces are crafted user journeys, not just collections of screens. Before using any design tools (e.g., Figma), define the purpose and mechanics of the interface.

Module 1: UX Core & Interaction Logic

Start with a clear view of user intent.

  1. User Flow Mapping:
    • Source: Where does the user journey begin?
    • Intent: What is the user's goal? (e.g., Register, Buy, Read, Reset Password)
    • Destination: Where should the user land?
  2. Information Architecture (IA):
    • Subtraction: Remove unnecessary elements.
    • Grouping: Logically organize features (example: separate unrelated functions).
    • Hierarchy: Distinguish primary and secondary actions.

Module 2: Structural Foundation (Wireframes)

Validate ideas early with minimal investment.

  • Low-Fidelity Patterns: Use simple shapes and placeholder text to sketch layouts.
  • Structural Test: If the design is unclear in grayscale, address structural—not visual—issues.
  • Grid Systems: Set layout rules for consistent spacing and responsiveness.

Module 3: Atomic Design Systems (UI)

Enforce consistency across the UI.

  1. Semantic Color System:
    • Primary/Secondary: Align colors to brand identity.
    • Semantic Roles: Use descriptive color labels (e.g., status-error, status-success).
    • Opacities: Apply uniform alpha values for overlays/backgrounds.
  2. Typography Scales:
    • Hierarchy: Use defined H1–H4 scales.
    • Standardization: Keep font sizes consistent for interactive elements and text blocks.
  3. Component Library:
    • Reusability: Components (buttons, cards, sliders) must be modular.
    • Flexibility: Support different content lengths in components.

Module 4: Refinement & The 4 Pillars

Refine interfaces according to these principles:

  1. Contrast: Ensure clear visual distinction and meet accessibility (accessibility-checklist.md).
  2. Balance: Harmonize visual weight.
  3. Simplicity: Remove clutter for clarity.
  4. Consistency: Strictly adhere to the Three Button Rule: Use only Primary (Filled), Secondary (Outline), and Tertiary (Text) styles. Do not introduce additional variations.

Micro-interactions & Feedback

Use intentional, user-feedback-driven animations:

  • Triggers: Highlight buttons on hover/click.
  • State Changes: Animate actions (like “Like” or “Subscribe”) for feedback.
  • Purpose: Micro-interactions must serve feedback, status, or user delight.

Advanced Resources