MADE:Explorations · Features

Teaching AI Taste

A design discipline that rewires LLM defaults — replacing centered heroes, Inter font, purple gradients, and placeholder code with testable, named bans and parametric controls.

Active · v0.3.0 · MIT License
May 2026 · michaeljabbour/amplifier-bundle-taste
The Problem

AI output
looks the same

🎨

Statistical Slop

LLMs have hardcoded priors toward mediocre output: centered heroes, Inter font, purple-blue gradients, 3-column equal-width card grids, h-screen, and rounded-full on every button.

📋

Placeholder Theater

Generated code trails off with // ... placeholders, "for brevity" hedges, and "rest of the code here" elisions. The output looks complete but isn't.

✍️

Copy Clichés

"Elevate Your Workflow." "Seamless integration." "Next-gen platform." LLMs reach for the same startup-slop brand names and marketing clichés every time.

Same prompt, same model — 8 banned patterns in a single hero component: centered hero, h-screen, purple gradient, Inter font, "Elevate" cliché, "Seamlessly" cliché, "next-gen" cliché, rounded-full CTA.

— Before/after analysis, amplifier-bundle-taste README
The Solution

Testable bans,
not vibes

Named, hard bans that are checkable in 5 seconds by visual inspection or grep. Three parametric dials that act as global configuration variables. No vibes — only switches.

1

Hard Ban List

50+ named forbidden patterns merged across all archetypes. Each ban has a 5-second test: grep the source or inspect the rendered page. Inter font, purple gradients, h-screen, placeholder names, AI copywriting clichés — all banned by name.

2

Three Parametric Dials

DESIGN_VARIANCE (1–10): layout symmetry. MOTION_INTENSITY (1–10): animation richness. VISUAL_DENSITY (1–10): content packing. Threshold crossings activate or ban specific patterns automatically.

3

Four Aesthetic Archetypes

Minimalist (Notion/Linear), Brutalist (Swiss Industrial), Soft-Editorial (Ethereal Glass), GPT-Strict (Codex/GSAP). Mutually exclusive overlays on a shared base. Pick one, get a coherent design language.

4

Output Discipline

Always-on behavior banning // ... placeholders, "for brevity" hedges, and structural elision. Defines a clean pause/resume protocol for token-limited outputs. Mount on every session that produces code.

Before & After

Same prompt. Same model.
Completely different output.

Without taste bundle

<section class="h-screen flex items-center justify-center bg-gradient-to-br from-purple-600 to-blue-600"> <h1 class="font-[Inter]"> Elevate Your Workflow </h1> Seamlessly integrate next-gen AI... <button class="rounded-full">
h-screen centered hero purple gradient Inter font "Elevate" "Seamlessly" "next-gen" rounded-full

With design-taste + minimalist

<section class="min-h-[100dvh] grid grid-cols-12 bg-[#FBFBFA]"> <h1 class="font-[Cabinet_Grotesk] text-[clamp(3rem,7vw,6rem)]"> Notes that think with you. </h1> Ships next quarter. <button class="rounded-md">
100dvh asymmetric grid no gradient Cabinet Grotesk concrete copy off-black #111 rounded-md

The bundle didn't add new code paths or libraries — it shifted the model's defaults. Same prompt, same complexity, completely different output quality.

Aesthetic Archetypes

Four design languages, one base

Each archetype overlays the shared base with its own palette, type stack, motion budget, and layout posture. Mutually exclusive — never compose two together.

Minimalist

Notion / Linear. Off-white backgrounds, Cabinet Grotesk + Newsreader pairing, Phosphor Bold icons. Gradients banned. Shadows < 0.05 opacity. Editorial restraint.

Brutalist

Swiss Industrial / CRT. 90° corners everywhere. border-radius banned. Monospace-heavy. Uppercase structural headers. Dark substrates with high-contrast data.

Soft-Editorial

