30 Claude Prompts That Design Graphic Assets

You are a senior social-media graphic designer who works in clean HTML and CSS. <context> I need a square Instagram quote card built as one self-contained HTML file with inline CSS, sized 1080x1080 so I can preview it instantly as an artifact and screenshot it for posting. </context> <inputs> - The quote text: [PASTE QUOTE] - Attribution: [AUTHOR OR HANDLE] - Brand or vibe: [E.G. MINIMAL EDITORIAL, BOLD AND PLAYFUL, MOODY] - Color direction: [PRIMARY + ACCENT, OR "PICK SOMETHING THAT FITS"] - Optional logo or handle to place: [TEXT OR LEAVE BLANK] </inputs> <task> Design a 1080x1080 quote card: a centered, beautifully set quote with confident typographic hierarchy, balanced negative space, a subtle decorative element (a rule, oversized quotation mark, or corner accent), the attribution clearly separated, and a small handle or logo lockup in a corner. Make the type the hero and scale font size to the quote's length so it never overflows or looks cramped. </task> <constraints> - One self-contained HTML file fixed at 1080x1080; Google Fonts only. - High-contrast, legible at thumbnail size; no clip-art or filler graphics. - Real spacing system; the quote must fit comfortably with margins on all sides. </constraints> <format> Return the full HTML as an artifact, then suggest two alternate color directions and how to export it at 1080x1080. </format>

You are a content designer who builds high-retention Instagram and LinkedIn carousels. <context> I need a multi-slide carousel built as one self-contained HTML file with inline CSS, each slide a 1080x1350 frame stacked vertically so I can preview every slide as one artifact and screenshot each. </context> <inputs> - Topic and angle: [WHAT THE CAROUSEL TEACHES] - Number of slides: [E.G. 6] - Key points, one per slide: [LIST] - Audience: [WHO IS READING] - Brand colors and vibe: [DESCRIBE] - Handle for the footer: [@HANDLE] </inputs> <task> Design a cohesive carousel: a hook cover slide with a scroll-stopping headline, one content slide per key point with a number, a short heading, and a one-line explainer, and a final CTA slide. Keep a shared design system (type scale, color, a slide-number indicator, the handle in the footer) across every frame so it reads as a set. </task> <constraints> - One self-contained HTML file; each slide exactly 1080x1350 with clear visual separation; Google Fonts only. - Consistent margins, a progress or slide counter, high contrast; no lorem ipsum. - Punchy, specific copy on every slide; the cover must earn the swipe. </constraints> <format> Return the full HTML as an artifact, then explain the hook you wrote for the cover and how to export each slide cleanly. </format>

You are a brand designer who produces consistent social templates. <context> I want three different quote-card designs for the same brand, built as one self-contained HTML file with inline CSS, each a 1080x1080 frame, so I can compare all three as one artifact. </context> <inputs> - Brand name and one-line voice: [NAME PLUS TONE] - Color palette: [2-3 COLORS OR "YOU PICK"] - A sample quote to use in all three: [PASTE QUOTE] - Handle or logo text: [@HANDLE] - Vibe range I am open to: [E.G. MINIMAL, BOLD, EDITORIAL] </inputs> <task> Design three distinct 1080x1080 quote cards using the same quote and brand assets so I can pick a direction: one minimal and type-led, one bold with a color block or oversized type, and one editorial with a rule-and-serif feel. Keep the brand palette and handle consistent across all three but make each layout genuinely different. </task> <constraints> - One self-contained HTML file with three labeled 1080x1080 frames; Google Fonts only. - Each design must be production-ready and legible at small sizes; no placeholder graphics. - Shared palette and handle, distinct layouts; real spacing in each. </constraints> <format> Return the full HTML as an artifact, then recommend which of the three scales best across a feed and why. </format>

You are a designer who makes shareable announcement images for X. <context> I need a landscape announcement graphic built as one self-contained HTML file with inline CSS, sized 1600x900 so it previews cleanly as an artifact and posts well on X. </context> <inputs> - What I am announcing: [THE NEWS IN ONE LINE] - Supporting detail: [ONE SUPPORTING SENTENCE] - Brand name and handle: [NAME, @HANDLE] - Color and vibe: [DESCRIBE OR "YOU PICK"] - A label or tag: [E.G. "NEW", "LAUNCH", "v2.0"] </inputs> <task> Design a 1600x900 announcement graphic: a small eyebrow tag, a bold headline carrying the news, one supporting line, the brand lockup in a corner, and a clean geometric accent or gradient that frames the message without competing with it. Make the headline unmissable when the image appears in a busy timeline. </task> <constraints> - One self-contained HTML file fixed at 1600x900; Google Fonts only. - Strong contrast, generous margins, legible when shown small in-feed; no clip art. - Tight, specific copy; the headline is the focal point. </constraints> <format> Return the full HTML as an artifact, then suggest a punchier headline variant and the best safe-zone for the brand lockup. </format>

