UI Design System

The Problem It Solves

When developing products with a professional appearance and consistent user experience, teams frequently encounter challenges. Building a design system is time-consuming, and achieving the aesthetic standards of mainstream tech giants or Pinterest is difficult. Specific issues include:
- Style Discrepancy: Designers and developers often have different interpretations of "premium" or "minimalist," leading to visual clutter or outdated results.
- Lack of Systems: Ad-hoc use of components, colors, and spacing prevents the formation of a unified design language, increasing maintenance costs.
- Ambiguous Standards: While referencing Material Design or Apple HIG, teams often fall short on implementing details like shadows, corner radii, and micro-interactions.

How the Skill Works

This skill provides a structured UI Generation & Audit Protocol, aiming to translate high-standard design philosophies into executable code and specifications. Its core capabilities and key steps are as follows:

Core Capabilities:
- Design System Output: Generates complete CSS variable systems to ensure consistency across colors, spacing, and typography.
- Protocol-Driven Workflow: Features clear steps from analysis to delivery, reducing subjective bias.
- Integrated Guidelines: Internally incorporates the essence of authoritative guides like Google Material 3 and Apple HIG.

Key Workflow Steps:
1. Requirement Analysis & DNA Definition: Begins by clarifying product positioning, brand tone, and primary color preference. This is the starting point for all design decisions.
2. Establishing a Token System: Creates color systems like Tonal Palette, defines typography hierarchies and spacing grids (e.g., an 8pt system), providing a foundation for all components.
3. Component Implementation: Constructs core components like buttons, cards, and inputs per the protocol, ensuring each includes a full set of interaction states (Default, Hover, Active, Focus, Disabled, Loading).
4. Injecting Motion and Texture: Applies micro-interactions (e.g., a scale(0.97) press effect) based on Apple Spring or Material Motion curves, and enhances depth through precise shadows and gradients.
5. Review and Optimization: For existing UIs, it can perform a six-dimension audit (visual hierarchy, color contrast, typography quality, spacing & alignment, component consistency, modern feel) and provide optimization suggestions.

Applicability & Considerations

• Depends on Input Quality: The skill's effectiveness directly relies on the information provided during the requirement analysis phase (e.g., brand tone, target users). When information is missing, it makes reasonable assumptions, which may deviate from expectations.
• Design Paradigm Bias: Its output strongly adheres to "restrained luxury" and "systematic thinking," favoring a Pinterest/Dribbble-like visual style. It may be less suitable for scenarios requiring maximalist, completely unconventional, or highly experimental UIs.
• Not an Automated Creative Tool: This skill is an executor and optimizer of design specifications, not a tool for conceptual innovation from scratch. It excels at "how to make it professional and consistent" rather than "what entirely new thing to create."
• Output Format: Primarily outputs HTML/CSS, React/JSX, and similar code. For purely design artifacts (e.g., Figma files), its guiding value is higher than its direct output.