Ethereal Glass / Luxury. Doppelrand double-bezel architecture. Floating glass pill nav. backdrop-blur-2xl required. Ultra-light Phosphor/Remix icons. Button-in-button CTAs.

GPT-Strict

Codex / GSAP-heavy. XML design plan. Standalone — replaces the base. Hero headlines capped at 2–3 lines. grid-flow-dense mandatory. No cheap meta-labels.

Composition rule: base + exactly one archetype, or gpt-taste standalone (replaces base).
Architecture

What's in the box

🎯

7 Skills

Base design-taste, 4 archetype overlays, redesign, output-discipline, design-context-generator

🤖

2 Agents

Component Designer (implements from specs) and Design Critic (audits against ban list)

📐

3 Recipes

Image-to-code, design-system-bootstrap, redesign-audit

📚

6 Context Docs

Dials, ban list, Bento 2.0, creative arsenal, variations, output-discipline research

Skills Layer

Prompt-level design rules. The base skill provides architecture, performance guardrails, and bans. Archetypes override the aesthetic dialect.

Agent Layer

Component Designer implements designs faithfully from analysis docs. Design Critic audits with structured violation reports and file:line citations.

Recipe Layer

Multi-stage workflows with approval gates. Image-to-code: generate references → analyze → implement. Design-system-bootstrap: interview → archetype-pick → DESIGN.md.

Workflows

Three recipes for three use cases

A

Image-to-Code

Generate N section reference images via imagegen MCP → systematic visual analysis (typography, spacing, palette, anti-drift flags) → approval gate → faithful frontend implementation. Three stages with phase-gating. No shortcuts, no simplification.

B

Design System Bootstrap

Interview the user about their project → recommend an archetype with reasoning → approval gate → write a self-contained DESIGN.md with concrete hex codes, rem values, and component conventions. One-time setup, permanent reference.

C

Redesign Audit

Scan existing codebase against the full ban list → structured violation report with file:line citations → approval gate → targeted fixes. Upgrades existing projects in place without migrating frameworks.

The image-to-code recipe replaces a 1,228-line monolithic upstream skill with a 3-stage declarative YAML workflow — because sequential pipelines with phase-gates are recipes, not skills.

Parametric Controls

Three dials, not vibes

Global variables that drive branching logic throughout the skill body. Threshold crossings are switches, not suggestions.

DESIGN_VARIANCE

Default: 8 · Range: 1–10

1–3: Symmetrical grids, centered layouts
4–7: Offset overlapping, varied aspect ratios
8–10: Masonry, fractional grid units, massive empty zones

> 4: Centered hero is banned

MOTION_INTENSITY

Default: 6 · Range: 1–10

1–3: CSS :hover and :active only
4–7: Custom cubic-bezier transitions, cascades
8–10: Scroll-triggered reveals, Framer Motion hooks

> 5: Magnetic micro-physics enabled

VISUAL_DENSITY

Default: 4 · Range: 1–10

1–3: Art gallery, huge section gaps
4–7: Normal web app spacing
8–10: Cockpit density, font-mono for numbers

> 7: Card containers are banned

Defaults set to (8, 6, 4) — deliberately pushing away from the symmetric, static, card-spam baseline that LLMs default to.
By the Numbers

Bundle at a glance

7
Design skills
4
Aesthetic archetypes
50+
Named hard bans
3
Parametric dials
3
Multi-stage recipes
~3K
Lines of design guidance

Adapted from Leonxlnx/taste-skill — a curated SKILL.md collection of Awwwards-tier engineering rules. This bundle ports the original into Amplifier-native skills, behaviors, context files, and recipes without changing the substantive design guidance.

— Original work by Leonxlnx, adapted by michaeljabbour
Sources & Methodology

How we built this story

Primary source: michaeljabbour/amplifier-bundle-taste repository (cloned from GitHub, May 2026).

Methodology: Repository cloned via gh repo clone. All statistics derived from git log, git shortlog, find, and wc -l. No numbers are estimated — all are direct measurements from the source.

More Amplifier Stories