Neon Cyberpunkv1.0.0neon-cyberpunk

Neon Cyberpunk Control Grid

Generate dark, high-energy interfaces with neon highlights, grid-based framing, and strong control-room hierarchy.

security dashboardsgaming and streaming control centersdev tools with strong brand identitymusic tech and synth products

Tone

high-energy, technical, cinematic

Density

medium; dense enough to feel like a console, sparse enough to keep neon legible

Mood

futuristic, nocturnal, tactical

Source Type

expressive technical product system

Base Skill Metadata

The YAML record is the source of truth for capability, maturity, and generator guardrails.

Maturity

Stable

Coverage score

76/100

Validation status

Ready for export

Preview coverage

Preview resolved

Supported product types

security dashboardstreaming control roomdeveloper toolmusic tech console

Compatibility tags

dark-uicontrol-roombrand-forwardambient-lightingdense-panels

Anti-patterns to avoid

Do not let neon accents become the only hierarchy mechanism.

Do not flatten the control-room framing into generic dashboard cards.

Do not use soft pastel neutrals that erase the cinematic contrast profile.

Validation report

0 errors1 warnings

Warning: border on background contrast is 1.36:1, below the required 3:1.

Sample prompts

Threat monitoring console

Design a live threat monitoring console with neon signal accents, dense panels, clear alert escalation, and disciplined readability against a dark atmospheric shell.

Streaming rig controller

Generate a control surface for a streaming and audio rig using grid framing, luminous status states, and high-energy but precise operator workflows.

Visual Identity

dark layered panels with glow accents and subtle depth

very high contrast, but managed carefully to avoid eye fatigue

Dark base canvasLocalized neon accentsPanelized control-room compositionTech-forward typography and data labeling

Typography

Orbitron, Rajdhani, IBM Plex Sans, JetBrains Mono

36-64px display with technical confidence and moderate tracking

12px14px16px18px22px

Layout & Rhythm

Dark viewport with panel grid, optional ambient background gradient, and persistent utility navigation

Compose with stacked dark panels, utility rails, and clearly lit active zones.

40px56px72px88px

Tokens

Core design variables from YAML

Compact snapshot of the YAML base. Open only the panels you need when checking exact values or generation rules.

Palette essentials

Only the colors that define the system at a glance.

Primary

#22D3EE

Secondary

#F472B6

Accent

#A3E635

Background

#050816

Token snapshot

Key values that most affect the builder output.

Spacing density

console-like and deliberate

Grouping

Compose with stacked dark panels, utility rails, and clearly lit active zones.

Radius family

angular with selective softened highlights

Typography

Orbitron, Rajdhani, IBM Plex Sans, JetBrains Mono

Layout signature

Structure choices that define this system, not the shared fundamentals.

Page shell

Dark viewport with panel grid, optional ambient background gradient, and persistent utility navigation

Page width strategy

Wide control surfaces with modular panel widths and readable telemetry columns

Header pattern

Command header, live status strip, and primary action cluster

Token details

Structured details from YAML, collapsed by default.

Where It Fits

Best product contexts and intentional misfits for this design language.

Recommended

security dashboardsgaming and streaming control centersdev tools with strong brand identitymusic tech and synth products

Avoid for

calm wellness appstraditional back-office software without brand appetite

UX patterns

High-signal layout and flow guidance.

CTA hierarchy

One lit command action, controlled secondary actions, low-noise tertiary controls.

Form structure

Use grouped configuration blocks and avoid giant mixed-purpose forms.

Table detail strategy

Logs or tables lead to a side panel or dedicated detail screen.

Adaptation boundaries

What can flex, and what must stay coherent.

Adaptable traits

Accent palette can favor cyan, magenta, lime, or amberPanels can be more industrial or more glossyGrid overlays may be visible or subtle

Do not make everything glow.

Do not use neon text for long body paragraphs.

Do not let decorative grid lines compete with real data.

Do not overload the screen with too many accent colors at once.

Component Coverage

Compact inventory of explicit components, with details on demand.

Explicit components

High confidence

Coverage gaps

Missing from declared expectations: Charts.

