Brandedflow frontend-architect

Elite Frontend Architect system prompt for designing high-end web pages that avoid generic "AI slop" aesthetics. Use when starting a new website build (branded+Flow or any client) to lock design archetype, typography, color direction, motion, and component patterns BEFORE writing code.

install

source · Clone the upstream repo

git clone https://github.com/JenCW/brandedflow

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/JenCW/brandedflow "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.claude/skills-library/frontend-architect" ~/.claude/skills/jencw-brandedflow-frontend-architect && rm -rf "$T"

manifest: .claude/skills-library/frontend-architect/SKILL.md

source content

Frontend Architect

When to Use

Starting a new client website build (or branded+Flow rebuild)
Designing a new landing page, marketing site, or product page
Reviewing a site for "AI slop" signatures (default Inter/Roboto, pure white + generic blue, stock gradient blobs)
Before any code is written — this sets the visual system the code will execute

How to Use

Load this skill at the start of a website design session. Work through the phases in order. Do NOT skip straight to code.

Phase 1 — Design Analysis (Pre-Code)

Before writing any code, explicitly determine:

Design Archetype

Archetype	Characteristics	Font Direction	Color Direction
SaaS/Tech	Clean, systematic, trust-building	Space Grotesk, Plus Jakarta Sans, Geist	Cool neutrals, single accent
Luxury/Editorial	High contrast, refined, unhurried	Playfair Display, Cormorant, Fraunces	Muted earth tones, cream/charcoal
Brutalist/Dev	Raw, intentional ugliness, monospace	JetBrains Mono, IBM Plex Mono	High contrast, primary colors
Playful/Consumer	Rounded, bouncy, approachable	Outfit, Nunito, Quicksand	Saturated, multi-color palettes
Corporate/Enterprise	Conservative, authoritative, accessible	Source Sans 3, Noto Sans	Navy, forest, burgundy anchors
Creative/Portfolio	Experimental, asymmetric, memorable	Syne, Clash Display, Cabinet Grotesk	Bold or monochrome extremes
Editorial Serif Monumental	Huge mixed-case display serif + clean sans, dramatic light↔dark transitions, single pop accent	Cormorant Garamond, Fraunces, Tobias + Plus Jakarta / Suisse / Graphik body	Cream + warm near-black + single saturated pop

Job To Be Done

Conversion: Hero → Value Prop → Social Proof → CTA (F-pattern, clear hierarchy)
Utility/Dashboard: Information density, scannable, minimal chrome
Delight/Brand: Scroll-driven storytelling, immersive, fewer CTAs

Phase 2 — Visual System

Typography

Never use: Inter, Roboto, Open Sans, Lato, Arial, system-ui defaults — these trigger "generic AI" detection.

Instead, import a distinctive font from Google Fonts in

<head>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=[FONT_NAME]:wght@400;500;600;700&display=swap" rel="stylesheet">

Scale: Use a modular type scale with strong contrast (e.g., 14/16/20/32/56/72px). Small body, massive headlines.

Prefer clamp() for responsive fluidity:

font-size: clamp(44px, 7vw, 88px);  /* hero */
font-size: clamp(15px, 1.2vw, 18px); /* body */

Color

Never use: Pure

#FFFFFF

backgrounds paired with generic blue (

#3B82F6

) or purple primaries — this is the "AI slop" signature.

Instead, use intentional palettes:

Off-whites:
```
#FAFAFA
```
,
```
#F5F5F4
```
,
```
#FBF9F7
```
(warm) or
```
#F8FAFC
```
(cool)
Off-blacks:
```
#0A0A0A
```
,
```
#171717
```
,
```
#1C1917
```
Commit to a palette direction — don't float in the middle:
- Warm minimal: Cream, terracotta, charcoal
- Cool tech: Slate, cyan accent, near-black
- Paper/Editorial: Sepia tints, ink black, red accent
- Dark mode: Rich blacks (
```
#0C0C0C
```
  ), not washed-out grays

Spacing & Layout

Use a 4px or 8px base grid. All spacing should be multiples (8, 16, 24, 32, 48, 64, 96, 128)
Generous negative space between sections (96px+ on desktop). Crowded layouts feel cheap
Break the 12-column grid when appropriate — asymmetric layouts (7/5, 8/4) create visual tension
Max content width: 1280px for marketing, 1440px for dashboards
Prefer
```
clamp()
```
for padding/margins too so everything scales fluidly

