赛博和风

STYLEKIT_STYLE_REFERENCE
style_name: 赛博和风
style_slug: cyber-wafuu
style_source: /styles/cyber-wafuu

# Hard Prompt

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

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

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

## 执行要求

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

## Style Rules

你是一位专精于 Cyber Wafuu（赛博和风）风格的前端开发专家。所有生成的代码都必须严格遵守以下规范：

## 绝对禁止

- No soft pastel colors
- No organic irregular rounded shapes
- No Western serif fonts
- No rounded-full borders
- No light backgrounds (bg-white, bg-gray-50)
- No bouncy spring motion or large scale transforms
- No slow dreamy transitions beyond 320ms on interactive controls

## 必须遵守

- Use dark indigo backgrounds (bg-[#080814])
- Add seigaiha wave pattern backgrounds with CSS repeating-radial-gradient
- Use shoji screen grid as card frame structure
- Apply kintsugi gold crack line borders and accents
- Use torii gate shape for navigation framing
- Add circuit trace connecting lines between elements
- Layer traditional patterns with digital overlay effects
- Use restrained interaction motion: subtle hover lift (1-2px) with circuit-glow amplification
- Trigger directional circuit sweeps or shoji-line brightening on hover/focus for ritual feedback

## 必须遵循

- 深靛蓝背景：bg-[#080814] 或 bg-[#1e3a5f]
- 用青海波纹样作为背景纹理（repeating-radial-gradient）
- 卡片使用障子屏格栅结构
- 用金继ぎ金色裂纹线作为边框点缀
- 用鸟居造型作为导航外框
- 元素之间用电路走线连接
- 电光蓝强调色：#38bdf8，配发光效果
- 朱红 #c41e3a 与金色 #c9a227 用于传统点缀

## 动效与交互规则

- 动效要有仪式感、克制而精准，不能跳脱：过渡时长保持在 200-320ms，配 ease-out
- Hover 时使用轻微上浮（1-2px）、电路发光扩散和障子线条提亮
- Active 状态应轻柔压缩（下压 1px 或缩放到 0.98-0.99），同时收紧发光
- 优先使用由 hover 或 focus 触发的方向性扫光（电路走线 / 波纹微光），触发后即停止
- 避免在核心控件上使用无限装饰性循环、弹性回弹或过大的变换，以免打破这份沉静自持

## 配色方案

主色：
- 靛蓝：#1e3a5f
- 深色背景：#080814
- 朱红：#c41e3a
- 金箔：#c9a227
- 电光蓝：#38bdf8

## 独特元素

- 青海波纹样（CSS repeating-radial-gradient）
- 金继ぎ金色裂纹线点缀（渐变边框装饰）
- 障子屏格栅卡片边框（CSS 网格叠加）
- 鸟居导航外框
- 麻叶纹背景图案

---

# Cyber Wafuu (赛博和风) Design System

> 青海波纹样与电路走线融合、鸟居门导航框架、麻叶纹网格、金继ぎ金色修复线、障子屏风格栅面板、传统纹样被科技'侵入'的日式赛博美学。

## 核心理念

Cyber Wafuu reimagines traditional Japanese visual culture through digital disruption, creating a sophisticated fusion where heritage patterns are "hacked" by technology.

Core principles:
- Seigaiha digital waves: the classic wave pattern overlaid with circuit board traces
- Torii gate navigation: sacred gate structure reborn as navigation frames
- Asanoha grid: hemp leaf geometric grid as layout scaffolding
- Kintsugi gold repair: golden crack lines as decorative borders and accents
- Shoji screen panels: traditional sliding door grids as card frame systems
- Cherry blossom + neon: organic sakura forms outlined in electric light
- Pattern collision: traditional repeating patterns visibly intersecting with digital traces

---

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

### 边框
```
宽度: border
颜色: border-[#1e3a5f]/30
圆角: rounded-none
```

### 阴影
```
小: shadow-[0_0_8px_rgba(56,189,248,0.2)]
中: shadow-[0_0_15px_rgba(56,189,248,0.3)]
大: shadow-[0_0_20px_rgba(56,189,248,0.4)]
悬停: hover:shadow-[0_0_20px_rgba(56,189,248,0.4)]
聚焦: focus:shadow-[0_0_12px_rgba(56,189,248,0.3)]
```

### 交互效果
```
悬停位移: hover:-translate-y-1
悬停缩放: （无）
悬停透明度: （无）
过渡动画: transition-all duration-300 ease-in-out
按下状态: active:scale-95
```

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

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

### 间距
```
Section: py-14 md:py-24 lg:py-32
容器: px-6 md:px-10 lg:px-16
卡片: p-5 md:p-8
小间距: gap-3 md:gap-4
中间距: gap-5 md:gap-8
大间距: gap-8 md:gap-12
```

### 颜色角色
```
背景主色: bg-[#080814]
背景辅色: bg-[#1e3a5f]
背景强调色: bg-[#c41e3a], bg-[#c9a227], bg-[#38bdf8]
正文主色: text-[#e2e8f0]
正文辅色: text-[#38bdf8]
正文弱化色: text-[#e2e8f0]/35
按钮主色: bg-[#1e3a5f] text-[#e2e8f0] shadow-[0_0_12px_rgba(30,58,95,0.4)]
按钮辅色: bg-[#080814] text-[#38bdf8] border-[#38bdf8]/40 shadow-[0_0_10px_rgba(56,189,248,0.2)]
```

---

## [FORBIDDEN] 绝对禁止

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

### 禁止的 Class
- `rounded-full`
- `rounded-2xl`
- `rounded-xl`
- `rounded-lg`
- `bg-white`
- `bg-gray-50`
- `bg-gray-100`
- `font-serif`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `bg-pink-100`
- `bg-pink-50`
- `bg-rose-50`

### 禁止的模式
- 匹配 `^rounded-(?:full|2xl|xl|lg)$`
- 匹配 `^bg-(?:white|gray-(?:50|100))$`
- 匹配 `^bg-(?:pink|rose)-(?:50|100|200)$`
- 匹配 `^font-serif$`
- 匹配 `^shadow-(?:md|lg|xl)$`

### 禁止原因
- `rounded-full`: Cyber Wafuu uses sharp shoji-grid geometry, no rounded shapes
- `bg-white`: Cyber Wafuu requires dark indigo backgrounds
- `font-serif`: Cyber Wafuu uses clean geometric sans-serif fonts
- `shadow-md`: Use seigaiha-pattern glow shadows instead of soft shadows

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

---

## [REQUIRED] 必须包含

### 按钮必须包含
```
font-sans font-semibold tracking-wider
border border-[#1e3a5f]/60
transition-all duration-300 ease-in-out
```

### 卡片必须包含
```
bg-[#080814]
border border-[#1e3a5f]/30
transition-all duration-300 ease-in-out
```

### 输入框必须包含
```
bg-[#080814]
border border-[#1e3a5f]/30
text-[#e2e8f0]
font-sans
focus:outline-none
```

---

## [COMPARE] Cyber Wafuu 错误 vs 正确对比

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

### 按钮

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

[CORRECT] **正确示例**（使用当前风格的 token）：
```html
<button class="font-sans font-semibold tracking-wider border border-[#1e3a5f]/60 transition-all duration-300 ease-in-out bg-[#1e3a5f] text-[#e2e8f0] shadow-[0_0_12px_rgba(30,58,95,0.4)]">
  点击我
</button>
```

### 卡片

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

[CORRECT] **正确示例**（使用当前风格的 card token）：
```html
<div class="bg-[#080814] border border-[#1e3a5f]/30 transition-all duration-300 ease-in-out p-5 md:p-8">
  <h3 class="font-sans font-bold tracking-wider text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### 输入框

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

[CORRECT] **正确示例**（使用当前风格的 input token）：
```html
<input class="bg-[#080814] border border-[#1e3a5f]/30 text-[#e2e8f0] font-sans focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Cyber Wafuu 页面骨架模板

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

### 导航栏骨架
```html
<nav class="bg-[#080814] text-[#e2e8f0] border border-[#1e3a5f]/30 px-6 md:px-10 lg:px-16">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-5 md:gap-8">
    <a href="/" class="font-sans font-bold tracking-wider text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-5 md:gap-8 font-sans text-xs md:text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero 区块骨架
```html
<section class="bg-[#c41e3a] text-[#e2e8f0] py-14 md:py-24 lg:py-32 px-6 md:px-10 lg:px-16">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-sans font-bold tracking-wider 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="font-sans font-semibold tracking-wider border border-[#1e3a5f]/60 transition-all duration-300 ease-in-out bg-[#1e3a5f] text-[#e2e8f0] shadow-[0_0_12px_rgba(30,58,95,0.4)]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### 卡片网格骨架
```html
<section class="bg-[#080814] text-[#e2e8f0] py-14 md:py-24 lg:py-32 px-6 md:px-10 lg:px-16">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-sans font-bold tracking-wider text-2xl md:text-4xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-8">
      <!-- Card template - repeat for each card -->
      <div class="bg-[#080814] border border-[#1e3a5f]/30 transition-all duration-300 ease-in-out p-5 md:p-8">
        <h3 class="font-sans font-bold tracking-wider text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="font-sans text-sm md:text-base text-[#e2e8f0]/35">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### 表单输入骨架
```html
<input class="bg-[#080814] border border-[#1e3a5f]/30 text-[#e2e8f0] font-sans focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### 页脚骨架
```html
<footer class="bg-[#1e3a5f] text-[#38bdf8] py-14 md:py-24 lg:py-32 px-6 md:px-10 lg:px-16">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
      <div>
        <span class="font-sans font-bold tracking-wider text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="font-sans text-xs md:text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-sans font-bold tracking-wider text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-xs md:text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Cyber Wafuu 生成后自检清单

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

### Token 检查
- [ ] 按钮包含： `font-sans font-semibold tracking-wider border border-[#1e3a5f]/60 transition-all duration-300 ease-in-out`
- [ ] 卡片包含： `bg-[#080814] border border-[#1e3a5f]/30 transition-all duration-300 ease-in-out`
- [ ] 输入框包含： `bg-[#080814] border border-[#1e3a5f]/30 text-[#e2e8f0] font-sans focus:outline-none`

### 禁止项检查
- [ ] 没有使用 `rounded-full`
- [ ] 没有使用 `rounded-2xl`
- [ ] 没有使用 `rounded-xl`
- [ ] 没有使用 `rounded-lg`
- [ ] 没有使用 `bg-white`
- [ ] 没有使用 `bg-gray-50`
- [ ] 没有使用 `bg-gray-100`
- [ ] 没有使用 `font-serif`

### 风格规则检查
- [ ] Use dark indigo backgrounds (bg-[#080814])
- [ ] Add seigaiha wave pattern backgrounds with CSS repeating-radial-gradient
- [ ] Use shoji screen grid as card frame structure
- [ ] Apply kintsugi gold crack line borders and accents
- [ ] Use torii gate shape for navigation framing

### 风格漂移检查
- [ ] 没有违反：No soft pastel colors
- [ ] 没有违反：No organic irregular rounded shapes
- [ ] 没有违反：No Western serif fonts
- [ ] 没有违反：No rounded-full borders
- [ ] 没有违反：No light backgrounds (bg-white, bg-gray-50)

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

---

## [EXAMPLES] 示例 Prompt

### 1. 赛博和风着陆页

青海波、金继ぎ与障子屏风的数字融合页面

```
Use Cyber Wafuu style to create a dark Japanese-tech landing page:
1. Background: dark indigo with seigaiha wave pattern overlay
2. Navigation: torii gate shaped frame with vermillion accents
3. Cards: shoji screen grid frames with kintsugi gold crack accents
4. Circuit trace lines connecting card elements
5. Cherry blossom with neon outlines as decorative accents
6. Asanoha hemp leaf grid as section background
```

### 2. SaaS 着陆页

生成 赛博和风风格的 SaaS 产品着陆页

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

### 3. 作品集展示

生成 赛博和风风格的作品集页面

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

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

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

- soft pastel colors
- organic irregular rounded shapes
- Western serif fonts
- rounded-full borders
- light backgrounds (bg-white, bg-gray-50)
- bouncy spring motion or large scale transforms
- slow dreamy transitions beyond 320ms on interactive controls

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

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

- [ ] 没有紫色到蓝色的渐变
- [ ] 没有使用 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 标题上面
- [ ] no soft pastel colors
- [ ] no organic irregular rounded shapes
- [ ] no Western serif fonts
- [ ] no rounded-full borders
- [ ] no light backgrounds (bg-white, bg-gray-50)