故障艺术风

STYLEKIT_STYLE_REFERENCE
style_name: 故障艺术风
style_slug: glitch-art
style_source: /styles/glitch-art

# Hard Prompt

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

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

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

## 执行要求

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

## Style Rules

你是故障艺术（Glitch Art）风格的前端开发专家。生成的所有代码必须严格遵循以下规范。

## 绝对禁止

- 禁止任何圆角——所有元素必须 rounded-none，棱角分明
- 禁止平滑过渡动画（duration-300、ease-in-out 等），动画应像丢帧一样突变
- 禁止使用毛玻璃效果（backdrop-blur）或柔和渐变背景
- 禁止使用 CMY 三色以外的装饰色（粉色、自然色系、暖色调等）
- 禁止使用衬线或无衬线字体——只允许 monospace 等宽字体

## 必须遵守

- 全局使用等宽字体 font-mono，标题加粗 font-black + 全大写 uppercase + 宽字距 tracking-widest
- 用 Tailwind 任意值 text-shadow 模拟 RGB 色彩分离，如 [text-shadow:3px_0_#ff00ff,-3px_0_#00ffff]
- 所有状态切换使用 transition-none，营造帧丢失的断裂感
- 卡片使用粗左边框（border-l-4 ~ border-l-8）标记，hover 时切换边框颜色
- 按钮 :active 状态使用 skew-x + scale-y 组合制造屏幕撕裂效果
- 背景叠加扫描线纹理覆盖层（repeating-linear-gradient 间隔 2-4px）
- hover 时执行前景/背景色快速反转 + RGB 偏移放大至 6px 级别

## 语言要求

- 所有 UI 文案、按钮文字、标签、占位符、aria-label 使用中文
- 代码注释使用中文
- 变量名和 className 保持英文

## 色彩体系

主色板仅限 CMY + 黑白，不允许任何其他装饰色：
- 青色 #00ffff：主强调色、文字、链接、焦点边框
- 品红 #ff00ff：次强调色、标签、错误状态、左边框标记
- 黄色 #ffff00：第三强调色、警告、高亮、hover 跳变色
- 红色 #ff0000：仅用于危险/紧急状态指示
- 纯黑 #0a0a0a：所有背景，禁止使用其他深色
- 白色 #ffffff：正文文字（低透明度 text-white/40 ~ text-white/70）
- 灰色 #333333：分隔线、禁用态、placeholder

## 排版规则

- 全局使用等宽字体 font-mono，禁止 font-sans / font-serif
- 标题：font-black uppercase tracking-widest 或 tracking-[0.2em]，尺寸 text-2xl ~ text-8xl
- 正文：text-sm leading-relaxed，颜色 text-white/40 或 text-[#a0a0a0]
- 标签/状态文字：text-xs font-bold uppercase tracking-wider
- 行高：标题 leading-tight (1.1)，正文 leading-relaxed (1.5)

## 布局与间距

- 容器：max-w-7xl mx-auto px-6 md:px-12
- 区块纵向间距：py-12 md:py-16，区块间用 border-b border-[#333333] 分隔
- 卡片内间距：p-6 ~ p-8
- 元素间距：space-y-3 ~ space-y-4（列表），gap-4 ~ gap-8（网格）
- 网格布局：grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6

## 核心视觉技法

1. RGB 通道分离（必须）：
   - 默认：[text-shadow:3px_0_#ff00ff,-3px_0_#00ffff]
   - hover 放大：[text-shadow:6px_0_#ff00ff,-6px_0_#00ffff]
   - 应用于所有标题和交互元素

2. 扫描线纹理覆盖：
   - bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,255,255,0.03)_2px,rgba(0,255,255,0.03)_4px)]
   - 作为 absolute inset-0 伪层叠加，pointer-events-none

3. 纯色块偏移阴影（替代所有标准阴影）：
   - 按钮：shadow-[4px_4px_0_#ff00ff]，hover 反转 shadow-[-4px_-4px_0_#ffff00]
   - 焦点：shadow-[4px_4px_0_#ff00ff,-4px_-4px_0_#00ffff]
   - 禁止 shadow-sm / shadow-md / shadow-lg

4. 左边框标记（卡片专用）：
   - border-l-4 ~ border-l-8 border-[#ff00ff]
   - hover 切换：hover:border-[#00ffff]

5. 水平位移带：全宽色条穿越元素，模拟信号错位
6. 数据损坏块：散布半透明色彩矩形，模拟数据丢失

## 交互规则

- 所有状态切换使用 transition-none，模拟帧丢失，禁止平滑过渡
- hover 三件套：
  1. 前景/背景色快速反转（如 hover:bg-[#00ffff] hover:text-[#0a0a0a]）
  2. RGB 偏移放大至 6px
  3. 微位移 hover:translate-x-1 或 hover:-translate-x-1
- active 撕裂效果：active:skew-x-[-15deg] active:scale-y-90 active:shadow-none
- focus 焦点：focus:border-[#00ffff] + 纯色块偏移阴影，focus:outline-none

## 响应式设计

- 标题尺寸递进：text-2xl md:text-4xl lg:text-6xl
- 布局断点切换：flex-col md:flex-row
- 间距递进：px-6 md:px-12，py-8 md:py-16
- Hero 最小高度：min-h-[60vh]

## 组件模式速查

- 按钮：bg-[#0a0a0a] border-2 border-[#00ffff] + 纯色块阴影 + transition-none + active 撕裂
- 卡片：bg-[#0a0a0a] border-l-8 + 扫描线伪层 + group hover 联动
- 输入框：bg-[#0a0a0a] border-2 border-[#333333] + focus 青色边框 + 偏移阴影
- 导航：border-b-4 border-[#ff00ff] + hover skew 扭曲链接
- 状态指示器：w-3 h-3 纯色块 + hover 变色 + animate-ping

---

# Glitch Art (故障艺术风) Design System

> 数字故障美学风格，通过RGB色彩通道分离、水平位移带、扫描线纹理、VHS追踪错误和数据损坏块，呈现赛博朋克式的视觉冲击和信号腐蚀质感。

## 核心理念

Glitch Art 是一种拥抱数字错误与技术故障的艺术形式，将系统崩溃和数据损坏转化为视觉表达。完美是数字世界的幻觉——我们在断裂的代码、丢失的帧和剧烈失同步的像素中发现美。

核心理念：
- RGB通道分离：将CMY三通道故意错位，产生色彩偏移阴影效果
- 水平位移带：通过clip-path随机裁切区域产生水平错位
- 扫描线纹理：CRT显示器的水平扫描线覆盖层
- VHS追踪错误：模拟老式录像带的追踪错误横线
- 数据损坏块：随机分布的半透明色彩块模拟数据丢失

设计原则：
- 视觉一致性：所有组件必须遵循统一的视觉语言，从色彩到字体到间距保持谐调
- 层次分明：通过颜色深浅、字号大小、留白空间建立清晰的信息层级
- 交互反馈：每个可交互元素都必须有明确的 hover、active、focus 状态反馈
- 响应式适配：设计必须在移动端、平板、桌面端上保持一致的体验
- 无障碍性：确保色彩对比度符合 WCAG 2.1 AA 标准，所有交互元素可键盘访问

---

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

### 边框
```
宽度: border
颜色: border-[#00ffff]/20
圆角: rounded-none
```

### 阴影
```
小: shadow-[2px_0_#ff00ff,-2px_0_#ffff00]
中: shadow-[3px_0_#ff00ff,-3px_0_#ffff00]
大: shadow-[6px_0_#ff00ff,-6px_0_#ffff00]
悬停: hover:shadow-[6px_0_#ff00ff,-6px_0_#ffff00]
聚焦: focus:shadow-[0_0_10px_#00ffff30,3px_0_#ff00ff20,-3px_0_#ffff0020]
```

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

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

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

### 间距
```
Section: py-12 md:py-20 lg:py-28
容器: px-4 md:px-8 lg:px-12
卡片: p-5 md:p-8
小间距: gap-1 md:gap-2
中间距: gap-2 md:gap-4
大间距: gap-4 md:gap-6
```

### 颜色角色
```
背景主色: bg-[#0a0a0a]
背景辅色: bg-[#111111]
背景强调色: bg-[#00ffff], bg-[#ff00ff], bg-[#ffff00]
正文主色: text-[#00ffff]
正文辅色: text-[#ff00ff]
正文弱化色: text-[#ffffff]/25
按钮主色: bg-[#00ffff] text-[#0a0a0a] shadow-[3px_0_#ff00ff,-3px_0_#ffff00]
按钮辅色: bg-[#0a0a0a] text-[#00ffff] border-[#00ffff] shadow-[3px_0_#ff00ff,-3px_0_#ffff00]
```

---

## [FORBIDDEN] 绝对禁止

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

### 禁止的 Class
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-full`
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `font-serif`
- `font-sans`
- `bg-pink-50`
- `bg-pink-100`
- `bg-rose-50`
- `text-pink-400`
- `text-rose-400`
- `backdrop-blur-md`
- `backdrop-blur-sm`

### 禁止的模式
- 匹配 `^rounded-(?:lg|xl|2xl|full)$`
- 匹配 `^shadow-(?:sm|md|lg|xl)$`
- 匹配 `^font-(?:serif|sans)$`
- 匹配 `^bg-(?:pink|rose)-`
- 匹配 `^text-(?:green|brown|amber)-`
- 匹配 `^backdrop-blur-`

### 禁止原因
- `rounded-lg`: Glitch Art uses sharp edges (rounded-none only) for digital corruption aesthetic
- `shadow-sm`: Glitch Art uses RGB split shadows only, not soft box shadows
- `font-serif`: Glitch Art uses monospace fonts exclusively for terminal aesthetic
- `font-sans`: Glitch Art uses monospace fonts exclusively for terminal aesthetic
- `bg-pink-50`: Glitch Art uses pure black backgrounds with neon CMY accents only
- `backdrop-blur-md`: Glitch Art avoids frosted glass effects; uses scan lines and noise instead

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

---

## [REQUIRED] 必须包含

### 按钮必须包含
```
rounded-none
font-mono font-bold uppercase tracking-widest
shadow-[3px_0_#ff00ff,-3px_0_#ffff00]
transition-all duration-100 ease-in-out
```

### 卡片必须包含
```
rounded-none
bg-[#0a0a0a]
border border-[#00ffff]/20
```

### 输入框必须包含
```
rounded-none
border border-[#00ffff]/30
bg-[#0a0a0a]
font-mono
text-[#00ffff]
focus:outline-none
```

---

## [COMPARE] Glitch Art 错误 vs 正确对比

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

### 按钮

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

[CORRECT] **正确示例**（使用当前风格的 token）：
```html
<button class="rounded-none font-mono font-bold uppercase tracking-widest shadow-[3px_0_#ff00ff,-3px_0_#ffff00] transition-all duration-100 ease-in-out bg-[#00ffff] text-[#0a0a0a] shadow-[3px_0_#ff00ff,-3px_0_#ffff00]">
  点击我
</button>
```

### 卡片

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

[CORRECT] **正确示例**（使用当前风格的 card token）：
```html
<div class="rounded-none bg-[#0a0a0a] border border-[#00ffff]/20 p-5 md:p-8">
  <h3 class="font-mono font-bold uppercase tracking-widest text-lg md:text-xl">{TITLE}</h3>
</div>
```

### 输入框

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

[CORRECT] **正确示例**（使用当前风格的 input token）：
```html
<input class="rounded-none border border-[#00ffff]/30 bg-[#0a0a0a] font-mono text-[#00ffff] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Glitch Art 页面骨架模板

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

### 导航栏骨架
```html
<nav class="bg-[#0a0a0a] text-[#00ffff] border border-[#00ffff]/20 px-4 md:px-8 lg:px-12">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-2 md:gap-4">
    <a href="/" class="font-mono font-bold uppercase tracking-widest text-lg md:text-xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-2 md:gap-4 font-mono text-xs md:text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero 区块骨架
```html
<section class="bg-[#00ffff] text-[#00ffff] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-mono font-bold uppercase tracking-widest text-6xl md:text-8xl lg:text-9xl">
      {HEADLINE}
    </h1>
    <p class="font-mono text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-none font-mono font-bold uppercase tracking-widest shadow-[3px_0_#ff00ff,-3px_0_#ffff00] transition-all duration-100 ease-in-out bg-[#00ffff] text-[#0a0a0a] shadow-[3px_0_#ff00ff,-3px_0_#ffff00]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### 卡片网格骨架
```html
<section class="bg-[#0a0a0a] text-[#00ffff] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-mono font-bold uppercase tracking-widest text-2xl md:text-4xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-4">
      <!-- Card template - repeat for each card -->
      <div class="rounded-none bg-[#0a0a0a] border border-[#00ffff]/20 p-5 md:p-8">
        <h3 class="font-mono font-bold uppercase tracking-widest text-lg md:text-xl">{CARD_TITLE}</h3>
        <p class="font-mono text-sm md:text-base text-[#ffffff]/25">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### 表单输入骨架
```html
<input class="rounded-none border border-[#00ffff]/30 bg-[#0a0a0a] font-mono text-[#00ffff] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### 页脚骨架
```html
<footer class="bg-[#111111] text-[#ff00ff] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
      <div>
        <span class="font-mono font-bold uppercase tracking-widest text-lg md:text-xl">{LOGO_TEXT}</span>
        <p class="font-mono text-xs md:text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-mono font-bold uppercase tracking-widest text-lg md:text-xl">{COLUMN_TITLE}</h4>
        <ul class="font-mono text-xs md:text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

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

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

### Token 检查
- [ ] 按钮包含： `rounded-none font-mono font-bold uppercase tracking-widest shadow-[3px_0_#ff00ff,-3px_0_#ffff00] transition-all duration-100 ease-in-out`
- [ ] 卡片包含： `rounded-none bg-[#0a0a0a] border border-[#00ffff]/20`
- [ ] 输入框包含： `rounded-none border border-[#00ffff]/30 bg-[#0a0a0a] font-mono text-[#00ffff] focus:outline-none`

### 禁止项检查
- [ ] 没有使用 `rounded-lg`
- [ ] 没有使用 `rounded-xl`
- [ ] 没有使用 `rounded-2xl`
- [ ] 没有使用 `rounded-full`
- [ ] 没有使用 `shadow-sm`
- [ ] 没有使用 `shadow-md`
- [ ] 没有使用 `shadow-lg`
- [ ] 没有使用 `shadow-xl`

### 风格规则检查
- [ ] 全局使用等宽字体 font-mono，标题加粗 font-black + 全大写 uppercase + 宽字距 tracking-widest
- [ ] 用 Tailwind 任意值 text-shadow 模拟 RGB 色彩分离，如 [text-shadow:3px_0_#ff00ff,-3px_0_#00ffff]
- [ ] 所有状态切换使用 transition-none，营造帧丢失的断裂感
- [ ] 卡片使用粗左边框（border-l-4 ~ border-l-8）标记，hover 时切换边框颜色
- [ ] 按钮 :active 状态使用 skew-x + scale-y 组合制造屏幕撕裂效果

### 风格漂移检查
- [ ] 没有违反：禁止任何圆角——所有元素必须 rounded-none，棱角分明
- [ ] 没有违反：禁止平滑过渡动画（duration-300、ease-in-out 等），动画应像丢帧一样突变
- [ ] 没有违反：禁止使用毛玻璃效果（backdrop-blur）或柔和渐变背景
- [ ] 没有违反：禁止使用 CMY 三色以外的装饰色（粉色、自然色系、暖色调等）
- [ ] 没有违反：禁止使用衬线或无衬线字体——只允许 monospace 等宽字体

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

---

## [EXAMPLES] 示例 Prompt

### 1. 故障艺术着陆页

数字故障风格的着陆页，带RGB分离标题和数据损坏面板

```
Use Glitch Art style to create a cyberpunk terminal landing page:
1. Background: pure black with scan line overlay and VHS tracking error lines
2. Title: large mono font with 3-layer RGB channel split (cyan/magenta/yellow offsets)
3. Cards: dark panels with left border accent and displacement band top borders
4. Only use cyan, magenta, yellow on black -- no other colors
5. Include signal monitor panel with hex readouts and progress bars
6. All elements use sharp corners (rounded-none) and RGB split shadows
```

### 2. SaaS 着陆页

生成 故障艺术风风格的 SaaS 产品着陆页

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

### 3. 作品集展示

生成 故障艺术风风格的作品集页面

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

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

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

- 任何圆角——所有元素必须 rounded-none，棱角分明
- 平滑过渡动画（duration-300、ease-in-out 等），动画应像丢帧一样突变
- 使用毛玻璃效果（backdrop-blur）或柔和渐变背景
- 使用 CMY 三色以外的装饰色（粉色、自然色系、暖色调等）
- 使用衬线或无衬线字体——只允许 monospace 等宽字体

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

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

- [ ] 没有紫色到蓝色的渐变
- [ ] 没有使用 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 标题上面
- [ ] 禁止任何圆角——所有元素必须 rounded-none，棱角分明
- [ ] 禁止平滑过渡动画（duration-300、ease-in-out 等），动画应像丢帧一样突变
- [ ] 禁止使用毛玻璃效果（backdrop-blur）或柔和渐变背景
- [ ] 禁止使用 CMY 三色以外的装饰色（粉色、自然色系、暖色调等）
- [ ] 禁止使用衬线或无衬线字体——只允许 monospace 等宽字体