Premium design skill for AI agents

Overview

Premium is a refined, Apple-inspired design system skill for AI-powered development. It channels the precision, restraint, and polish of modern Apple interfaces — clean surfaces, carefully weighted typography, and interactions that feel effortless. Every token and rule in this skill file is tuned to produce UI that looks like it ships from Cupertino.

When you add this skill file to your AI coding tool, every component it generates will carry that same sense of craft — measured whitespace, subtle hierarchy, and the kind of quiet confidence that makes an interface feel expensive without being ornate.

Design tokens

Color palette

Premium uses a restrained color system where the interface stays neutral and lets content take center stage. Color is applied with purpose, never for decoration:

The palette is intentionally understated. The AI agent uses color sparingly — primary blue for interactive elements, neutral tones for everything else — so the interface never competes with the content it presents.

Typography

Premium pairs Inter for all body and display text with JetBrains Mono for code and monospaced elements. Inter's optical sizing, tight metrics, and extensive weight range make it one of the closest open-source matches to the typographic precision of SF Pro.

The type scale uses seven sizes with tighter intervals at the top:

• 12px — Fine print, tertiary metadata
• 14px — Captions, helper text, secondary labels
• 16px — Body text (default)
• 18px — Large body, lead text
• 24px — Section headings (h3)
• 30px — Page headings (h2)
• 36px — Hero headings (h1)

Font weights span 100 (thin) to 900 (black). The Apple-inspired approach favors medium weights for UI chrome and reserves bold/heavy weights for hero moments. The skill file encodes this restraint so the AI agent doesn't over-bold the interface.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. Apple-style interfaces rely on generous, consistent spacing to create that sense of breathing room. The skill file enforces this rhythm so every generated component feels like part of a cohesive system.

Component coverage

The skill file covers 40+ component families grouped by function:

• Inputs and forms — buttons, text inputs, selects, comboboxes, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, command palette, tabs
• Overlays — modals, drawers, sheets, tooltips, popovers, menus
• Feedback — alerts, toasts, notifications center, progress indicators, skeletons, empty states
• Page-level — authentication screens, settings pages, documentation layouts, onboarding flows, pricing blocks, search

For each component, the skill defines required interaction states (default, hover, focus-visible, active, disabled, loading, error), keyboard and touch behavior, spacing and typography token usage, and responsive edge cases.

Design philosophy

Premium follows the core principles that make Apple interfaces feel distinctive:

• Content over chrome — UI elements recede so the user's focus stays on what matters. Borders are light or absent, shadows are subtle, and color is functional
• Precision at every scale — the 7-step type scale and 4px spacing grid create micro-level consistency that reads as polish, even in dense data views
• Restraint as a feature — the skill file actively limits weight usage, color application, and decorative elements so the AI agent builds interfaces that feel considered rather than decorated
• Smooth interaction states — hover, focus, and active states use subtle transitions that reinforce the sense of a responsive, living interface

This makes Premium a strong fit for:

• SaaS dashboards and admin panels
• Productivity and finance apps
• Developer platforms and documentation sites
• Any product where trust, clarity, and perceived quality matter

Accessibility

Premium enforces WCAG 2.2 AA compliance as a hard requirement. Refined aesthetics never come at the cost of usability. The skill file instructs the AI agent to:

• Use keyboard-first interaction patterns for all interactive elements
• Include visible focus states on every focusable component — subtle enough to fit the design language, prominent enough to meet spec
• Maintain sufficient color contrast ratios across all token pairings, including the lighter neutral tones
• Prioritize accessibility over aesthetics when the two conflict

Every accessibility rule in the skill is written to be testable in code review.

How to use with Claude AI

In Cursor IDE

1. Pull the skill file into your project:

npx typeui.sh pull premium

2. The file is saved to .cursor/skills/premium/SKILL.md by default. Cursor automatically picks up skill files from this directory and makes them available to Claude.

3. Start prompting — Claude will apply the Premium design tokens, Inter typography, and Apple-inspired restraint when generating UI code.

In Claude Desktop or API

1. Copy the skill file content from the typeui.sh page (use the Copy button in the sidebar).

2. Paste it into your system prompt or as a reference document at the start of your conversation.

3. Ask Claude to build components or pages. It will follow the Premium guidelines — using Inter with measured weight choices, the correct color tokens applied sparingly, and generous spacing throughout.

In other AI tools

The skill file is standard markdown and works with any AI tool that accepts system-level instructions:

• Windsurf — place the file in your project's .windsurf/rules/ directory
• GitHub Copilot — add it to .github/copilot-instructions.md or reference it in your prompt
• OpenAI GPTs — upload it as a knowledge file in the GPT configuration
• Any LLM API — include the file content in the system message

What sets Premium apart

Premium doesn't just list tokens — it encodes an opinionated design sensibility that prevents the most common AI mistakes when trying to achieve a polished, Apple-quality look:

• Restrained color application — the AI uses primary blue for actions and neutrals for everything else, avoiding the rainbow effect that plagues most AI-generated UIs
• 7-step type scale — the extra 12px and 30px stops give the AI finer-grained control over hierarchy, matching the precision of native Apple interfaces
• Weight discipline — the full 100-900 range is available, but the skill file teaches the AI to favor medium weights for UI and reserve heavy weights for focal points
• Anti-patterns built in — the skill explicitly blocks low contrast text, inconsistent spacing, and ambiguous labels so the clean aesthetic never becomes a usability problem
• Quality gates — every rule is anchored to a token or measurable threshold, keeping output consistent across hundreds of generated components