Futuristic design skill for AI agents

Overview

Futuristic is a forward-looking design system skill for AI-powered development that balances everyday readability with sci-fi ambition. It pairs Roboto — one of the most trusted and readable UI typefaces ever made — with Audiowide for display moments, creating a dual-voice system where body content feels grounded and familiar while headings signal something next-generation. The result is UI that feels like tomorrow's technology, accessible today.

When you add this skill file to your AI coding tool, every component it generates speaks two languages at once: the clear, functional voice of Roboto for everything you read, and the wide, geometric voice of Audiowide for everything that needs to make a statement.

Design tokens

Color palette

Futuristic uses a blue-to-violet primary/secondary axis — a clean, digital-native pairing that reads as intelligent and forward-thinking without being alien:

The blue-violet pairing is deliberately professional. Unlike Cosmic's neon-on-dark approach, Futuristic uses these colors on light surfaces, creating an aesthetic that signals innovation within a conventional, accessible context. The palette works in boardrooms and on command decks equally.

Typography

Futuristic's defining feature is its dual-typeface system, where each font serves a distinct voice:

• Roboto — Primary/body font. Google's signature UI typeface, optimized for screen readability across every size, weight, and context. Roboto handles body text, form labels, navigation, metadata — everything the user needs to read quickly and comfortably. Its ubiquity is a strength: users process Roboto text without the typeface registering as a design choice, which keeps the focus on content.

• Audiowide — Display font. A wide, geometric, space-age typeface used exclusively for headings, hero text, and display moments. Audiowide's expansive letterforms and futuristic geometry make every heading feel like a mission title or a product codename. It's the font that creates the "futuristic" impression while Roboto does the functional work underneath.

• Anonymous Pro — Monospaced font for code blocks, terminal output, and technical data. Its slightly idiosyncratic letterforms add a touch of personality to technical contexts while maintaining clear glyph differentiation.

The type scale follows a desktop-first expressive approach. Font weights span 100 (thin) to 900 (black), and the interplay between the two typefaces is where hierarchy happens: Audiowide at any size immediately reads as a heading or display element, while Roboto at the same size reads as content. The AI agent uses this typeface switch as a primary hierarchy tool, supplemented by weight and size changes within each font.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. The futuristic aesthetic works best with measured, precise spacing — not as tight as a data dashboard, not as generous as a luxury layout. The 4px grid gives the AI agent fine-grained control to create layouts that feel technical and intentional, with every gap calibrated rather than estimated.

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

Futuristic solves a problem that fully themed skills like Cosmic can't: it delivers a forward-looking aesthetic that works in professional, mainstream contexts without requiring a dark canvas or a neon palette:

• Two voices, one system — Roboto for clarity, Audiowide for impact. The typeface switch is the primary design tool: flipping from Roboto to Audiowide instantly elevates any element from "content" to "statement" without changing size, weight, or color
• Futuristic on light surfaces — unlike dark-themed sci-fi systems, Futuristic works on white. This makes it viable for corporate products, enterprise SaaS, and professional tools that need to signal innovation without alienating conventional users
• Professional gradient — the blue-violet palette reads as intelligent and forward-thinking in business contexts where neon pink or electric green would feel out of place
• Readable at every level — Roboto is one of the most battle-tested UI fonts in existence. Body text, form labels, table cells, and metadata are always effortlessly readable, even when the display type is doing something dramatic above them
• Precision spacing — the 4px grid creates the technical, measured feel that futuristic design requires. Nothing is loose or organic; every gap communicates intentionality

This makes Futuristic a strong fit for:

• Technology company product pages and marketing sites
• Enterprise SaaS dashboards and admin panels
• AI and machine learning product interfaces
• Automotive, aerospace, and hardware product experiences
• Innovation lab and R&D team tools
• Fintech and insurtech platforms
• Any product that needs to signal "cutting edge" while remaining approachable for mainstream audiences

Accessibility

Futuristic enforces WCAG 2.2 AA compliance as a hard requirement. Forward-looking design should be forward-looking in accessibility too. 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 — the blue primary creates strong, unambiguous focus rings on white surfaces
• Maintain sufficient color contrast ratios across all token pairings, including the violet secondary against white surfaces
• Prioritize accessibility over aesthetics when the two conflict

The dual-typeface system carries a specific accessibility benefit: Roboto handles all body-level content, ensuring that the text users spend the most time reading uses one of the most legible screen fonts available. Audiowide is reserved for display sizes where its wide letterforms have room to breathe and remain clear. The skill enforces this separation so the AI agent never uses the display font at body sizes where readability would suffer.

Every accessibility rule 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 futuristic

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

3. Start prompting — Claude will generate forward-looking interfaces with Roboto body text, Audiowide display headings, the blue-violet palette, and precision 4px spacing.

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 Futuristic guidelines — switching between Roboto and Audiowide for hierarchy, using the professional blue-violet palette, and applying measured 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 Futuristic apart

Futuristic occupies a unique position on typeui.sh: it's the only skill that creates a sci-fi-inflected aesthetic while remaining fully viable for professional, mainstream products:

• Typeface-switch hierarchy — the Roboto-to-Audiowide transition is the primary hierarchy tool. No other skill uses a body/display font pairing this dramatically different, making the typeface switch itself a design gesture
• Futuristic on white — while Cosmic and Luxury require dark surfaces, Futuristic works on light backgrounds. This makes it the only forward-looking skill that fits naturally into enterprise and corporate contexts
• Roboto as an accessibility foundation — using one of the most legible screen fonts for all body content means readability is solved at the system level, freeing Audiowide to be purely expressive at display sizes
• Anonymous Pro personality — the monospace choice adds subtle character to code and data contexts, distinct from the JetBrains Mono default used by most other skills
• Professional palette — the same blue-violet tokens used by other skills, but positioned for boardroom-appropriate contexts rather than creative or gaming environments
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the dual-voice type system consistent whether the AI generates a single heading or an entire product dashboard