40 Claude Design Prompts

You are a senior product designer and conversion strategist working on the Claude Design canvas. <context> I want a complete, high-fidelity landing page laid out on the canvas so I can edit elements directly and keep everything aligned to my design system. Return it as one self-contained HTML file with inline CSS so it renders instantly as an artifact and is ready to hand off to Claude Code. </context> <inputs> - Product (one line): [WHAT IT DOES] - Target customer: [WHO IT IS FOR] - Core problem it kills: [PAIN POINT] - Primary goal: [START FREE TRIAL / BOOK DEMO / JOIN WAITLIST] - Brand vibe: [E.G. CLEAN B2B, BOLD CONSUMER, TECHNICAL] - Design tokens: [BRAND COLOR, ACCENT, FONT FAMILY] - Proof I have: [METRICS, LOGOS, TESTIMONIALS] </inputs> <task> Design the full page as composable canvas sections so each can be selected and edited on its own: a sticky nav with a single primary CTA, a hero (sharp benefit headline, supporting subhead, primary plus secondary CTA, product visual placeholder), a trusted-by logo strip, three outcome-focused value props, a how-it-works section in three steps, a features grid, a testimonial block, a pricing teaser, an FAQ, and a closing CTA. Define a small set of reusable design tokens at the top (color, type scale, spacing, radius) and apply them consistently so the page stays on-brand. Write all the copy yourself, benefit-led and specific. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Mobile-first, accessible contrast (WCAG AA), semantic HTML, real benefit copy (no lorem ipsum). - Use the declared design tokens everywhere; no one-off hardcoded colors or fonts. - CTA copy must name the outcome, not say "Submit". </constraints> <format> Return the full HTML in an artifact, then a short note listing the canvas sections and the design-token decisions you made. </format>

You are a senior brand designer and landing-page specialist working on the Claude Design canvas. <context> I want three distinct hero-section designs side by side on the canvas so I can compare directions, then select and refine the winner directly. Return them as one self-contained HTML file with inline CSS so they render instantly as an artifact. </context> <inputs> - Product or page: [WHAT IT IS] - Audience: [WHO IT IS FOR] - Single most important message: [THE ONE THING] - Primary CTA: [BUTTON TEXT AND OUTCOME] - Brand tokens: [PRIMARY COLOR, ACCENT, FONT] - Tone: [E.G. CONFIDENT, PLAYFUL, ENTERPRISE] </inputs> <task> Design three hero variants that share my design tokens but explore different layouts and emotional angles: (1) a centered, text-forward hero with a bold headline and a clear value statement, (2) a split hero with copy on the left and a large product-visual placeholder on the right, and (3) a hero with a background visual treatment and an overlaid headline plus stat or social-proof line. Each must include a benefit headline, a one-line subhead, a primary plus secondary CTA, and a trust cue. Stack the three on the canvas with a small label above each so I can pick and edit a single variant. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only. - All three variants must reuse the same color, type scale, and spacing tokens so they feel like one brand. - Accessible contrast, real copy (no lorem ipsum), readable on mobile. - Headlines must be specific and benefit-led, not generic. </constraints> <format> Return the full HTML in an artifact, then explain in two lines what angle each variant tests and which you would ship. </format>

You are a senior email designer and lifecycle marketer working on the Claude Design canvas. <context> I want a polished, on-brand marketing email designed on the canvas so I can edit blocks directly and keep it consistent with my other campaigns. Return it as one self-contained HTML file using inline styles and table-based layout so it renders in real email clients and previews instantly as an artifact. </context> <inputs> - Sender or brand: [NAME] - Campaign purpose: [E.G. PRODUCT LAUNCH, OFFER, NEWSLETTER] - The offer or news: [WHAT I AM SENDING] - Audience: [WHO RECEIVES IT] - Primary CTA: [BUTTON TEXT AND DESTINATION] - Brand tokens: [COLOR, ACCENT, FONT STACK, LOGO PLACEHOLDER] </inputs> <task> Design a single-column responsive email with clearly separated blocks I can rearrange on the canvas: a preheader line, a header with logo placeholder, a hero block (headline, supporting line, primary CTA button), one or two body content blocks with a secondary visual placeholder, a benefits or bullet block, a reinforcing CTA, and a footer with address placeholder and unsubscribe link. Apply my brand tokens to colors, button style, and type so it matches my other emails. Write all subject-line options, preheader, and body copy yourself. </task> <constraints> - Single self-contained HTML file, inline styles, table-based layout, max 600px content width. - Bulletproof CTA buttons, email-safe fonts with a web-font fallback, dark-mode friendly colors. - Accessible contrast, real copy (no lorem ipsum), alt text on every image placeholder. - No external CSS or JavaScript. </constraints> <format> Return the full HTML in an artifact, then list three subject-line options and the key layout decisions. </format>

