Superhuman Ui Skills

What it does

This skill provides a set of opinionated guidelines for AI agents to rapidly design, prototype, and optimize user interfaces inspired by Superhuman's aesthetic and usability principles. It enforces specific constraints related to color palettes, typography, and semantic tokens to create consistent and accessible light-mode UIs. The goal is to streamline the UI development process while adhering to a defined visual style.

When to use it

• When building light-mode user interfaces.
• When aiming for a design system that mimics Superhuman’s look and feel.
• When needing to implement UIs using the Inter font family and a 4px grid layout.
• To ensure consistent typography and color usage across your UI elements.

Key capabilities

• Color Palette Enforcement: Specifies required colors for backgrounds (surface-base), primary actions/focus states (accent), and other UI components.
• Typography Guidelines: Mandates the use of Inter font, defines heading and body text sizes/weights, and recommends consistent font usage.
• Semantic Token Definitions: Provides a table of semantic tokens (e.g., surface-base, text-primary) with their corresponding HEX and RGB values for standardized styling.
• Text Style Presets: Defines pre-set text styles including font, size, weight, color and count.

Example prompts

• "Create a UI element with a surface-raised background."
• "Apply the text-primary style to this heading."
• "Generate a button using the accent color for its primary action state."
• “Design a page background using the surface-base token.”

Tips & gotchas

• This skill enforces strict constraints; deviating from them may result in unexpected or undesirable outcomes.
• The skill is primarily focused on light mode UI design and might not be suitable for dark mode interfaces.
• To get the best results, ensure your AI agent understands and can apply semantic tokens effectively.