You are a social proof designer who turns reviews into share-worthy graphics. <context> I need a testimonial graphic built as one self-contained HTML file with inline CSS, sized 1080x1080 so I can preview it as an artifact and post it. </context> <inputs> - The testimonial text: [PASTE QUOTE] - Reviewer name and title/company: [NAME, ROLE] - Star rating: [E.G. 5] - Brand colors and vibe: [DESCRIBE] - Handle or logo text: [@HANDLE] </inputs> <task> Design a 1080x1080 testimonial card: a row of filled star icons drawn in CSS or SVG, the quote set as the hero with comfortable line length, an attribution block with the reviewer's name and role, an optional avatar placeholder circle with initials, and a subtle brand lockup. Keep it clean and credible so it feels like real proof, not an ad. </task> <constraints> - One self-contained HTML file fixed at 1080x1080; Google Fonts only. - Stars drawn in code (no image files); accessible contrast; legible at small sizes. - Real spacing and hierarchy; the quote breathes and never overflows. </constraints> <format> Return the full HTML as an artifact, then explain how you balanced credibility with brand styling and how to swap in a real avatar. </format>

You are a credential designer who builds elegant, printable certificates. <context> I need a landscape certificate of completion built as one self-contained HTML file with inline CSS, sized for A4 landscape (297x210mm) so it previews as an artifact and prints clean. </context> <inputs> - Issuing organization: [NAME] - Certificate title: [E.G. CERTIFICATE OF COMPLETION] - Course or program name: [TITLE] - Recipient field label: [E.G. "This certifies that"] - Signatory name and title: [NAME, ROLE] - Brand colors and formality level: [DESCRIBE] </inputs> <task> Design a formal certificate: an ornamental border drawn in CSS, the org name or logo lockup at the top, a clear certificate title, a recipient name line with generous space to fill in, the course name, a short certifying sentence, a date field, one or two signature lines with printed names and titles, and a verification or seal area. Make the layout balanced and symmetrical with a premium feel. </task> <constraints> - One self-contained HTML file at A4 landscape with print-safe margins; Google Fonts only. - Border and ornament drawn in code (no images); high contrast for clean printing. - Looks formal and official without resorting to clip-art crests; recipient name slot is prominent. </constraints> <format> Return the full HTML as an artifact, then explain how to print it borderless and where to drop in a real signature or QR verification. </format>

You are a designer who creates prestige award certificates. <context> I need an award certificate built as one self-contained HTML file with inline CSS, A4 landscape, previewable as an artifact and print-ready. </context> <inputs> - Award name: [E.G. EMPLOYEE OF THE MONTH, TOP PERFORMER] - Issuing org: [NAME] - The reason or category: [WHAT IT RECOGNIZES] - Signatory name and title: [NAME, ROLE] - Tone: [CORPORATE FORMAL / WARM / CELEBRATORY] - Accent color: [COLOR OR "YOU PICK"] </inputs> <task> Design an award certificate: a refined border or frame in CSS, a prominent award name as the focal point, the org lockup, a recipient name line, a short citation describing what is being recognized, a date, a signature line, and a decorative medallion or ribbon drawn in CSS/SVG. Make it feel like an honor worth framing. </task> <constraints> - One self-contained HTML file at A4 landscape with print-safe margins; Google Fonts only. - Medallion or ribbon drawn in code; balanced symmetry; high contrast for print. - Premium type pairing; no stock crest images. </constraints> <format> Return the full HTML as an artifact, then suggest two tone variants (formal vs celebratory) and how to batch the same template for multiple recipients. </format>

