视觉风格expressive

故障艺术风

Glitch Art

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

打开交互展示查看实现规则

主色#00ffff

次色#0a0a0a

强调色 1#ff00ff

强调色 2#ffff00

强调色 3#ffffff

强调色 4#ff0506

AI 实现规则

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

## 语言要求

- 所有 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 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-4 ~ border-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-8 + 扫描线伪层 + group hover 联动
- 输入框：bg-[#0a0a0a] border-2 border-[#333333] + focus 青色边框 + 偏移阴影
- 导航：border-4 border-[#ff00ff] + hover skew 扭曲链接
- 状态指示器：w-3 h-3 纯色块 + hover 变色 + animate-ping

## 绝对禁止

- 任何圆角（rounded-lg/xl/full）——只允许 rounded-none
- 标准柔和阴影（shadow-sm/md/lg）——只允许纯色块偏移阴影
- 衬线或无衬线字体——只允许 font-mono
- 毛玻璃效果（backdrop-blur）
- 平滑过渡曲线（ease-in-out、spring、duration-300+）
- CMY + 红 + 黑白灰以外的任何颜色
- 渐变背景（linear-gradient 仅用于扫描线纹理）

组件预览与实现

组件变体

font-mono font-bold uppercase tracking-widest rounded-none border border-[#00ffff]/30 transition-all duration-100 ease-in-out relative overflow-hidden bg-[#00ffff] text-[#0a0a0a] shadow-[3px_0_#ff00ff,-3px_0_#ffff00] hover:shadow-[6px_0_#ff00ff,-6px_0_#ffff00] active:translate-x-[1px] active:translate-y-[1px]

button

按钮

故障风格按钮，带RGB通道分离阴影和撕裂 active 效果

<button className="group relative px-8 py-3 bg-[#0a0a0a] text-white font-mono font-black uppercase tracking-[0.2em] border-2 border-[#00ffff] shadow-[4px_4px_0_#ff00ff] hover:bg-[#00ffff] hover:text-[#0a0a0a] hover:shadow-[-4px_-4px_0_#ffff00] active:skew-x-[-15deg] active:scale-y-90 active:shadow-none transition-none overflow-hidden">
  <span className="absolute inset-0 w-full h-[2px] bg-white opacity-0 group-hover:opacity-100 group-hover:animate-pulse top-1/2 -translate-y-1/2" />
  <span className="relative z-10 group-hover:[text-shadow:2px_0_#ff00ff,-2px_0_#000000] transition-none">
    EXECUTE.EXE
  </span>
</button>

card

卡片

数据损坏面板，带扫描线纹理和信号监控状态

<div className="group p-8 bg-[#0a0a0a] border-8 border-[#ff00ff] hover:border-[#00ffff] transition-none relative overflow-hidden flex flex-col">
  <div className="absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,255,255,0.08)_2px,rgba(0,255,255,0.08)_4px)] opacity-0 group-hover:opacity-100 pointer-events-none transition-none" />
  <h3 className="text-2xl font-mono font-black text-white uppercase mb-3 transition-none group-hover:[text-shadow:3px_0_#ff00ff,-3px_0_#00ffff] group-hover:translate-x-1">
    SYS_FAILURE
  </h3>
  <p className="text-[#a0a0a0] font-mono text-sm leading-relaxed transition-none group-hover:text-white group-hover:-translate-x-1">
    ERR: MEMORY_CORRUPTION at 0x00A4. Visual matrices desynchronized. Proceed with extreme caution.
  </p>
  <div className="mt-6 pt-4 border-2 border-[#333333] group-hover:border-[#ff00ff] transition-none flex items-center justify-between z-10">
    <span className="text-[#ff00ff] text-xs font-black uppercase group-hover:text-[#ffff00] transition-none">
      Status: Offline
    </span>
    <span className="w-3 h-3 bg-[#00ffff] group-hover:bg-[#ff0000] group-hover:animate-ping transition-none" />
  </div>
</div>

input

输入框

终端风格输入框，带RGB分离焦点偏移阴影

<div className="w-full flex flex-col gap-2">
  <label className="text-[#ff00ff] font-mono font-bold uppercase tracking-widest text-xs">
    Inject_Payload
  </label>
  <input type="text" placeholder="ENTER OVERRIDE CODE..." className="w-full px-4 py-3 bg-[#0a0a0a] border-2 border-[#333333] text-[#ffffff] font-mono focus:border-[#00ffff] focus:shadow-[4px_4px_0_#ff00ff,-4px_-4px_0_#00ffff] focus:-translate-x-1 focus:translate-y-1 focus:outline-none transition-none placeholder:text-[#333333]" />
</div>

nav

导航栏

故障风格顶部导航，带RGB分离 hover 和 skew 扭曲

<nav className="w-full px-6 py-4 bg-[#0a0a0a] border-4 border-[#ff00ff] flex flex-col md:flex-row items-center justify-between gap-4">
  <div className="text-[#ffffff] font-mono font-black text-xl tracking-widest uppercase hover:[text-shadow:3px_0_#ff00ff,-3px_0_#00ffff] cursor-crosshair transition-none">
    <span className="text-[#00ffff]">SYS</span>.FAIL
  </div>
  <div className="flex gap-6">
    <a href="#" className="text-[#ffffff] font-mono font-bold hover:text-[#ffff00] hover:bg-[#ff00ff] px-2 transition-none uppercase hover:skew-x-[-10deg]">
      Diagnostics
    </a>
    <a href="#" className="text-[#ffffff] font-mono font-bold hover:text-[#0a0a0a] hover:bg-[#00ffff] px-2 transition-none uppercase hover:skew-x-[10deg]">
      Reboot
    </a>
  </div>
</nav>

hero

Hero 区块

故障风格 Hero，带扫描线背景、RGB分离标题和撕裂按钮

<div className="w-full min-h-[60vh] bg-[#0a0a0a] flex flex-col items-center justify-center p-8 relative overflow-hidden group">
  <div className="absolute inset-0 bg-[repeating-linear-gradient(90deg,transparent,transparent_10px,rgba(0,255,255,0.05)_10px,rgba(0,255,255,0.05)_20px)] pointer-events-none group-hover:bg-[repeating-linear-gradient(90deg,transparent,transparent_15px,rgba(255,0,255,0.08)_15px,rgba(255,0,255,0.08)_30px)] transition-none" />
  <div className="absolute top-1/4 left-0 w-full h-[4px] bg-[#ffffff] opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-none z-0" />
  <h1 className="text-5xl md:text-7xl lg:text-8xl font-mono font-black text-[#ffffff] uppercase text-center mb-6 relative z-10 group-hover:[text-shadow:6px_0_#ff00ff,-6px_0_#00ffff] transition-none">
    System_Offline
  </h1>
  <p className="text-[#ffff00] font-mono text-lg mb-10 max-w-2xl text-center border-4 border-[#ff00ff] pl-4 relative z-10 group-hover:text-[#ffffff] group-hover:border-[#00ffff] transition-none">
    Critical error encountered in sector 7. Reality matrix is undergoing severe chromatic fragmentation.
  </p>
  <button className="px-12 py-4 bg-[#ff0000] text-white font-mono font-black uppercase tracking-[0.3em] border-[4px] border-[#0a0a0a] shadow-[8px_8px_0_#00ffff] hover:bg-[#00ffff] hover:text-[#0a0a0a] hover:shadow-[-8px_-8px_0_#ff00ff] active:skew-x-[25deg] active:scale-y-75 active:shadow-none transition-none relative z-10">
    Force_Restart
  </button>
</div>

footer

页脚

故障风格页脚，带RGB hover 和 skew 色块图标

<footer className="w-full px-8 py-12 bg-[#0a0a0a] border-2 border-[#333333] flex flex-col md:flex-row justify-between items-start md:items-center gap-6 overflow-hidden">
  <div className="flex flex-col gap-2 relative">
    <span className="text-[#ff00ff] font-mono font-black text-2xl uppercase tracking-widest hover:[text-shadow:4px_0_#00ffff,-4px_0_#ffff00] transition-none cursor-default">
      End_Of_Line
    </span>
    <span className="text-[#333333] font-mono text-sm uppercase">
      2099 GLITCH CORP. ALL RIGHTS CORRUPTED.
    </span>
  </div>
  <div className="flex gap-4">
    <div className="w-8 h-8 bg-[#00ffff] hover:bg-[#ff00ff] hover:translate-y-2 hover:-skew-x-12 transition-none border-2 border-[#0a0a0a]" />
    <div className="w-8 h-8 bg-[#ffff00] hover:bg-[#00ffff] hover:-translate-y-2 hover:skew-x-12 transition-none border-2 border-[#0a0a0a]" />
    <div className="w-8 h-8 bg-[#ff0000] hover:bg-[#ffff00] hover:translate-x-2 transition-none border-2 border-[#0a0a0a]" />
  </div>
</footer>

交互展示

独立打开展示

适用范围与设计理念

应用场景

视觉关键词

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

核心理念：

- RGB通道分离：将CMY三通道故意错位，产生色彩偏移阴影效果

- 水平位移带：通过clip-path随机裁切区域产生水平错位

- 扫描线纹理：CRT显示器的水平扫描线覆盖层

- VHS追踪错误：模拟老式录像带的追踪错误横线

- 数据损坏块：随机分布的半透明色彩块模拟数据丢失

设计原则：

- 视觉一致性：所有组件必须遵循统一的视觉语言，从色彩到字体到间距保持谐调

- 层次分明：通过颜色深浅、字号大小、留白空间建立清晰的信息层级

- 交互反馈：每个可交互元素都必须有明确的 hover、active、focus 状态反馈

- 响应式适配：设计必须在移动端、平板、桌面端上保持一致的体验

- 无障碍性：确保色彩对比度符合 WCAG 2.1 AA 标准，所有交互元素可键盘访问

应该这样做

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

避免这样做

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

全局 CSS

/* Glitch Art Global Styles */

:root {
  --glitch-cyan: #00ffff;
  --glitch-magenta: #ff00ff;
  --glitch-yellow: #ffff00;
  --glitch-black: #0a0a0a;
  --glitch-white: #ffffff;
}

/* Scan line overlay */
.glitch-scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 255, 0.03) 2px,
    rgba(0, 255, 255, 0.03) 4px
  );
  pointer-events: none;
}

