Frontend Design — Front of House
"Build front-end UIs"
When to use
- It is time to write real interface code — "build the landing page", "code this dashboard UI".
- An existing front-end looks generic — "this screams AI-generated, give it a point of view".
- A design system exists and needs its first consumer — pairs with
ui-ux-pro-max tokens.
- The user wants craft, not scaffolding — "make it feel expensive", "no template energy".
Workflow
- Commit to one art direction before writing a line. Editorial (serif display, generous
whitespace, hairline rules), brutalist (raw borders, mono, hard shadows), soft-depth (layered
surfaces, tinted shadows), retro-terminal (phosphor palette, restraint with the scanlines),
industrial (dense, technical, visible grid) — or argue for another. Write the direction as one
sentence; every later decision must serve it.
- Set the typographic reality. Two families max; display size at least 3x body — no
14/16/18 mush. Tighten letter-spacing on large sizes, widen it on small caps and labels.
Load one hosted family at most; fall back to a deliberate system stack.
- Structure in semantic HTML first. Landmarks (header/nav/main/section/footer), heading
order without skips, buttons are
<button>, links are <a>, inputs have labels. No div soup.
- Style with intent. Spacing on one scale, color through role variables, and exactly one
signature move executed hard — an oversized numeral, an asymmetric grid, sticky marginalia, an
unexpected hover. One. Not four.
- Craft the custom details.
::selection tinted to the palette, :focus-visible rings
designed rather than default blue, cursor changes where they mean something, real empty and
error states.
- Wire interactions in vanilla JS — or the project's existing framework. Event delegation,
no dependencies for what CSS already does.
- Run the anti-slop checklist below. Any hit is rework, not an excuse.
- Deliver one self-contained file (or components matching repo conventions) opening with a
three-line comment: the art direction, its rules, its one signature move.
Anti-slop checklist
Reject on sight: purple/indigo gradient hero — glassmorphism without a reason — emoji as icons —
the three-feature-cards-with-rounded-icons row — default-Tailwind sameness (stacks of
p-4 rounded-xl shadow-md cards) — Inter-on-white with blue-600 buttons — transition: all —
border-radius 12px on everything — "Supercharge your workflow" copy — perfectly symmetric
everything. Any hit means rework before delivery.
Output format
<!-- direction: EDITORIAL — serif display, hairline rules, ivory ground, one oxblood accent.
rules: no gradients; hierarchy via size and weight only; hover = underline offset shift.
signature: oversized drop-cap section numerals. -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Product — the one-line promise</title>
<style>
/* 1. tokens 2. layout 3. components 4. details (::selection, :focus-visible, cursor) */
</style>
</head>
<body>
<header><!-- nav, one primary action --></header>
<main><!-- sections in document order, headings intact --></main>
<footer><!-- real links, no dead ends --></footer>
<script>/* minimal, event-delegated */</script>
</body>
</html>
Quality bar
Example
Invocation: "Build a landing page for a bakery-focused POS startup — warm but not cute."
Produces: One index.html (~350 lines), direction "editorial-warm": Fraunces display over a
system sans, flour-white ground with rye-brown ink and one burnt-orange accent, an oversized
ligature headline as the signature move, hairline section rules, oxblood ::selection, designed
focus rings on the pricing table — no gradient, no emoji, no card-grid hero.
1---2name: frontend-design3description: Writes production-grade, distinctive interface code — one strong art direction (editorial, brutalist, soft-depth, retro-terminal), a real typographic scale, custom details (cursor, selection, focus states), semantic HTML, delivered as a single file or as components. Ships with an anti-AI-slop checklist so nothing leaves looking template-made. Use when the user says "build this page", "code the UI", "make me a beautiful front-end", or "this looks like every AI site — redo it".4---56# Frontend Design — Front of House78> "Build front-end UIs"910## When to use1112- It is time to write real interface code — "build the landing page", "code this dashboard UI".13- An existing front-end looks generic — "this screams AI-generated, give it a point of view".14- A design system exists and needs its first consumer — pairs with `ui-ux-pro-max` tokens.15- The user wants craft, not scaffolding — "make it feel expensive", "no template energy".1617## Workflow18191. **Commit to one art direction before writing a line.** Editorial (serif display, generous20 whitespace, hairline rules), brutalist (raw borders, mono, hard shadows), soft-depth (layered21 surfaces, tinted shadows), retro-terminal (phosphor palette, restraint with the scanlines),22 industrial (dense, technical, visible grid) — or argue for another. Write the direction as one23 sentence; every later decision must serve it.242. **Set the typographic reality.** Two families max; display size at least 3x body — no25 14/16/18 mush. Tighten letter-spacing on large sizes, widen it on small caps and labels.26 Load one hosted family at most; fall back to a deliberate system stack.273. **Structure in semantic HTML first.** Landmarks (header/nav/main/section/footer), heading28 order without skips, buttons are `<button>`, links are `<a>`, inputs have labels. No div soup.294. **Style with intent.** Spacing on one scale, color through role variables, and exactly one30 signature move executed hard — an oversized numeral, an asymmetric grid, sticky marginalia, an31 unexpected hover. One. Not four.325. **Craft the custom details.** `::selection` tinted to the palette, `:focus-visible` rings33 designed rather than default blue, cursor changes where they mean something, real empty and34 error states.356. **Wire interactions in vanilla JS** — or the project's existing framework. Event delegation,36 no dependencies for what CSS already does.377. **Run the anti-slop checklist below.** Any hit is rework, not an excuse.388. **Deliver** one self-contained file (or components matching repo conventions) opening with a39 three-line comment: the art direction, its rules, its one signature move.4041## Anti-slop checklist4243Reject on sight: purple/indigo gradient hero — glassmorphism without a reason — emoji as icons —44the three-feature-cards-with-rounded-icons row — default-Tailwind sameness (stacks of45`p-4 rounded-xl shadow-md` cards) — Inter-on-white with blue-600 buttons — `transition: all` —46border-radius 12px on everything — "Supercharge your workflow" copy — perfectly symmetric47everything. Any hit means rework before delivery.4849## Output format5051```html52<!-- direction: EDITORIAL — serif display, hairline rules, ivory ground, one oxblood accent.53 rules: no gradients; hierarchy via size and weight only; hover = underline offset shift.54 signature: oversized drop-cap section numerals. -->55<!doctype html>56<html lang="en">57<head>58 <meta charset="utf-8">59 <meta name="viewport" content="width=device-width, initial-scale=1">60 <title>Product — the one-line promise</title>61 <style>62 /* 1. tokens 2. layout 3. components 4. details (::selection, :focus-visible, cursor) */63 </style>64</head>65<body>66 <header><!-- nav, one primary action --></header>67 <main><!-- sections in document order, headings intact --></main>68 <footer><!-- real links, no dead ends --></footer>69 <script>/* minimal, event-delegated */</script>70</body>71</html>72```7374## Quality bar7576- [ ] Art direction named in the header comment and recognizable within three seconds of load77- [ ] Zero hits on the anti-slop checklist78- [ ] Semantic HTML throughout: landmarks, intact heading order, real controls79- [ ] `:focus-visible` styled on every interactive element; AA contrast on all text80- [ ] Exactly one signature move — visible, deliberate, serving the direction81- [ ] No horizontal scroll at 360px or 1440px; text measures stay between 45 and 75ch8283## Example8485**Invocation:** "Build a landing page for a bakery-focused POS startup — warm but not cute."8687**Produces:** One `index.html` (~350 lines), direction "editorial-warm": Fraunces display over a88system sans, flour-white ground with rye-brown ink and one burnt-orange accent, an oversized89ligature headline as the signature move, hairline section rules, oxblood `::selection`, designed90focus rings on the pricing table — no gradient, no emoji, no card-grid hero.
alebgl77