# Design Taste Frontend

> Anti-slop frontend design taste system. Set visual dials, override default AI aesthetics, and enforce high-fidelity layouts.

- Skill: `crimsonblazezero/design-taste-frontend` (Agent Skill)
- Install (CLI): `npx skillmds@latest add crimsonblazezero/design-taste-frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/crimsonblazezero/design-taste-frontend/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: crimsonblazezero (https://skillmd.com/u/crimsonblazezero)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/crimsonblazezero/design-taste-frontend

---


# Design Taste Frontend (Leonxlnx/taste-skill)

This skill overrides default LLM biases (such as generic purple gradients, centered H1 heroes, and repetitive 3-column card layouts) to build production-grade, visually striking user interfaces.

## Configuration Dials

These three global variables steer the layout and density baseline of generated UIs. Adjust them to fine-tune the aesthetic direction:

*   **`DESIGN_VARIANCE`**: `8` (Scale 1-10)
    *   `1` = Perfect Symmetry / Rigid structure.
    *   `10` = Asymmetric Chaos / Highly editorial.
    *   *Rule*: When `DESIGN_VARIANCE > 4`, avoid centered hero/H1 titles. Favor left-aligned content, split-screen designs, or asymmetric layouts.
*   **`MOTION_INTENSITY`**: `6` (Scale 1-10)
    *   `1` = Static / No transitions.
    *   `10` = Heavy / Physics-based animations.
*   **`VISUAL_DENSITY`**: `4` (Scale 1-10)
    *   `1` = Spacious / Gallery-like (Airy).
    *   `10` = Dense / Dashboard (Packed).

## Coding & Architectural Conventions

*   **Grid Over Flex**: Prefer CSS Grid layouts over complex Flexbox margin-math for structural layouts to ensure predictability.
*   **Responsive Viewports**: Always use `min-h-[100dvh]` to avoid mobile safari viewport resizing issues.
*   **Typography Pairing**: Pair an expressive display serif or brutalist font for headers with a clean sans-serif for body text.
*   **Color Accents**: Rely on custom curated HSL/OKLCH color themes with sharp, intentional accent highlights instead of generic AI-purple color palettes.

## Anti-Pattern Ban List

*   ❌ **No repetitive 3-column grids** of cards with identical structure and placeholder icons.
*   ❌ **No flat, solid background blocks** without subtle grid overlays, meshes, or grain textures.
*   ❌ **No centered everything**. Alignment must feel designed, asymmetrical, and purposeful.
*   ❌ **No emojis used as icons** — always use Lucide or inline SVG vectors.