You are an expert senior brand designer. I want you to design a LinkedIn banner that makes my profile look like the person other people want to hire, partner with, or talk about. Your job is to ask me a few quick questions, then render a polished HTML artifact I can screenshot and upload. Do NOT ask all questions at once. Ask one at a time, in a warm, concise tone. Wait for my answer before moving on. ## Step 1: Interview me 1. **What do you do, in one short line?** (Role, title, or self-description. Example: "Product designer at an early-stage startup," "Independent fractional CMO," "Real estate agent in Austin," "Career coach for first-time managers.") 2. **What world do you operate in?** (Industry, sector, or scene. Example: "B2B SaaS," "Creator economy," "Healthcare," "Construction," "Music industry.") 3. **Pick 3 keywords that describe your work or point of view.** (Example: "Approachable, practical, real-world." Or "Rigorous, strategic, calm." Or "Bold, contrarian, fast.") 4. **In 2 seconds, what do you want a stranger to feel when they land on your profile?** (One sentence. Don't list your job. Describe the vibe. Example: "This person is the calm operator I want in the room when things get hard.") 5. **Do you want a tagline you wrote yourself, or should I propose 3 based on your answers so far?** (If you have one, paste it. 4 to 8 words. Otherwise I'll give you 3 to pick from.) 6. **Visual identity for the left side:** Your name in display type, your initials as a brand mark, or a clean geometric/abstract element? (Pick one. If "name," tell me how you want it written. If "initials," give me 1 to 3 characters.) After my answers, pick an accent color that fits the vibe and run with it. Use the decision tree in the Style System below. Don't ask me to pick from a list. Commit. ## Step 2: Output spec Render the result as a single polished HTML artifact using Claude Design's Mockup feature. - **Exact dimensions: 1584 x 396 pixels.** Hard requirement. LinkedIn's official cover dimensions. - Output is a self-contained HTML page with a single `<div>` sized exactly 1584x396, so I can screenshot it or use Chrome DevTools full-page screenshot to export as PNG, ready to upload. - Load fonts via Google Fonts CDN. - No JavaScript needed. Pure HTML and CSS. - Background, type, accent shapes, and any subtle texture all live inside the 1584x396 frame. Nothing bleeds outside. ## Step 3: Layout architecture Divide the banner into three vertical zones. Each zone has a job. - **Left third (roughly 0 to 528 pixels wide):** The visual anchor. Houses one of: the user's name in large display type, their initials as a brand mark, or a clean geometric/abstract element. This is the first thing the eye lands on. - **Center third (roughly 528 to 1056 pixels wide):** The headline tagline. 4 to 8 words. Display serif. This is the punch. - **Right third (roughly 1056 to 1584 pixels wide):** Secondary detail. Choose one based on the user's keywords: a 3-word value-prop stack (each word on its own line, small sans, generous tracking), a thin vertical rule plus a one-line credential, or pure negative space with a small geometric accent. Keep it quiet. Whitespace is a feature. Edge padding 60 pixels minimum on all sides. The composition should breathe. ## Step 4: Style system Map the user's answers to specific design choices. Don't ask, decide. ### Vibe to type pairing Read the 3 keywords plus the 2-second feel. Pick the closest match. - **Editorial / refined / authoritative** (keywords like "rigorous," "thoughtful," "strategic," "considered") → Display: Playfair Display 700, tight tracking. Body: Inter 400 to 500. High contrast in weight. - **Warm / human / accessible** (keywords like "approachable," "real," "practical," "honest") → Display: Frank Ruhl Libre 500, normal tracking. Body: Inter 400. Slightly looser, more open. - **Bold / sharp / modern** (keywords like "bold," "contrarian," "fast," "challenger") → Display: Editorial New (fallback: Fraunces 600). Body: Inter 500 to 600. Tighter line-height, more graphic. - **Calm / minimal / technical** (keywords like "calm," "precise," "minimal," "deliberate") → Display: Fraunces 400 with optical size 144. Body: Inter 300 to 400. Generous leading. ### Vibe to color palette Base palette is always restrained: ONE warm neutral background + ONE deep anchor + ONE accent. No more. - **Warm / human:** Background warm cream (#F5EFE6 or #F1ECE2). Anchor deep navy (#1A2438) or charcoal (#222222). Accent: terracotta (#C66B4A), sage (#8A9A7B), or brass (#B8945F). Pick one accent and commit. - **Editorial / refined:** Background ivory (#F8F5EE). Anchor near-black (#15171C). Accent: dusty blue (#6F8FAF), oxblood (#7C2D2D), or muted gold (#A98B4F). - **Bold / sharp:** Background off-white (#FAFAF7). Anchor jet (#0E0E0E). Accent: electric coral (#E94F37), deep cobalt (#1F3FA8), or chartreuse (#C8D74F). - **Calm / minimal:** Background bone (#F2EFE9). Anchor slate (#2B2F36). Accent: muted teal (#5C8A86) or pale terra (#D9A78A). ### Industry tilt - Creative, design, media, lifestyle: lean editorial or warm. - Finance, legal, ops, B2B SaaS: lean calm or refined. - Construction, trades, real estate: lean bold or warm. - Healthcare, education, coaching: lean warm or calm. - Tech founder / engineer-leaning: lean calm or bold. When industry and keywords conflict, keywords win. Always. ## Step 5: Typography rules (non-negotiable) - Display tagline: 48 to 64 pixels. Never larger. Must remain readable when LinkedIn crops the banner to roughly 1128 x 191 on mobile. - Display tracking: -1% to -2% (display serifs sit tighter). - Line-height on multi-line tagline: 1.15 to 1.25. - Supporting sans-serif: 14 to 18 pixels max. Tracking +4% to +8%. Generous breathing room. - Left-side name or initials: 56 to 96 pixels depending on character count. Heavier weight than the tagline. This is the anchor. - Right-side detail text: 12 to 14 pixels. All caps, generous tracking (+10% to +14%). ## Step 6: Layout principles - Align everything to a 12-column grid inside the 1584-pixel frame. Padding token: 60 pixels. - Establish ONE dominant element per zone. Left zone is the anchor, center is the message, right is the accent. Never compete. - The accent color appears in exactly two places. No more. A thin vertical rule, a single word colored, a small geometric shape — pick two, hold the line. - Vertical rhythm: baselines roughly align across zones. Not perfectly, but close enough that the eye reads order. ## Step 7: What to avoid - No gradients larger than 20% of the banner. - No stock photo overlays. - No drop shadows on text. None. - No emoji. - No more than 3 colors total (background, anchor, accent). - No bounce, no spin, no shimmer. This is static design. - No "Welcome to my LinkedIn" energy. No "Helping founders scale" cliches. - No clip art. No icons unless they're hand-drawn or part of a geometric system. - No more than 2 typefaces total. - Do not let the tagline wrap awkwardly. If it wraps, rework spacing or shorten until it sits clean. ## Step 8: Self-check before you render Walk through this list. Fix anything that fails. 1. Is the artifact exactly 1584 x 396 pixels? 2. Is the tagline 4 to 8 words and readable at mobile crop? 3. Are there exactly 3 colors in use (background, anchor, accent)? 4. Does the accent color appear in exactly 2 places? 5. Is edge padding at least 60 pixels on all sides? 6. Are there exactly 2 typefaces? 7. Does each zone (left, center, right) have ONE dominant element? 8. Is whitespace generous enough that nothing feels cramped? 9. Does the overall composition still look like a real designer made it, not a Canva template? ## Step 9: Deliver Render the HTML artifact. Then write me one short paragraph covering: - Why you chose this layout - Where the visual weight sits - One variation idea I could request as a follow-up (a different accent, a different left-side treatment, a different tagline angle, etc.) End by telling me how to export: open the artifact in Chrome, use DevTools (Cmd+Shift+P, then "Capture full size screenshot"), and upload the resulting PNG to LinkedIn.