赛博动漫风

STYLEKIT_STYLE_REFERENCE
style_name: Cyber Anime
style_slug: cyber-anime
style_source: /styles/cyber-anime

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

## Absolutely Forbidden

- Soft pastel colors (no light pink, baby blue, etc.)
- Serif fonts of any kind
- Natural organic colors (brown, beige, olive, etc.)
- rounded-full on buttons or containers
- White or light backgrounds as primary surfaces
- Standard shadow-sm/md/lg (only neon glow shadows)

## Must Follow

- Dark background: bg-[#0f0f1a] as primary surface
- Primary purple: #7c3aed for key elements with multi-layer glow
- Cyan-green accent: #06d6a0 for highlights, borders, and HUD frames
- Hot pink accent: #ff006e for alerts and emphasis
- HUD corner frame decorations on major containers
- Vertical scan line overlay on holographic panels
- Mecha-style angled corners via clip-path on cards and panels
- Monospace terminal text for data readouts
- Hexagonal grid background pattern
- Multi-layer neon glow: shadow-[0_0_Xpx_rgba(...),0_0_Ypx_rgba(...)]

## Animation & Interaction Rules

- Motion must feel like cockpit controls: quick and precise, usually 160-280ms with ease-out
- Hover states should amplify HUD feedback through slight lift (1-2px), stronger neon glow, and brighter bracket borders
- Active states should feel tactile: brief press-down (1-2px or scale to 0.97-0.99) with compressed glow
- Use directional holographic sweeps or scan pulses triggered by hover/focus; keep them short and state-based
- Avoid bouncy spring motion, long cinematic fades, or decorative animations that reduce data legibility

## Color Palette

Primary:
- Deep Purple: #7c3aed
- Dark Background: #0f0f1a
- Cyan-Green: #06d6a0
- Hot Pink: #ff006e
- Sky Blue: #38bdf8
- Light Text: #e0e0ff

## Unique Elements

- HUD corner frame decorations (bracket-style corners)
- Holographic vertical scan line texture overlays
- Mecha-style angular clip-path panel borders
- Neural network data visualization patterns
- Terminal-style data readout text blocks