How to Utilize Brief Inference in Taste Skill to Guide Front-End Design Before Development

Brief Inference is the mandatory first step in the Taste Skill workflow that extracts high-level signals from a project brief to generate a declarative design read, which then constrains all downstream design decisions through three global dials and design-system selection.

The Leonxlnx/taste-skill repository implements a disciplined, anti-slop workflow for LLM-generated front-end code. Before generating any markup or CSS, you must utilize Brief Inference to anchor the generation process in concrete user requirements rather than default AI aesthetic impulses. This step ensures every subsequent layout, motion, and component choice stems from a purpose-first interpretation of the brief.

What is Brief Inference

In the context of Taste Skill, Brief Inference is the act of "reading the room" before development begins. Defined in [SKILL.md – Section 0 BRIEF INFERENCE](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#0-brief-inference), this step requires the agent to analyze six specific input signals and distill them into a one-line design read.

The Six Input Signals

According to the source code in skills/taste-skill/SKILL.md, the agent scans for these concrete cues:

• Page kind – landing, portfolio, redesign, or editorial (lines 13‑19)
• Vibe words – minimalist, brutalist, Apple‑y, etc. (lines 19‑20)
• Reference signals – URLs or screenshots provided by the user (lines 20‑21)
• Target audience – B2B buyers, design‑conscious consumers, or enterprise CTOs (lines 21‑22)
• Brand assets – logos, color hex codes, and typography files (lines 22‑23)
• Quiet constraints – accessibility requirements or regulated industry rules (lines 23‑24)

From these signals, the agent composes a Design Read using the strict format defined in lines 25‑31: Reading this as: <page kind> for <audience>, with a <vibe> language, leaning toward <design system / aesthetic family>.

The Three Architectural Purposes

Brief Inference serves three critical architectural functions that prevent "default-aesthetic drift" in generated code.

Contextual Grounding

By forcing the LLM to articulate a design read based solely on user-supplied signals, the workflow overrides the model's innate tendency toward generic glass-morphism, AI-purple gradients, or other "slop" aesthetics. The anti-default discipline explicitly forbids these patterns (lines 38‑40), ensuring the output reflects the user's intent rather than the training data's average.

Dial Calibration

The design read directly drives the three global dial values defined in Section 1 THE THREE DIALS:

• DESIGN_VARIANCE (1‑10)
• MOTION_INTENSITY (1‑10)
• VISUAL_DENSITY (1‑10)

For example, a design reading mentioning "minimalist" and "restrained motion" maps to DESIGN_VARIANCE=5‑6, MOTION_INTENSITY=3‑4, and VISUAL_DENSITY=2‑3 (lines 56‑57). These numeric gates constrain every subsequent layout and animation decision.

Design-System Selection

Rather than inventing ad-hoc CSS classes, the agent uses the design read to select an official UI kit via the Brief → Design System Map in Section 2. A minimalist vibe triggers Tailwind CSS, while a Microsoft-style context selects Fluent UI, ensuring architectural consistency with established component libraries.

Implementing the Brief Inference Workflow

To utilize Brief Inference in your development process, follow this sequential pipeline implemented in the skill.sh wrapper script.

Step 1: Generate the Design Read

Submit a structured brief to the Taste Skill agent. The first line of the LLM response must be the design read.

# Prompt sent to the Taste‑Skill LLM

---
brief: |
  Create a landing page for a new AI‑powered analytics SaaS.
  Minimalist, clean, targeting CTOs in large enterprises.
  Brand assets: logo.svg, #1A73E8 primary colour.
  No flashy animations – focus on trust.
---

Expected output:

Reading this as: SaaS landing for enterprise CTOs, with a minimalist language, leaning toward Tailwind utilities + Geist + restrained motion.

Step 2: Infer the Three Dials

Parse the design read to set the global constraint variables. The infer_dials logic maps keyword patterns to numeric ranges:

def infer_dials(design_read: str) -> dict:
    """Map design read to dial values based on SKILL.md Section 1."""
    design_read = design_read.lower()
    
    if "minimalist" in design_read and "restrained" in design_read:
        return {
            "DESIGN_VARIANCE": 5,
            "MOTION_INTENSITY": 3, 
            "VISUAL_DENSITY": 2
        }
    elif "premium consumer" in design_read:
        return {
            "DESIGN_VARIANCE": 8,
            "MOTION_INTENSITY": 6,
            "VISUAL_DENSITY": 4
        }
    
    # Safe fallback preventing maximum chaos

    return {
        "DESIGN_VARIANCE": 7,
        "MOTION_INTENSITY": 6, 
        "VISUAL_DENSITY": 4
    }

Step 3: Select the Design System

Use the design read to resolve the technical stack:

DESIGN_SYSTEM_MAP = {
    "minimalist": "tailwindcss",
    "microsoft": "fluentui",
    "material": "material/web",
    "shopify": "polaris.js"
}

def pick_design_system(design_read: str) -> str:
    """Match vibe keywords to official UI kits."""
    design_read = design_read.lower()
    
    for keyword, pkg in DESIGN_SYSTEM_MAP.items():
        if keyword in design_read:
            return pkg
            
    return "tailwindcss"  # Safe default as per SKILL.md

Full Integration Example

Combine these steps into the complete workflow defined in the repository:

def taste_skill_workflow(brief: str) -> dict:
    """Execute the mandatory Brief Inference pipeline."""
    # Step 0: Generate design read (SKILL.md Section 0)

    design_read = generate_design_read(brief)
    
    # Step 1: Calibrate dials (SKILL.md Section 1)

    dials = infer_dials(design_read)
    
    # Step 2: Select framework (SKILL.md Section 2)

    framework = pick_design_system(design_read)
    
    return {
        "design_read": design_read,
        "dials": dials,
        "framework": framework,
        # Passed to downstream layout/motion generators

    }

Summary

• Brief Inference is the mandatory zeroth step in skills/taste-skill/SKILL.md that extracts six concrete signals from user input.
• The output is a one-line Design Read that eliminates default AI aesthetic drift through anti-default discipline.
• Three numeric dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) gate all downstream decisions based on the design read.
• A design-system map translates vibe words into official UI kits like Tailwind CSS or Fluent UI.
• This workflow ensures front-end prototypes are purpose-first rather than model-first.

Frequently Asked Questions

What happens if the brief is ambiguous or lacks specific vibe words?

According to lines 33‑35 of SKILL.md, the agent must ask clarifying questions before proceeding. The workflow explicitly forbids guessing or falling back to generic aesthetics when signals are missing. You must resolve ambiguity regarding audience, constraints, or brand assets to generate a valid design read.

Can I skip Brief Inference and proceed directly to code generation?

No. The skill.sh wrapper and the architectural contract in SKILL.md enforce Brief Inference as non-optional. Skipping this step would result in uncalibrated dials and ad-hoc CSS that violates the anti-slop principles, leading to the "AI-purple gradient" defaults the workflow is designed to prevent.

How do the three dials affect actual component selection?

The dials act as global constraints. For example, if MOTION_INTENSITY is inferred as 3 (low), the motion scripting stage will reject spring animations and parallax effects, opting instead for subtle opacity fades. Similarly, a VISUAL_DENSITY of 2 triggers generous whitespace and single-column layouts, while a value of 8 produces compact, information-dense grids.

Where can I customize the design-system mappings?

The Brief → Design System Map lives in Section 2 of skills/taste-skill/SKILL.md. You can extend the mapping table to include additional UI kits like Radix UI or Chakra UI by adding new vibe keywords and their corresponding package names, then updating the pick_design_system logic in your implementation.

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