graphic-case-study

Graphic Case Study

Generate a professionally designed B2B case study PDF from customer story details. Output is a single self-contained HTML file (opens in any browser) plus a print-ready PDF. Supports 7 page section layouts and 9 style presets.

---

Critical rules -- non-negotiable:

1. Every page MUST fit within the A4 canvas (1200×1697px). No content overflow.
2. ALL scalable font sizes use clamp(). Fixed px only for structural borders/lines.
3. Single self-contained HTML: all CSS inline. Zero external dependencies except font CDN link.
4. Never dump HTML in chat. Save to file, show summary only.
5. Results stat numbers MUST be visually dominant -- at least 3× body text size.
6. No generic AI slop: no Inter as display font, no purple gradient on white, no "Thank You" closing.

---

Step 1: Brief Intake

Need four things to start. If all four present in the message: skip to Step 2.

If any missing, ask exactly:

> "To create your case study, I need four things:

> 1. Customer name -- company name (or a descriptor to anonymize: "Fortune 500 Retailer")

> 2. Challenge -- what problem did they have before using your product? (2-5 sentences)

> 3. Solution -- what did your product do to solve it? (features, approach)

> 4. Results -- measurable outcomes: ideally 3 stats (%, time saved, revenue impact, etc.)"

Wait for all four before continuing.

---

Step 2: Complete Intake

Ask all questions in one message, grouped by category. User can skip any -- defaults apply.

> "A few questions before I start:

>

> Content

> 1. Customer context -- industry, company size, location? (optional, used for overview page)

> 2. Testimonial -- customer quote (40 words max) + speaker name + title? (or "I'll add later")

> 3. Page count -- 1-pager (summary card) / 2-pager (standard, default) / 4-pager (detailed)

> 4. Customer logo -- URL or "none"

>

> Design

> 5. Your company name -- vendor name for the CTA page (+ logo URL if available)

> 6. Style -- clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / "show me options"

> 7. Orientation -- A4 portrait (default, 1200×1697) / landscape 4:3 (1200×900)

>

> Output

> 8. Anonymize? -- Keep company name / replace with industry descriptor

> 9. Slug -- filename slug (e.g. "acme-corp-2025"); I'll derive from customer name if skipped"

Defaults if skipped:

| Question | Default |

|---|---|

| Customer context | none |

| Testimonial | none |

| Page count | 2 |

| Customer logo | none |

| Your company name | derived from context |

| Style | clean-slate |

| Orientation | A4 portrait |

| Anonymize | keep name |

| Slug | kebab-case of customer name |

If style = "show me options":

Generate 3 single-page HTML previews (cover page only). Save to .claude-design/previews/style-a.html, style-b.html, style-c.html. Open each: open .claude-design/previews/style-a.html etc. Choose 3 style presets that match the case study context. Ask user to pick before Step 3.

---

Step 2.5: Internal Page Architecture (not shown to user)

Derive internally before Step 3. Never ask the user.

Hero metric identification:

Scan results for the single most impressive number (largest %, biggest $, greatest multiplier). This metric gets accent-color treatment and maximum visual weight on the results page.

Page count -> structure template:

| Count | Page sequence |

|---|---|

| 1-pager | 1 page: [cover-compact] -- all content condensed into one page |

| 2-pager | Page 1: [cover] + [challenge-solution] stacked · Page 2: [results] + [testimonial-cta] stacked |

| 4-pager | Page 1: [cover] · Page 2: [overview] + [challenge] · Page 3: [solution] + [results] · Page 4: [testimonial] + [closing-cta] |

Visual character derived from style choice:

• clean-slate → professional authority, generous whitespace, enterprise-safe
• midnight-editorial → premium dark, editorial weight, tech/AI companies
• matt-gray → trusted neutral, operational, board-safe
• warm-earth → approachable warmth, consulting/agency/services
• brutalist → bold standout, design-forward, attention-commanding
• If not specified: default to clean-slate for B2B SaaS, midnight-editorial for technical companies.

---

Step 3: Page Structure

Read references/page-library.md before planning.

Plan the full page sequence. Assign section types from the 7 in references/page-library.md to each page section. Multiple sections can stack within one page.

Output as numbered list with [section-type] labels per page. Example for 2-pager:

Proposed structure (2 pages, clean-slate style):

Page 1:
  [cover] -- Acme Corp cut reporting time by 80%
  [challenge-solution] -- manual process / DataPulse automation

Page 2:
  [results] -- 80% time saved, 95% error reduction, $200K saved
  [closing-cta] -- Get in touch: hello@datapulse.io

Does this structure work, or should I adjust anything?

Wait for confirmation before Step 4.

---

Step 4: Content Draft

Write per-page-section copy. Plain text only -- no HTML yet.

Copy rules per section:

• cover: company name + headline result (12 words max, MUST lead with the number: "Acme cut reporting time by 80%") + optional category label ("Customer Success Story")
• overview: 4 facts only -- Industry / Company size / Location / Use case -- each value 4 words max
• challenge: context paragraph (2-3 sentences) + 3 pain points (1 sentence each, no bullet filler)
• solution: 2-3 feature callouts -- feature name (3 words max) + 1-sentence outcome description each
• results: 3 metrics (number + short label + 1-line context). Optional: 2-sentence narrative. ZERO body copy at same weight as the numbers.
• testimonial: exact quote (40 words max) + speaker name + title + company
• closing-cta: headline (5 words max) + CTA action text (3 words) + email + URL (both required)

Forbidden words (no exceptions): "powerful", "seamless", "game-changing", "leverage", "innovative", "revolutionary", "transform", "cutting-edge", "robust", "unlock", "scalable" (as filler adjective).