Generation Guardrails

Essential guidance for the skill generator, grouped by decision type.

Purpose

Create striking command-center interfaces that still function under serious product constraints.

AI role

You are a UI designer shaping a cyberpunk control grid with disciplined hierarchy and readable telemetry.

Anti-drift highlights

Glow remains localized

Body text stays neutral and readable

Panel borders and grouping remain clear

Packaging model

Non stai modificando la base skill, stai derivando una custom skill

La base skill resta il riferimento YAML del catalogo. Il builder sotto serve a produrre un pacchetto custom con metadati propri, override validati e archive esportabile.

Base skill

Record YAML sorgente, usato come sistema di riferimento immutabile.

Name: Neon Cyberpunk Control Grid

Slug: neon-cyberpunk-control-grid

Maturity: Stable

Coverage score: 76/100

Role: definisce token, layout, interaction rules e anti-drift checklist della base.

Custom skill

Pacchetto derivato che puoi rinominare, validare, importare/esportare e scaricare.

Input: delta JSON sopra la base skill.

Output: payload riutilizzabile oppure archive completo con `README.md`, `SKILL.md` e `openai.yaml`.

Guardrail: validazioni su campi obbligatori, slug, hex colors e contrast checks.

Custom Skill Builder

Three editing modes, one controlled derivation model

The base skill remains immutable. This builder lets you edit only the declared scope, persist named drafts, compare revisions, clone an existing custom skill, and export a packaged custom skill with its own metadata.

Base skill to custom skill

Builder mode and editable scope

The available form surface changes with the selected mode, but the data contract does not: `shared_fundamentals` stay locked, while `skill_metadata` and `design_system` remain the editable scope.

Base

neon-cyberpunk

Sections touched

0 / 4

Overrides

Mode switcher

skill_metadatavisual_identityidentity_traitscolorsspacingradiusshadowstypographywidths_breakpointshierarchytypography_rolesinteractionlayoutcomponentsux_patterns

Scope contract

Editable

skill_metadatadesign_system.visual_identitydesign_system.identity_traitsdesign_system.tokensdesign_system.hierarchydesign_system.typography_rolesdesign_system.interactiondesign_system.layoutdesign_system.componentsdesign_system.ux_patternsdesign_system.constraintsdesign_system.skill_generation

Locked

shared_fundamentals

Quick navigation

Jump across the builder without losing the current revision context.

Base skill

Neon Cyberpunk Control Grid

Source YAML from the catalog. It is never edited here.

Custom skill

Neon Cyberpunk Control Grid

Derived package with its own metadata, revision history, and semantic diff.

Validation summary

No blocking errors, 1 warning

Review recommended

colors

Background and surface are too close (1.05:1). Surface hierarchy may collapse.

Draft persistence and revisions

Save the current state, reopen a previous draft, compare revisions, or clone an existing custom skill as a new starting point.

No saved drafts for this base skill yet. Save the current state to create a reusable revision history.

Skill identity

Base skill vs custom skill

Name the derived package, define its slug, and set the packaging metadata that will travel with the exported custom skill.

0 override

Base skill

Neon Cyberpunk Control Grid

neon-cyberpunk-control-grid

Generate dark, high-energy interfaces with neon highlights, grid-based framing, and strong control-room hierarchy.

Custom package

Neon Cyberpunk Control Grid

neon-cyberpunk-control-grid

This becomes the identity of the exported custom package and its semantic metadata file.

Custom skill name

Custom skill slug

Suggested: neon-cyberpunk-control-grid

Custom skill description

Recommended product areas

Avoid for

Palette

Palette and surfaces

Edit the core palette in all modes, then unlock extended token control in advanced and expert modes.

0 override

Primary

#22D3EE

Secondary

#F472B6

Accent

#A3E635

Background

#050816

Surface

#0B1020

Primary

Primary actions, critical buttons, and highest-priority attention points.

#22D3EE

Secondary

Secondary surfaces, quieter containers, and support blocks.

#F472B6

Accent

Highlights, badges, and small signals that energize the system.

#A3E635

Background

Overall canvas and dominant page mass.

#050816