You are an event designer making clean participation certificates. <context> I need a participation certificate built as one self-contained HTML file with inline CSS, A4 landscape, previewable as an artifact and print-ready. </context> <inputs> - Event or program name: [TITLE] - Organizer: [NAME] - Date or duration: [WHEN] - Certifying line: [E.G. "participated in"] - Signatory: [NAME, ROLE] - Color and vibe: [DESCRIBE] </inputs> <task> Design a participation certificate: an org lockup, a clear title, a recipient name line, a sentence confirming participation in the named event with the date, a signature line, and a subtle but tasteful decorative frame or corner motif in CSS. Keep it warmer and lighter than a formal award but still polished. </task> <constraints> - One self-contained HTML file at A4 landscape with print-safe margins; Google Fonts only. - Decorative motif drawn in code; legible, high contrast for printing. - Friendly yet professional type; recipient name slot is prominent. </constraints> <format> Return the full HTML as an artifact, then explain how to swap the event name and date quickly for reuse across cohorts. </format>

You are a retail designer who creates redeemable gift vouchers. <context> I need a gift voucher built as one self-contained HTML file with inline CSS, sized like a wide ticket (e.g. 900x400) so it previews as an artifact and prints or screenshots cleanly. </context> <inputs> - Brand name: [NAME] - Voucher value or offer: [E.G. $50, 20% OFF] - Code: [VOUCHER CODE] - Expiry: [DATE] - Terms line: [SHORT TERMS] - Brand colors and vibe: [DESCRIBE] </inputs> <task> Design a gift voucher: a branded left panel with the logo lockup and a perforation-style divider in CSS, a main panel with the offer value as the focal point, a clearly boxed voucher code, an expiry line, a short terms note in small print, and a tasteful decorative accent. Make the value and code unmistakable. </task> <constraints> - One self-contained HTML file at the ticket size; Google Fonts only. - Perforation, code box, and accents drawn in code; high contrast; print-safe. - The offer value and code dominate; terms are legible but secondary. </constraints> <format> Return the full HTML as an artifact, then suggest a digital-send version and how to make the code a scannable element. </format>

You are a designer who creates premium digital gift cards. <context> I need a digital gift card built as one self-contained HTML file with inline CSS, sized like a credit card ratio (e.g. 1012x638) so it previews as an artifact and looks great sent over email or chat. </context> <inputs> - Brand name: [NAME] - Card value: [AMOUNT] - Recipient name and short message: [TO / NOTE] - Occasion: [E.G. BIRTHDAY, THANK YOU] - Brand colors and vibe: [DESCRIBE OR "YOU PICK"] - Code or balance reference: [CODE] </inputs> <task> Design a digital gift card front: a rich background using a gradient, pattern, or color field that matches the occasion, the brand lockup, the card value displayed boldly, a personal "To / From" message line, the occasion styled tastefully, and a small code or balance line. Make it feel like a thoughtful gift, not a receipt. </task> <constraints> - One self-contained HTML file at the card ratio with rounded corners and a subtle shadow; Google Fonts only. - Background and any pattern drawn in code; legible value and message; accessible contrast. - Elegant type; the value and personal note both read clearly. </constraints> <format> Return the full HTML as an artifact, then suggest two occasion variants and how to make the value and message editable for each send. </format>

You are an icon and badge designer who works directly in SVG. <context> I need a circular trust badge built as a single self-contained SVG, returned in an HTML wrapper so I can preview it as an artifact and copy the SVG out. </context> <inputs> - Badge label text around the ring: [E.G. "VERIFIED PARTNER 2026"] - Center symbol: [E.G. CHECKMARK, SHIELD, STAR] - Color scheme: [PRIMARY + ACCENT, OR "YOU PICK"] - Style: [FLAT MODERN / CLASSIC SEAL / MINIMAL] - Output size: [E.G. 200x200] </inputs> <task> Design a circular badge in SVG: text set on a circular path running around the outer ring, a clean inner ring or notched edge for a seal feel, a centered symbol (drawn as a path, not an emoji), and a balanced two-tone color treatment. Make it crisp at any size with proper viewBox and no raster images. </task> <constraints> - A single inline SVG with a viewBox so it scales infinitely; embedded in a minimal HTML page for preview. - Curved text via a path; the center symbol is vector, not a font glyph or emoji. - High contrast, balanced spacing; valid, clean SVG markup. </constraints> <format> Return the HTML+SVG as an artifact, then paste the raw SVG separately and explain how to recolor it by changing two variables. </format>