You are a senior performance-marketing designer working on the Claude Design canvas. <context> I want a coordinated set of static ad creatives at the standard sizes, laid out together on the canvas so I can edit each one directly and keep them visually consistent. Return them as one self-contained HTML file where each ad is a fixed-size box so they render instantly as an artifact for review. </context> <inputs> - Product or offer: [WHAT IS BEING ADVERTISED] - Audience: [WHO I AM TARGETING] - Core hook or promise: [THE MESSAGE] - Primary CTA: [BUTTON TEXT] - Brand tokens: [COLOR, ACCENT, FONT, LOGO PLACEHOLDER] - Platforms: [E.G. META FEED, STORIES, GOOGLE DISPLAY] </inputs> <task> Design one campaign concept rendered across four creative sizes laid out on the canvas with a label above each: a square 1080x1080 feed ad, a 1080x1920 vertical story or reel, a 1200x628 landscape display ad, and a 1080x1350 portrait feed ad. Keep the headline, brand mark, color, and CTA consistent across all four while adapting layout and text size to each format so every ad is readable at thumbnail scale. Write punchy, benefit-led ad copy and a short CTA. Treat each ad box as an independent canvas element I can select and tweak. </task> <constraints> - One self-contained HTML file; Google Fonts only; each ad an exact-pixel fixed-size box. - One shared set of brand tokens across all sizes so the set reads as one campaign. - Large, legible headline text at small scale; accessible contrast; real copy (no lorem ipsum). - Image areas as labeled placeholders, not external URLs. </constraints> <format> Return the full HTML in an artifact, then note the one hook used and how the layout adapts per size. </format>

You are a senior editorial designer and typographer working on the Claude Design canvas. <context> I want a beautiful, highly readable blog article template designed on the canvas so I can edit the type system directly and reuse it across every post on-brand. Return it as one self-contained HTML file with inline CSS so it renders instantly as an artifact. </context> <inputs> - Publication or brand: [NAME] - Article topic and headline: [TITLE] - Author and date placeholders: [DETAILS] - Reading audience: [WHO READS IT] - Brand tokens: [COLOR, ACCENT, HEADING FONT, BODY FONT] - Extras I want: [E.G. TABLE OF CONTENTS, PULL QUOTES, CODE BLOCKS] </inputs> <task> Design a long-form reading layout with a clear, comfortable type system: an article header (kicker, headline, subhead, author byline with avatar placeholder, date, reading time), a featured-image placeholder, and a body that demonstrates every element a writer needs — h2 and h3 headings, body paragraphs, a styled blockquote or pull quote, a bulleted and numbered list, an inline link style, a figure with caption, and a code or callout block. Add a sticky reading-progress bar and a related-posts strip at the end. Define a typographic scale and spacing rhythm as design tokens so every post stays consistent. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only. - Optimal measure (around 65-75 characters per line), generous line height, accessible contrast. - Real placeholder article copy that demonstrates each element (no lorem ipsum), mobile-readable. - Token-driven type and spacing; no one-off font sizes. </constraints> <format> Return the full HTML in an artifact, then summarize the type scale and reading-comfort decisions. </format>

You are a senior product marketing designer working on the Claude Design canvas. <context> I want a strong product feature section designed on the canvas as a reusable block I can drop into any page and edit directly. Return it as one self-contained HTML file with inline CSS so it renders instantly as an artifact. </context> <inputs> - Product: [WHAT IT IS] - Audience: [WHO IT IS FOR] - Top features to show: [3 TO 6 FEATURES] - Outcome each feature drives: [BENEFIT PER FEATURE] - Brand tokens: [COLOR, ACCENT, FONT, ICON STYLE] - Section goal: [EDUCATE / DRIVE TO CTA] </inputs> <task> Design a cohesive feature section with a section header (eyebrow, headline, supporting line) and a feature presentation that fits the count: a clean three-up or three-by-two card grid for several features, or alternating image-and-text rows for a deeper showcase of two or three. Each feature gets an icon or visual placeholder, a tight benefit-led title, a one-to-two-line description, and an optional inline link. Add a closing CTA row. Reuse my design tokens for card style, icon treatment, and spacing so the section feels native to my brand, and structure each feature as an editable canvas element. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only. - Lead with the benefit in each title, not the mechanism; real copy (no lorem ipsum). - Accessible contrast, consistent card sizing, graceful wrapping on mobile. - Token-driven styling so it stays on-brand if reused elsewhere. </constraints> <format> Return the full HTML in an artifact, then note the layout chosen for the feature count and why. </format>

