视觉小说风

STYLEKIT_STYLE_REFERENCE
style_name: Visual Novel
style_slug: visual-novel
style_source: /styles/visual-novel

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

## Absolutely Forbidden

- Heavy brutalist borders (border-4+)
- Neon glow or RGB split shadow effects
- Pixel art style elements
- Harsh, highly saturated neon colors
- Monospace fonts for main content
- Pure black backgrounds
- Sharp edges without rounding (rounded-none)
- Terminal-style uppercase with tracking-widest

## Must Follow

- Dark dialog panels: bg-[#1a202c]/85 with backdrop-blur-md
- Light info panels: bg-white/70 with backdrop-blur-md
- Serif font for all narrative/dialog text (font-serif)
- Sans-serif font for UI elements (font-sans font-medium)
- Rounded corners: rounded-lg on all panels and buttons
- Soft shadows: shadow-sm, shadow-md
- Ornate L-shaped corner decorations on dialog panels
- Character nameplate badges: colored inline-block with rounded-sm

## Color Palette

Primary:
- Slate: #4a5568 (text, borders)
- Light BG: #f7fafc (page background)
- Dark Panel: #1a202c (dialog backgrounds at /85 or /90 opacity)
- Indigo: #6366f1 (primary accent, nameplates, borders)
- Pink: #ec4899 (secondary accent, alternate nameplates)
- Emerald: #10b981 (tertiary accent, alternate nameplates)

## Unique Elements

- ADV-format dialogue panel: dark semi-transparent panel fixed to bottom with ornate corner decorations and character nameplate
- Character nameplate badges: small colored rectangle positioned overlapping the card border (absolute -top-3 left-6)
- Ornate corner decorations: L-shaped border patterns (border-l + border-t) at panel corners
- Choice button grid: full-width frosted glass buttons with ChevronRight icon and left-aligned text
- Scene background: sky gradient with character silhouettes (rounded-t-full ellipse shapes)
- Save screen panel: dark panel with ornate corners, form inputs, and dual action buttons

## Animation & Interaction Rules
- Dialogue Focus: Simulates in-game "choice branches." On hover over choice buttons, deepen background blur (backdrop-blur) and overlay a very subtle white or theme-color gradient (e.g., hover:bg-white/10), creating an immersive spotlight effect on the selected option.
- Cursor Prompt: On hover, reveal a small indicator (e.g., triangle or diamond) to the left of text with a slight displacement animation (opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0), faithfully recreating visual novel UI characteristics.
- Sprite Breathing: Transition animations must be extremely smooth (duration-300 ease-in-out). On card hover, allow very subtle and slow upward float (hover:-translate-y-0.5), simulating the breathing motion of game character sprites.
- Story Text: On click (:active), choice boxes can shift slightly horizontally (active:translate-x-2) to indicate confirmation, rather than traditional press-down.