Claymorphism design skill for AI agents

Overview

Claymorphism is a playful, tactile design system skill for AI-powered development. It brings the soft, rounded, 3D-like aesthetic of molded clay into digital interfaces — puffy shapes, generous border radii, inner highlights, and layered shadows that make every component look like it could be squeezed. The result is UI that feels physical, approachable, and unmistakably modern.

When you add this skill file to your AI coding tool, every component it generates — from buttons that look like they'd bounce when pressed to cards that float like soft pillows — follows the same clay-inspired visual language while staying structurally sound and fully accessible.

Design tokens

Color palette

Claymorphism uses a bright, clean color system where the blue primary pops against white surfaces, and a deep navy text color ties the entire composition together:

The white secondary token is unique to Claymorphism. Instead of a contrasting accent color, white serves as the material highlight — the bright edge on a clay shape that sells the illusion of a soft, rounded surface catching light. The navy text (#1C398E) rather than standard black (#111827) is a deliberate choice that keeps the interface feeling warm and approachable instead of stark.

Typography

Claymorphism pairs two geometric sans-serifs that complement its rounded, tactile aesthetic:

• Montserrat — Primary/body font. Its clean geometric forms and rounded terminals echo the soft shapes of the clay style without competing with them.
• Poppins — Display font. Slightly rounder and more playful than Montserrat, used for headings and hero text where the clay personality needs to come through strongest.
• JetBrains Mono — Monospaced font for code blocks, terminal output, and technical content.

The type scale follows a desktop-first expressive approach, and font weights span 100 (thin) to 900 (black). The clay aesthetic works best when typography complements rather than competes with the dimensional surfaces — the skill file guides the AI toward medium weights for body and bold-to-heavy for headings, keeping the type readable against the soft, shadowed backgrounds.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. Clay-style components need more internal padding than flat ones — the puffy appearance requires breathing room inside each shape to maintain the illusion of volume. The skill file encodes this so the AI agent consistently produces components that feel plump and tactile rather than flat elements with rounded corners bolted on.

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

Claymorphism is built on the principle that interfaces can be functional and delightful at the same time. The clay metaphor works because it's consistent — every visual decision reinforces the same physical material:

• Soft, rounded shapes — generous border radii on every component create the foundation of the clay look. The skill file ensures the AI applies this consistently rather than mixing sharp and rounded corners
• Layered shadows — multiple shadow layers (a soft outer shadow for elevation, an inner shadow for concavity) give components the appearance of molded, three-dimensional forms
• Inner highlights — white or light gradients along the top edges of components simulate light hitting a soft surface, completing the clay illusion
• Single visual metaphor — the skill explicitly prohibits mixing claymorphism with other visual styles (glassmorphism, neumorphism, flat design) within the same interface. Consistency is what makes the style read as intentional rather than gimmicky
• Warm contrast — the navy text on white surfaces creates a softer, friendlier contrast ratio than pure black, matching the approachable personality of the clay aesthetic

This makes Claymorphism a strong fit for:

• Consumer apps and lifestyle products
• Children's and education platforms
• Onboarding flows and first-run experiences
• Landing pages that need to feel friendly and inviting
• Creative tools and personal productivity apps
• Any product where approachability and delight are brand values

Accessibility

Claymorphism enforces WCAG 2.2 AA compliance as a hard requirement. The playful, dimensional style enhances delight but never at the cost of usability. 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 be clearly visible against the soft shadows and rounded surfaces
• Maintain sufficient color contrast ratios, with special attention to the navy text (#1C398E) against lighter clay surfaces and the blue primary against white
• Prioritize accessibility over aesthetics when the two conflict

The warm navy text color was specifically chosen to meet AA contrast requirements against white surfaces while preserving the friendly, non-stark tone of the design.

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 claymorphism

2. The file is saved to .cursor/skills/claymorphism/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 Claymorphism shadow system, rounded shapes, inner highlights, and warm navy typography 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 Claymorphism guidelines — using layered shadows, generous radii, the Montserrat + Poppins type pairing, and the warm blue-on-white palette 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 Claymorphism apart

Most design skills produce flat or semi-flat interfaces. Claymorphism teaches the AI agent to build UI that feels like a physical material:

• White as a highlight, not an accent — the secondary token is #FFFFFF, used for inner glows and surface edges that simulate light on clay rather than as a contrasting color
• Navy over black — #1C398E for text creates warmer, friendlier contrast that matches the approachable personality of the clay aesthetic
• Single-metaphor discipline — the skill explicitly blocks mixing visual styles (no glassmorphism cards next to clay buttons), keeping the material illusion consistent
• Shadow as structure — layered inner and outer shadows aren't decorative; they're the primary tool for communicating elevation, interactivity, and state
• Anti-patterns built in — the skill blocks flat-feeling outputs, mixed visual metaphors, low contrast text, and inconsistent spacing that would break the clay illusion
• Quality gates — every rule is anchored to a token or measurable threshold, so the tactile style stays cohesive whether the AI generates a single button or an entire application