You are a senior conversion designer specializing in social proof, working on the Claude Design canvas. <context> I want a polished testimonial and social-proof section designed on the canvas as a reusable block I can edit directly and keep on-brand across pages. Return it as one self-contained HTML file with inline CSS so it renders instantly as an artifact. </context> <inputs> - Brand or product: [NAME] - Best customer quotes: [2 TO 4 QUOTES WITH NAME, ROLE, COMPANY] - Headline stats: [E.G. RATING, NUMBER OF CUSTOMERS, RESULTS] - Logos to show: [CUSTOMER OR PRESS LOGOS] - Brand tokens: [COLOR, ACCENT, FONT] - Placement: [NEAR CTA / MID-PAGE] </inputs> <task> Design a trust-building section with a short section header, a row of headline proof stats (each a big number with a label), a featured testimonial treated with extra weight (larger quote, customer avatar placeholder, name, role, company, optional star rating), a supporting grid of two or three smaller testimonial cards, and a logo strip of customer or press marks. Make quotes scannable and credible, with clear attribution. Apply my design tokens to cards, stat styling, and the logo strip, and structure the featured quote, the card grid, the stat row, and the logo strip as separate editable canvas elements. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only. - Real, specific quotes and attribution (no lorem ipsum, no fake-looking filler). - Accessible contrast, consistent card heights, logo strip that wraps cleanly on mobile. - Token-driven styling so it matches the rest of the brand. </constraints> <format> Return the full HTML in an artifact, then note which proof element you gave the most visual weight and why. </format>

You are a senior pricing-page designer and conversion strategist working on the Claude Design canvas. <context> I want a clear pricing and plan-comparison section designed on the canvas so I can edit tiers directly and keep it aligned to my design system. Return it as one self-contained HTML file with inline CSS so it renders instantly as an artifact. </context> <inputs> - Product: [WHAT IT IS] - Plans and prices: [TIER NAMES, MONTHLY AND ANNUAL PRICES] - Recommended plan: [WHICH TO HIGHLIGHT] - Key features per plan: [WHAT EACH INCLUDES] - Brand tokens: [COLOR, ACCENT, FONT] - Primary CTA per plan: [BUTTON TEXT] </inputs> <task> Design a pricing section with a header, a monthly-versus-annual billing toggle, and a row of plan cards where the recommended plan is visually elevated with a badge and accent treatment. Each card shows the plan name, price with billing period, a one-line who-it-is-for description, a checkmark feature list, and a CTA button. Below the cards, design a detailed feature-comparison table with checkmarks and values across plans, and add a short FAQ on billing. Apply my design tokens to cards, the highlighted plan, the toggle, and the table, and make each plan card and the comparison table editable canvas elements. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only. - Cards must stack cleanly on mobile and the comparison table must remain readable on small screens. - Accessible contrast, real plan and feature copy (no lorem ipsum), clear visual hierarchy on the recommended tier. - Token-driven styling so it stays on-brand. </constraints> <format> Return the full HTML in an artifact, then explain how you steered attention toward the recommended plan. </format>

You are a senior CRO designer specializing in on-site promotions, working on the Claude Design canvas. <context> I want a coordinated set of promotional surfaces designed on the canvas as separate editable elements, all sharing one campaign look. Return them as one self-contained HTML file with inline CSS so they render instantly as an artifact. </context> <inputs> - Brand or product: [NAME] - Promotion: [OFFER OR ANNOUNCEMENT] - Audience and trigger: [WHO SEES IT AND WHEN] - Primary CTA: [BUTTON TEXT AND OUTCOME] - Brand tokens: [COLOR, ACCENT, FONT] - Optional capture: [EMAIL FIELD YES OR NO] </inputs> <task> Design three matching promo surfaces laid out on the canvas with a label above each: (1) a top announcement bar with a concise message, inline CTA link, and dismiss control, (2) a centered modal popup with a heading, supporting line, optional email field, a primary CTA button, and a low-pressure dismiss option, and (3) a corner slide-in card for a softer nudge. Keep the offer message, color, and CTA consistent across all three so they read as one campaign. Write urgent but honest copy, and structure each surface as an independent editable canvas element with its own dismiss affordance. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only; render the surfaces statically for review. - Every surface needs a visible, accessible close control; do not trap the user. - Accessible contrast, real copy (no lorem ipsum), readable and tappable on mobile. - Shared design tokens so all three feel like one promotion. </constraints> <format> Return the full HTML in an artifact, then note the single offer message and how each surface adapts its pressure level. </format>

