生成艺术

Generative Art

96/100Excellent

Algorithm-driven procedural visual aesthetics using mathematical functions, noise textures, and parametric graphics to create unique dynamic interfaces. Ideal for creative coding, data visualization, and art projects.

generativealgorithmicproceduralnoiseparticlesfractalcode artcreative coding生成艺术算法程序化

View Full Showcase →Templates

Best For

generative / algorithmic / procedural

Primary Move

Use near-black backgrounds bg-[#0a0a0a] or bg-neutral-950

Watch Out

Do not use images or raster bitmaps

Showcase Entry

Live preview of the showcase page. Click to explore the full experience.

View Full Showcase →

Color Palette

Primary

#7c3aed

Secondary

#0a0a0a

Accent 1

#3b82f6

Accent 2

#14b8a6

Accent 3

#f43f5e

Accent 4

#f59e0b

AI Implementation

Copy the Hard Prompt first, then use the spec when needed

Use the Hard Prompt by default to generate UI. Use the Design Spec to understand, modify, and review the style. Use the Creative Brief for early exploration.

Hard Prompt

Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.

When to use

When AI should generate UI directly
When repeated outputs must stay consistent
When style drift is the main risk

How to use

Copy the full prompt
Append the concrete requirement
Review against forbidden rules and UI states

STYLEKIT_STYLE_REFERENCE
style_name: Generative Art
style_slug: generative-art
style_source: /styles/generative-art

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements
- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules
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
- Monospace fonts: font-mono for all text (code-art aesthetic)
- SVG geometric shapes 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

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

Animation & Interaction Rules:
- Algorithmic Flow: Interactions should reflect parameter computation, simulating noise flow through grid or gradient layer linear displacement.
- Parameter Shifting: On hover, slightly adjust letter-spacing and marker shapes (e.g., square dot rotation), hinting at seed/parameter changes without being flashy.
- Exact Precision: Prefer ease-linear with duration-200, maintaining programmatic, predictable feedback rhythm.
- Mathematical Glow: Glow should have clear geometric edges, avoiding excessive fogging that blurs information hierarchy.

Component Templates

Component Preview

按钮

Generative Art 风格算法主题按钮

Frontend Readiness

Dark Mode, States, Motion, and Accessibility

This layer tracks whether the style is ready for real websites: theme modes, state feedback, keyboard access, and performance constraints.

Overall

51%

Fallback

Dark Mode

Missing

UI States

79%

Partial

Motion

70%

Partial

A11y

70%

Partial

Performance

35%

Fallback

Key State Coverage

light

HoverFocus VisibleDisabledLoadingEmptyErrorSuccess

Button

Default / Hover / Focus Visible / Active / Disabled

Input

Default / Hover / Focus Visible / Disabled / Error

Card

Default / Hover / Focus Visible / Loading / Skeleton

Form

Default / Focus Visible / Disabled / Loading / Error

Implementation Notes

No curated dark-mode contract exists yet.
Check contrast in both light and dark modes.
Check heavy shadows, blur, large media, and scroll-linked effects manually.
No style-specific performance cost profile has been curated yet.

Global Styles

Global CSS

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;
}

IDE Integration

IDE Configuration Export

Download configuration files for AI coding assistants to generate code in this style.

Style Pack

Export Style Pack

Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.

Metadata

Style metadata including version information

Design Tokens

Compatible with Figma / Style Dictionary / Tokens Studio

Tailwind Preset

Tailwind CSS theme preset, import directly in config

Global CSS

CSS variables and base styles

shadcn Theme

shadcn/ui theme configuration

CSS Variables

Pure CSS variables, works with any project

SKILL.md

Loadable skill pack for Cursor / Claude Code / VS Code

Design Philosophy

Generative Art style originates from creative coding and algorithmic aesthetics, where every visual element is generated by mathematical functions and procedural rules.

Accessibility

Accessibility Score

WCAG 2.1 compliance analysis based on color contrast and typography readability.

Overall Score

Grade: A - Excellent

Contrast Ratios

Score: 100/100Average Ratio: 19.8:1

AA PassAAA Pass

Context	Colors	Ratio	AA	AAA
Text on background	/#ffffff / #0a0a0a	19.8:1

Readability

Score

85/100

Font Size

text-sm md:text-base

Font Weight

font-mono font-bold

Line Height

default

Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.

生成艺术

Generative Art

96/100Excellent

generativealgorithmicproceduralnoiseparticlesfractalcode artcreative coding生成艺术算法程序化

Best For

generative / algorithmic / procedural

Primary Move

Use near-black backgrounds bg-[#0a0a0a] or bg-neutral-950

Watch Out

Do not use images or raster bitmaps

Copy the Hard Prompt first, then use the spec when needed

Use the Hard Prompt by default to generate UI. Use the Design Spec to understand, modify, and review the style. Use the Creative Brief for early exploration.

Hard Prompt

Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.

When to use

When AI should generate UI directly
When repeated outputs must stay consistent
When style drift is the main risk

How to use

Copy the full prompt
Append the concrete requirement
Review against forbidden rules and UI states

STYLEKIT_STYLE_REFERENCE
style_name: Generative Art
style_slug: generative-art
style_source: /styles/generative-art

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements
- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules
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
- Monospace fonts: font-mono for all text (code-art aesthetic)
- SVG geometric shapes 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

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

Animation & Interaction Rules:
- Algorithmic Flow: Interactions should reflect parameter computation, simulating noise flow through grid or gradient layer linear displacement.
- Parameter Shifting: On hover, slightly adjust letter-spacing and marker shapes (e.g., square dot rotation), hinting at seed/parameter changes without being flashy.
- Exact Precision: Prefer ease-linear with duration-200, maintaining programmatic, predictable feedback rhythm.
- Mathematical Glow: Glow should have clear geometric edges, avoiding excessive fogging that blurs information hierarchy.

Global CSS

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;
}

Export Style Pack

Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.

Metadata

Style metadata including version information

Design Tokens

Compatible with Figma / Style Dictionary / Tokens Studio

Tailwind Preset

Tailwind CSS theme preset, import directly in config

Global CSS

CSS variables and base styles

shadcn Theme

shadcn/ui theme configuration

CSS Variables

Pure CSS variables, works with any project

SKILL.md

Loadable skill pack for Cursor / Claude Code / VS Code

Accessibility Score

WCAG 2.1 compliance analysis based on color contrast and typography readability.

Overall Score

Grade: A - Excellent

Contrast Ratios

Score: 100/100Average Ratio: 19.8:1

AA PassAAA Pass

Context	Colors	Ratio	AA	AAA
Text on background	/#ffffff / #0a0a0a	19.8:1

Readability

Score

85/100

Font Size

text-sm md:text-base

Font Weight

font-mono font-bold

Line Height

default

Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.