60 Claude Prompts That Build Infographics

You are a senior information designer who specializes in decision-focused visual comparisons. <context> I want a head-to-head "X vs Y" comparison infographic that helps a reader instantly grasp how two options differ. Build it as one self-contained HTML file with inline CSS so I can preview it instantly as an artifact. </context> <inputs> - Option A: [NAME OF FIRST THING] - Option B: [NAME OF SECOND THING] - Who is comparing them: [E.G. SMALL TEAMS, FREELANCERS] - The decision they are trying to make: [WHAT THEY PICK IT FOR] - 5-7 dimensions to compare: [E.G. PRICE, SPEED, EASE, SUPPORT] - The honest takeaway: [WHEN TO CHOOSE A VS B] </inputs> <task> Build a split-screen "versus" infographic: a bold header with the two names separated by a central VS badge, a two-column body where each compared dimension appears as a paired row (left value for A, right value for B) with a tiny visual indicator showing which side wins that row, a "best for" verdict card under each column, and a closing one-line recommendation banner. Write all the real comparison copy yourself based on the inputs. Use color to distinguish the two sides without relying on color alone for meaning. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Square-friendly (works at 1080x1080) and mobile-readable; body text 28px or larger. - Accessible contrast, semantic HTML, real copy (no lorem ipsum), no fake statistics. </constraints> <format> Return the full HTML in an artifact, then a short note of the key design decisions. </format>

You are a senior visual content strategist who turns messy trade-offs into clean, balanced graphics. <context> I need a pros-and-cons infographic that gives an honest, balanced view of a single option or decision, built as one self-contained HTML file with inline CSS so it renders instantly as an artifact. </context> <inputs> - The thing being weighed: [PRODUCT, CHOICE, OR STRATEGY] - Audience: [WHO IS DECIDING] - 4-6 genuine pros: [LIST] - 4-6 genuine cons: [LIST] - The context that tips the balance: [WHEN PROS OUTWEIGH CONS] - Overall stance: [WORTH IT / DEPENDS / SKIP] </inputs> <task> Build a balanced two-panel infographic: a title and one-line framing of the decision, a left "Pros" panel and a right "Cons" panel each with iconed bullet items and a short clarifying phrase per item, a visual balance indicator showing where the scales tip, and a closing verdict strip stating your honest recommendation and who it is right for. Keep both sides genuinely substantive so it reads as fair, not as a sales pitch. Write all real copy yourself. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Use a green/positive and red/negative palette but pair each with an icon or label so meaning never depends on color alone. - Square-friendly, mobile-readable (28px+ body), accessible contrast, real copy only. </constraints> <format> Return the full HTML in an artifact, then a short note of the key design decisions. </format>

You are a senior data designer who builds tables people actually read instead of skip. <context> I want a clean, scannable comparison table infographic that lets a reader compare several options across the same criteria at a glance. Build it as one self-contained HTML file with inline CSS so I can preview it instantly as an artifact. </context> <inputs> - What is being compared: [CATEGORY, E.G. PROJECT TOOLS] - The options (3-5): [LIST OF NAMES] - The criteria (5-8 rows): [LIST OF ATTRIBUTES] - The values for each option/criteria cell: [OR ASK ME / USE PLACEHOLDERS] - Highlight column: [WHICH OPTION TO FEATURE, IF ANY] - Audience: [WHO USES THIS TABLE] </inputs> <task> Build a polished comparison-table infographic: a clear title and subtitle, a sticky-styled header row naming each option, criterion rows down the left with concise cell values, check/cross/partial indicators where a criterion is yes/no/limited, zebra striping for scannability, and one visually emphasized "recommended" column with a small badge. Add a one-line legend explaining the indicators and a closing takeaway sentence. Write real, plausible values yourself if I do not supply them, and clearly format any cell I should fill. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - On narrow screens the table must stay legible (allow horizontal scroll or stack); body text 24px+. - Indicators must use icon plus text, not color alone; accessible contrast; real copy. </constraints> <format> Return the full HTML in an artifact, then a short note of the key design decisions. </format>

You are a senior strategy consultant who maps choices onto decision frameworks. <context> I need a decision-matrix infographic that scores several options against weighted criteria so the best choice becomes visually obvious. Build it as one self-contained HTML file with inline CSS so it previews instantly as an artifact. </context> <inputs> - The decision: [WHAT IS BEING CHOSEN] - Options (3-5): [LIST] - Criteria (4-6): [LIST] - Weight or priority for each criterion: [E.G. HIGH/MED/LOW OR PERCENTAGES] - How options score per criterion: [OR ASK ME / USE PLACEHOLDERS] - Decision-maker: [WHO IS CHOOSING] </inputs> <task> Build a weighted decision-matrix infographic: a title and a one-line explanation of how scoring works, a grid with options as columns and weighted criteria as rows, a visible weight tag on each criterion, per-cell scores shown as filled rating dots or bars, a bold "weighted total" footer row, and the winning option highlighted with a small "top pick" callout. Include a short methodology note so the reader trusts the result. Compute the totals consistently from the cell scores and weights you use. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Square-friendly, mobile-readable (24px+ in the grid), accessible contrast. - Scores must be visually encoded (dots/bars) plus a number, never color alone; real copy only. </constraints> <format> Return the full HTML in an artifact, then a short note of the key design decisions. </format>

You are a senior science communicator who debunks misconceptions clearly and without condescension. <context> I want a myth-vs-fact infographic that pairs common misconceptions with the accurate truth so readers update their thinking fast. Build it as one self-contained HTML file with inline CSS so it renders instantly as an artifact. </context> <inputs> - Topic: [SUBJECT AREA] - Audience: [WHO HOLDS THESE MYTHS] - 4-6 myth/fact pairs: [LIST EACH MYTH AND ITS CORRECTION, OR ASK ME] - Why these myths persist: [OPTIONAL CONTEXT] - The one thing to remember: [KEY TAKEAWAY] </inputs> <task> Build a paired myth-vs-fact infographic: a strong title, then a stacked series of cards where each card shows the "Myth" in a muted, crossed-out treatment on top and the "Fact" in a confident, highlighted treatment below, each with a one-sentence explanation of why the fact is true. Add clear MYTH and FACT labels with distinct icons, and close with a "bottom line" banner stating the single most important correction. Write accurate, non-sensational copy yourself and avoid inventing statistics. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Distinguish myth from fact with labels and icons, not color alone; never present a myth in a way mistakable for the truth. - Square-friendly, mobile-readable (28px+ body), accessible contrast, real copy only. </constraints> <format> Return the full HTML in an artifact, then a short note of the key design decisions. </format>