You are a senior launch designer and growth marketer working on the Claude Design canvas. <context> I want a striking coming-soon and waitlist page designed on the canvas so I can edit elements directly and keep it on-brand. Return it as one self-contained HTML file with inline CSS so it renders instantly as an artifact and is ready to hand to Claude Code. </context> <inputs> - Product or brand: [NAME] - What is launching: [ONE LINE] - Why someone should care: [THE HOOK] - Launch timing: [DATE OR SEASON] - Capture goal: [EMAIL SIGNUP / EARLY ACCESS] - Brand tokens: [COLOR, ACCENT, FONT, LOGO PLACEHOLDER] - Social or referral extras: [E.G. SHARE, COUNTDOWN, SOCIAL LINKS] </inputs> <task> Design a focused single-screen waitlist page: a centered logo, a bold benefit headline, a one-line description of what is coming and why it matters, a live countdown placeholder to the launch date, an email-capture form with a single field and a clear CTA button, a confirmation-message state shown below the form, a small social-proof line (for example "join 2,400 on the list"), and a footer with social links. Add a subtle on-brand background treatment so it feels finished, not empty. Apply my design tokens throughout, and structure the hero, the form, and the footer as separate editable canvas elements. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only. - The email field and CTA must be the clear focal point; accessible labels and contrast. - Real, specific copy (no lorem ipsum); fully centered and readable on mobile. - Token-driven styling so it stays on-brand. </constraints> <format> Return the full HTML in an artifact, then note the focal hierarchy and how you made a sparse page feel complete. </format>

You are a senior design systems lead who has shipped tokens for products used by millions. <context> I want a complete, foundational design system I can build everything else on top of, returned as one self-contained HTML page that renders the full system on a canvas: a token reference plus live swatches and specimens. Claude Design should treat this as the single source of truth my future work stays aligned to. </context> <inputs> - Product / brand name: [NAME] - What it is: [ONE LINE ON THE PRODUCT] - Brand personality: [E.G. CALM, TECHNICAL, PLAYFUL, PREMIUM] - Primary brand color (if any): [HEX OR "YOU CHOOSE"] - Light, dark, or both modes: [LIGHT / DARK / BOTH] - Density preference: [COMFORTABLE / COMPACT] </inputs> <task> Define and visualize a full token-based design system. Produce: a color system (primary, secondary, neutral ramp of 9 steps, plus semantic success / warning / danger / info, all with names and hex values and shown as labeled swatches); a type scale (font family pairing, a modular scale from caption to display with size, line-height, and weight for each, shown as live specimens); a spacing scale (a consistent 4 or 8 point ramp shown as visual bars); radii, border, shadow, and z-index tokens; and a short usage rule next to each group explaining when to reach for it. Name every token semantically (for example surface, on-surface, accent) so it maps cleanly to code later. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts allowed, no other dependencies. - Every color pairing shown must pass AA contrast; label the ratio. - Real token names and values, no placeholders or lorem ipsum. - Define tokens as CSS custom properties at the top so the whole page consumes them. </constraints> <format> Return the full HTML in an artifact, then a short note on the rationale behind the palette, type scale, and naming convention. </format>

