Storytelling design skill for AI agents

Overview

Storytelling is a narrative-driven design system skill for AI-powered development. It treats every interface as a story with a beginning, middle, and end — guiding users through a cohesive emotional journey using dramatic display typography, purposeful pacing, and a visual language designed to make functional screens feel like chapters in a book. The interface doesn't just display information; it tells it.

When you add this skill file to your AI coding tool, every component it generates is built for narrative flow. Hero sections open like a first line that hooks you. Content sections build tension and context. CTAs resolve the story with a clear call to action. The typography — Inter for the narrator's voice, Abril Fatface for the chapter titles — sets the tone before a single word of copy is read.

Design tokens

Color palette

Storytelling uses the clean blue-violet axis as a neutral narrative backdrop — colors that support the story without stealing focus from the typography and content that carry it:

The palette is deliberately restrained because the narrative power comes from typography and layout, not color. Blue marks the path forward — links, buttons, and interactive elements are the story's calls to action. Violet highlights the key moments — featured content, pull quotes, and emphasis points that the reader shouldn't miss. The white surface serves the same purpose as a book's page: invisible by design, letting the words do the work.

Typography

Storytelling's defining feature is the most dramatically contrasting body/display pairing on typeui.sh:

• Inter — Primary/body font. The narrator's voice. Clean, invisible, and optimized for sustained reading. Inter handles all body text, UI labels, navigation, and metadata — the functional prose that moves the user through the interface. Its neutrality is essential: the narrator doesn't call attention to themselves; they call attention to the story.

• Abril Fatface — Display font. The chapter title. A high-contrast Didone display typeface with dramatic thick/thin stroke variation, elegant serifs, and the commanding presence of a Victorian playbill. Abril Fatface is used exclusively for headings and display moments — the lines that stop the scroll, open a new section, or announce a turning point. Every heading set in Abril Fatface feels like the title of a chapter you want to read.

• JetBrains Mono — Monospaced font for code blocks, technical data, and tabular content.

The type scale follows a desktop-first expressive approach, and font weights span 100 (thin) to 900 (black). But the real story is in the typeface switch: the transition from Inter body text to an Abril Fatface heading creates the most dramatic visual shift of any skill on the platform. The effect is like turning a page and encountering a chapter title — a moment of arrival, emphasis, and narrative punctuation.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. Storytelling interfaces need pacing — the visual equivalent of sentence rhythm and paragraph breaks. Tight spacing within content blocks creates reading flow. Wider spacing between sections creates the pauses that let each narrative beat land. The 4px grid gives the AI agent the control to create this alternating rhythm: immersive reading density within chapters, clear whitespace breaks between them.

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

Storytelling is built on the principle that every interface is a narrative, and every user is on a journey:

• Beginning, middle, end — the AI agent structures pages as three-act compositions. The hero section hooks (beginning). Content sections build understanding and trust (middle). The CTA resolves with a clear action (end). This narrative arc applies to full pages, individual sections, and even single cards
• Chapter-title typography — Abril Fatface headings function as chapter titles that punctuate the narrative. Each heading is a moment of arrival: "you've entered a new part of the story." The dramatic shift from Inter body text to Abril Fatface display creates the typographic equivalent of turning a page
• Pacing through spacing — tight reading flow within sections, generous breaks between them. The rhythm mirrors how stories are told: immersive paragraphs followed by white space that lets the reader absorb what they've just encountered
• Content as protagonist — in a storytelling interface, the copy and imagery are the main characters. The design system exists to present them at their best, not to compete with them. Blue and violet accents guide the reader's path, but the type and content carry the emotional weight
• Emotional resonance — the skill teaches the AI that interfaces can make people feel something. An onboarding flow is a welcome story. A pricing page is a value narrative. An error screen is a moment of empathy. Every component has an emotional context, and the design supports it

This makes Storytelling a strong fit for:

• Brand storytelling and narrative marketing sites
• Onboarding flows and product tours
• Case study and portfolio presentations
• Non-profit and cause-driven websites
• Long-form content platforms and digital magazines
• Product launch and announcement pages
• Fundraising and crowdfunding campaigns
• Any interface where guiding the user through an emotional journey is the primary goal

Accessibility

Storytelling enforces WCAG 2.2 AA compliance as a hard requirement. A compelling narrative is one that everyone can experience. 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 — focus indicators are calibrated to be visible against both the white reading surface and any accent-tinted sections
• Maintain sufficient color contrast ratios across all token pairings, ensuring both the blue primary and violet secondary remain readable against white surfaces
• Prioritize accessibility over aesthetics when the two conflict

Abril Fatface's high-contrast thick/thin strokes are naturally legible at display sizes — the bold strokes anchor readability while the thin strokes add elegance. The skill enforces minimum size thresholds for the display typeface, ensuring Abril Fatface is never used at body sizes where the thin strokes could compromise readability. Inter handles all content that requires extended reading, keeping the narrative accessible from the first word to the last.

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 storytelling

2. The file is saved to .cursor/skills/storytelling/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 narrative-structured interfaces with Inter body text, Abril Fatface chapter headings, paced section rhythm, and story-arc page compositions.

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 Storytelling guidelines — using the dramatic Inter-to-Abril Fatface type switch, blue-violet narrative accents, and three-act page structure 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 Storytelling apart

Storytelling is the only typeui.sh design skill that treats interface structure as narrative structure:

• Most dramatic type contrast — the Inter (neutral sans-serif) to Abril Fatface (high-contrast Didone display) switch is the widest typographic gap of any skill on the platform. No other pairing creates this level of "narrator vs. chapter title" drama
• Three-act page structure — the only skill that encodes beginning/middle/end narrative arcs as a layout principle. The AI doesn't just arrange elements; it sequences them as a story
• Pacing as a design tool — spacing isn't just about grouping; it's about rhythm. Tight flow for immersive reading, wide breaks for narrative beats. The interface breathes like a well-edited story
• Emotional context awareness — the skill teaches the AI that every component has an emotional role. An onboarding flow is a welcome. A pricing page is a value pitch. An error state is a moment of empathy
• Restraint palette, expressive type — the conventional blue-violet colors stay quiet so the typography can be loud. Color guides the path; type carries the meaning
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the narrative structure consistent whether the AI generates a single testimonial card or an entire brand story experience