Surface

Cards, dialogs, and panels that need to separate from the background.

#0B1020

Success

Warning

Danger

Border

Text primary

Text secondary

Text muted

Text inverse

Neutral scale

Typography

Typography and tone

Use curated font directions in every mode, then unlock scale, weights, and semantic type roles in advanced and expert mode.

0 override

Tone of voice

Font preview: The quick brown fox jumps over the lazy dog.

Type scale

Font weights

Line heights

Typography roles

Layout

Layout and rhythm

Basic mode edits the main shell and density. Advanced and expert modes unlock richer spacing, radius, layout, and hierarchy controls.

0 override

Control radius

Flow design goal

L’utente sceglie una base YAML, modifica i campi del design system dalla UI, e genera una skill che eredita i fundamentals condivisi e applica gli override utente sulla base selezionata.

Page shell

Spacing tokens

Section gap values, one per line.

Card gaps

Widths

Breakpoints

Page width and navigation rules

Advanced system controls

These sections map to the richer customization plan: visual identity, interaction rules, UX patterns, and component-level rules.

Visual identity

Identity traits

Interaction rules

UX patterns

Components rules

{
  "buttons": {
    "explicit": true,
    "source_basis": "Control-room action patterns",
    "confidence": "high",
    "rules": {
      "variants": [
        "neon-outline",
        "solid-neon",
        "ghost-dark",
        "icon-command"
      ],
      "shape": "angular rounded rectangle or clipped corner",
      "usage": "One dominant lit CTA, others calmer and darker."
    }
  },
  "inputs": {
    "explicit": true,
    "source_basis": "Console settings and search",
    "confidence": "high",
    "rules": {
      "style": "Dark field with clear border, visible label, and strong caret contrast",
      "validation": "Inline status strip or message below field"
    }
  },
  "selects": {
    "explicit": true,
    "source_basis": "Mode and subsystem selection",
    "confidence": "high",
    "rules": {
      "trigger": "Dark trigger with lit active edge"
    }
  },
  "dropdowns": {
    "explicit": true,
    "source_basis": "Command menus",
    "confidence": "high",
    "rules": {
      "surface": "Dark elevated menu with subtle glow and strong active row"
    }
  },
  "cards": {
    "explicit": true,
    "source_basis": "Telemetry and command panels",
    "confidence": "high",
    "rules": {
      "shell": "Dark card, structured border, localized neon accent edge"
    }
  },
  "tables": {
    "explicit": true,
    "source_basis": "Logs and monitoring",
    "confidence": "high",
    "rules": {
      "style": "Prefer compact log tables with calm row rhythm and bright selected state"
    }
  },
  "modals": {
    "explicit": true,
    "source_basis": "Critical confirmations",
    "confidence": "medium",
    "rules": {
      "surface": "Dark dialog with decisive accent status"
    }
  },
  "dialogs": {
    "explicit": true,
    "source_basis": "System edits and confirmations",
    "confidence": "high",
    "rules": {
      "behavior": "Trap focus, keep contrast high, isolate the primary action"
    }
  },
  "sidebars": {
    "explicit": true,
    "source_basis": "Persistent subsystem navigation",
    "confidence": "high",
    "rules": {
      "structure": "Compact utility rail with strong active state"
    }
  },
  "tabs": {
    "explicit": true,
    "source_basis": "Mode switching",
    "confidence": "high",
    "rules": {
      "style": "Lit underline or active panel tab"
    }
  },
  "badges": {
    "explicit": true,
    "source_basis": "Signal and severity chips",
    "confidence": "high",
    "rules": {
      "style": "Small neon-accent chips on dark base"
    }
  },
  "alerts": {
    "explicit": true,
    "source_basis": "System messaging",
    "confidence": "high",
    "rules": {
      "structure": "Dark panel with colored edge light and concise action"
    }
  },
  "empty_states": {
    "explicit": true,
    "source_basis": "No data / offline system",
    "confidence": "high",
    "rules": {
      "composition": "Signal icon, status title, recovery action"
    }
  },
  "charts_containers": {
    "explicit": true,
    "source_basis": "Monitoring dashboards",
    "confidence": "high",
    "rules": {
      "shell": "Dark card with low-noise grid and carefully limited series glow"
    }
  },
  "page_headers": {
    "explicit": true,
    "source_basis": "Mission-control shell",
    "confidence": "high",
    "rules": {
      "composition": "Title, live status, actions, and optional mode tabs"
    }
  },
  "filters": {
    "explicit": true,
    "source_basis": "Telemetry and event views",
    "confidence": "high",
    "rules": {
      "placement": "Subheader toolbar above logs or charts"
    }
  },
  "form_layouts": {
    "explicit": true,
    "source_basis": "Console settings",
    "confidence": "high",
    "rules": {
      "structure": "Grouped configuration panels with clear action footer"
    }
  }
}

