赛博和风

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

# Hard Prompt

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

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

## Style Rules
# 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
```

### 字号
```
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
```

---

## [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] 错误 vs 正确对比

### 按钮

[WRONG] **错误示例**（使用了圆角和模糊阴影）：
```html
<button class="rounded-lg shadow-lg bg-blue-500 text-white px-4 py-2 hover:bg-blue-600">
  点击我
</button>
```

[CORRECT] **正确示例**（使用硬边缘、无圆角、位移效果）：
```html
<button class="font-sans font-semibold tracking-wider border border-[#1e3a5f]/60 transition-all duration-300 ease-in-out bg-[#ff006e] text-white px-4 py-2 md:px-6 md:py-3">
  点击我
</button>
```

### 卡片

[WRONG] **错误示例**（使用了渐变和圆角）：
```html
<div class="rounded-xl shadow-2xl bg-gradient-to-r from-purple-500 to-pink-500 p-6">
  <h3 class="text-xl font-semibold">标题</h3>
</div>
```

[CORRECT] **正确示例**（纯色背景、硬边缘阴影）：
```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">标题</h3>
</div>
```

### 输入框

[WRONG] **错误示例**（灰色边框、圆角）：
```html
<input class="rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500" />
```

[CORRECT] **正确示例**（黑色粗边框、聚焦阴影）：
```html
<input class="bg-[#080814] border border-[#1e3a5f]/30 text-[#e2e8f0] font-sans focus:outline-none px-3 py-2 md:px-4 md:py-3" placeholder="请输入..." />
```

---

## [TEMPLATES] 页面骨架模板

使用以下模板生成页面，只需替换 `{PLACEHOLDER}` 部分：

### 导航栏骨架
```html
<nav class="bg-white border-b-2 md:border-b-4 border-black px-4 md:px-8 py-3 md:py-4">
  <div class="flex items-center justify-between max-w-6xl mx-auto">
    <a href="/" class="font-black text-xl md:text-2xl tracking-wider">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-4 md:gap-8 font-mono text-sm md:text-base">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero 区块骨架
```html
<section class="min-h-[60vh] md:min-h-[80vh] flex items-center px-4 md:px-8 py-12 md:py-0 bg-{ACCENT_COLOR} border-b-2 md:border-b-4 border-black">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-black text-4xl md:text-6xl lg:text-8xl leading-tight tracking-tight mb-4 md:mb-6">
      {HEADLINE}
    </h1>
    <p class="font-mono text-base md:text-xl max-w-xl mb-6 md:mb-8">
      {SUBHEADLINE}
    </p>
    <button class="bg-black text-white font-black px-6 py-3 md:px-8 md:py-4 border-2 md:border-4 border-black shadow-[4px_4px_0px_0px_rgba(255,0,110,1)] md:shadow-[8px_8px_0px_0px_rgba(255,0,110,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px] transition-all text-sm md:text-base">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### 卡片网格骨架
```html
<section class="py-12 md:py-24 px-4 md:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-black text-2xl md:text-4xl mb-8 md:mb-12">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
      <!-- Card template - repeat for each card -->
      <div class="bg-white border-2 md:border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] md:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] p-4 md:p-6 hover:shadow-[4px_4px_0px_0px_rgba(255,0,110,1)] md:hover:shadow-[8px_8px_0px_0px_rgba(255,0,110,1)] hover:-translate-y-1 transition-all">
        <h3 class="font-black text-lg md:text-xl mb-2">{CARD_TITLE}</h3>
        <p class="font-mono text-sm md:text-base text-gray-700">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### 页脚骨架
```html
<footer class="bg-black text-white py-12 md:py-16 px-4 md:px-8 border-t-2 md:border-t-4 border-black">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <span class="font-black text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="font-mono text-sm mt-4 text-gray-400">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-black text-lg mb-4">{COLUMN_TITLE}</h4>
        <ul class="space-y-2 font-mono text-sm text-gray-400">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

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

**在输出代码前，必须逐项验证以下每一条。如有违反，立即修正后再输出：**

### 1. 圆角检查
- [ ] 搜索代码中的 `rounded-`
- [ ] 确认只有 `rounded-none` 或无圆角
- [ ] 如果发现 `rounded-lg`、`rounded-md` 等，替换为 `rounded-none`

### 2. 阴影检查
- [ ] 搜索代码中的 `shadow-`
- [ ] 确认只使用 `shadow-[Xpx_Xpx_0px_0px_rgba(...)]` 格式
- [ ] 如果发现 `shadow-lg`、`shadow-xl` 等，替换为正确格式

### 3. 边框检查
- [ ] 搜索代码中的 `border-`
- [ ] 确认边框颜色是 `border-black`
- [ ] 如果发现 `border-gray-*`、`border-slate-*`，替换为 `border-black`

### 4. 交互检查
- [ ] 所有按钮都有 `hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px]`
- [ ] 所有卡片都有 hover 效果（阴影变色或位移）
- [ ] 都包含 `transition-all`

### 5. 响应式检查
- [ ] 边框有 `border-2 md:border-4`
- [ ] 阴影有 `shadow-[4px...] md:shadow-[8px...]`
- [ ] 间距有 `p-4 md:p-6` 或类似的响应式值
- [ ] 字号有 `text-sm md:text-base` 或类似的响应式值

### 6. 字体检查
- [ ] 标题使用 `font-black`
- [ ] 正文使用 `font-mono`

> CRITICAL: **如果任何一项检查不通过，必须修正后重新生成代码。**

---

## [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
```

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

# Soft Prompt

保持整体风格气质即可，允许实现细节灵活调整，但不要偏离核心视觉语言。

## Style Signals
- 赛博和风
- 数字和风
- 青海波
- 金继ぎ
- 障子
- 鸟居

## Prefer
- 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

## Avoid
- No soft pastel colors
- No organic irregular rounded shapes
- No Western serif fonts

## Output Guidance
- 先保证整体风格识别度，再优化细节。
- 避免过度炫技，保持可读性与可维护性。