claymorphism

Design claymorphic UI components with soft 3D volume and rounded forms.

41|5|Updated Sep 30, 2025

Search Tags:#ui design #rounded corners #spring animation #claymorphism #interface styling #3d depth

Ready to run

npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill claymorphism-efekrbas

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: claymorphism
Source: https://github.com/efekrbas/discord-hypesquad-manager/tree/main/.agents/skills/design-it/claymorphism
Command: npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill claymorphism-efekrbas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Claymorphism helps teams design interfaces that feel soft, playful, and physically tactile instead of flat, harsh, or overly technical. It is ideal when a product needs rounded forms, gentle depth, and a friendly visual personality.

Core Features & Use Cases

Fluffy 3D Volume: Creates inflated, clay-like surfaces that stand out from the background.
Deep Rounded Geometry: Uses heavy corner radius and smooth contours to remove sharp edges.
Bouncy Motion Patterns: Reinforces the aesthetic with springy hover and press interactions.
Use Case: Apply it to cards, buttons, feature panels, and app mockups when you want a soft premium look that works across web and mobile UI systems.

Quick Start

Apply the claymorphism style guide to my interface mockup and turn the main card, button, and icon treatments into a cohesive soft 3D design system.

Frequently Asked Questions about claymorphism

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I design UI components with soft 3D depth and tactile volume?▼

To design soft 3D depth, apply claymorphic styling to UI components using pastel palettes, double inner-shadow styling, maximum border-radius, and spring-based motion to create inflated, tactile visual surfaces.

What is the best way to make interface cards and buttons feel playful and approachable?▼

Making interface cards and buttons feel playful involves using heavy corner radius, smooth contours, and springy hover interactions to remove sharp edges and establish a friendly visual personality.

Does claymorphic styling work for both web and mobile app mockups?▼

Yes, claymorphic styling works for both web and mobile app mockups, allowing you to apply cohesive soft 3D design systems across feature panels, interactive controls, and buttons.

Can I use spring animation for interactive controls to enhance UI design?▼

Yes, you can use spring animation for interactive controls to reinforce the clay effect, adding bouncy motion patterns to hover and press interactions for a tactile, premium look.

Why does my interface styling look flat and overly technical instead of soft?▼

Interface styling looks flat when it lacks 3D volume and tactile depth. Applying claymorphism introduces inflated clay-like surfaces and rounded forms to fix harsh, technical aesthetics.

Do I need pastel or bright palettes to achieve the claymorphism effect?▼

Yes, you need pastel or bright palettes to achieve the claymorphism effect, as these color schemes are required to support the soft, friendly, and approachable visual personality of the design.