You are a senior pricing strategist and conversion designer. <context> I need a pricing-tier comparison infographic that lays out plans side by side so a prospect can quickly find the right tier and feel confident upgrading. Build it as one self-contained HTML file with inline CSS so it previews instantly as an artifact. </context> <inputs> - Product or service: [WHAT IT IS] - Tiers (2-4): [NAMES, E.G. STARTER / PRO / TEAM] - Price per tier: [AMOUNTS AND BILLING PERIOD] - Key features per tier: [LIST WHAT EACH UNLOCKS] - The tier to push: [WHICH IS "MOST POPULAR"] - Target buyer: [WHO IS CHOOSING] </inputs> <task> Build a pricing-comparison infographic: an optional billing-period note, side-by-side tier cards each with name, price, a one-line "best for" descriptor, a feature checklist with check/dash indicators, and a CTA-style button label; visually elevate the recommended tier with a "Most Popular" ribbon, raised position, and accent border. Below the cards, add a compact feature-matrix table for granular comparison and a short reassurance line (e.g. cancel anytime). Write real, benefit-led feature copy yourself. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Tiers stack cleanly on mobile with the recommended tier still emphasized; body text 24px+. - Feature inclusion shown with icon plus label, not color alone; accessible contrast; real copy only. </constraints> <format> Return the full HTML in an artifact, then a short note of the key design decisions. </format>

You are a senior social-media designer who makes punchy, instantly shareable comparison graphics. <context> I want a fast, minimal "this vs that" visual that contrasts two ideas, habits, or approaches in a way that is screenshot-worthy and obvious in under three seconds. Build it as one self-contained HTML file with inline CSS so it renders instantly as an artifact. </context> <inputs> - "This" (the better/recommended one): [NAME] - "That" (the weaker/old one): [NAME] - The frame: [E.G. SMART VS WASTEFUL, OLD WAY VS NEW WAY] - 3-4 short contrasting points: [PAIRED PHRASES] - One-line punchline: [THE MEMORABLE TAKEAWAY] - Audience: [WHO SHARES THIS] </inputs> <task> Build a bold, minimal two-up comparison: a large split layout with "This" on one side and "That" on the other, each topped with a big label and a thumbs/emotion-style cue, then 3-4 paired one-line contrasts aligned across the divide so the eye sweeps left-to-right per point. Keep typography large and confident, use lots of whitespace, and finish with a single punchy takeaway line at the bottom. This should feel like a viral carousel slide, not a dense report. Write all real copy yourself. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Square (1080x1080) and very mobile-readable; headline 48px+, point text 28px+. - Few elements, each large; accessible contrast; meaning never carried by color alone; real copy only. </constraints> <format> Return the full HTML in an artifact, then a short note of the key design decisions. </format>

You are a senior product analyst who builds the comparison tables buyers screenshot before purchasing. <context> I need a feature-matrix infographic comparing several competing products across a shared set of features so a buyer can see who supports what. Build it as one self-contained HTML file with inline CSS so it previews instantly as an artifact. </context> <inputs> - Product category: [E.G. EMAIL TOOLS] - Products to compare (3-6): [LIST OF NAMES] - Feature rows (8-14): [LIST OF CAPABILITIES] - Support level per cell: [FULL / PARTIAL / NONE, OR ASK ME] - Optional grouping of features: [E.G. CORE, ADVANCED, SUPPORT] - Audience: [WHO IS EVALUATING] </inputs> <task> Build a detailed feature-matrix infographic: a title and short framing line, products as column headers (optionally with a featured column), features down the left grouped under section subheads, and three-state indicators per cell (full = filled check, partial = half/dash with a footnote marker, none = empty/cross). Include a legend, a tally row counting full-support features per product, and a one-line "best overall coverage" callout. Make values plausible and consistent; clearly mark any cell I need to verify. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Dense table must stay legible: sticky header row, grouped sections, horizontal scroll allowed on mobile; cell text 22px+. - Three-state indicators use shape plus label, not color alone; accessible contrast; real copy only. </constraints> <format> Return the full HTML in an artifact, then a short note of the key design decisions. </format>

You are a senior technical illustrator who creates clear, labeled anatomy-style diagrams. <context> I want an "anatomy of X" labeled-diagram infographic that breaks a single object, page, or system into its named parts so the reader understands how it is built. Build it as one self-contained HTML file with inline CSS (and inline SVG for the diagram) so it renders instantly as an artifact. </context> <inputs> - The thing to dissect: [E.G. A PERFECT COLD EMAIL, A LANDING PAGE] - Audience: [WHO IS LEARNING THIS] - The parts to label (5-9): [LIST EACH PART AND ITS PURPOSE] - Overall shape/layout of the thing: [SO I CAN POSITION LABELS] - The one principle tying the parts together: [KEY INSIGHT] </inputs> <task> Build an anatomy-style labeled diagram: render a clean, stylized representation of the thing as inline SVG or styled HTML blocks in the center, then place numbered callout labels with leader lines or connector dots pointing to each part, each label having a short title and a one-sentence "why it matters" note. Add a numbered legend, a title, and a closing principle line. The layout should make the spatial relationship between parts obvious. Draw the diagram with simple shapes and write all real labels yourself. </task> <constraints> - One self-contained, responsive HTML file; no external images, only inline SVG/CSS; Google Fonts allowed. - Labels readable on mobile (22px+); callouts reflow without overlapping on small screens. - Accessible contrast, semantic structure, real explanatory copy (no lorem ipsum). </constraints> <format> Return the full HTML in an artifact, then a short note of the key design decisions. </format>

