Pixel Artv1.0.0pixel-art

Pixel Art Interface Kit

Generate retro 8-bit interfaces with crisp pixels, limited palettes, and gamified but usable interaction patterns.

View shared fundamentals Explore tokens

game dashboardscreative tools for communitiesgamified productivity appsretro-themed landing and profile products

Tone

playful, nostalgic, sharp

Density

low to medium; each pixelated module needs space to remain readable

Mood

retro game UI, arcade utility

Source Type

thematic retro interface language

Base Skill Metadata

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

Maturity

Stable

Coverage score

74/100

Validation status

Ready for export

Preview coverage

Preview resolved

Supported product types

game dashboardcommunity toolgamified productivity appretro landing page

Compatibility tags

playful-uilimited-paletteiconographicgamified-flowsretro-branding

Anti-patterns to avoid

Do not blur edges, gradients, or shadows that break pixel crispness.

Do not overload the interface with long-form reading layouts.

Do not introduce modern rounded controls that clash with tile-based geometry.

Validation report

0 errors1 warnings

Warning: text.inverse on accent contrast is 3.11:1, below the required 4.5:1.

Sample prompts

Guild progress dashboard

Build a retro dashboard for a game guild with crisp pixel borders, limited palette discipline, badge-heavy progression cues, and readable task modules.

Gamified habit tracker

Design a gamified habit tracker that feels 8-bit and rule-driven while preserving clear forms, obvious success states, and simple mobile-safe navigation.

Visual Identity

1-bit or 2-tone shadow blocks, no soft blur

high contrast with limited palette

Crisp pixel edgesLimited paletteBlocky component geometryRetro status and icon language

Typography

Press Start 2P, VT323, monospace

24-32px pixel headline with short wording

12px14px16px20px24px

Layout & Rhythm

Retro HUD shell with framed windows and clear screen-safe margins

Use clearly separated framed panels like game HUD modules.

32px48px64px

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

#2E5BFF

Secondary

#FFD447

Accent

#FF4F8B

Background

#1A1C2C

Token snapshot

Key values that most affect the builder output.

Spacing density

8px grid preferred, with 4px only inside micro-details

Grouping

Use clearly separated framed panels like game HUD modules.

Radius family

square and stepped

Typography

Press Start 2P, VT323, monospace

Layout signature

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

Page shell

Retro HUD shell with framed windows and clear screen-safe margins

Page width strategy

Constrain content to maintain module rhythm and preserve large pixel blocks

Header pattern

Status bar, title strip, and key actions as cartridge-like buttons

Token details

Structured details from YAML, collapsed by default.

Where It Fits

Best product contexts and intentional misfits for this design language.

Recommended

game dashboardscreative tools for communitiesgamified productivity appsretro-themed landing and profile products

Avoid for

very dense enterprise tableslong-form reading-heavy knowledge products

UX patterns

High-signal layout and flow guidance.

CTA hierarchy

Primary block button, secondary tile, tertiary text or icon label.

Form structure

Short, wizard-like, or sectioned rather than long enterprise forms.

Table detail strategy

Row cards or low-column scoreboard with detail panel.

Adaptation boundaries

What can flex, and what must stay coherent.

Adaptable traits

Palette theme can skew fantasy, sci-fi, or pastelPixel font usage can be limited to headings if readability is a concernAnimation can range from static to subtle sprite-like motion

Do not anti-alias decorative pixel elements.

Do not use too many colors or gradients.

Do not force hard-to-read pixel fonts into long body copy.

Do not make forms feel like novelty controls if the task is serious.

Component Coverage

Compact inventory of explicit components, with details on demand.

Explicit components

High confidence

Coverage gaps

Missing from declared expectations: Empty States.

Generation Guardrails

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

Purpose

Create charming retro interfaces that stay usable as real software.

AI role

You are a UI designer translating pixel-art nostalgia into structured digital product flows.

Anti-drift highlights

Palette remains constrained

Edges stay crisp and blocky

Typography remains readable at target sizes

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: Pixel Art Interface Kit

Slug: pixel-art-interface-kit

Maturity: Stable

Coverage score: 74/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

pixel-art

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

Pixel Art Interface Kit

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

Custom skill

Pixel Art Interface Kit

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

Validation summary

No blocking errors, 1 warning

Review recommended

colors

Low contrast for text inverse on accent: 3.11:1. Stay at or above 4.5:1.

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

Pixel Art Interface Kit

pixel-art-interface-kit

Generate retro 8-bit interfaces with crisp pixels, limited palettes, and gamified but usable interaction patterns.

Custom package

Pixel Art Interface Kit

pixel-art-interface-kit

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

Custom skill name

Custom skill slug

Suggested: pixel-art-interface-kit

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

#2E5BFF

Secondary

#FFD447

Accent

#FF4F8B

Background

#1A1C2C

Surface

#24324A

Primary

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

#2E5BFF

Secondary