You are a game and gamification designer who builds achievement badges in SVG. <context> I need a set of achievement badges built as self-contained SVGs laid out in one HTML page so I can preview the whole set as a single artifact. </context> <inputs> - Product or program: [WHAT THE BADGES BELONG TO] - Badge tiers or names: [E.G. STARTER, PRO, LEGEND OR 4-6 ACHIEVEMENTS] - Symbol idea per badge: [LIST OR "YOU DECIDE"] - Color system: [E.G. BRONZE/SILVER/GOLD OR BRAND COLORS] - Shape: [SHIELD / HEXAGON / CIRCLE] </inputs> <task> Design a cohesive badge set: each badge a vector shape with a tier-appropriate color treatment, a distinct centered symbol drawn as paths, a small label or ribbon, and a shared visual language so they read as one collection. Show all badges in a clean grid with their names underneath. </task> <constraints> - Each badge a self-contained inline SVG with a viewBox; all on one HTML page in a labeled grid; Google Fonts for any labels only. - Symbols are vector paths, not emojis; consistent stroke and corner treatment across the set. - Tiers feel visually ranked (e.g. richer color or more detail at higher tiers). </constraints> <format> Return the HTML+SVGs as an artifact, then explain the visual system that ties the set together and how to add a new badge in the same style. </format>

You are a sticker designer who creates die-cut sticker artwork in SVG. <context> I need a die-cut sticker design built as a self-contained SVG with a contour cut outline, embedded in an HTML page so I can preview it as an artifact. </context> <inputs> - Subject or message: [WHAT THE STICKER SHOWS OR SAYS] - Style: [E.G. RETRO, KAWAII, BOLD STREETWEAR, MINIMAL LINE] - Colors: [PALETTE OR "YOU PICK"] - Shape feel: [BLOBBY / GEOMETRIC / TEXT-ONLY] - Size: [E.G. 300x300] </inputs> <task> Design a die-cut sticker: the main vector artwork (illustration or stylized lettering as paths), a thick white sticker border that follows the contour, and a subtle drop shadow to sell the die-cut look. Keep shapes bold and readable at small print sizes, the way real vinyl stickers need to be. </task> <constraints> - A single self-contained inline SVG with viewBox, previewed in minimal HTML; all artwork as vector paths, no raster images or emojis. - A clear contour offset (the white kiss-cut border) around the whole design. - Limited, punchy palette; clean closed paths suitable for cutting. </constraints> <format> Return the HTML+SVG as an artifact, then explain how the contour border was built and how to adjust its thickness for the print shop. </format>

You are an e-commerce designer who makes attention-grabbing promo bursts. <context> I need a starburst promo badge built as a self-contained SVG, embedded in an HTML page so I can preview it as an artifact and drop it on product images. </context> <inputs> - Main message: [E.G. "50% OFF", "NEW", "FREE SHIPPING"] - Secondary line: [OPTIONAL SUBTEXT] - Color scheme: [E.G. RED/WHITE, BRAND COLORS] - Shape: [STARBURST / SCALLOPED CIRCLE / RIBBON] - Size: [E.G. 220x220] </inputs> <task> Design a promo burst: a punchy starburst or scalloped shape drawn as an SVG path, the main offer in bold centered type, an optional smaller subline, and a confident two-color treatment that pops against any product photo. Make the offer instantly readable from a distance. </task> <constraints> - A single self-contained inline SVG with viewBox, in minimal HTML; the burst shape is a vector path, no images. - Transparent background so it overlays product photos; high contrast, bold type. - The main offer dominates; the badge stays legible scaled down to a thumbnail. </constraints> <format> Return the HTML+SVG as an artifact, then suggest one alternate shape and explain how to overlay it on a product image with CSS. </format>

You are a brand designer who creates clean email signature graphics. <context> I need an email signature banner built as one self-contained HTML file with inline CSS, sized wide and short (e.g. 600x180) so it previews as an artifact and pastes into an email footer. </context> <inputs> - Name and title: [FULL NAME, ROLE] - Company: [NAME] - Contact details: [EMAIL, PHONE, WEBSITE] - Social or CTA: [E.G. BOOK A CALL, LINKEDIN] - Brand colors and vibe: [DESCRIBE] - Logo text or initials: [TEXT] </inputs> <task> Design an email signature banner: a logo or monogram block on one side separated by a vertical divider, the name and title stacked clearly, contact details with small inline icons drawn in CSS/SVG, and a subtle CTA or social row. Keep it tidy, on-brand, and readable in both light and dark email clients. </task> <constraints> - One self-contained HTML file at the banner size; table-friendly, inline-style structure that survives email clients; Google Fonts with safe fallbacks. - Icons drawn in code; do not rely on external images; high contrast. - Compact, scannable, professional; no cramped spacing. </constraints> <format> Return the full HTML as an artifact, then explain which parts are email-client safe and how to paste it into Gmail or Outlook. </format>