You are a senior educator who explains complex ideas so simply that anyone gets them on the first read. <context> I want a concept-explainer infographic that takes one potentially confusing idea and makes it click using a plain definition, an analogy, and a simple visual. Build it as one self-contained HTML file with inline CSS so it previews instantly as an artifact. </context> <inputs> - The concept to explain: [TERM OR IDEA] - Audience and their starting knowledge: [WHO, AND WHAT THEY ALREADY KNOW] - A relatable analogy I like (optional): [OR ASK CLAUDE TO INVENT ONE] - Why this concept matters to them: [THE PAYOFF] - A common point of confusion to clear up: [THE STICKING POINT] </inputs> <task> Build a single-concept explainer infographic: a bold title posing the concept as a question, a plain one-sentence "in simple terms" definition card, an analogy card that maps the concept onto something familiar (with a small illustrative visual built from CSS/SVG shapes), a "how it works" mini-flow of 3 numbered steps, a "why it matters to you" card, and a one-line myth-buster clearing the common confusion. Use an approachable, jargon-light voice and write all real copy yourself. </task> <constraints> - One self-contained, responsive HTML file; no external images; inline SVG/CSS only; Google Fonts allowed. - Square-friendly, mobile-readable (28px+ body), generous whitespace, one idea per card. - Accessible contrast, real plain-language copy, no jargon left undefined, no invented statistics. </constraints> <format> Return the full HTML in an artifact, then a short note of the key design decisions. </format>

You are a senior content designer who turns intimidating jargon into a friendly reference card. <context> I need a glossary infographic that defines a cluster of related terms in one place so a newcomer can decode the language of a topic. Build it as one self-contained HTML file with inline CSS so it renders instantly as an artifact. </context> <inputs> - Topic the glossary covers: [SUBJECT AREA] - Audience: [WHO NEEDS THESE DEFINITIONS] - 8-14 terms with short definitions: [LIST EACH TERM AND PLAIN MEANING, OR ASK ME] - Any terms people confuse with each other: [OPTIONAL PAIRS] - The vibe: [E.G. FRIENDLY ONBOARDING, AUTHORITATIVE REFERENCE] </inputs> <task> Build a glossary infographic: a title and one-line purpose, the terms laid out as a clean card grid or definition list where each entry has the term in bold, a one-sentence plain-English definition, and an optional micro-example in italics; optionally group terms alphabetically or by theme with subheads, and add a small "easily confused" callout clarifying any look-alike pair. Keep definitions jargon-free and write all real copy yourself. Make it skimmable as a reference, not a wall of text. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Card grid reflows to one column on mobile; term text 24px+, definition 20px+. - Accessible contrast, semantic markup, real plain-language definitions, no lorem ipsum. </constraints> <format> Return the full HTML in an artifact, then a short note of the key design decisions. </format>

You are a senior strategy facilitator who visualizes mental models and frameworks so teams can apply them. <context> I want a framework-breakdown infographic that splits a named model into its component parts and shows how they fit together. Build it as one self-contained HTML file with inline CSS (with inline SVG where helpful) so it previews instantly as an artifact. </context> <inputs> - Framework name: [E.G. AIDA, SWOT, OKRs] - What the framework is for: [ITS PURPOSE] - Audience applying it: [WHO USES IT] - The components/stages (3-6): [LIST EACH PART, ITS NAME, AND ROLE] - Whether the parts are sequential, layered, or a quadrant: [STRUCTURE] - A one-line example of it in action: [OPTIONAL] </inputs> <task> Build a framework-breakdown infographic: a title with the framework name and a one-line "what it solves" subhead, then the components rendered in a structure that matches their real relationship (a numbered horizontal flow for sequential models, stacked layers, or a 2x2 quadrant), each part as a card with its letter/number, name, a one-sentence definition, and a concrete "in practice" example. Add a short "how to use it" footer giving the reader a first action. Pick the layout that genuinely fits the model and write all real copy yourself. </task> <constraints> - One self-contained, responsive HTML file; no external images; inline SVG/CSS only; Google Fonts allowed. - Layout must match the framework's true shape (flow vs layers vs quadrant), and reflow cleanly on mobile; body text 24px+. - Accessible contrast, semantic structure, real examples (no lorem ipsum), no invented data. </constraints> <format> Return the full HTML in an artifact, then a short note of the key design decisions. </format>

You are a senior social media designer and content strategist who specializes in scroll-stopping Instagram carousels. <context> I need a complete, cohesive multi-slide Instagram carousel built as one self-contained HTML file with inline CSS. Render each 1080x1080 slide stacked vertically so I can preview them all as an artifact and screenshot each one to post. </context> <inputs> - Topic / big idea: [WHAT THE CAROUSEL TEACHES] - Audience: [WHO IS SCROLLING] - Number of slides: [E.G. 7] - Brand colors: [PRIMARY + ACCENT HEX] - Brand handle: [AT YOURHANDLE] - Desired action at the end: [FOLLOW / SAVE / COMMENT / LINK IN BIO] </inputs> <task> Design a cohesive carousel where slide 1 is a strong hook cover (big claim, intrigue, "swipe" cue), the middle slides each deliver ONE punchy idea with a headline plus 1-2 supporting lines, and the final slide is a clean CTA with the handle and the desired action. Write every word of the copy yourself, specific and benefit-led. Keep a consistent grid, type scale, accent treatment, page-number dots, and footer across all slides so the set feels like one designed system, not random pages. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Each slide is an exactly 1080x1080 square block; safe margins so nothing important sits in the outer 80px. - Text must be huge and mobile-readable (headlines 60px+); no lorem ipsum, real copy only. - Accessible contrast; consistent visual rhythm across every slide. </constraints> <format> Return the full HTML in an artifact, then a one-line summary of the hook and the throughline that ties the slides together. </format>

You are a senior B2B content designer who builds high-engagement LinkedIn document carousels for founders and operators. <context> I need a polished LinkedIn carousel (the portrait "document post" format) built as one self-contained HTML file with inline CSS. Render each 1080x1350 slide stacked vertically so I can preview and export them. </context> <inputs> - Insight / framework I am sharing: [THE IDEA] - Who should care: [TARGET ROLE / INDUSTRY] - My credibility hook: [WHY I CAN SAY THIS] - Number of slides: [E.G. 8] - Brand colors: [PRIMARY + ACCENT HEX] - Name and one-line title: [NAME, TITLE] </inputs> <task> Design a professional, restrained carousel: a cover slide with a bold thesis and a subtle "read time" cue, an agenda or promise slide, content slides that each unpack one step of the framework with a clear headline and tight supporting copy, an example or mini case slide, and a closing slide with a takeaway plus a soft CTA to follow or comment. Use a clean editorial type system, plenty of whitespace, a fixed footer with my name and slide number, and a single accent color used deliberately. Write all copy yourself in a confident, no-fluff professional voice. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Each slide exactly 1080x1350 portrait with generous safe margins. - Business-appropriate, calm, premium look; no clip-art, no lorem ipsum. - High readability on a phone feed; body text 34px+, headlines 56px+. </constraints> <format> Return the full HTML in an artifact, then list the slide titles in order so I can sanity-check the narrative. </format>

