Creative design skill for AI agents

Overview

Creative is a high-energy, comic-inspired design system skill for AI-powered development. Built specifically for landing pages that need to stop the scroll, it combines a display typeface that shouts from the rooftop with a vibrant blue-violet palette to produce interfaces that feel like a pop art poster came to life as a website. Subtlety isn't the point. Impact is.

When you add this skill file to your AI coding tool, every component it generates — from hero sections with headlines that punch through the screen to CTAs that demand to be clicked — carries the same bold, playful energy that turns first-time visitors into engaged users.

Design tokens

Color palette

Creative uses a blue-to-violet dual-accent system — two high-energy colors that are bright enough to match the boldness of the typography without fighting it:

The blue-violet pairing works as both solid fills and gradients. On landing pages, the AI agent sweeps between primary and secondary across hero backgrounds, button states, and decorative accents — creating visual movement that matches the kinetic energy of the Bangers typeface. The colors are bold enough to hold their own against oversized display text without either element drowning the other.

Typography

Creative uses Bangers for all body and display text — a comic book display typeface with uppercase-leaning, hand-lettered energy and irregular baselines. This is the loudest typographic choice of any typeui.sh design skill, and it's designed to be.

Bangers was built to be read at speed and at scale. Its thick strokes, tight letter-spacing, and punchy rhythm make every headline feel like a movie poster tagline or a comic panel exclamation. The type scale uses six sizes:

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

While the skill lists weights from 100 to 900, Bangers renders at a single visual weight — its hand-lettered style doesn't have thin or light variants in the traditional sense. The AI agent builds typographic hierarchy entirely through size, color, and spatial placement. At 32px in primary blue, a Bangers heading dominates the viewport. At 14px in muted gray, it becomes a caption that still carries personality.

IBM Plex Mono handles monospaced content — code blocks, data tables, and technical contexts where Bangers' display characteristics would hurt readability. IBM Plex Mono's clean, neutral forms provide the functional counterbalance that keeps the interface usable in data-heavy sections.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. Landing pages need rhythm that alternates between tight, punchy groupings and dramatic open space. The AI agent uses smaller increments (4-12px) to group related elements into tight visual clusters, and larger increments (24-32px) to create the breathing room between sections that makes each block feel like its own moment. The 4px grid is fine-grained enough to support both densities.

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

Creative is built for the single most important page on any website — the landing page. Every design decision optimizes for first impressions, scroll engagement, and conversion:

• Headlines that shout — Bangers' comic-book energy means every heading feels like it's competing for attention on a newsstand. The AI agent uses this to create hero sections that stop the scroll and section titles that pull users deeper into the page
• Color as momentum — blue and violet aren't decorative; they create visual flow. The AI uses color to guide the eye from hero to features to social proof to CTA, painting a path through the page
• Tight clusters, wide breaks — the alternating density of the 4px grid creates a visual rhythm that matches how landing pages are read: scan a block, breathe, scan the next block, breathe. Each section is a self-contained moment
• Playful without being childish — Bangers is bold and energetic, but it's not a joke font. It signals creativity, confidence, and a willingness to break conventions — the same qualities that make a startup feel exciting rather than corporate
• Every component is a conversion tool — buttons look clickable. CTAs pop against the background. Pricing blocks feel decisive. The skill teaches the AI that on a landing page, every element either moves the user toward a goal or gets out of the way

This makes Creative a strong fit for:

• Startup and product launch landing pages
• Campaign and event promotion sites
• Creative agency and freelancer portfolios
• App store pages and product showcases
• Crowdfunding and pre-launch pages
• Newsletter and waitlist signup pages
• Any page where the primary goal is capturing attention in the first three seconds

Accessibility

Creative enforces WCAG 2.2 AA compliance as a hard requirement. Bold and loud doesn't mean inaccessible — in fact, high-energy design often has accessibility advantages. 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 bold visual style means focus indicators can be correspondingly prominent without feeling out of place
• Maintain sufficient color contrast ratios, ensuring the blue primary and violet secondary remain readable against both white surfaces and each other
• Prioritize accessibility over aesthetics when the two conflict

Bangers' thick strokes and high x-height actually aid readability at display sizes — the letterforms are designed to be read quickly across a room, which translates well to fast scanning on screens. The skill enforces minimum size thresholds for body text contexts and falls back to IBM Plex Mono for dense data where the display typeface would reduce comprehension speed.

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 creative

2. The file is saved to .cursor/skills/creative/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 landing-page-optimized interfaces with Bangers display type, blue-violet energy, and conversion-focused component styling.

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 Creative guidelines — using Bangers for punchy headlines, the blue-violet palette for visual flow, and tight-then-open spacing for landing page rhythm.

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 Creative apart

Creative is the only typeui.sh design skill built specifically for landing pages. While other skills create general-purpose design systems, Creative optimizes for a single mission — capturing attention and converting visitors:

• Comic-book display type — Bangers is the most visually aggressive typeface of any skill. Every heading reads like a billboard, making it impossible to scroll past without reading
• Single-weight type hierarchy — like Cosmic's Audiowide, Bangers renders at one visual weight. The AI builds hierarchy through size and color alone, producing layouts with dramatic scale contrast between headings and body text
• Landing page spacing rhythm — the 4px grid is specifically described for alternating tight clusters and wide breaks, matching the section-by-section scanning pattern of landing page visitors
• Conversion-first component logic — the skill teaches the AI that every component on a landing page serves a conversion goal. Buttons, CTAs, pricing blocks, and signup forms are styled to demand action
• IBM Plex Mono as clarity anchor — the monospace font grounds data-heavy sections (pricing tables, feature comparisons, technical specs) in readability while Bangers handles the emotional sell
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the high-energy output consistent whether the AI generates a single hero section or an entire multi-section landing page