Agentic design skill for AI agents

Overview

Agentic is a conversation-first, AI-native design system skill file built for interfaces where the user delegates tasks to an intelligent agent rather than navigating menus and clicking through workflows manually. When you give this skill file to an AI coding assistant, it generates UIs centered around chat inputs, outcome cards, and minimal controls — the interface recedes so the conversation can lead.

Built around Playfair Display's editorial authority and a bold vermillion-orange accent, Agentic produces interfaces that feel like talking to a confident, capable assistant. There are fewer buttons, fewer settings panels, and fewer multi-step forms. Instead, the interface emphasizes clear prompts, streaming responses, task status indicators, and outcome summaries.

This skill is ideal for AI agent platforms, conversational AI products, copilot interfaces, automated workflow tools, AI-powered search, chatbot frameworks, and any product where the primary interaction model is "tell the AI what you want and watch it work."

Design Tokens

Color Palette

Agentic pairs a bold vermillion-orange primary with a quiet warm-gray secondary, creating a palette where the AI's actions and the user's attention naturally converge on the same focal points:

The vermillion-orange primary (#FF5701) is chosen for its urgency and warmth — it draws the eye to where action is happening (the send button, the active agent indicator, the latest task outcome) without the coldness of blue or the alarm of red. The warm off-white secondary (#F6F6F1) creates soft layering between conversation threads, side panels, and context areas.

Typography

Agentic uses Playfair Display as both the primary and display font — a deliberate editorial choice for an AI-native interface:

• Primary and display font: Playfair Display — a high-contrast transitional serif that brings authority and trustworthiness to AI agent interactions. When an agent presents results, summarizes findings, or recommends actions, the serif typography signals "this information has been curated" rather than "this was auto-generated." The editorial quality builds user confidence in agent outputs
• Monospace font: JetBrains Mono — used for code blocks, API responses, structured data, agent logs, and technical output from automated tasks

The type scale follows: 14 / 16 / 18 / 24 / 32 / 40px, with weights from 100 through 900. The 40px ceiling accommodates hero-level headings for agent landing states and onboarding screens, while the 14–18px range handles the conversation UI where most reading happens. The serif typeface at conversational sizes (14–18px) creates a sense of reading a well-typeset document rather than scanning a software interface.

Spacing

All spacing is built on an 8pt baseline grid. Every margin, padding, and gap aligns to multiples of 8px. The grid creates a measured, calm rhythm that is essential for agentic interfaces where:

• Conversation messages need consistent vertical spacing to remain scannable
• Agent output cards (task results, summaries, data visualizations) need uniform padding to feel cohesive regardless of content type
• The transition between user input and agent response needs clear spatial separation without aggressive dividers
• Loading and thinking states need enough space to indicate activity without disrupting the conversation flow

The 8pt grid ensures that agentic interfaces feel composed and unhurried, even when the agent is streaming responses or executing multi-step tasks in real time.

The Agentic Interface Model

The skill file defines a distinct interaction model that fundamentally differs from traditional CRUD interfaces:

• Conversation as primary input — the main interaction point is a text input (or voice input) where users express intent in natural language, not a hierarchy of menus, forms, and settings
• Outcome cards over forms — instead of asking users to fill out multi-step forms, the agent gathers requirements through conversation and presents outcomes as structured result cards
• Minimal controls — the interface deliberately reduces the number of visible buttons, toggles, and settings. The agent handles complexity; the user sees outcomes
• Progressive disclosure through dialogue — rather than exposing all options upfront, the agent asks clarifying questions and reveals controls only when the user's intent requires them
• Status and delegation indicators — clear visual states for "agent is thinking," "task in progress," "task complete," and "task failed" replace traditional loading spinners and progress bars with contextual, conversational feedback
• Trust signals — the serif typography, measured spacing, and confident color palette all work together to build trust in the agent's outputs. Users are delegating decisions; the interface must feel authoritative

Component Coverage

Agentic includes guidance for over 40 component families, each adapted for conversational AI interfaces:

• Inputs and forms — conversational input bars, send buttons, minimal inline forms, selects, checkboxes, radios, switches, textareas, date/time pickers, file uploaders for agent attachments
• Data display — outcome cards, result summaries, tables, data lists, data grids, charts, stats/metrics, badges, avatars (for both user and agent identity)
• Navigation — breadcrumbs, pagination, steppers (for multi-step agent workflows), sidebars, top bars, tabs, command palette (a natural fit for agent invocation)
• Overlays and feedback — modals, drawers/sheets for agent context panels, tooltips, popovers, alerts, toasts for agent notifications, notifications center, progress indicators for task execution, skeletons for streaming responses
• Page-level patterns — search (agent-powered), empty states with conversation starters, onboarding that introduces the agent, authentication screens, settings pages, documentation layouts, pricing blocks

Each component defines required states (default, hover, focus-visible, active, disabled, loading, error) with explicit designs for empty, loading, and error states — critical in agentic UIs where users are waiting for agent responses. Responsive behavior is built in by default. The writing tone within all components is action-oriented and low-jargon: labels say "Ask anything" not "Submit query," and error messages explain what the agent will try next, not just what went wrong.

Accessibility

Agentic has a comprehensive accessibility specification, addressing both standard requirements and the unique challenges of conversational AI interfaces:

• WCAG 2.2 AA compliance as a non-negotiable baseline
• Keyboard-first interactions with visible focus states on every interactive element
• Semantic HTML before ARIA — native elements first, ARIA only when semantic markup falls short
• Screen-reader tested labels — every interactive element, including agent status indicators and outcome cards, must have verified programmatic labels
• Reduced-motion support — streaming text animations, thinking indicators, and task progress animations all respect prefers-reduced-motion
• 44px+ touch targets — all interactive elements meet minimum touch target sizes, including the primary chat input and action buttons
• High-contrast support — the system works in forced high-contrast modes
• Accessibility rationale documented — every accessibility decision is accompanied by a brief explanation of why, not just what

Conversational AI interfaces introduce specific accessibility challenges: streaming text can be disorienting for screen readers, agent status changes need to be announced without being disruptive, and the reduced-control model must still provide keyboard-accessible alternatives for all agent actions. The skill file addresses each of these with concrete solutions.

How to Use with AI Tools

Cursor and Claude

1. Pull the skill file into your project:

npx typeui.sh pull agentic

2. The skill file saves as a SKILL.md in your project. Cursor automatically detects skill files and uses them as context during code generation.

3. Start prompting — ask Cursor to build chat interfaces, agent dashboards, or copilot UIs, and the output will follow the Agentic system's conversation-first layout, vermillion accents, serif typography, and minimal-control philosophy.

Claude (Anthropic)

Use Agentic directly with Claude by adding the skill file as context:

1. Copy or download the skill file from the design skill page
2. Paste it at the start of a Claude conversation, or add it to a Claude Project as project knowledge
3. Prompt Claude to generate UI code — it will produce conversation-centered, agent-native interfaces with proper streaming states, outcome cards, and the measured editorial aesthetic

Other AI Tools

The skill file is standard markdown compatible with any AI assistant that accepts context or system instructions:

• ChatGPT — paste into Custom Instructions or at the start of a conversation
• Windsurf / Codeium — place the file in your project directory
• GitHub Copilot — add to your repository's context or instruction files
• v0 by Vercel — paste the design tokens and agentic interaction rules as prompt context

Design Philosophy

Agentic is built on the principle that the best AI interface is the one that gets out of the way. The skill file follows three rules:

1. The conversation is the interface — traditional UIs expose tools and let users operate them. Agentic UIs expose a conversation and let the agent operate the tools. Every design decision serves this inversion: fewer visible controls, more outcome visibility, clearer delegation feedback
2. Authority builds trust — users are delegating tasks to an AI agent. The editorial serif typography, the measured 8pt spacing, and the confident vermillion accent all communicate "this system knows what it's doing." Trust is a design outcome, not an afterthought
3. Outcomes over options — the interface shows what the agent has done and what it will do next, not every option the user could configure. Progressive disclosure through conversation replaces upfront complexity with just-in-time clarity