You are a senior brand designer who turns sentences into beautiful, share-worthy quote graphics. <context> I need a single striking quote graphic built as one self-contained HTML file with inline CSS, sized 1080x1080, ready to screenshot and post. </context> <inputs> - The quote (verbatim): [QUOTE TEXT] - Attribution: [NAME / SOURCE OR "ME"] - Mood: [E.G. BOLD, CALM, LUXURIOUS, PLAYFUL] - Brand colors: [PRIMARY + ACCENT HEX] - Brand handle to credit: [AT YOURHANDLE] - Where it posts: [INSTAGRAM / X / LINKEDIN] </inputs> <task> Design one elegant quote graphic where the quote is the unmistakable hero of the composition. Set the words at a confident size with thoughtful line breaks so the phrasing lands with rhythm, add a tasteful typographic accent (oversized quotation mark, rule, or underline on the key phrase), place the attribution clearly beneath, and tuck the handle into a corner. Pick a font pairing and a layout that match the requested mood, and use the accent color to emphasize the single most important word. Keep it minimal and premium. </task> <constraints> - One self-contained HTML file, exactly 1080x1080; no dependencies except Google Fonts. - The quote must dominate the canvas and stay readable at thumbnail size. - Accessible contrast; no decorative noise that competes with the words. - Use the exact quote text I provide; do not rewrite it. </constraints> <format> Return the full HTML in an artifact, then a one-line note on the font pairing and which word you emphasized and why. </format>

You are a senior infographic designer who packages advice into clean, scannable "X ways to" graphics. <context> I need a single tip-list graphic built as one self-contained HTML file with inline CSS, sized 1080x1080, that I can post as a standalone value piece. </context> <inputs> - The promise (X ways to / X tips for): [E.G. 7 WAYS TO WRITE FASTER] - Audience: [WHO BENEFITS] - The tips (or "you write them"): [LIST OR LET CLAUDE DRAFT] - Brand colors: [PRIMARY + ACCENT HEX] - Brand handle: [AT YOURHANDLE] - Tone: [E.G. PRACTICAL, BOLD, FRIENDLY] </inputs> <task> Design one polished list graphic with a strong header that states the promise and a clean, evenly spaced stack of tips. Give each tip a consistent treatment: a small numbered or icon marker, a bold mini-headline, and one tight supporting line. Balance the layout so the list fills the canvas without crowding, add a subtle accent divider rhythm, and finish with a small footer carrying the handle and a save cue. If I did not supply the tips, write genuinely useful, specific ones yourself. </task> <constraints> - One self-contained HTML file, exactly 1080x1080; no dependencies except Google Fonts. - Every tip styled identically; consistent spacing and alignment throughout. - Real, specific copy (no lorem ipsum); body text large enough to read on a phone. - Accessible contrast; one accent color used consistently. </constraints> <format> Return the full HTML in an artifact, then a short note on how you ordered the tips for impact. </format>

You are a senior social designer who turns surprising facts into curiosity-driven "did you know" graphics. <context> I need a single fact graphic built as one self-contained HTML file with inline CSS, sized 1080x1080, designed to stop the scroll and earn shares. </context> <inputs> - The fact / statistic: [THE FACT] - Source (for credibility): [SOURCE] - Why it matters in one line: [SO WHAT] - Brand colors: [PRIMARY + ACCENT HEX] - Brand handle: [AT YOURHANDLE] - Mood: [E.G. PLAYFUL, AUTHORITATIVE, STARTLING] </inputs> <task> Design one bold fact graphic that leads with a small "Did you know?" eyebrow, then sets the fact or key number as the oversized hero of the composition, supported by a single clarifying line and a one-line "why it matters" payoff. If there is a headline number, make it dominate. Add a small source credit for trust and a footer with the handle. Choose a layout and accent treatment that amplify the surprise and keep the eye moving from eyebrow to number to payoff. </task> <constraints> - One self-contained HTML file, exactly 1080x1080; no dependencies except Google Fonts. - The key number or fact must be the largest element on the canvas. - Include the source credit; never invent a statistic if I gave you a real one. - Accessible contrast; readable at thumbnail size; no lorem ipsum. </constraints> <format> Return the full HTML in an artifact, then a one-line note on what you made the visual hero and why it stops the scroll. </format>

You are a senior information designer who builds compact, high-clarity mini-infographics optimized for the X / Twitter timeline. <context> I need a single dense-but-clear mini-infographic built as one self-contained HTML file with inline CSS, sized 1080x1080, that reads instantly in a fast-moving feed. </context> <inputs> - Topic / what it explains: [THE SUBJECT] - The 3-5 data points or steps: [POINTS, OR LET CLAUDE DRAFT] - Audience: [WHO IT IS FOR] - Brand colors: [PRIMARY + ACCENT HEX] - Brand handle: [AT YOURHANDLE] - Style: [E.G. MINIMAL, TECHY, EDITORIAL] </inputs> <task> Design one self-explanatory mini-infographic: a tight title bar, then a small structured visual that conveys the relationship between the points (a labeled comparison, a step flow, a simple bar or stat row, or a 2x2 depending on what fits the data). Label everything clearly, use the accent color to direct attention to the single most important figure, and keep the composition balanced and uncluttered so it makes sense without a caption. Add a slim footer with the handle. </task> <constraints> - One self-contained HTML file, exactly 1080x1080; no dependencies except Google Fonts. - Built with HTML and CSS only (no charting libraries); any bars or shapes are styled divs. - Must be understandable on its own; labels large and legible at timeline size. - Accessible contrast; real data only; no lorem ipsum. </constraints> <format> Return the full HTML in an artifact, then a one-line note on which visual structure you chose and why it suits the data. </format>

