视觉风格expressive

生成艺术

Generative Art

算法驱动的程序化视觉美学，以数学函数、噪声纹理和参数化图形创造独特动态界面。适合创意编程、数据可视化、艺术项目。

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

主色#7c3aed

次色#0a0a0a

强调色 1#3b82f6

强调色 2#14b8a6

强调色 3#f43f5e

强调色 4#f59e0b

AI 实现规则

STYLE: Generative Art
TYPE: Algorithm-driven visual aesthetics

MUST USE:
- Dark background: bg-[#0a0a0a] or bg-neutral-950
- Primary accent: Violet/purple (#7c3aed) as base generative color
- Color palette: Algorithmically derived via HSL rotation from violet base
- Secondary colors: Blue (#3b82f6), Teal (#14b8a6), Rose (#f43f5e), Amber (#f59e0b)
- Monospace fonts: font-mono for all text (code-art aesthetic)
- SVG geometric shapes (circles, lines, curves) as decorative backgrounds
- Dark glass cards: bg-neutral-900/80 backdrop-blur with subtle borders
- Violet glow: shadow-[0_0_20px_rgba(124,58,237,0.4)] for interactive elements
- Parameter display: Show seed values, coordinates, algorithm names as UI elements
- Dot grid or line grid as subtle background texture

MUST AVOID:
- Stock photos or raster images
- Light/white backgrounds
- Serif or sans-serif fonts
- Conventional shadows (shadow-md)
- Static lifeless layouts
- More than 5 colors without algorithmic justification
- Decorative elements that are not procedurally derived

COLOR RULES:
- Primary: Violet (#7c3aed)
- Secondary: Blue (#3b82f6), Teal (#14b8a6)
- Highlight: Rose (#f43f5e), Amber (#f59e0b)
- Background: Near-black (#0a0a0a)
- Text: White (primary), Neutral-400 (secondary), Neutral-600 (muted)
- Borders: Neutral-800 (default), Violet-500/30 (hover)

SPECIAL EFFECTS:
- Subtle animations with mathematical easing
- Color cycling via HSL rotation
- SVG pattern overlays (dot grids, concentric circles)
- Backdrop blur for glass-panel cards

Animation & Interaction Rules:
- Algorithmic Flow: 交互应体现参数计算过程，可通过网格或渐变层的线性位移模拟噪点流动。
- Parameter Shifting: 悬停时可轻微调整字距与标记形态（如方点旋转），暗示 seed/参数变化，但避免过度花哨。
- Exact Precision: 优先使用 `ease-linear` 与 `duration-200`，保持程序化、可预测的反馈节奏。
- Mathematical Glow: 发光应以清晰几何边缘为主，避免过度雾化导致信息层级变糊。

组件预览与实现

组件变体

font-mono tracking-wide rounded-md transition-all duration-200 bg-violet-600 text-white hover:bg-violet-500 active:scale-[0.98]

button

按钮

Generative Art 风格算法主题按钮

<button className="group relative px-6 py-3 rounded-lg overflow-hidden font-mono text-sm uppercase tracking-[0.18em] bg-violet-900/35 text-violet-300 border border-violet-500/50 hover:border-violet-400 hover:text-white hover:shadow-[0_0_20px_rgba(124,58,237,0.4)] active:opacity-90 transition-all duration-200 ease-linear">
  <div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,rgba(124,58,237,0.3)_50%,transparent_75%)] bg-[length:200%_200%] bg-[0%_0%] group-hover:bg-[100%_100%] transition-all duration-500 ease-linear" />
  <span className="relative z-10 group-hover:tracking-[0.24em] transition-all duration-200 ease-linear">Generate</span>
</button>

<button className="group px-6 py-3 rounded-lg font-mono text-sm uppercase tracking-[0.18em] bg-transparent text-violet-400 border border-violet-500/40 hover:border-violet-400 hover:bg-violet-500/10 hover:shadow-[0_0_14px_rgba(124,58,237,0.25)] transition-all duration-200 ease-linear">
  <span className="group-hover:tracking-[0.24em] transition-all duration-200 ease-linear">Parameters</span>
</button>

card

卡片

Generative Art 风格暗色玻璃卡片

<div className="group bg-neutral-900/80 backdrop-blur rounded-xl p-6 border border-neutral-800 relative overflow-hidden hover:border-violet-500/40 hover:shadow-[0_0_30px_rgba(124,58,237,0.14)] transition-all duration-200 ease-linear cursor-crosshair">
  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(124,58,237,0.05)_2px,rgba(124,58,237,0.05)_4px)] transition-opacity duration-200 ease-linear" />
  <div className="relative z-10">
    <div className="flex items-center gap-3 mb-4">
      <div className="w-2 h-2 rounded-none bg-violet-500 shadow-[0_0_8px_rgba(124,58,237,0.6)] group-hover:rotate-45 transition-transform duration-200 ease-linear" />
      <h3 className="text-violet-400 font-mono text-xs uppercase tracking-[0.2em]">Algorithm // 0x42</h3>
    </div>
    <h4 className="text-white text-lg font-mono font-bold mb-2 group-hover:text-violet-200 transition-colors duration-200 ease-linear">Perlin Noise</h4>
    <p className="text-neutral-400 font-mono text-sm leading-relaxed group-hover:text-neutral-300 transition-colors duration-200 ease-linear">
      Gradient noise function for organic procedural textures. Seed dynamically injected.
    </p>
  </div>
</div>

input

输入框

Generative Art 风格参数输入框

<div className="space-y-2">
  <label className="block text-violet-400 font-mono text-xs uppercase tracking-wider">Seed Value</label>
  <input
    type="text"
    className="w-full px-4 py-3 bg-neutral-950 border border-neutral-700 rounded-lg text-neutral-100 font-mono text-sm placeholder:text-neutral-600 focus:outline-none focus:border-violet-500 focus:shadow-[0_0_10px_rgba(124,58,237,0.2)] transition-all duration-300"
    placeholder="Enter seed..."
  />
</div>

nav

导航栏

Generative Art 风格暗色导航

<nav className="bg-[#0a0a0a]/95 backdrop-blur-sm border border-neutral-800 px-6 py-4 flex justify-between items-center">
  <span className="font-mono text-white font-bold tracking-wider">GenArt</span>
  <div className="flex items-center gap-6 font-mono text-sm text-neutral-400">
    <span className="hover:text-white transition-colors cursor-pointer">Algorithms</span>
    <span className="hover:text-white transition-colors cursor-pointer">Gallery</span>
    <span className="text-violet-400 text-xs">seed: 42</span>
  </div>
</nav>

hero

Hero 区域

Generative Art 风格 Hero，带几何装饰

<section className="relative bg-[#0a0a0a] overflow-hidden pt-32 pb-20 px-6">
  <h1 className="text-white font-mono font-bold text-4xl md:text-6xl mb-4">Generative Art</h1>
  <p className="text-neutral-400 font-mono text-sm md:text-base max-w-xl">
    Algorithm-driven visual aesthetics through mathematical functions and procedural generation.
  </p>
</section>

footer

页脚

Generative Art 风格暗色页脚

<footer className="bg-[#0a0a0a] border border-neutral-800 py-8 px-6">
  <div className="max-w-6xl mx-auto flex justify-between items-center font-mono text-xs text-neutral-600">
    <span>Generative Art Style</span>
    <span>seed: 42 | iterations: 1000</span>
  </div>
</footer>

交互展示

独立打开展示

适用范围与设计理念

应用场景

视觉关键词

Generative Art 风格源自创意编码与算法美学，每一个视觉元素都由数学函数和程序化规则生成。

核心理念：

- 算法驱动：颜色、形状、纹理都通过数学函数生成而非手工绘制

- 参数化设计：通过 seed 值、迭代次数等参数控制输出

- 有序中的混沌：Perlin noise、分形、粒子系统创造自然与数学的交汇

- 代码即艺术：等宽字体、参数标签暗示底层的代码本质

- 暗色画布：近黑背景让算法生成的色彩更加醒目

设计原则：

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

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

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

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

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

应该这样做

背景使用近黑色 bg-[#0a0a0a] 或 bg-neutral-950
使用 HSL 旋转生成算法色板，以紫色 #7c3aed 为基准
所有文字使用 font-mono 等宽字体
用 SVG 几何图案（圆、线、曲线网格）作为装饰背景
展示参数元素：seed 值、坐标、迭代次数等
使用数学缓动函数驱动动画
卡片使用 bg-neutral-900/80 backdrop-blur 的暗色玻璃效果
交互元素使用紫色发光 shadow-[0_0_20px_rgba(124,58,237,0.4)]
交互反馈保持线性精确（ease-linear + duration-200）

避免这样做

禁止使用图片或光栅位图
禁止使用传统 UI 模式（除非加入算法化改造）
禁止使用静态、毫无生气的布局
禁止使用超过 5 种颜色而没有算法依据
禁止使用非程序化派生的装饰元素
禁止使用浅色/白色背景
禁止使用 serif 或 sans 字体（必须用 monospace）
禁止使用 spring、bounce 等拟物弹性动效

全局 CSS

/* Generative Art Global Styles */
@layer base {
  body {
    @apply bg-[#0a0a0a] text-white antialiased;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  }

  ::selection {
    @apply bg-violet-600 text-white;
  }
}

@keyframes gen-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes gen-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}
@keyframes gen-drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(10px, -10px); }
  50% { transform: translate(-5px, 15px); }
  75% { transform: translate(-15px, -5px); }
}
@keyframes gen-hue-cycle {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
/* Generative Art Design Tokens */
:root {
  --generative-art-primary: #7c3aed;
  --generative-art-secondary: #0a0a0a;
  --generative-art-accent: #3b82f6;
  --generative-art-glow: rgba(124, 58, 237, 0.3);
}

.generative-art-card {
  position: relative;
  overflow: hidden;
}

.generative-art-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), transparent);
  pointer-events: none;
}

.generative-art-card:hover::before {
  opacity: 1;
}

.generative-art-gradient {
  background: linear-gradient(135deg, #7c3aed, #3b82f6);
}

.generative-art-gradient-text {
  background: linear-gradient(135deg, #7c3aed, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.generative-art-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(124, 58, 237, 0.08);
}

.generative-art-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.generative-art-animate-in {
  animation: generative-art-fade-in 0.5s ease-out both;
}

布局、色板与 Tokens

主色#7c3aed

次色#0a0a0a

强调色 1#3b82f6

强调色 2#14b8a6

强调色 3#f43f5e

强调色 4#f59e0b

{
  "border": {
    "width": "border",
    "color": "border-neutral-800",
    "radius": "rounded-xl",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_0_10px_rgba(124,58,237,0.15)]",
    "md": "shadow-[0_0_20px_rgba(124,58,237,0.25)]",
    "lg": "shadow-[0_0_40px_rgba(124,58,237,0.4)]",
    "none": "shadow-none",
    "hover": "shadow-[0_0_25px_rgba(124,58,237,0.3)]",
    "focus": "shadow-[0_0_15px_rgba(124,58,237,0.3)]",
    "colored": {
      "violet": "shadow-[0_0_20px_rgba(124,58,237,0.4)]",
      "blue": "shadow-[0_0_20px_rgba(59,130,246,0.4)]",
      "teal": "shadow-[0_0_20px_rgba(20,184,166,0.4)]",
      "rose": "shadow-[0_0_20px_rgba(244,63,94,0.4)]",
      "amber": "shadow-[0_0_20px_rgba(245,158,11,0.4)]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-300",
    "active": "active:scale-[0.98]",
    "hoverScale": "hover:border-violet-500/30 hover:shadow-[0_0_20px_rgba(124,58,237,0.2)]"
  },
  "typography": {
    "heading": "font-mono font-bold",
    "body": "font-mono text-sm",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-4xl md:text-6xl lg:text-7xl",
      "h1": "text-3xl md:text-5xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-lg md:text-xl",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-16 md:py-24",
    "container": "px-6 md:px-8",
    "card": "p-6",
    "gap": {
      "sm": "gap-3",
      "md": "gap-6",
      "lg": "gap-8"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#0a0a0a]",
      "secondary": "bg-neutral-900",
      "accent": [
        "bg-violet-500/10",
        "bg-blue-500/10",
        "bg-teal-500/10"
      ]
    },
    "text": {
      "primary": "text-white",
      "secondary": "text-neutral-400",
      "muted": "text-neutral-600"
    },
    "button": {
      "primary": "bg-violet-600 text-white",
      "secondary": "bg-transparent text-violet-400 border border-violet-500/40",
      "danger": "bg-rose-600 text-white"
    }
  },
  "forbidden": {
    "classes": [
      "bg-white",
      "bg-gray-50",
      "bg-gray-100",
      "bg-slate-50",
      "font-serif",
      "font-sans",
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "rounded-none",
      "text-gray-900"
    ],
    "patterns": [
      "^bg-white",
      "^bg-gray-[1-3]",
      "^bg-slate-[1-3]",
      "^shadow-(?!\\[)",
      "^font-serif",
      "^font-sans"
    ],
    "reasons": {
      "bg-white": "Generative art uses dark backgrounds only",
      "font-serif": "Use monospace fonts for code-art aesthetic",
      "font-sans": "Use monospace fonts for code-art aesthetic",
      "shadow-md": "Use algorithmic glow shadows: shadow-[0_0_20px_rgba(124,58,237,0.4)]",
      "rounded-none": "Use rounded-xl for generative art panels"
    }
  },
  "required": {
    "button": [
      "px-6 py-3",
      "rounded-lg",
      "font-mono",
      "text-sm",
      "transition-all duration-300",
      "border"
    ],
    "card": [
      "bg-neutral-900/80",
      "backdrop-blur",
      "border border-neutral-800",
      "rounded-xl"
    ],
    "input": [
      "bg-neutral-950",
      "border border-neutral-700",
      "rounded-lg",
      "text-neutral-100",
      "font-mono",
      "text-sm",
      "focus:border-violet-500",
      "focus:shadow-[0_0_10px_rgba(124,58,237,0.2)]"
    ]
  }
}

示例提示词

生成艺术画廊

带程序化图案背景和参数控件的生成艺术展示

Create a generative art gallery using Generative Art style:
- Dark background with dot-grid pattern overlay
- Cards for each artwork with SVG geometric illustrations
- Parameter badges showing seed, iterations, scale
- Algorithmic color palette display
- Monospace typography throughout

创意编码工作台

带算法色板生成器的创意编程平台

Build a creative coding playground using Generative Art style:
- Code editor panel with dark theme
- Live preview area with generative patterns
- Color palette generator using HSL rotation
- Parameter sliders for noise scale, seed, iterations
- Algorithm selector (Perlin, Voronoi, Flow Field, Fractal)

作品集展示

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

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