Perspective design skill for AI agents

Overview

Perspective is a depth-driven design system skill for AI-powered development. It moves beyond flat UI by using layered elements, spatial hierarchy, and high-contrast surfaces to create interfaces that feel dimensional and grounded. When components have visual depth, users instinctively understand what's interactive, what's elevated, and what sits in the background.

When you add this skill file to your AI coding tool, every component it generates — from cards and modals to full dashboard layouts — uses layering, shadow, and typographic contrast to guide the eye through a clear spatial hierarchy.

Design tokens

Color palette

Perspective anchors its entire identity on a vivid green primary, creating interfaces that feel fresh, modern, and action-oriented:

The single-accent approach is deliberate. By unifying primary and secondary on the same green, the AI agent produces interfaces with a strong, focused identity — depth and layering do the visual heavy lifting instead of multiple competing colors.

Typography

Perspective uses a three-font system where each typeface serves a distinct spatial role:

• Poppins — Primary/body font. Its geometric, rounded forms create a friendly and modern baseline for all readable content.
• Oswald — Display font. A condensed, high-impact typeface used for headings and hero elements. The vertical compression creates natural contrast with Poppins and reinforces the sense of layered hierarchy.
• JetBrains Mono — Monospaced font for code blocks, terminal output, and technical content.

The type scale uses six sizes tuned for high-contrast layouts:

• 12px — Fine print, tertiary metadata
• 14px — Captions, helper text, secondary labels
• 16px — Body text (default)
• 20px — Large body, lead text, card titles
• 24px — Section headings (h3)
• 32px — Page headings, hero text (h1/h2)

Font weights span 100 (thin) to 900 (black). The interplay between Poppins at regular weights and Oswald at heavier weights is what creates the dimensional typographic feel — headings punch forward while body text recedes.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. In a depth-oriented design, spacing is critical for selling the illusion of layers. Tighter spacing groups elements on the same plane; wider spacing separates elevation levels. The skill file encodes these relationships so the AI agent maintains spatial consistency.

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

Perspective is built on the idea that depth is information. Flat interfaces treat every element as equal; Perspective uses spatial cues to encode meaning:

• Elevation as hierarchy — elements that matter most sit visually closer to the user. Cards lift off the surface, modals float above content, tooltips hover at the top of the stack
• Layered composition — backgrounds, content surfaces, and interactive elements occupy distinct visual planes, making complex layouts scannable at a glance
• Contrast as structure — the high-contrast visual style (dark text on white surfaces, vivid green for actions) reinforces layer boundaries without relying on heavy borders or dividers
• Condensed + rounded type pairing — Oswald's vertical compression for display and Poppins' geometric roundness for body creates a push-pull rhythm that mirrors the spatial depth in the layout

This makes Perspective a strong fit for:

• Data-dense dashboards and analytics platforms
• Project management and workflow tools
• E-commerce product pages with layered content cards
• Marketing sites that need visual depth without 3D assets
• Any interface where guiding attention through spatial hierarchy matters

Accessibility

Perspective enforces WCAG 2.2 AA compliance as a hard requirement. Visual depth and layering enhance usability but never at the cost of it. 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 — adapted to work clearly across different elevation levels
• Maintain sufficient color contrast ratios, paying special attention to the green primary (#00BD7D) against both light and dark backgrounds
• 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 perspective

2. The file is saved to .cursor/skills/perspective/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 Perspective depth system, Poppins + Oswald type pairing, and green accent 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 Perspective guidelines — using layered elevation, the dual-typeface hierarchy, and the focused green accent 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 Perspective apart

Most design system skills produce flat, same-plane interfaces. Perspective teaches the AI agent to think in layers:

• Single-accent identity — primary and secondary share the same green, forcing the AI to create visual interest through depth and typography rather than color variety
• Dual-typeface hierarchy — Oswald for display and Poppins for body creates a dimensional type system where headings visually advance and body text recedes
• Spatial spacing logic — the 4px grid isn't just about alignment; the skill encodes how spacing communicates elevation relationships between elements
• Anti-patterns built in — the skill explicitly blocks flat-feeling outputs like low contrast text, uniform spacing, and ambiguous labels that would undermine the depth-driven approach
• Quality gates — every rule is anchored to a token or measurable threshold, so the spatial design stays consistent whether the AI generates one component or an entire application