You are a senior social designer who creates striking vertical Story and Reel cover templates. <context> I need a vertical Story / Reel cover built as one self-contained HTML file with inline CSS, sized 1080x1920, with the safe zones respected so nothing critical is hidden by platform UI. </context> <inputs> - What the Story or Reel is about: [TOPIC] - The on-screen hook text: [HEADLINE, OR LET CLAUDE DRAFT] - A swipe-up / tap cue: [E.G. "TAP TO SEE", "SWIPE UP"] - Brand colors: [PRIMARY + ACCENT HEX] - Brand handle: [AT YOURHANDLE] - Vibe: [E.G. BOLD, AESTHETIC, ENERGETIC] </inputs> <task> Design one vertical cover that grabs attention in the first second: a big, punchy hook headline placed in the central safe zone, a clear interaction cue near the bottom (above the reply bar safe area), the handle near the top, and a cohesive accent treatment that could anchor a whole template set. Keep the top 250px and bottom 250px clear of essential elements so the platform UI does not cover them. Make it feel native to vertical full-screen viewing, not a cropped square. Write the hook yourself if I leave it blank. </task> <constraints> - One self-contained HTML file, exactly 1080x1920 portrait; no dependencies except Google Fonts. - Respect top and bottom safe zones (about 250px each). - Hook headline 80px+; high contrast; readable in motion. - No lorem ipsum; cohesive enough to reuse as a template. </constraints> <format> Return the full HTML in an artifact, then a one-line note on how the design stays inside the safe zones. </format>

You are a senior editorial designer who turns rankings and lists into bold numbered listicle visuals. <context> I need a single numbered listicle graphic built as one self-contained HTML file with inline CSS, sized 1080x1350 (portrait), where the numbers themselves are a core design element. </context> <inputs> - The list title: [E.G. THE 6 TOOLS I USE DAILY] - The items (with optional one-liners): [LIST, OR LET CLAUDE DRAFT] - Audience: [WHO IT IS FOR] - Brand colors: [PRIMARY + ACCENT HEX] - Brand handle: [AT YOURHANDLE] - Tone: [E.G. CURATED, FUN, EXPERT] </inputs> <task> Design one confident listicle visual with a header that states the list title, then a vertical sequence of items where each big numbered marker is a deliberate graphic element. Give every entry a bold item name and an optional tight one-liner, keep consistent spacing and a clear visual rhythm down the list, and use the accent color on the numerals to make the count feel intentional. Finish with a footer carrying the handle and a save cue. Write the items yourself if I leave them blank. </task> <constraints> - One self-contained HTML file, exactly 1080x1350; no dependencies except Google Fonts. - Numerals are an oversized, styled design feature, not plain inline text. - Consistent treatment per item; real copy; no lorem ipsum. - Accessible contrast; large, phone-readable type. </constraints> <format> Return the full HTML in an artifact, then a one-line note on the ordering logic of the list. </format>

You are a senior social strategist and designer who structures carousels around the proven hook to value to CTA framework. <context> I need a structured carousel built as one self-contained HTML file with inline CSS, with each 1080x1080 slide stacked vertically, engineered specifically around a hook-then-value-then-CTA arc. </context> <inputs> - The transformation or payoff I am promising: [THE PROMISE] - Audience and their pain: [WHO + PAIN POINT] - The value content (steps / points): [CONTENT, OR LET CLAUDE DRAFT] - Brand colors: [PRIMARY + ACCENT HEX] - Brand handle: [AT YOURHANDLE] - The CTA: [SAVE / FOLLOW / DM A KEYWORD / LINK IN BIO] </inputs> <task> Design a carousel with an explicit three-part structure: (1) a HOOK cover that names the pain or bold promise and pulls the swipe; (2) two to five VALUE slides that deliver on the promise, one clear idea each, building momentum; (3) a CTA slide that recaps the payoff and gives one specific next action. Label the role of each slide in your closing note. Keep a consistent design system across all slides and make the hook slide visually distinct so it earns the open. Write all copy yourself, sharp and specific. </task> <constraints> - One self-contained HTML file; each slide exactly 1080x1080 stacked vertically; no dependencies except Google Fonts. - The arc must be obvious: hook -> value -> single clear CTA. - Real, persuasive copy; no lorem ipsum; phone-readable type. - Accessible contrast; cohesive system across slides. </constraints> <format> Return the full HTML in an artifact, then label each slide as HOOK, VALUE, or CTA so I can see the structure at a glance. </format>

You are a senior brand designer who turns customer praise into credible, attractive testimonial graphics. <context> I need a single testimonial graphic built as one self-contained HTML file with inline CSS, sized 1080x1080, that makes a real customer quote look trustworthy and premium. </context> <inputs> - The testimonial (verbatim): [QUOTE] - Customer name and role/company: [NAME, ROLE] - Star rating (if any): [E.G. 5 STARS] - What it is praise for: [PRODUCT / SERVICE] - Brand colors: [PRIMARY + ACCENT HEX] - Brand handle: [AT YOURHANDLE] </inputs> <task> Design one polished testimonial graphic where the quote is the hero. Open with a star rating or a large quotation mark, set the testimonial at a confident readable size with the most powerful phrase emphasized in the accent color, then place a clear attribution block (name, role, company, and an avatar placeholder) for credibility. Keep the layout clean and premium so it reads as social proof, not an ad. Add a discreet footer with the handle. Use my exact quote text. </task> <constraints> - One self-contained HTML file, exactly 1080x1080; no dependencies except Google Fonts. - Use the verbatim quote; do not fabricate or embellish testimonials. - Clear attribution; avatar as a styled placeholder if no image. - Accessible contrast; quote readable at thumbnail size; no lorem ipsum. </constraints> <format> Return the full HTML in an artifact, then a one-line note on which phrase you emphasized and why it builds trust. </format>

You are a senior brand and launch designer who creates high-impact announcement graphics that feel like an event. <context> I need a single announcement / launch graphic built as one self-contained HTML file with inline CSS, sized 1080x1080, designed to make news feel exciting and clear. </context> <inputs> - What I am announcing: [THE NEWS] - The headline I want people to remember: [HEADLINE, OR LET CLAUDE DRAFT] - Key detail (date / price / where): [DETAIL] - The action I want: [PRE-ORDER / SIGN UP / SAVE THE DATE] - Brand colors: [PRIMARY + ACCENT HEX] - Brand handle: [AT YOURHANDLE] </inputs> <task> Design one celebratory announcement graphic: a small attention-grabbing eyebrow (such as "Launching" or "New"), a bold hero headline naming the news, a concise supporting line with the one key detail, a clear call to action, and a footer with the handle. Use an energetic accent treatment and a confident layout so the post reads as a moment, not a routine update. Make the headline and the key detail impossible to miss. Write the copy yourself if I leave fields blank. </task> <constraints> - One self-contained HTML file, exactly 1080x1080; no dependencies except Google Fonts. - Headline and key detail must be the most prominent elements. - Real copy; no lorem ipsum; CTA names the action, never says "click here". - Accessible contrast; readable at thumbnail size. </constraints> <format> Return the full HTML in an artifact, then a one-line note on how the design makes the news feel like an event. </format>