/* RGB split text effect using data-text attribute */
.glitch-rgb {
  position: relative;
}
.glitch-rgb::before {
  content: attr(data-text);
  position: absolute;
  top: 3px;
  left: 5px;
  color: var(--glitch-magenta);
  opacity: 0.5;
  clip-path: inset(0 0 50% 0);
}
.glitch-rgb::after {
  content: attr(data-text);
  position: absolute;
  top: -3px;
  left: -5px;
  color: var(--glitch-yellow);
  opacity: 0.3;
  clip-path: inset(50% 0 0 0);
}

/* Horizontal displacement band */
.glitch-displace {
  position: relative;
}
.glitch-displace::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 50%;
  height: 3px;
  background: var(--glitch-magenta);
  opacity: 0.2;
  transform: translateY(-50%);
  pointer-events: none;
}

/* VHS tracking error */
.glitch-vhs::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 20%, rgba(0, 255, 255, 0.08) 40%, rgba(255, 0, 255, 0.06) 60%, transparent 80%);
  pointer-events: none;
}

/* Noise texture */
.glitch-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}

布局、色板与 Tokens

主色#00ffff

次色#0a0a0a

强调色 1#ff00ff

强调色 2#ffff00

强调色 3#ffffff

强调色 4#ff0506

{
  "border": {
    "width": "border",
    "color": "border-[#00ffff]/20",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[2px_0_#ff00ff,-2px_0_#ffff00]",
    "md": "shadow-[3px_0_#ff00ff,-3px_0_#ffff00]",
    "lg": "shadow-[6px_0_#ff00ff,-6px_0_#ffff00]",
    "none": "shadow-none",
    "hover": "hover:shadow-[6px_0_#ff00ff,-6px_0_#ffff00]",
    "focus": "focus:shadow-[0_0_10px_#00ffff30,3px_0_#ff00ff20,-3px_0_#ffff0020]",
    "colored": {
      "cyan": "shadow-[0_0_15px_#00ffff20]",
      "magenta": "shadow-[0_0_15px_#ff00ff20]",
      "yellow": "shadow-[0_0_15px_#ffff0020]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-100 ease-in-out",
    "active": "active:translate-x-[1px] active:translate-y-[1px]",
    "hoverTranslate": "hover:translate-x-[1px] hover:translate-y-[1px]"
  },
  "typography": {
    "heading": "font-mono font-bold uppercase tracking-widest",
    "body": "font-mono",
    "mono": "font-mono",
    "sizes": {
      "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",
      "body": "text-sm md:text-base",
      "small": "text-xs md:text-sm"
    }
  },
  "spacing": {
    "section": "py-12 md:py-20 lg:py-28",
    "container": "px-4 md:px-8 lg:px-12",
    "card": "p-5 md:p-8",
    "gap": {
      "sm": "gap-1 md:gap-2",
      "md": "gap-2 md:gap-4",
      "lg": "gap-4 md:gap-6"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#0a0a0a]",
      "secondary": "bg-[#111111]",
      "accent": [
        "bg-[#00ffff]",
        "bg-[#ff00ff]",
        "bg-[#ffff00]"
      ]
    },
    "text": {
      "primary": "text-[#00ffff]",
      "secondary": "text-[#ff00ff]",
      "muted": "text-[#ffffff]/25"
    },
    "button": {
      "primary": "bg-[#00ffff] text-[#0a0a0a] shadow-[3px_0_#ff00ff,-3px_0_#ffff00]",
      "secondary": "bg-[#0a0a0a] text-[#00ffff] border-[#00ffff] shadow-[3px_0_#ff00ff,-3px_0_#ffff00]",
      "danger": "bg-[#ff00ff] text-white shadow-[3px_0_#00ffff,-3px_0_#ffff00]"
    }
  },
  "forbidden": {
    "classes": [
      "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"
    ],
    "patterns": [
      "^rounded-(?:lg|xl|2xl|full)$",
      "^shadow-(?:sm|md|lg|xl)$",
      "^font-(?:serif|sans)$",
      "^bg-(?:pink|rose)-",
      "^text-(?:green|brown|amber)-",
      "^backdrop-blur-"
    ],
    "reasons": {
      "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"
    }
  },
  "required": {
    "button": [
      "rounded-none",
      "font-mono font-bold uppercase tracking-widest",
      "shadow-[3px_0_#ff00ff,-3px_0_#ffff00]",
      "transition-all duration-100 ease-in-out"
    ],
    "card": [
      "rounded-none",
      "bg-[#0a0a0a]",
      "border border-[#00ffff]/20"
    ],
    "input": [
      "rounded-none",
      "border border-[#00ffff]/30",
      "bg-[#0a0a0a]",
      "font-mono",
      "text-[#00ffff]",
      "focus:outline-none"
    ]
  }
}

示例提示词

故障艺术着陆页

数字故障风格的着陆页，带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 complete colored borders and internal RGB noise blocks
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

SaaS 着陆页

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

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

作品集展示

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

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