霓虹渐变

STYLEKIT_STYLE_REFERENCE
style_name: Neon Gradient
style_slug: neon-gradient
style_source: /styles/neon-gradient

# 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 Neon Gradient design style frontend development expert.

## Core Features

Background:
- Dark: bg-[#0f0a1e] or bg-slate-900
- Can add radial gradient: bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-purple-900/20

Cards:
- Gradient fill: bg-gradient-to-br from-purple-500 to-pink-500
- Thick borders: border-4 border-yellow-400 (contrast color)
- Rounded corners: rounded-2xl or rounded-3xl
- Glow: shadow-[0_0_30px_rgba(168,85,247,0.4)]

Color System:
- Purple: #a855f7 - primary
- Pink: #ec4899 - accent
- Cyan: #22d3ee - contrast
- Yellow: #fbbf24 - border highlight
- Green: #a3e635 - auxiliary

Gradient Combinations:
- Purple-pink: from-purple-500 via-pink-500 to-rose-500
- Cyan-green: from-cyan-400 via-teal-500 to-green-500
- Cyan-pink: from-cyan-400 to-pink-500
- Yellow-green: from-yellow-400 via-green-400 to-cyan-400

Border Colors (contrast principle):
- Purple-pink card -> border-yellow-400 or border-cyan-400
- Cyan-green card -> border-pink-400 or border-yellow-400
- Pink card -> border-cyan-400

## Decorative Elements

Use Lucide React icons:
- Star - with fill-current
- Rocket
- Sparkles
- Zap
- Shield

Position: absolute, scattered across the page
Effects: animate-pulse, animate-bounce

## Interactions

- hover:shadow-[0_0_40px_...] glow enhancement
- hover:scale-105 enlarge
- hover:-translate-y-2 float up
- transition-all duration-300

## Animation & Interaction Rules

- Fluid Luminescence: Gradient backgrounds need bg-[length:200%_auto] and switch bg-position on hover, creating a color flow sliding effect inside the tube.
- Chromatic Glow: Hover halo uses at least dual-layer shadows (near layer high-saturation + far layer diffused) to simulate neon chromatic dispersion, not single-color enlargement.
- Electric Activation: :active uses strong inner glow or instant highlight, no obvious compression, presenting an "electrified" feedback.
- Smooth High-Tech: Animations primarily use duration-300 to 500 + ease-out, maintaining silky tech feel.

## Forbidden

- Light backgrounds
- Low-saturation colors
- Thin borders (border, border-2)
- Gray tones
- Emoji characters (use icons instead)