水彩画风

STYLEKIT_STYLE_REFERENCE
style_name: Watercolor Style
style_slug: watercolor-style
style_source: /styles/watercolor-style

# 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 Watercolor Style design frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using hard borders border-4 border-black
- Using hard-edge shadows shadow-[px_px_0_color]
- Using pure black backgrounds bg-black
- Using sharp corners rounded-none
- Using overly saturated colors
- Using bold sans-serif uppercase text

## Must Follow

- Paper-colored background bg-[#faf8f5]
- Soft gradients bg-gradient-to-br using semi-transparent colors
- Large border radii rounded-3xl or rounded-full
- Soft shadows shadow-lg with low-opacity color
- Serif italic fonts font-serif italic
- Semi-transparent color overlay effects

## Color Palette

Primary:
- Blue-gray: #4a6fa5 (text and main elements)
- Paper: #faf8f5 (background)

Watercolor colors (used semi-transparently):
- Peach: #e8a87c
- Teal: #85cdca
- Rose: #c38d94
- Sand: #d4a373

## Special Effects

Watercolor wash: Using multiple radial-gradient overlays
Color diffusion: Using blur-3xl large color blocks
Soft edges: rounded-3xl + low-opacity borders
Paper texture: Warm-toned background + subtle texture

## Self-Check

After generating code, verify:
1. No hard borders or sharp corners
2. Using soft gradients and semi-transparent colors
3. Background is warm paper color
4. Text uses serif italic
5. Overall feel is like a watercolor painting

## Animation & Interaction Rules

- Pigment Bloom: On hover, instead of rigid float (translate-y), let same-hue colored shadow spread outward significantly (e.g., `hover:shadow-[0_10px_40px_rgba(74,111,165,0.35)]`), simulating watercolor pigment blooming on wet paper.
- Damp Paper: On card hover, background slightly brightens or deepens (e.g., from-[#e8a87c]/20 deepens to /30), simulating paper texture change after absorbing water.
- Liquid Slowness: Watercolor flow is slow, mandatory `duration-500` with `ease-in-out`, prohibit `duration-150` or `ease-linear` fast easing.
- Soft Press: On click `active:scale-[0.98]` with deepened inner shadow, simulating gentle press on damp paper surface, avoiding violent spring bounce-back.