Secondary surfaces, quieter containers, and support blocks.

#FFD447

Accent

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

#FF4F8B

Background

Overall canvas and dominant page mass.

#1A1C2C

Surface

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

#24324A

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": "Retro game buttons",
    "confidence": "high",
    "rules": {
      "variants": [
        "primary-block",
        "secondary-block",
        "danger-block",
        "icon-tile"
      ],
      "shape": "square or stepped rectangle",
      "usage": "Primary actions use the brightest fill and strongest border."
    }
  },
  "inputs": {
    "explicit": true,
    "source_basis": "Retro forms and naming fields",
    "confidence": "medium",
    "rules": {
      "style": "Blocky input with mono cursor, thick border, visible label",
      "caution": "Avoid long multiline inputs unless body font remains readable"
    }
  },
  "selects": {
    "explicit": true,
    "source_basis": "Option pickers",
    "confidence": "medium",
    "rules": {
      "trigger": "Tile-like trigger with explicit state indicator"
    }
  },
  "dropdowns": {
    "explicit": true,
    "source_basis": "Menu overlays",
    "confidence": "medium",
    "rules": {
      "surface": "Opaque dark panel with pixel border"
    }
  },
  "cards": {
    "explicit": true,
    "source_basis": "Inventory slots and quest panels",
    "confidence": "high",
    "rules": {
      "shell": "Dark panel, crisp light border, title strip, optional icon slot"
    }
  },
  "tables": {
    "explicit": true,
    "source_basis": "Scoreboards or item lists",
    "confidence": "medium",
    "rules": {
      "style": "Prefer row cards or scoreboard tables with low column count"
    }
  },
  "modals": {
    "explicit": true,
    "source_basis": "Pause or confirm screens",
    "confidence": "medium",
    "rules": {
      "surface": "Centered block panel with heavy border and title band"
    }
  },
  "dialogs": {
    "explicit": true,
    "source_basis": "Save, warning, mission complete prompts",
    "confidence": "high",
    "rules": {
      "behavior": "Compact and highly focused; always keyboard navigable"
    }
  },
  "sidebars": {
    "explicit": true,
    "source_basis": "Inventory or level navigation",
    "confidence": "medium",
    "rules": {
      "structure": "Slot-based navigation groups"
    }
  },
  "tabs": {
    "explicit": true,
    "source_basis": "Mode switching",
    "confidence": "high",
    "rules": {
      "style": "Pixel tabs with filled selected state"
    }
  },
  "badges": {
    "explicit": true,
    "source_basis": "Status and rarity labels",
    "confidence": "high",
    "rules": {
      "style": "Small rectangular chips with two-tone contrast"
    }
  },
  "alerts": {
    "explicit": true,
    "source_basis": "Quest updates and warnings",
    "confidence": "high",
    "rules": {
      "structure": "Message box with icon and state color"
    }
  },
  "empty_states": {
    "explicit": true,
    "source_basis": "No items / no quests states",
    "confidence": "high",
    "rules": {
      "composition": "Simple sprite or icon, short copy, recovery CTA"
    }
  },
  "charts_containers": {
    "explicit": true,
    "source_basis": "Score or stat dashboards",
    "confidence": "low",
    "rules": {
      "shell": "Use blocky axes and very limited color series"
    }
  },
  "page_headers": {
    "explicit": true,
    "source_basis": "HUD title bars",
    "confidence": "high",
    "rules": {
      "composition": "Title strip, quick stats, primary action"
    }
  },
  "filters": {
    "explicit": true,
    "source_basis": "Inventory category selectors",
    "confidence": "medium",
    "rules": {
      "placement": "Use segmented tiles rather than subtle pills"
    }
  },
  "form_layouts": {
    "explicit": true,
    "source_basis": "Character setup and settings",
    "confidence": "medium",
    "rules": {
      "structure": "Short labeled rows; avoid overlong form pages"
    }
  }
}

Review

Final review

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

0 override

Base reference

pixel-art

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": "pixel-art-interface-kit",
  "base_skill_slug": "pixel-art",
  "base_skill_name": "Pixel Art Interface Kit",
  "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.433Z"
}

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

Press Start 2P

Density

8px grid preferred, with 4px only inside micro-details

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.

Pixel Art Interface Kit

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.

ButtonshighRetro game buttons

InputsmediumRetro forms and naming fields

SelectsmediumOption pickers

DropdownsmediumMenu overlays

CardshighInventory slots and quest panels

TablesmediumScoreboards or item lists

ModalsmediumPause or confirm screens

DialogshighSave, warning, mission complete prompts

SidebarsmediumInventory or level navigation

TabshighMode switching

BadgeshighStatus and rarity labels

AlertshighQuest updates and warnings

Empty StateshighNo items / no quests states

Charts ContainerslowScore or stat dashboards

Page HeadershighHUD title bars

FiltersmediumInventory category selectors

Form LayoutsmediumCharacter setup and 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