You are a senior social engagement designer who creates interactive poll and engagement-bait graphics that pull comments. <context> I need a single poll / engagement graphic built as one self-contained HTML file with inline CSS, sized 1080x1080, designed to make people stop and respond. </context> <inputs> - The question or prompt: [THE QUESTION, OR LET CLAUDE DRAFT] - Format: [THIS-OR-THAT / VOTE A-B / FILL IN THE BLANK / RATE 1-10] - The options (if applicable): [OPTIONS] - How they should respond: [COMMENT / VOTE IN STORY / TAG A FRIEND] - Brand colors: [PRIMARY + ACCENT HEX] - Brand handle: [AT YOURHANDLE] </inputs> <task> Design one playful, high-contrast engagement graphic built around the chosen format: a clear central question, the response options laid out as bold balanced choices (for example a split this-or-that layout or two contrasting vote cards), and an unmistakable instruction for how to respond. Make participation feel effortless and fun, with the options visually inviting a pick. Add a footer with the handle. Write a genuinely engaging question and options yourself if I leave them blank. </task> <constraints> - One self-contained HTML file, exactly 1080x1080; no dependencies except Google Fonts. - The question and the response instruction must both be obvious at a glance. - Options visually balanced so neither is unfairly favored. - Accessible contrast; real copy; no lorem ipsum; phone-readable type. </constraints> <format> Return the full HTML in an artifact, then a one-line note on why the question is easy and tempting to answer. </format>

You are a senior data-visualization designer and annual-report strategist. <context> I need a one-page annual-report summary infographic that turns my company's year into a clear, on-brand visual story, built as one self-contained HTML file with inline CSS so I can preview it as an artifact and print it on A4. </context> <inputs> - Company name and year: [COMPANY, FISCAL YEAR] - Brand colors and vibe: [HEX CODES / CORPORATE, BOLD, WARM] - Top 4-6 headline metrics with prior-year comparison: [REVENUE, USERS, NPS, ETC.] - Three big wins or milestones this year: [WINS] - One challenge and how you handled it: [CHALLENGE] - Forward statement / priorities for next year: [PRIORITIES] - Audience: [INVESTORS, BOARD, EMPLOYEES, PUBLIC] </inputs> <task> Design a vertical one-pager with: a branded masthead (company, year, a one-line theme for the year), a hero row of large stat cards showing each headline metric with its value, an up or down delta versus prior year, and a tiny inline trend bar; a milestones timeline with 3-6 dated markers; a two-column "what worked / what we learned" block; a simple visual breakdown (bar or donut built with pure CSS or inline SVG) of one key composition such as revenue by segment; and a closing "where we are headed" banner with the priorities. Write all narrative copy yourself in a confident, plain-spoken executive voice. </task> <constraints> - One self-contained, responsive HTML file; no external libraries; charts as inline SVG or CSS only. - Print-friendly A4 with a print stylesheet; accessible contrast; real copy, no lorem ipsum. - Numbers must visibly read as up or down (color plus an arrow glyph, never color alone). </constraints> <format> Return the full HTML in an artifact, then a short note on the layout and data-emphasis decisions you made. </format>

You are a senior brand designer who specializes in sales and conference collateral. <context> I need a polished one-page leave-behind I can hand to a prospect after a meeting or drop at a booth, built as one self-contained HTML file with inline CSS so I can preview it as an artifact and print it cleanly. </context> <inputs> - Company / product name: [NAME] - One-line positioning: [WHAT IT IS AND FOR WHOM] - Three differentiators: [WHY US, NOT THEM] - Two or three proof points: [METRICS, LOGOS, AWARDS] - The single action I want them to take: [BOOK A CALL, SCAN QR, EMAIL] - Contact details and brand colors: [PHONE, EMAIL, SITE, HEX] </inputs> <task> Design a single-page leave-behind with: a confident header (logo placeholder, name, the one-line positioning as a benefit-led tagline); a short "what we do" paragraph; a three-up differentiators row each with an icon placeholder, a bold label, and one supporting line; a proof strip with the metrics styled as standout figures and a row for logo placeholders; a clear call-to-action block with a QR placeholder and the contact details; and a slim branded footer. Write all copy yourself, specific and benefit-first, nothing generic. </task> <constraints> - One self-contained HTML file fitting on a single printed page; no dependencies. - High-contrast, legible from arm's length, real copy, generous whitespace. - CTA must name the outcome, not say "Contact us". </constraints> <format> Return the full HTML in an artifact, then a short list of the hierarchy and persuasion choices you made. </format>

You are a senior science communicator and information designer. <context> I need a one-page visual summary of a research study or report that makes the findings instantly understandable to a non-expert, built as one self-contained HTML file with inline CSS so I can preview it as an artifact. </context> <inputs> - Study title and source: [TITLE, AUTHORS, YEAR] - The core question it answers: [RESEARCH QUESTION] - Method in one line: [SAMPLE SIZE, DESIGN] - Three to five key findings with numbers: [FINDINGS] - One surprising or counterintuitive result: [SURPRISE] - Why it matters / who should act on it: [SO WHAT] - Brand or palette to use: [HEX / NEUTRAL ACADEMIC] </inputs> <task> Design a summary visual with: a header showing the title, source, and a plain-language restatement of the research question; a "how they studied it" strip with the method, sample size, and timeframe as small labeled stats; a findings section where each key finding is a card pairing a big number or a tiny inline SVG chart with a one-sentence interpretation; a highlighted "the surprising part" callout; a "what this means for you" takeaway block; and a footnote with the citation and a caveats line. Translate every statistic into plain language and keep jargon out of the body. </task> <constraints> - One self-contained HTML file; charts as inline SVG or CSS only; no libraries. - Accurate to the inputs, never invent data; accessible contrast; real copy. - Include a visible citation and a one-line limitations note for credibility. </constraints> <format> Return the full HTML in an artifact, then a short note on how you simplified the findings without distorting them. </format>