Phase 3 — Interaction & Motion

Motion Philosophy

Context	Approach
Landing pages	Staggered reveals, scroll-triggered, cinematic (300–500ms ease-out)
Dashboards/Apps	Snappy micro-interactions (150ms), instant feedback
Hover states	Subtle lift ( `translateY(-2px)` ) + shadow increase

Tactile Feedback

.interactive-element {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.interactive-element:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.interactive-element:active {
  transform: translateY(0) scale(0.98);
}

Reduced Motion — Always Include

@media (prefers-reduced-motion: reduce) {
  .interactive-element { transition: none; }
  /* disable all scroll reveals and auto-animations */
}

Phase 4 — Technical Requirements

Icons

Use Lucide via CDN — skip emoji for UI elements:

<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script>lucide.createIcons();</script>
<!-- Usage: <i data-lucide="arrow-right"></i> -->

Accessibility (Always Include)

Color contrast: 4.5:1 minimum for body text (target 7:1 AAA when possible)
Focus states: Visible outline on all interactive elements
Semantic HTML: Use
```
<button>
```
,
```
<main>
```
,
```
<section>
```
appropriately
Alt text on images, aria-labels on icon-only buttons
Respect
```
prefers-reduced-motion: reduce
```

Responsive Strategy

Prefer fluid (clamp) over breakpoint-based type/spacing. Use breakpoints only for structural layout changes:

/* Mobile-first approach — layout only */
@media (min-width: 768px)  { /* two-column grids enabled */ }
@media (min-width: 1024px) { /* full asymmetric splits */ }
@media (min-width: 1280px) { /* content max width hits */ }

Component Patterns

Buttons: Include hover, focus, active, and disabled states
Cards: Consistent border-radius throughout (8px, 12px, or 16px — pick one)
Forms: Visible labels, clear error states, adequate input padding (12–16px)
CTA pills: Full border-radius (
```
border-radius: 999px
```
), uppercase label, letter-spacing
```
0.24em
```
, weight 600–700

Phase 5 — Common Pitfalls to Avoid

Gradient backgrounds that echo Stripe circa 2020
Floating blobs/orbs as decoration (unless explicitly requested)
Default "hero with laptop mockup" layouts
Rainbow gradient text as a go-to effect
Card grids with identical sizing and no visual hierarchy
Sticky navs that obscure content on mobile
Brittany Signature / other script fonts in any high-end B2B context (reads feminine-crafty, not architectural-authoritative — save for consumer/wellness brands)
All-caps long-form headlines (OK for labels and eyebrows, not for H1/H2 body)

Phase 6 — Output Format

When generating a design, ALWAYS produce in this order:

State the Design Archetype selected and why
List the font pairing and color palette (hex values)
Describe the layout strategy in one sentence
Describe the motion/interaction approach in one sentence
Then output complete, functional HTML/CSS/JS

branded+Flow House Rules (applied on top of above)

Authority:
```
foundation/brand/BRAND_GUIDELINES.md
```
§ 0 is the canonical source for branded+Flow palette + fonts. If anything below disagrees with that file, that file wins.
Next.js framework → use
```
process.env
```
, not
```
import.meta.env
```
npm install → always
```
--legacy-peer-deps
```
v2 brand tokens (per BRAND_GUIDELINES.md § 0, locked 2026-04-15):
```
#F5F0E8
```
cream canvas,
```
#1C1C1A
```
warm near-black,
```
#1AAEC7
```
turquoise primary accent, O3 turquoise radial gradient for CTAs/accent surfaces
v2 fonts: Cormorant Garamond (display, mixed-case) + Plus Jakarta Sans (body)
Everything clamped: type sizes, padding, margins, gaps all use
```
clamp(min, preferred, max)
```
Cream ↔ dark section alternation — preferred rhythm for v2 marketing site

Related Skills

```
nextjs-component-builder
```
— for component implementation once design is locked
```
seo-fundamentals
```
— technical SEO requirements to respect during design
```
deploy-preflight
```
— pre-launch checklist