Minimalv1.0.0minimal

Minimal Clarity System

Generate refined, restrained product UI with strong whitespace, quiet hierarchy, and disciplined component reuse.

View shared fundamentals Explore tokens

fintechprofessional servicesknowledge toolsportfolio and profile productsfounder SaaS

Tone

restrained, premium, calm

Density

low to medium with generous whitespace

Mood

focused, mature, editorial

Source Type

refined product design language

Base Skill Metadata

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

Maturity

Advanced

Coverage score

88/100

Validation status

Ready for export

Preview coverage

Preview resolved

Supported product types

fintech productknowledge toolportfolio productfounder SaaSprofessional services platform

Compatibility tags

clarity-firstquiet-brandcontent-ledaccessibility-friendlyconversion-clean

Anti-patterns to avoid

Do not fill whitespace with decorative surfaces or unnecessary widgets.

Do not rely on ultra-light contrast that weakens functional clarity.

Do not introduce multiple competing CTA styles in the same viewport.

Validation report

0 errors1 warnings

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

Sample prompts

Founder analytics workspace

Generate a restrained analytics workspace for a founder SaaS with disciplined spacing, neutral surfaces, clear table hierarchy, and minimal but confident emphasis.

Professional profile flow

Design a profile and onboarding flow for a professional services platform with quiet typography, strong whitespace, and conservative reusable components.

Visual Identity

nearly flat; depth comes from spacing and faint borders

balanced and refined, never noisy

Restraint in color and decorationClear hierarchy through spacing and typographyConsistent component rhythmHigh readability

Typography

Inter, Manrope, system-ui

32-40px semibold, concise and calm

12px14px16px18px20px

Layout & Rhythm

Clean container with generous top spacing and predictable content width

Use whitespace, alignment, and subtle separators to define sections.

48px64px80px96px

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

#111827

Secondary

#E5E7EB

Accent

#0F766E

Background

#FCFCFB

Token snapshot

Key values that most affect the builder output.

Spacing density

generous and consistent

Grouping

Use whitespace, alignment, and subtle separators to define sections.

Radius family

soft but disciplined

Typography

Inter, Manrope, system-ui

Layout signature

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

Page shell

Clean container with generous top spacing and predictable content width

Page width strategy

Constrain reading-heavy areas; allow wider widths only where data needs it

Header pattern

Title, optional subtitle, and restrained action group

Token details

Structured details from YAML, collapsed by default.

Where It Fits

Best product contexts and intentional misfits for this design language.

Recommended

fintechprofessional servicesknowledge toolsportfolio and profile productsfounder SaaS

Avoid for

highly playful youth brandsinterfaces that rely on spectacle for engagement

UX patterns

High-signal layout and flow guidance.

CTA hierarchy

Primary solid action, secondary outline, tertiary text.

Form structure

Short sections, explicit labels, predictable action footer.

Table detail strategy

Use list/table for scanning and a separate page or drawer for details.

Adaptation boundaries

What can flex, and what must stay coherent.

Adaptable traits

Neutral palette temperatureAmount of border usageDegree of roundedness

Do not confuse minimal with empty.

Do not hide affordances to appear cleaner.

Do not introduce decorative gradients or glows without a strong reason.

Do not use too many accent shades.

Component Coverage

Compact inventory of explicit components, with details on demand.

Explicit components

High confidence

Coverage gaps

All expected component families are represented in the YAML profile.

Generation Guardrails

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

Purpose

Create elegant, low-noise interfaces that remain precise and complete.

AI role

You are a product UI designer working with restraint, spacing, and hierarchy rather than spectacle.

Anti-drift highlights

Accent usage remains sparse

Whitespace is preserved

Affordances remain obvious

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: Minimal Clarity System

Slug: minimal-clarity-system

Maturity: Advanced

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

minimal

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

Minimal Clarity System

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

Custom skill

Minimal Clarity System

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.03: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

Minimal Clarity System

minimal-clarity-system

Generate refined, restrained product UI with strong whitespace, quiet hierarchy, and disciplined component reuse.

Custom package

Minimal Clarity System

minimal-clarity-system

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

Custom skill name

Custom skill slug

Suggested: minimal-clarity-system

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

#111827

Secondary

#E5E7EB

Accent

#0F766E

Background

#FCFCFB

Surface

#FFFFFF

Primary

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

#111827

Secondary

Secondary surfaces, quieter containers, and support blocks.

#E5E7EB

Accent

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

#0F766E

Background

Overall canvas and dominant page mass.

#FCFCFB

Surface

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

