design-taste-swiss-system

What problem does it solve?

This Skill simplifies the process of creating Swiss-style UI/UX designs, ensuring structural clarity and controlled asymmetry without the need for manual layout adjustments.

Core Features & Use Cases

• Swiss System Layouts: Offers predefined baseline configurations for design variance, motion intensity, and visual density.
• Default Architecture: Provides guidelines for dependency verification, framework choice, state management, and styling policy.
• Typography and Color: Instructs on typography roles, font pairing, color systems, and brand identity.
• Layout and Hierarchy: Outlines best practices for hero composition, navigation, content-driven breakpoints, and viewport stability.
• Materiality and Components: Defines rules for card usage, shadow application, button design, and component execution.
• States and Forms: Ensures loading, empty, error, and form states are properly implemented.
• Creative Proactivity: Encourages bold aesthetic direction, meaningful visual media, and rare UI components.
• Motion and Interaction: Guidelines for motion clarification, interaction states, and performance guardrails.
• Performance: Offers best practices for animation, code quality, and accessibility.
• Technical Reference: Detailed explanations of design variance, motion intensity, visual density, and AI tells.
• Style Direction: Defines the core identity, palette, typography, hero direction, navigation, layout tendencies, component vocabulary, media, motion profile, creative arsenal, and style-specific avoidances.
• Full Taste Core Overlay: Provides deep rule layers for the current style pack, active baseline interpretation, default architecture, design engineering directives, creative proactivity, performance guardrails, and technical references.

Quick Start

Use the design-taste-swiss-system skill to generate a Swiss-style UI layout for your project.