How to Configure DESIGN_VARIANCE for Different Aesthetic Goals in Taste Skill

DESIGN_VARIANCE is a front-matter numeric dial from 1 to 10 in Taste Skill that controls how far generated layouts deviate from clean, centered symmetry toward adventurous asymmetry.

Taste Skill, available in the Leonxlnx/taste-skill repository, shapes generative UI design through configurable instruction dials at the top of each skill file. Adjusting DESIGN_VARIANCE lets you steer the LLM toward corporate conservatism, modern balance, or experimental boldness without rewriting underlying prompts.

What Is DESIGN_VARIANCE?

DESIGN_VARIANCE is one of three numeric dials located at the top of a Taste Skill instruction file. It tells the LLM how much creative risk to take when suggesting layout structures. Lower values enforce strict grids, while higher values unlock overlapping sections and irregular visual hierarchy.

DESIGN_VARIANCE Value Ranges and Visual Effects

• 1 – 3 (Conservative): Tight grids, strong symmetry, and minimal risk. These settings are ideal for classic corporate dashboards or formal UI kits.
• 4 – 6 (Balanced): Moderate offsets, subtle break-points, and a hint of modern flair. This range works well for product landing pages that need both clarity and personality.
• 7 – 10 (Experimental): Bold asymmetry, overlapping sections, and unconventional hierarchy. This band is suited for creative portfolios, avant-garde apps, or branding concepts that need to stand out.

How DESIGN_VARIANCE Works Under the Hood

Front-Matter Parsing

When a skill is invoked, the SKILL.md file is parsed. According to the source implementation in Leonxlnx/taste-skill, the first three lines after the headline are interpreted as the three dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY.

Prompt Templating

The parsed values are interpolated into a system prompt that instructs the LLM to use the specified variance level to shape the layout. This prompt template lives in skills/taste-skill/SKILL.md.

LLM Response and Validation

The model outputs design directives—such as CSS grid or flex settings and component ordering—that reflect the requested variance level. A lightweight validator then checks that the output respects the variance constraints; for example, it ensures a minimum offset is present when DESIGN_VARIANCE is 7 or higher.

How to Configure DESIGN_VARIANCE via CLI

You can pass the dial directly when adding the skill via the command line.

Conservative UI—low variance:

npx skills add https://github.com/Leonxlnx/taste-skill \
    --skill "design-taste-frontend" \
    --config "DESIGN_VARIANCE=2 MOTION_INTENSITY=3 VISUAL_DENSITY=4"

Balanced UI—moderate variance:

npx skills add https://github.com/Leonxlnx/taste-skill \
    --skill "design-taste-frontend" \
    --config "DESIGN_VARIANCE=5 MOTION_INTENSITY=5 VISUAL_DENSITY=5"

Avant-garde UI—high variance:

npx skills add https://github.com/Leonxlnx/taste-skill \
    --skill "design-taste-frontend" \
    --config "DESIGN_VARIANCE=9 MOTION_INTENSITY=8 VISUAL_DENSITY=7"

How to Configure DESIGN_VARIANCE Programmatically

When embedding the skill via code, pass the same three dials inside a JSON payload:

{
  "name": "design-taste-frontend",
  "settings": {
    "DESIGN_VARIANCE": 8,
    "MOTION_INTENSITY": 6,
    "VISUAL_DENSITY": 5
  }
}

Key Source Files

Understanding the implementation requires looking at these files in the Leonxlnx/taste-skill repository:

• skills/taste-skill/SKILL.md – Contains the front-matter parser and prompt template where the numeric dials are read and injected into the LLM prompt.
• README.md – The Settings section lists DESIGN_VARIANCE and the other dials, explaining their intended visual effects.
• CHANGELOG.md – Tracks revisions to how variance is interpreted across versions.

Summary

• DESIGN_VARIANCE is a 1–10 front-matter dial in Taste Skill that governs layout risk and aesthetic deviation.
• Values 1–3 produce conservative symmetry, 4–6 produce balanced modern layouts, and 7–10 produce experimental asymmetry.
• The value is parsed from the top of SKILL.md, templated into the system prompt in skills/taste-skill/SKILL.md, and validated after LLM generation.
• You can set it via the --config CLI flag or through a JSON settings object when calling the skill programmatically.

Frequently Asked Questions

What files control how DESIGN_VARIANCE is parsed?

The front-matter parser reads the first three lines after the headline in SKILL.md to extract DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY. The prompt template that consumes this value lives in skills/taste-skill/SKILL.md.

Can I use DESIGN_VARIANCE without changing the other dials?

Yes. Although all three dials are read together, you can set only DESIGN_VARIANCE while keeping MOTION_INTENSITY and VISUAL_DENSITY at their defaults. The skill interpolates whichever values you provide into the prompt template.

Does a high DESIGN_VARIANCE guarantee asymmetrical output?

Not automatically. A lightweight validator enforces minimum constraints—such as ensuring a layout offset when DESIGN_VARIANCE is 7 or higher—but the LLM still generates design directives within those guardrails. The dial raises the probability and allowed range of asymmetry rather than forcing a specific layout.

Where is DESIGN_VARIANCE documented in the repository?

The README.md file contains the Settings (taste-skill only) section that defines the dial ranges. Implementation details, including front-matter parsing and prompt construction, are found in skills/taste-skill/SKILL.md.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}