You are a senior UI engineer and design systems specialist who builds accessible, reusable components. <context> I have a design system and now need the component library that sits on top of it, returned as one self-contained HTML page that displays every component and its variants on the canvas like a living style guide. </context> <inputs> - Product name: [NAME] - Existing tokens / brand colors: [PASTE TOKENS OR HEXES, OR "YOU CHOOSE"] - Style direction: [E.G. SOFT AND ROUNDED, SHARP AND TECHNICAL] - Components I most need first: [E.G. BUTTONS, FORMS, CARDS, NAV] - Light / dark / both: [MODE] - Audience using the product: [WHO] </inputs> <task> Build a component library page that shows each component with all its states and variants. Include: buttons (primary, secondary, ghost, destructive; default, hover, focus, disabled, loading; small, medium, large); inputs (text, with label and helper text, error state, disabled, plus a select and a checkbox and a toggle); cards (basic, with media, with actions); a badge or tag set; an alert or banner set (info, success, warning, error); a modal example; and a nav or tab bar. Group components into labeled sections with a one-line note on intended use. Drive everything from shared CSS custom properties so the whole library is consistent. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts allowed only. - All interactive states must show real focus rings and AA contrast. - Use semantic HTML elements (button, input, label, nav) — no div-only widgets. - Real labels and copy, no lorem ipsum. </constraints> <format> Return the full HTML in an artifact, then a short list of the components included and the states each one covers. </format>

You are a senior product designer with a sharp eye for spacing, hierarchy, and polish. <context> I already have a design as a rendered artifact and I want to iterate on it directly rather than start over. I will describe the changes; you keep everything else intact and return the updated self-contained HTML so I can see the edit on the canvas immediately. </context> <inputs> - The current design: [PASTE THE EXISTING HTML OR DESCRIBE THE SCREEN] - What feels off about it: [E.G. CRAMPED, FLAT, INCONSISTENT SPACING] - The specific changes I want: [E.G. MORE BREATHING ROOM, STRONGER HEADLINE, BOLDER CTA] - What must NOT change: [E.G. KEEP THE LAYOUT, KEEP THE COLORS] - Overall direction: [E.G. MORE PREMIUM, MORE FRIENDLY] </inputs> <task> Apply my requested edits precisely and surgically. Improve visual hierarchy (size, weight, and color contrast between headline, body, and supporting text), tighten the spacing rhythm so vertical gaps follow a consistent scale, refine the call-to-action so it is clearly the most prominent element, and fix any misaligned or inconsistent elements you notice. Make exactly the changes I asked for plus only the small polish needed to make them sit right — do not redesign sections I did not mention. </task> <constraints> - Return one self-contained, responsive HTML file that still renders as a clean artifact. - Preserve the existing structure, tokens, and copy except where I asked for changes. - Keep accessible contrast and mobile readability intact. - No new dependencies beyond what was already used. </constraints> <format> Return the full updated HTML in an artifact, then a short before-and-after note listing exactly what you changed and what you deliberately left alone. </format>

You are a senior design systems lead obsessed with cross-screen consistency. <context> I have several screens or artifacts that drifted apart visually, and I want them unified onto a single design system. Return them all as one self-contained HTML page that renders each screen on the canvas so I can see they now match. </context> <inputs> - The screens to align: [PASTE THE HTML OR DESCRIBE EACH SCREEN] - The system to align them to: [PASTE TOKENS, OR "DERIVE A SYSTEM AND APPLY IT"] - Brand vibe to enforce: [E.G. CLEAN B2B, WARM CONSUMER] - The biggest inconsistencies I see: [E.G. DIFFERENT BUTTONS, MIXED FONTS] - Light / dark / both: [MODE] </inputs> <task> Audit the screens for every inconsistency — fonts, type sizes, color usage, button styles, spacing, corner radii, shadow depth, and component patterns — then normalize all of them to one shared set of CSS custom properties. Every screen must use the same tokens, the same button and input components, the same spacing rhythm, and the same headline-to-body hierarchy. Where screens used different patterns for the same job, pick the strongest one and apply it everywhere. Render each unified screen in its own labeled section on the page. </task> <constraints> - One self-contained, responsive HTML file driven entirely by shared tokens at the top. - After alignment, no two screens may use a font, color, or spacing value that is not in the token set. - Maintain AA contrast and mobile readability across all screens. - Keep each screen's real content and copy — unify the styling, not the meaning. </constraints> <format> Return the full HTML in an artifact, then a short consistency report listing the inconsistencies you found and how you resolved each one. </format>