Copy philosophy: Numbers beat adjectives. Lead every section with the outcome, not the feature. Fragments are fine.

---

Step 5: HTML Generation

Read ALL before generating any HTML:

This skill's references:

• references/design-system.md
• references/page-library.md
• references/style-presets.md

frontend-slides cross-references (read this exact file):

• /Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css -- include FULL contents verbatim inside <style> block

Generation rules:

1. Single self-contained HTML. All CSS inline. Font CDN <link> is the only external reference.
2. Include the FULL verbatim contents of viewport-base.css inside the <style> block -- do not paraphrase or shorten it.
3. After pasting viewport-base.css, add portrait A4 overrides:

   /* A4 portrait overrides */
   html { scroll-snap-type: none; scroll-behavior: auto; }
   .slide {
     width: 100vw;
     height: 100vh;
     height: 100dvh;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     position: relative;
     scroll-snap-align: none;
   }

1. Every page section = <section class="slide"> -- required for export-pdf.sh detection.
2. Comment each page: / === PAGE N: SECTION-TYPES === /
3. Results stat numbers: clamp(2.5rem, 7vw, 5rem) minimum. Hero metric in accent color. Other metrics in secondary text color.
4. No images provided -> CSS-generated visuals (geometric shapes, gradient backgrounds, icon-like CSS constructs). Never output visible placeholder boxes.
5. No SlidePresentation JS. Include only a minimal IntersectionObserver for .reveal entrance animations (viewer experience; PDF export renders to final state automatically).
6. For landscape 4:3 (if requested): use clamp() values from graphic-slide-deck proportions -- landscape 1200×900 means 1vw=12px, similar to portrait.

Typography discipline (all clamp-based, tuned for 1200px A4 portrait):

• Cover headline: clamp(2rem, 5vw, 3.5rem)
• Section heading: clamp(1.25rem, 2.5vw, 2rem)
• Body: clamp(0.875rem, 1.25vw, 1.1rem)
• Stat number (hero): clamp(3rem, 8vw, 5.5rem) in accent color
• Stat number (secondary): clamp(2.5rem, 7vw, 5rem) in secondary color
• Quote: clamp(1.1rem, 2vw, 1.5rem) italic
• Label/caption: clamp(0.65rem, 0.9vw, 0.8rem) uppercase

---

Step 6: Self-QA

Check every item. Fix every failure -- do not skip.

Layout and rendering:

• [ ] Every .slide has height:100vh; height:100dvh; overflow:hidden
• [ ] ALL scalable font sizes use clamp()
• [ ] No content overflows at 1200×1697 viewport -- check each page's density against references/page-library.md limits
• [ ] CSS-generated visuals present for all image placeholder spots
• [ ] No -clamp(), -min(), -max() in CSS -- wrap negatives in calc(-1 * ...)

Structure:

• [ ] Page count matches Step 3 plan
• [ ] Every page uses class="slide"
• [ ] All content sections from Step 3 are present
• [ ] class="slide" only on <section> elements, not inner divs

Design quality:

• [ ] Hero metric visually dominant on results section -- accent color, largest size, no competing elements at equal weight
• [ ] Style preset tokens applied consistently (colors, fonts from references/style-presets.md)
• [ ] No slop patterns (check DO NOT USE list in references/style-presets.md)
• [ ] Typography hierarchy clear: cover headline >> section heading >> body (at least 2:1 ratio)

Content:

• [ ] No forbidden words in any copy
• [ ] Cover headline leads with a number or measurable result
• [ ] Testimonial quote is 40 words or fewer
• [ ] Closing CTA has headline + action + email + URL (all four)
• [ ] All stats in results section have labels (no naked numbers)

---

Step 7: Output

Save the main HTML:

mkdir -p case-study/[slug]

Write to: case-study/[slug]/index.html

Open it: open case-study/[slug]/index.html

Per-page HTML files (always generate these):

Extract each <section class="slide"> from the main HTML. For each one, create a standalone file with:

• The full <style> block from the main HTML (copied verbatim)
• The individual <section class="slide"> wrapped in a minimal HTML shell
• No JS (static per-page viewing)

Write to: case-study/[slug]/page-01.html, page-02.html, etc.

PDF export (always do this for A4 portrait):

bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
  case-study/[slug]/index.html \
  case-study/[slug].pdf --portrait

If landscape 4:3 was requested, omit --portrait and use --compact instead (1280×720).

Note: first run installs Playwright automatically (~30-60 seconds). Inform the user.

Cleanup: Delete .claude-design/previews/ if style preview files were generated in Step 2.

---

Step 8: Summary (no HTML in chat)

Present in chat:

## Case Study: [customer name]
Date: [today] | Style: [style] | Pages: [N] | Format: A4 portrait
Vendor: [your company] | Customer: [customer name]

---

### Files
Main:      case-study/[slug]/index.html
Per-page:  case-study/[slug]/page-01.html -> page-0N.html
PDF:       case-study/[slug].pdf

---

### Case Study Checklist
- [ ] Replace [IMAGE: logo] placeholder with real logo file
- [ ] Verify all stats are accurate (page [results page number])
- [ ] Confirm customer has approved quote usage
- [ ] Proof company name spelling, speaker title accuracy
- [ ] Test PDF page count = [N] and no content clips
- [ ] Share PDF at case-study/[slug].pdf

Do not print HTML in chat.

---

Section Reference

| Section | Purpose |

|---|---|

| cover | Opening page -- customer name, headline result, logos |

| overview | At-a-glance profile -- industry, size, use case |

| challenge | The problem -- context + pain points |

| solution | How your product solved it -- feature callouts |

| results | Key metrics + supporting narrative |

| testimonial | Full-width pull quote from customer |

| closing-cta | Vendor logo + contact info + next step |