霓虹东京

STYLEKIT_STYLE_REFERENCE
style_name: 霓虹东京
style_slug: neon-tokyo
style_source: /styles/neon-tokyo

# Hard Prompt

## 什么时候用
当你希望 AI 严格按风格规则生成代码时使用。它是生产界面最稳的默认选择。

## 怎么用
- 把完整提示词复制到 ChatGPT、Claude、Cursor 或其他编码助手。
- 在提示词后追加具体产品、页面或组件需求。
- 生成后按禁止项和交互状态检查，确认没有风格漂移。

请严格遵守以下风格规则并保持一致性，禁止风格漂移。

## 执行要求

- 优先保证风格一致性，其次再做创意延展。
- 遇到冲突时以禁止项为最高优先级。
- 输出前自检：颜色、排版、间距、交互是否仍属于该风格。

## Style Rules

STYLE: Neon Tokyo
TYPE: Urban nightscape interface

## 必须遵守

- 背景使用深夜蓝黑 bg-[#0a0a1a] 或 bg-gradient-to-b from-[#0a0a1a] to-[#12041e]
- 霓虹粉色文字 text-[#ff1493] 搭配发光 [text-shadow:0_0_10px_rgba(255,20,147,0.6)]
- 多色霓虹边框交替使用 border-[#ff1493]、border-[#00f0ff]、border-[#ff6b00]
- 悬停时增强霓虹光晕 hover:shadow-[0_0_30px_rgba(255,20,147,0.5)]
- 使用 sans-serif 粗体字搭配日文假名装饰元素
- 卡片背景添加微透明 bg-[#0a0a1a]/80 backdrop-blur-md 模拟玻璃反射
- 渐变文字效果 bg-gradient-to-r from-[#ff1493] to-[#00f0ff] bg-clip-text text-transparent
- 使用 box-shadow 多层叠加模拟霓虹灯管的光晕扩散

## 绝对禁止

- 禁止使用白色或浅色背景
- 禁止使用低饱和度、灰暗的颜色
- 禁止使用柔和的渐变（如柔粉、淡蓝）
- 禁止使用衬线字体（除非作为日式装饰元素）
- 禁止使用过于规整、企业化的布局
- 禁止使用单一颜色的霓虹（必须多色交织）

COLOR RULES:
- Neon Pink: #ff1493 (primary)
- Night Sky: #0a0a1a (background)
- Cyan Neon: #00f0ff
- Warm Neon: #ff6b00
- Purple Neon: #bc13fe

DIFFERENCE FROM CYBERPUNK-NEON:
- Warmer, more organic feel
- Multi-color neon mixing (not cyan-dominant)
- Street photography aesthetic, not sci-fi
- Wet reflections, not scan lines

## Animation & Interaction Rules

- Rain-Slicked Reflections: bottom reflection gradients should intensify on hover with higher opacity and mixed-color refraction.
- Signboard Flicker: primary neon headings can use subtle irregular flicker to mimic aging street signage.
- Bleeding Glows: hover state should expand pink/cyan/orange glow layers simultaneously so light bleeds at the edges.
- Damp Atmosphere: transitions stay smooth (duration-300 to 500) to preserve wet-night ambience rather than sharp arcade motion.

---

# Neon Tokyo (霓虹东京) Design System

> 东京歌舞伎町霓虹夜景风格，湿润的街道倒影、叠层霓虹招牌、赛博朋克城市夜色。不同于cyberpunk-neon的科幻感，更偏向真实都市夜景。

## 核心理念

Neon Tokyo（霓虹东京）灵感源自东京歌舞伎町、新宿和涩谷的霓虹夜景。不同于 Cyberpunk Neon 的科幻未来感，这个风格更贴近真实的都市夜色——雨后的街道倒映着层叠的霓虹招牌，暖色与冷色交织在潮湿的沥青上。

核心理念：
- 都市夜色：以近黑的深蓝灰为基底，模拟东京深夜的城市天际线
- 霓虹招牌：多色霓虹灯光叠加，粉色、青色、橙色和紫色交错闪烁
- 湿润反射：元素带有微妙的反射感，如同雨后街道上的霓虹倒影
- 层次纵深：前景明亮、背景幽暗，模拟城市街巷的视觉纵深

与 Cyberpunk Neon 的关键区别在于：Neon Tokyo 更温暖、更有机、更接近真实摄影质感。它不追求冰冷的科技感，而是捕捉深夜独行者在霓虹丛林中的那种孤独浪漫。

适合场景：夜生活应用、音乐流媒体、潮流品牌、城市摄影作品集、日式居酒屋菜单。

---

## Token 字典（精确 Class 映射）

### 边框
```
宽度: border-2
颜色: border-[#ff1493]/30
圆角: rounded-sm
```

### 阴影
```
小: shadow-[0_0_10px_rgba(255,20,147,0.2)]
中: shadow-[0_0_15px_rgba(255,20,147,0.3)]
大: shadow-[0_0_25px_rgba(255,20,147,0.4)]
悬停: hover:shadow-[0_0_30px_rgba(255,20,147,0.5)]
聚焦: focus:shadow-[0_0_20px_rgba(255,20,147,0.4)]
```

### 交互效果
```
悬停位移: （无）
悬停缩放: hover:shadow-[0_0_30px_rgba(255,20,147,0.5)]
悬停透明度: （无）
过渡动画: transition-all duration-300
按下状态: active:scale-95
```

### 字体
```
标题: font-bold
正文: font-sans
等宽: font-mono
```

### 字号
```
Hero: text-4xl md:text-6xl lg:text-8xl
H1: text-3xl md:text-5xl
H2: text-2xl md:text-3xl
H3: text-xl md:text-2xl
正文: text-sm md:text-base
小字: text-xs
```

### 间距
```
Section: py-16 md:py-24
容器: px-4 md:px-8
卡片: p-6
小间距: gap-4
中间距: gap-6
大间距: gap-8
```

### 颜色角色
```
背景主色: bg-[#0a0a1a]
背景辅色: bg-[#0a0a1a]/80
背景强调色: bg-[#ff1493], bg-[#00f0ff], bg-[#ff6b00], bg-[#bc13fe]
正文主色: text-white
正文辅色: text-[#ff1493]
正文弱化色: text-gray-400
按钮主色: bg-transparent text-[#ff1493] border-2 border-[#ff1493]
按钮辅色: bg-[#00f0ff] text-[#0a0a1a]
```

---

## [FORBIDDEN] 绝对禁止

以下 class 在本风格中**绝对禁止使用**，生成时必须检查并避免：

### 禁止的 Class
- `bg-white`
- `bg-gray-50`
- `bg-gray-100`
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `text-gray-900`
- `rounded-2xl`
- `rounded-3xl`

### 禁止的模式
- 匹配 `^bg-(?:white|gray-[1-3]|slate-[1-3])`
- 匹配 `^shadow-(?!\[|none)`
- 匹配 `^rounded-(?:2xl|3xl)`

### 禁止原因
- `bg-white`: Neon Tokyo uses dark night-sky backgrounds only
- `shadow-md`: Use colored neon glow: shadow-[0_0_20px_rgba(255,20,147,0.5)]
- `rounded-2xl`: Keep corners minimal (rounded-sm max)

> WARNING: 如果你的代码中包含以上任何 class，必须立即替换。

---

## [REQUIRED] 必须包含

### 按钮必须包含
```
px-6 py-3
font-bold
uppercase tracking-wider
transition-all duration-300
rounded-sm
```

### 卡片必须包含
```
bg-[#0a0a1a]/80
backdrop-blur-md
border border-[#ff1493]/30
rounded-sm
```

### 输入框必须包含
```
bg-[#0a0a1a]/80
border border-[#ff1493]/30
rounded-sm
text-white
focus:border-[#ff1493]
focus:shadow-[0_0_15px_rgba(255,20,147,0.3)]
focus:outline-none
```

---

## [COMPARE] Neon Tokyo 错误 vs 正确对比

以下错误示例只代表“未经过当前风格适配的通用默认值”，不要把错误示例当成视觉建议。

### 按钮

[WRONG] **错误示例**（通用组件库默认样式，不要直接复制）：
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  点击我
</button>
```

[CORRECT] **正确示例**（使用当前风格的 token）：
```html
<button class="px-6 py-3 font-bold uppercase tracking-wider transition-all duration-300 rounded-sm bg-transparent text-[#ff1493] border-2 border-[#ff1493]">
  点击我
</button>
```

### 卡片

[WRONG] **错误示例**（未经当前风格适配的通用卡片）：
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **正确示例**（使用当前风格的 card token）：
```html
<div class="bg-[#0a0a1a]/80 backdrop-blur-md border border-[#ff1493]/30 rounded-sm p-6">
  <h3 class="font-bold text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### 输入框

[WRONG] **错误示例**（未经当前风格适配的通用输入框）：
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **正确示例**（使用当前风格的 input token）：
```html
<input class="bg-[#0a0a1a]/80 border border-[#ff1493]/30 rounded-sm text-white focus:border-[#ff1493] focus:shadow-[0_0_15px_rgba(255,20,147,0.3)] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Neon Tokyo 页面骨架模板

以下骨架只使用当前风格的 token。替换 `{PLACEHOLDER}` 时，不要移除或替换这些 token：

### 导航栏骨架
```html
<nav class="bg-[#0a0a1a] text-white border-2 border-[#ff1493]/30 px-4 md:px-8">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-6">
    <a href="/" class="font-bold text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-6 font-sans text-xs">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero 区块骨架
```html
<section class="bg-[#ff1493] text-white py-16 md:py-24 px-4 md:px-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-bold text-4xl md:text-6xl lg:text-8xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="px-6 py-3 font-bold uppercase tracking-wider transition-all duration-300 rounded-sm bg-transparent text-[#ff1493] border-2 border-[#ff1493]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### 卡片网格骨架
```html
<section class="bg-[#0a0a1a] text-white py-16 md:py-24 px-4 md:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-bold text-2xl md:text-3xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Card template - repeat for each card -->
      <div class="bg-[#0a0a1a]/80 backdrop-blur-md border border-[#ff1493]/30 rounded-sm p-6">
        <h3 class="font-bold text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="font-sans text-sm md:text-base text-gray-400">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### 表单输入骨架
```html
<input class="bg-[#0a0a1a]/80 border border-[#ff1493]/30 rounded-sm text-white focus:border-[#ff1493] focus:shadow-[0_0_15px_rgba(255,20,147,0.3)] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### 页脚骨架
```html
<footer class="bg-[#0a0a1a]/80 text-[#ff1493] py-16 md:py-24 px-4 md:px-8">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <span class="font-bold text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="font-sans text-xs">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-bold text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-xs">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Neon Tokyo 生成后自检清单

**输出代码前，逐项验证当前风格的 token 和规则。如有违反，先修正再交付：**

### Token 检查
- [ ] 按钮包含： `px-6 py-3 font-bold uppercase tracking-wider transition-all duration-300 rounded-sm`
- [ ] 卡片包含： `bg-[#0a0a1a]/80 backdrop-blur-md border border-[#ff1493]/30 rounded-sm`
- [ ] 输入框包含： `bg-[#0a0a1a]/80 border border-[#ff1493]/30 rounded-sm text-white focus:border-[#ff1493] focus:shadow-[0_0_15px_rgba(255,20,147,0.3)] focus:outline-none`

### 禁止项检查
- [ ] 没有使用 `bg-white`
- [ ] 没有使用 `bg-gray-50`
- [ ] 没有使用 `bg-gray-100`
- [ ] 没有使用 `shadow-sm`
- [ ] 没有使用 `shadow-md`
- [ ] 没有使用 `shadow-lg`
- [ ] 没有使用 `text-gray-900`
- [ ] 没有使用 `rounded-2xl`

### 风格规则检查
- [ ] 背景使用深夜蓝黑 bg-[#0a0a1a] 或 bg-gradient-to-b from-[#0a0a1a] to-[#12041e]
- [ ] 霓虹粉色文字 text-[#ff1493] 搭配发光 [text-shadow:0_0_10px_rgba(255,20,147,0.6)]
- [ ] 多色霓虹边框交替使用 border-[#ff1493]、border-[#00f0ff]、border-[#ff6b00]
- [ ] 悬停时增强霓虹光晕 hover:shadow-[0_0_30px_rgba(255,20,147,0.5)]
- [ ] 使用 sans-serif 粗体字搭配日文假名装饰元素

### 风格漂移检查
- [ ] 没有违反：禁止使用白色或浅色背景
- [ ] 没有违反：禁止使用低饱和度、灰暗的颜色
- [ ] 没有违反：禁止使用柔和的渐变（如柔粉、淡蓝）
- [ ] 没有违反：禁止使用衬线字体（除非作为日式装饰元素）
- [ ] 没有违反：禁止使用过于规整、企业化的布局

### 通用交付检查
- [ ] 响应式布局在手机、平板和桌面下稳定，没有横向溢出
- [ ] 所有交互元素有清晰焦点、可访问名称和 reduced-motion 方案
- [ ] 文本对比度达到 WCAG AA，且没有用颜色单独传递状态
- [ ] 结果仍然能够一眼识别为 Neon Tokyo

---

## [EXAMPLES] 示例 Prompt

### 1. 夜间餐厅菜单

霓虹东京风格的深夜食堂界面

```
Create a late-night restaurant menu using Neon Tokyo style:
- Dark background with neon sign decorations
- Menu items with warm orange and pink neon accents
- Category tabs with multi-color neon borders
- Hero section with flickering neon sign effect
- Wet street reflection aesthetic at the bottom
- Japanese text decorations for atmosphere
```

### 2. SaaS 着陆页

生成 霓虹东京风格的 SaaS 产品着陆页

```
Create a SaaS landing page using Neon Tokyo style with hero section, feature grid, testimonials, pricing table, and footer.
```

### 3. 作品集展示

生成 霓虹东京风格的作品集页面

```
Create a portfolio showcase page using Neon Tokyo style with project grid, about section, contact form, and consistent visual language.
```

## 绝对禁止（匹配即拒绝）

以下模式一旦出现，视为风格违规——不找借口，直接重写。

- 使用白色或浅色背景
- 使用低饱和度、灰暗的颜色
- 使用柔和的渐变（如柔粉、淡蓝）
- 使用衬线字体（除非作为日式装饰元素）
- 使用过于规整、企业化的布局
- 使用单一颜色的霓虹（必须多色交织）

## 自检清单（交付前逐条确认）

如果任何一条不通过，说明风格漂移了——修改后再交付。

- [ ] 没有紫色到蓝色的渐变
- [ ] 没有使用 Inter / Roboto / Geist 等过度使用的字体
- [ ] 没有嵌套卡片（卡片里面套卡片）
- [ ] 没有在彩色背景上放灰色文字
- [ ] 正文对比度满足 WCAG AA（≥4.5:1）
- [ ] 没有 bounce / elastic 缓动曲线
- [ ] 动效有 prefers-reduced-motion 备选方案
- [ ] 正文行宽不超过 65-75 个字符
- [ ] 没有单侧粗边框装饰（border-left/right accent stripe）
- [ ] 没有渐变文字（background-clip: text）
- [ ] 没有把玻璃态（glassmorphism）当作默认风格
- [ ] 没有 tiny uppercase tracked eyebrow 放在每个 section 标题上面
- [ ] 禁止使用白色或浅色背景
- [ ] 禁止使用低饱和度、灰暗的颜色
- [ ] 禁止使用柔和的渐变（如柔粉、淡蓝）
- [ ] 禁止使用衬线字体（除非作为日式装饰元素）
- [ ] 禁止使用过于规整、企业化的布局