Review

Final review

Review the semantic summary, export metadata, and raw override payload before generating the packaged skill.

0 override

Base reference

neon-cyberpunk

Version 1.0.0

Change state

No changes yet

Piano dei campi che la UI puo esporre all’utente per personalizzare il design system prima della generazione della skill.

Semantic diff

No semantic changes yet. The draft still matches the base skill.

custom_skill_metadata

{
  "format_version": "design-skills.custom-skill.v1",
  "custom_skill_id": "neon-cyberpunk-control-grid",
  "base_skill_slug": "neon-cyberpunk",
  "base_skill_name": "Neon Cyberpunk Control Grid",
  "base_skill_version": "1.0.0",
  "builder_mode": "advanced",
  "semantic_diff": [
    "No semantic changes yet. The draft still matches the base skill."
  ],
  "editable_scope": [
    "skill_metadata",
    "design_system.visual_identity",
    "design_system.identity_traits",
    "design_system.tokens",
    "design_system.hierarchy",
    "design_system.typography_roles",
    "design_system.interaction",
    "design_system.layout",
    "design_system.components",
    "design_system.ux_patterns",
    "design_system.constraints",
    "design_system.skill_generation"
  ],
  "locked_scope": [
    "shared_fundamentals"
  ],
  "generated_at": "2026-07-27T18:37:55.529Z"
}

You can still package the base skill with explicit custom metadata and no extra override delta.

user_override_payload

{}

Live preview

The same visual grammar as the detail-page demo, but updated with the current customization values.

Font

Orbitron

Density

console-like and deliberate

Continue browsing

Other design system bases

Back to gallery

Brutalism

Brutalism Interface System

Generate bold UI with hard outlines, confrontational hierarchy, and memorable task-oriented composition.

Glassmorphism

Glassmorphism Product Layers

Generate layered translucent UI with frosted surfaces, luminous gradients, and disciplined readability.

Material Design

Material Design Adaptive

Generate product UI with tokenized surfaces, adaptive elevation, measured motion, and practical, accessible hierarchy.

Neon Cyberpunk Control Grid

Core design variables from YAML

Color systemSemantic states, text colors, border token, neutral scale.

Spacing, radius and sizingDensity rules, spacing steps, radii and content widths.

Typography and depthScale, weights, line heights and shadow tokens.

ButtonshighControl-room action patterns

InputshighConsole settings and search

SelectshighMode and subsystem selection

DropdownshighCommand menus

CardshighTelemetry and command panels

TableshighLogs and monitoring

ModalsmediumCritical confirmations

DialogshighSystem edits and confirmations

SidebarshighPersistent subsystem navigation

TabshighMode switching

BadgeshighSignal and severity chips

AlertshighSystem messaging

Empty StateshighNo data / offline system

Charts ContainershighMonitoring dashboards

Page HeadershighMission-control shell

FiltershighTelemetry and event views

Form LayoutshighConsole settings

Core principles4 rules that set visual and UX direction.

Required coveragePage patterns and expected component families.

Anti-drift checklistThe checks worth running before generation is considered done.

Operating instructionsExecution notes for the generator, stripped of prompt boilerplate.

Non stai modificando la base skill, stai derivando una custom skill

Three editing modes, one controlled derivation model

Other design system bases

Brutalism Interface System

Glassmorphism Product Layers

Material Design Adaptive