Frontend Taste Engineer
Adapted from https://raw.githubusercontent.com/ai-boost/awesome-prompts/main/prompts/frontend_taste_engineer.txt (ai-boost/awesome-prompts, GPL-3.0) — rewritten, not copied.
Overview
Left to its defaults, an LLM converges on the same UI every time: centered hero, three equal cards, Inter, a purple glow, "John Doe" in a circle avatar. This skill is a set of dials and hard bans applied while generating — it changes what gets written, not what gets flagged after the fact.
Which skill, when
| Situation |
Use |
| Writing new UI/components right now |
this skill — intervenes at generation time |
| UI already exists, looks visually off, needs targeted fixes |
refactoring-ui |
| UI already exists, needs a structured UX audit (flows, trust, consistency) |
ui-ux-pro-max |
| Setting overall aesthetic direction or mood before building |
frontend-design |
These compose: use frontend-design to pick a direction, this skill to generate without drifting generic, then refactoring-ui or ui-ux-pro-max to audit afterward.
The three dials
Set once per project at the default below; override anytime the user asks for something different.
| Dial |
1 |
Default |
10 |
| Layout variance |
perfectly symmetric grid |
8 |
asymmetric, masonry, fractional columns |
| Motion intensity |
static, hover/active only |
6 |
scroll-choreographed, spring physics throughout |
| Visual density |
gallery-airy |
4 |
cockpit-dense, monospace data, no card boxes |
Don't ask the user to tune this file directly — read their prompt for explicit overrides and apply the default otherwise.
Hard bans (regardless of dial settings)
- Typography: no Inter for anything "premium" or "creative" — pick a font with actual character (Geist, Outfit, Cabinet Grotesk, Satoshi). No oversized shouting H1 — carry hierarchy with weight and color, not just size. Serif only in editorial contexts, never on dashboards.
- Color: no pure black — use a near-black instead. One accent color maximum, desaturated below 80%. The "AI purple/blue glow" look is banned outright — a neutral base (zinc/slate) plus one high-contrast accent replaces it.
- Layout: no centered hero text over a dimmed background image; no three-equal-cards-in-a-row feature section (use a zig-zag, an asymmetric grid, or a scroll strip instead).
- Fake content: no "John Doe"/"Sarah Chan" placeholder names, no generic circle-avatar icons, no suspiciously round numbers (
99.9%, 50%) — favor organic-looking data (47.2%). No "Acme"/"Nexus" placeholder brand names. No copywriting filler ("Elevate," "Seamless," "Unleash").
- Motion mechanics: animate
transform/opacity only, never top/left/width/height. Nothing meant to feel premium should ease linearly — use spring physics instead. No custom cursors.
Required states
Every interactive surface ships four states, not just the happy path: loading (a skeleton matched to the real layout, not a generic spinner), empty (tells the user how to populate it), error (inline, next to the field it concerns), and tactile pressed feedback (a small translate or scale-down on press, not just a color change).
Density-specific rule
At visual density 7 and above, drop card containers in favor of dividers or negative space — boxing every metric in its own card reads as templated, not as a dashboard.
Pre-flight check
Before finishing generation, check: the layout collapses to a single column on mobile regardless of desktop variance; full-height sections use a viewport unit that doesn't jump on mobile Safari; every animation loop is isolated so it can't force parent re-renders; loading, empty, and error states all exist.
Note: this skill is deliberately opinionated — the bans are the point, not a suggestion to soften. Where the user explicitly asks for a banned pattern, honor the request and drop the ban for that one instance.
1---2name: frontend-taste-engineer3description: Use before generating new UI/frontend code — components, landing pages, dashboards — to override the model's default drift toward generic, templated-looking interfaces. Applies measurable dials (layout variance, motion intensity, visual density) and a banned-pattern list instead of vague taste calls. Trigger on "make this look premium/distinctive", "avoid generic AI UI", or any fresh component/page generation.4---56# Frontend Taste Engineer78*Adapted from https://raw.githubusercontent.com/ai-boost/awesome-prompts/main/prompts/frontend_taste_engineer.txt (ai-boost/awesome-prompts, GPL-3.0) — rewritten, not copied.*910## Overview11Left to its defaults, an LLM converges on the same UI every time: centered hero, three equal cards, Inter, a purple glow, "John Doe" in a circle avatar. This skill is a set of dials and hard bans applied *while generating* — it changes what gets written, not what gets flagged after the fact.1213## Which skill, when14| Situation | Use |15|---|---|16| Writing new UI/components right now | **this skill** — intervenes at generation time |17| UI already exists, looks visually off, needs targeted fixes | `refactoring-ui` |18| UI already exists, needs a structured UX audit (flows, trust, consistency) | `ui-ux-pro-max` |19| Setting overall aesthetic direction or mood before building | `frontend-design` |2021These compose: use `frontend-design` to pick a direction, this skill to generate without drifting generic, then `refactoring-ui` or `ui-ux-pro-max` to audit afterward.2223## The three dials24Set once per project at the default below; override anytime the user asks for something different.2526| Dial | 1 | Default | 10 |27|---|---|---|---|28| Layout variance | perfectly symmetric grid | **8** | asymmetric, masonry, fractional columns |29| Motion intensity | static, hover/active only | **6** | scroll-choreographed, spring physics throughout |30| Visual density | gallery-airy | **4** | cockpit-dense, monospace data, no card boxes |3132Don't ask the user to tune this file directly — read their prompt for explicit overrides and apply the default otherwise.3334## Hard bans (regardless of dial settings)35- **Typography**: no Inter for anything "premium" or "creative" — pick a font with actual character (Geist, Outfit, Cabinet Grotesk, Satoshi). No oversized shouting H1 — carry hierarchy with weight and color, not just size. Serif only in editorial contexts, never on dashboards.36- **Color**: no pure black — use a near-black instead. One accent color maximum, desaturated below 80%. The "AI purple/blue glow" look is banned outright — a neutral base (zinc/slate) plus one high-contrast accent replaces it.37- **Layout**: no centered hero text over a dimmed background image; no three-equal-cards-in-a-row feature section (use a zig-zag, an asymmetric grid, or a scroll strip instead).38- **Fake content**: no "John Doe"/"Sarah Chan" placeholder names, no generic circle-avatar icons, no suspiciously round numbers (`99.9%`, `50%`) — favor organic-looking data (`47.2%`). No "Acme"/"Nexus" placeholder brand names. No copywriting filler ("Elevate," "Seamless," "Unleash").39- **Motion mechanics**: animate `transform`/`opacity` only, never `top`/`left`/`width`/`height`. Nothing meant to feel premium should ease linearly — use spring physics instead. No custom cursors.4041## Required states42Every interactive surface ships four states, not just the happy path: loading (a skeleton matched to the real layout, not a generic spinner), empty (tells the user how to populate it), error (inline, next to the field it concerns), and tactile pressed feedback (a small translate or scale-down on press, not just a color change).4344## Density-specific rule45At visual density 7 and above, drop card containers in favor of dividers or negative space — boxing every metric in its own card reads as templated, not as a dashboard.4647## Pre-flight check48Before finishing generation, check: the layout collapses to a single column on mobile regardless of desktop variance; full-height sections use a viewport unit that doesn't jump on mobile Safari; every animation loop is isolated so it can't force parent re-renders; loading, empty, and error states all exist.4950Note: this skill is deliberately opinionated — the bans are the point, not a suggestion to soften. Where the user explicitly asks for a banned pattern, honor the request and drop the ban for that one instance.
PresidenteOG