You are a senior event designer and brand-led art director. <context> I need an event poster with an integrated agenda that works both on screen and printed for the wall, built as one self-contained HTML file with inline CSS so I can preview it as an artifact. </context> <inputs> - Event name and tagline: [NAME, TAGLINE] - Date, time, and venue: [WHEN, WHERE] - Who it is for and the promise: [AUDIENCE, WHY ATTEND] - Agenda items with times and speakers: [SCHEDULE] - Featured speakers or hosts: [NAMES, ROLES] - How to register: [URL, QR, RSVP DETAILS] - Visual mood and colors: [E.G. ENERGETIC, MINIMAL, HEX CODES] </inputs> <task> Design a portrait poster with: a bold hero block (event name as the dominant element, tagline, and the date-time-venue line treated as a confident stamp); a one-sentence "why attend" hook; a clean agenda laid out as a vertical timeline with times, session titles, and speaker names; a featured-speakers row with photo placeholders, names, and roles; and a prominent registration block with a QR placeholder and the link. Set a strong typographic rhythm and let the title own the top third. Write the persuasive lines yourself. </task> <constraints> - One self-contained HTML file, portrait, print-friendly with a print stylesheet; no dependencies except Google Fonts. - Legible from a distance; clear hierarchy; real copy, no placeholder filler text. - Date, time, and venue must be impossible to miss. </constraints> <format> Return the full HTML in an artifact, then a short note on the typographic and layout choices you made. </format>

You are a senior personal-branding designer and resume strategist. <context> I need an infographic-style resume that stays recruiter-friendly while looking distinctive, built as one self-contained HTML file with inline CSS so I can preview it as an artifact and export it to a one-page PDF. </context> <inputs> - Name and target role: [NAME, ROLE I WANT] - Professional summary in two lines: [SUMMARY] - Experience: roles, companies, dates, and a quantified win each: [HISTORY] - Top skills with rough proficiency: [SKILLS] - Education and certifications: [CREDENTIALS] - Two or three career-defining metrics: [HEADLINE NUMBERS] - Color and vibe: [HEX / PROFESSION-APPROPRIATE] </inputs> <task> Design a one-page resume with a two-column layout: a slim sidebar for contact placeholders, a skills section with subtle CSS proficiency bars, education, and certifications; and a main column with a name-and-target-role header, a punchy summary, a "career highlights" row of two or three big-number cards, and an experience timeline where each role shows company, dates, and one quantified achievement bullet. Keep it ATS-readable with real text (no images-as-text) and a single clean page. Tighten the achievement bullets into result-first phrasing yourself. </task> <constraints> - One self-contained HTML file; exactly one page when printed; no libraries. - Real selectable text for ATS parsing; accessible contrast; no lorem ipsum. - Every experience entry leads with an outcome, not a duty. </constraints> <format> Return the full HTML in an artifact, then a short note on what you emphasized for the target role. </format>

You are a senior strategy consultant who packages business plans for busy decision-makers. <context> I need a one-page business-plan summary that captures my whole plan at a glance, built as one self-contained HTML file with inline CSS so I can preview it as an artifact and print it. </context> <inputs> - Business name and one-line concept: [NAME, CONCEPT] - Target market and size: [WHO, TAM OR SAM] - Problem and solution: [PROBLEM, SOLUTION] - Revenue model and pricing: [HOW WE MAKE MONEY] - Go-to-market in one line: [CHANNELS] - Key financials: year-one revenue, costs, break-even: [NUMBERS] - The ask or next milestone: [WHAT I NEED NEXT] </inputs> <task> Design a structured one-pager with: a header (business name, the concept line, and a status tag such as pre-launch or growth); a problem-and-solution two-column block; a market block with the size shown as a standout figure; a "how we make money" section listing the revenue model and pricing tiers; a compact go-to-market list; a financial snapshot row with year-one revenue, costs, and a break-even marker styled as stat cards; and a closing "the ask" banner. Write crisp, investor-grade copy yourself and keep each section to its essentials. </task> <constraints> - One self-contained HTML file on a single page; no dependencies; any chart as inline SVG or CSS. - Tight executive copy, accessible contrast, real numbers from the inputs, no lorem ipsum. - The ask must be specific and unmissable. </constraints> <format> Return the full HTML in an artifact, then a short note on what you prioritized to fit one page. </format>

You are a senior venture-pitch advisor and founder storytelling coach. <context> I need an investor one-pager (a tear sheet) that makes a VC want a meeting, built as one self-contained HTML file with inline CSS so I can preview it as an artifact and email it as a PDF. </context> <inputs> - Company and one-line pitch: [NAME, THE PITCH] - Problem and why now: [PROBLEM, TIMING] - Product in one line: [WHAT IT DOES] - Traction metrics: [REVENUE, GROWTH RATE, USERS, RETENTION] - Market size: [TAM / SAM] - Team highlights: [FOUNDERS AND WHY THEM] - The round: amount, stage, use of funds: [RAISE DETAILS] </inputs> <task> Design a dense-but-elegant tear sheet with: a header (company, one-line pitch, stage and round tag); a problem-why-now block; a product line; a traction band that puts the strongest metrics as large figures with a tiny growth sparkline in inline SVG; a market-size figure; a team row with founder placeholders and one credibility line each; and a "the round" footer stating the amount raised, the stage, and a short use-of-funds breakdown. Lead with traction, write tight confident copy yourself, and make the numbers the heroes. </task> <constraints> - One self-contained HTML file on a single page; charts inline SVG or CSS; no libraries. - High signal-to-noise, accessible contrast, real metrics, no lorem ipsum. - Traction must be visually dominant; the ask must be explicit. </constraints> <format> Return the full HTML in an artifact, then a short note on the narrative order and why you led with what you did. </format>

You are a senior product-marketing designer who builds B2B sales collateral. <context> I need a one-page sales sheet that doubles as a product spec sheet for prospects and resellers, built as one self-contained HTML file with inline CSS so I can preview it as an artifact and print it. </context> <inputs> - Product name and category: [NAME, WHAT KIND OF PRODUCT] - One-line value proposition: [THE PROMISE] - Key benefits (3-5) in customer language: [BENEFITS] - Technical specifications as label-and-value pairs: [SPECS] - Pricing or packages: [TIERS OR SKUS] - Ideal use cases or buyer: [WHO AND WHEN] - Brand colors and contact: [HEX, SALES CONTACT] </inputs> <task> Design a single page with: a product header (name, category tag, the value proposition); a product-visual placeholder beside a benefits list written in outcome language; a clean two-column "Specifications" table of label-and-value rows; a "best for" use-cases row; a pricing or packages block styled as comparison cards with one highlighted recommended option; and a footer with how-to-buy and a sales contact. Keep benefits in customer words and specs precise and scannable. Write all copy yourself. </task> <constraints> - One self-contained HTML file on a single page; no dependencies. - Specs table must be clean and scannable; accessible contrast; real copy; no lorem ipsum. - Separate the persuasive benefits from the factual specs so both stay clear. </constraints> <format> Return the full HTML in an artifact, then a short note on how you balanced selling and specifying. </format>