#FFFFFF

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": "Quiet product CTA patterns",
    "confidence": "high",
    "rules": {
      "variants": [
        "solid",
        "outline",
        "ghost",
        "text"
      ],
      "shape": "subtle rounded rectangle",
      "usage": "Keep labels short and action hierarchy obvious."
    }
  },
  "inputs": {
    "explicit": true,
    "source_basis": "Readable forms",
    "confidence": "high",
    "rules": {
      "style": "Light surface, clear border, visible label, helper text",
      "density": "Comfortable and steady"
    }
  },
  "selects": {
    "explicit": true,
    "source_basis": "Clean form patterns",
    "confidence": "high",
    "rules": {
      "trigger": "Simple bordered field with chevron"
    }
  },
  "dropdowns": {
    "explicit": true,
    "source_basis": "Quiet action menus",
    "confidence": "medium",
    "rules": {
      "surface": "White surface, low shadow, crisp spacing"
    }
  },
  "cards": {
    "explicit": true,
    "source_basis": "Subtle grouped content",
    "confidence": "high",
    "rules": {
      "surface": "White card with faint border or almost flat section wrapper"
    }
  },
  "tables": {
    "explicit": true,
    "source_basis": "Professional data views",
    "confidence": "high",
    "rules": {
      "shell": "Structured table with clear spacing and restrained dividers"
    }
  },
  "modals": {
    "explicit": true,
    "source_basis": "Focused tasks",
    "confidence": "medium",
    "rules": {
      "style": "Minimal chrome, strong title, decisive actions"
    }
  },
  "dialogs": {
    "explicit": true,
    "source_basis": "Confirmations and edits",
    "confidence": "high",
    "rules": {
      "surface": "Calm, readable, uncluttered"
    }
  },
  "sidebars": {
    "explicit": true,
    "source_basis": "Settings and productivity UIs",
    "confidence": "high",
    "rules": {
      "structure": "Clean text hierarchy, minimal icon noise"
    }
  },
  "tabs": {
    "explicit": true,
    "source_basis": "Peer views",
    "confidence": "high",
    "rules": {
      "style": "Underlined or lightly filled tabs"
    }
  },
  "badges": {
    "explicit": true,
    "source_basis": "Status and labels",
    "confidence": "high",
    "rules": {
      "style": "Subtle pill or low-noise rectangle"
    }
  },
  "alerts": {
    "explicit": true,
    "source_basis": "Validation and system messaging",
    "confidence": "high",
    "rules": {
      "structure": "Simple block with concise title and explanation"
    }
  },
  "empty_states": {
    "explicit": true,
    "source_basis": "Onboarding and no-content states",
    "confidence": "high",
    "rules": {
      "composition": "Quiet illustration or icon, short copy, one CTA"
    }
  },
  "charts_containers": {
    "explicit": true,
    "source_basis": "Fintech and reporting layouts",
    "confidence": "medium",
    "rules": {
      "shell": "Flat or lightly elevated card with strong data labeling"
    }
  },
  "page_headers": {
    "explicit": true,
    "source_basis": "Professional content shell",
    "confidence": "high",
    "rules": {
      "composition": "Clean title row and contextual utility actions"
    }
  },
  "filters": {
    "explicit": true,
    "source_basis": "Search and reporting",
    "confidence": "high",
    "rules": {
      "placement": "Toolbar above data; avoid over-segmenting"
    }
  },
  "form_layouts": {
    "explicit": true,
    "source_basis": "Settings and CRUD",
    "confidence": "high",
    "rules": {
      "structure": "Single-column preferred; two-column only when comprehension remains immediate"
    }
  }
}

Review

Final review

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

0 override

Base reference

minimal

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": "minimal-clarity-system",
  "base_skill_slug": "minimal",
  "base_skill_name": "Minimal Clarity System",
  "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.348Z"
}

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

Inter

Density

generous and consistent

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.

Minimal Clarity System

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.

ButtonshighQuiet product CTA patterns

InputshighReadable forms

SelectshighClean form patterns

DropdownsmediumQuiet action menus

CardshighSubtle grouped content

TableshighProfessional data views

ModalsmediumFocused tasks

DialogshighConfirmations and edits

SidebarshighSettings and productivity UIs

TabshighPeer views

BadgeshighStatus and labels

AlertshighValidation and system messaging

Empty StateshighOnboarding and no-content states

Charts ContainersmediumFintech and reporting layouts

Page HeadershighProfessional content shell

FiltershighSearch and reporting

Form LayoutshighSettings and CRUD

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