You are a senior front-end engineer who turns designs into clean, production-ready code. <context> I have an approved design and I want a precise design-to-code handoff so it can become a real component in my codebase through Claude Code. Return the production code plus the spec a developer needs, not a throwaway mockup. </context> <inputs> - The approved design: [PASTE THE HTML / DESCRIBE THE SCREEN OR COMPONENT] - Target framework: [E.G. REACT + TAILWIND, VUE, PLAIN HTML/CSS] - Existing token names in my codebase: [PASTE OR "DERIVE FROM THE DESIGN"] - Component or page name: [NAME] - Interactions it needs: [E.G. HOVER, OPEN/CLOSE, FORM SUBMIT] - Anything to reuse: [EXISTING COMPONENTS, UTILITIES] </inputs> <task> Convert the design into production-ready code for my target framework. Map every visual value to a named token rather than a magic number, structure the markup semantically and accessibly, and split it into sensible reusable components with clearly typed props for anything that varies (text, variant, state). Include all interactive states and responsive behavior. Then write a short handoff spec: the token mapping, the component API, the states covered, and a note on what a developer should wire up (data, routing, events) when this lands in the repo. </task> <constraints> - Output real, runnable code for the named framework — no pseudo-code. - Use semantic, accessible markup with proper focus management. - Reference tokens by name; do not hard-code raw hex or pixel values inline where a token exists. - Match the approved design pixel-faithfully, including responsive breakpoints. </constraints> <format> Return the component code in an artifact, then a short handoff spec covering the component API, token mapping, and the integration steps for Claude Code. </format>

You are a senior responsive UI designer who treats every breakpoint as a first-class design. <context> I have one screen and I need its desktop, tablet, and mobile variants designed deliberately, not just shrunk. Return all three on one self-contained HTML page that renders each variant at its real width on the canvas. </context> <inputs> - The screen: [PASTE THE HTML OR DESCRIBE IT — E.G. PRICING PAGE, DASHBOARD] - Most important action on it: [PRIMARY GOAL] - Content priority order: [WHAT MATTERS MOST TO LEAST] - Brand vibe: [E.G. CLEAN, BOLD, MINIMAL] - Tokens / colors to use: [PASTE OR "YOU CHOOSE"] - Any fixed elements: [E.G. STICKY NAV, FLOATING CTA] </inputs> <task> Design three deliberate layouts of the same screen: desktop (around 1280px, full multi-column layout), tablet (around 768px, reflowed columns and adjusted navigation), and mobile (around 390px, single column with a thumb-reachable primary action). Decide what stacks, what hides behind a menu, what reorders, and how the type scale and spacing adapt at each size — driven by the same shared tokens. Keep the primary action prominent and reachable at every breakpoint. Render each variant in its own labeled frame at its real width so I can compare them side by side. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts allowed only. - All three variants share one token set — only layout and scale change, not the brand. - AA contrast and tap targets of at least 44px on mobile. - Real content, no lorem ipsum. </constraints> <format> Return the full HTML in an artifact, then a short note explaining the key layout decisions you made at each breakpoint. </format>

You are a senior accessibility specialist (WCAG 2.2) and inclusive design reviewer. <context> I have a design and I want an accessibility pass that both diagnoses the issues and shows the fixed version. Return the corrected design as one self-contained HTML page on the canvas, alongside the findings. </context> <inputs> - The design: [PASTE THE HTML OR DESCRIBE THE SCREEN] - Who uses it: [AUDIENCE, INCLUDING ANY KNOWN NEEDS] - Target conformance level: [AA / AAA] - Known concerns: [E.G. LOW-CONTRAST GREY TEXT, TINY LABELS] - Tokens / colors in use: [PASTE OR "DERIVE FROM THE DESIGN"] </inputs> <task> Review the design against WCAG and fix it. Check and correct: color contrast for all text and UI elements (report the ratio before and after); a clear visual hierarchy so users can scan in the right order; visible, high-contrast focus states on every interactive element; sufficient text size and line height; tap and click target sizes; meaningful labels and alt text; and reliance on color alone to convey state. Apply the fixes directly in the design, adjusting tokens where a global change is cleaner than per-element patches. Return the corrected, accessible version rendered on the canvas. </task> <constraints> - One self-contained, responsive HTML file with semantic, accessible markup. - Every text and control pairing must meet the target level; state the ratio. - Never use color as the only signal — add an icon, label, or shape. - Keep the original look and brand intent; improve accessibility, do not redesign for its own sake. </constraints> <format> Return the corrected HTML in an artifact, then an itemized findings list: each issue, its severity, and the exact fix applied. </format>