You are a senior instructional designer and educational illustrator. <context> I need an instructional teaching poster that explains a concept or skill visually for a classroom or workspace wall, built as one self-contained HTML file with inline CSS so I can preview it as an artifact and print it large. </context> <inputs> - Topic and learning goal: [TOPIC, WHAT THEY SHOULD UNDERSTAND] - Audience and level: [WHO, BEGINNER / ADVANCED] - The core idea in one sentence: [BIG IDEA] - Steps, parts, or rules to teach (4-8): [CONTENT] - A memorable rule of thumb or mnemonic: [TAKEAWAY] - A common mistake to avoid: [PITFALL] - Color and tone: [PLAYFUL, CLINICAL, HEX CODES] </inputs> <task> Design a portrait teaching poster with: a clear title and a one-line statement of the big idea; a labeled-diagram zone using inline SVG with callout labels, or a numbered step sequence with icon placeholders if a process; a "remember this" highlight box for the mnemonic or rule of thumb; a "watch out" box flagging the common mistake; and a small recap strip restating the takeaway. Use plain, encouraging language pitched to the stated level, generous type, and one dominant visual idea so it reads from across the room. </task> <constraints> - One self-contained HTML file, portrait, print-friendly with a print stylesheet; diagrams as inline SVG only. - Reading-level-appropriate copy, accessible contrast, real content, no lorem ipsum. - One focal visual; avoid dense decorative clutter so it stays legible at a distance. </constraints> <format> Return the full HTML in an artifact, then a short note on the teaching sequence and visual emphasis you chose. </format>

You are a senior content strategist who turns long-form whitepapers into executive visuals. <context> I need a one-page executive-summary visual of my whitepaper that a busy leader can absorb without reading the full document, built as one self-contained HTML file with inline CSS so I can preview it as an artifact. </context> <inputs> - Whitepaper title and topic: [TITLE, TOPIC] - The central thesis in one line: [THESIS] - Three to five key arguments or insights: [ARGUMENTS] - Supporting data points with numbers: [STATS] - The recommendation or call to action: [WHAT TO DO] - Intended reader: [EXECUTIVE, ANALYST, BUYER] - Brand palette: [HEX / NEUTRAL CORPORATE] </inputs> <task> Design an executive-summary visual with: a header (title, topic tag, and the thesis stated as one bold sentence); a "why this matters" framing line; the key arguments as a numbered or iconed sequence, each one line; a supporting-data band where two or three statistics appear as large figures with a tiny inline SVG chart; a clear "our recommendation" block; and a footer offering to read the full paper with a link placeholder. Keep it to the decision-grade essentials and write tight, authoritative copy yourself. </task> <constraints> - One self-contained HTML file on a single page; charts as inline SVG or CSS; no libraries. - Faithful to the source, never invent data; accessible contrast; real copy; no lorem ipsum. - The thesis and the recommendation must be the two most prominent elements. </constraints> <format> Return the full HTML in an artifact, then a short note on what you cut and why it still represents the paper. </format>

You are a senior case-study writer and B2B storytelling designer. <context> I need a one-page case-study visual structured as problem, solution, and result that proves my work delivers outcomes, built as one self-contained HTML file with inline CSS so I can preview it as an artifact. </context> <inputs> - Client and industry: [CLIENT, SECTOR] - The problem they faced: [CHALLENGE] - What we did: [SOLUTION / APPROACH] - Quantified results with before-and-after numbers: [RESULTS] - A client quote: [TESTIMONIAL] - Timeframe and scope: [HOW LONG, WHAT WAS INVOLVED] - Brand palette and the next step: [HEX, CTA] </inputs> <task> Design a one-pager that flows in three clear acts: a header (client, industry, and a one-line outcome headline); a "Problem" block describing the situation and stakes; a "Solution" block laying out the approach in two or three steps with icon placeholders; and a "Results" band where the before-and-after metrics appear as large figures with deltas and a tiny inline SVG before-or-after bar. Add a pull-quote testimonial and a closing CTA inviting similar results. Make the visual transformation obvious and write all copy yourself, outcome-led. </task> <constraints> - One self-contained HTML file on a single page; charts as inline SVG or CSS; no libraries. - Results must show before versus after clearly; accessible contrast; real copy; no lorem ipsum. - The headline outcome and the results band must dominate the page. </constraints> <format> Return the full HTML in an artifact, then a short note on how you made the before-to-after change visually obvious. </format>

You are a senior operations designer who makes workplace processes and policies impossible to misread. <context> I need a process or policy poster for an office wall or intranet that staff can follow at a glance, built as one self-contained HTML file with inline CSS so I can preview it as an artifact and print it. </context> <inputs> - Process or policy name: [NAME, E.G. INCIDENT REPORTING] - Why it matters in one line: [PURPOSE] - The steps or rules in order (4-8): [STEPS OR RULES] - Who is responsible at each point: [OWNERS / ROLES] - Do's and don'ts: [GOOD VS BAD BEHAVIOR] - Who to contact for help: [CONTACT / ESCALATION] - Effective date and review date: [DATES] - Brand colors: [HEX / COMPANY PALETTE] </inputs> <task> Design a portrait poster with: a header (process or policy name, a one-line purpose, and an effective-date stamp); a numbered step-by-step flow laid out as a clear vertical or branching sequence with the responsible role tagged on each step; a two-column "do this / not this" block with simple visual markers; an escalation or "who to contact" callout; and a footer with the effective and review dates and a version label. Use plain, directive language and a layout someone can follow in seconds. Write all copy yourself. </task> <constraints> - One self-contained HTML file, portrait, print-friendly with a print stylesheet; flow built with HTML and CSS or inline SVG; no libraries. - Unambiguous step order, accessible contrast, real copy, no lorem ipsum. - Responsibilities and the escalation contact must be obvious at a glance. </constraints> <format> Return the full HTML in an artifact, then a short note on how you made the steps and ownership unmistakable. </format>