Gpui Style Guide

The gpui-style-guide skill provides AI agents with a comprehensive reference for the design system used in the GPUI framework. It enables agents to generate code, documentation, and UI mockups that strictly adhere to specific visual standards, typography, and component behaviors defined by longbridge.

When to use it

• You need to build interfaces that match the native look and feel of the GPUI ecosystem without manual CSS tweaking.
• An AI agent is tasked with auditing existing codebases for consistency with established design tokens.
• You require precise guidance on color palettes, spacing scales, and typography rules for a specific project.
• Your team is onboarding new developers who need automated explanations of complex UI patterns.

Key capabilities

• Access to the full set of official design tokens including colors, fonts, and border radii.
• Detailed specifications for interactive components like buttons, modals, and navigation bars.
• Guidelines for responsive layouts and accessibility compliance within the GPUI framework.
• Reference materials for dark mode implementation and theme switching logic.

Example prompts

• "Generate a login form using the gpui-style-guide that follows the official button and input field specifications."
• "Explain the color hierarchy defined in the style guide and how to apply it to a data dashboard."
• "Create a mockup description for a settings panel ensuring all spacing matches the global design tokens."

Tips & gotchas

Ensure your AI agent has access to the latest version of the GPUI documentation, as design systems evolve frequently. When generating code, explicitly ask the agent to reference specific token names rather than hardcoded values to maintain consistency across updates.