You are a senior product designer who modernizes interfaces while respecting their intent. <context> I have an existing screen and I want it redesigned onto a new, stronger design system without losing what it does. Return the redesigned screen as one self-contained HTML page on the canvas. </context> <inputs> - The current screen: [PASTE THE HTML OR DESCRIBE / SCREENSHOT IT] - Why it needs a redesign: [E.G. DATED, CLUTTERED, OFF-BRAND] - New direction or system: [PASTE NEW TOKENS, OR "PROPOSE A MODERN SYSTEM"] - Brand vibe to land on: [E.G. PREMIUM, MINIMAL, BOLD EDITORIAL] - The job this screen must still do: [PRIMARY GOAL AND KEY CONTENT] - What to keep: [E.G. SAME INFORMATION, SAME ACTION] </inputs> <task> Redesign the screen onto the new system while preserving its purpose and content. Re-establish a clear hierarchy, apply the new color, type, spacing, and component tokens consistently, modernize the layout and component patterns, and remove clutter and dated treatments. Keep the same core content and primary action — change the form, not the function. Where the new system improves a pattern (for example a clearer card, a cleaner form, a stronger CTA), use it. Render the before intent in the redesigned output so it is obvious it still does the same job, better. </task> <constraints> - One self-contained, responsive HTML file driven by the new token set. - Preserve all essential content and the primary action from the original. - AA contrast, mobile readability, semantic markup, real copy. - No leftover styling from the old system once redesigned. </constraints> <format> Return the redesigned HTML in an artifact, then a short note on what changed, what you preserved, and why the new version is stronger. </format>

You are a senior design director giving a candid, structured design critique. <context> I want an honest critique of a design with a prioritized action list, and the top fixes already applied so I can see the improvement. Return the critique plus an improved version on the canvas as one self-contained HTML page. </context> <inputs> - The design: [PASTE THE HTML OR DESCRIBE / SCREENSHOT THE SCREEN] - What it is for: [GOAL OF THE SCREEN AND ITS AUDIENCE] - My own doubts: [WHAT I THINK MIGHT BE WEAK] - Constraints I cannot change: [E.G. MUST KEEP THIS LOGO, THIS COPY] - How bold I want you to be: [GENTLE / DIRECT / RUTHLESS] </inputs> <task> Critique the design across clear dimensions: visual hierarchy, layout and alignment, typography, color and contrast, spacing and rhythm, consistency, clarity of the primary action, and overall polish. For each dimension give a short verdict and the specific problem. Then produce a single prioritized fix list ordered by impact — highest-leverage changes first, with a one-line reason each. Finally, apply the top three to five fixes to the design and render the improved version so I can see the difference, while leaving lower-priority items as written recommendations. </task> <constraints> - Be specific and honest — point to the exact element, not vague praise. - One self-contained, responsive HTML file for the improved version. - Respect the constraints I listed as unchangeable. - Keep accessible contrast and mobile readability in the improved version. </constraints> <format> Return a critique with a priority-ordered fix list, then the improved HTML in an artifact showing the top fixes applied. </format>

You are a senior brand and product designer skilled at generating distinct visual directions fast. <context> I have one concept and I want several genuinely different visual directions for it, side by side, so I can pick a winner. Return all the directions on one self-contained HTML page that renders each as its own frame on the canvas. </context> <inputs> - What I am designing: [E.G. HERO SECTION, APP HOME, PRICING CARD] - The concept or message: [WHAT IT MUST COMMUNICATE] - Audience: [WHO IT IS FOR] - Number of directions: [E.G. 3 OR 4] - Range to explore: [E.G. MINIMAL TO MAXIMAL, SAFE TO BOLD] - Hard requirements: [E.G. MUST INCLUDE THIS CTA, THIS HEADLINE] </inputs> <task> Create the requested number of distinct directions for the same concept — not minor color swaps, but genuinely different design points of view. Vary the typographic personality, color mood, layout structure, and overall energy across them (for example: clean and editorial, bold and high-contrast, soft and approachable, dense and data-rich). Each direction must still communicate the same core message and include the required elements. Give each one a short name and a one-line description of its personality and who it would suit. Render them in labeled frames so they are easy to compare at a glance. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts allowed only. - Directions must be meaningfully different in concept, not just recolored. - AA contrast and real copy in every direction — no lorem ipsum. - Each direction self-consistent in its own token choices. </constraints> <format> Return the full HTML in an artifact, then a short comparison: each direction's name, its personality, and the scenario it fits best. </format>