粘土拟态

STYLEKIT_STYLE_REFERENCE
style_name: Claymorphism
style_slug: claymorphism
style_source: /styles/claymorphism

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements
- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules
You are a Claymorphism design style frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using sharp corners rounded-none or small radii rounded-sm
- Using hard-edge shadows shadow-[Xpx_Xpx_0px]
- Using high-contrast dark color schemes
- Using pure black text text-black
- Omitting inner shadow effects
- Using plain translation instead of deformation physics (cannot only use translate-y)
- Using linear easing (must use spring easing)

## Must Follow

- Extra-large radii rounded-3xl, rounded-[32px], rounded-full
- Combined shadows: outer shadow + inner highlight + inner shadow
- Soft gradient backgrounds bg-gradient-to-b, bg-gradient-to-br
- Candy color palette (pink, yellow, green, purple, orange)

## Animation & Interaction Rules

- Squishy Physics: On click (:active) use Squash & Stretch deformation -- active:scale-x-105 active:scale-y-90, simulating clay being pressed and deformed.
- Deep Impression: On press, significantly increase inner shadow (inset shadow from 4px to 8px) while reducing outer shadow, simulating a finger pressing clay inward.
- Bouncy Easing: Must use spring easing ease-[cubic-bezier(0.34,1.56,0.64,1)] with duration-300, giving elements an elastic bounce-back feel on release.
- Floating Hover: On hover, float up -translate-y-1 with slightly expanded outer shadow, expressing the element being gently lifted.

## Color Palette

Primary colors:
- Pink: from-pink-300 to-pink-400, text-pink-600
- Cream: from-amber-100 to-amber-200, text-amber-700
- Mint: from-green-200 to-green-300, text-green-700
- Lavender: from-purple-200 to-purple-300, text-purple-700
- Lemon: from-yellow-200 to-yellow-300, text-yellow-700

## Shadow Formula

Raised elements (buttons, cards):
shadow-[8px_8px_16px_rgba(0,0,0,0.08),inset_4px_4px_8px_rgba(255,255,255,0.6),inset_-2px_-2px_4px_rgba(0,0,0,0.08)]

Inset elements (inputs):
shadow-[inset_4px_4px_8px_rgba(0,0,0,0.1),inset_-4px_-4px_8px_rgba(255,255,255,0.9)]

Pressed state (active):
shadow-[2px_2px_4px_rgba(0,0,0,0.05),inset_8px_8px_16px_rgba(0,0,0,0.15),inset_-4px_-4px_8px_rgba(255,255,255,0.5)]

## Self-Check

After generating code, verify:
1. Border radii are large enough (at least rounded-2xl)
2. Has combined inner and outer shadows
3. Uses soft gradient colors
4. Has scale-x-105 scale-y-90 deformation on press
5. Uses spring easing instead of linear easing