Customer Story Writer

💡 Le problème que cet agent résout

Les équipes marketing ont des notes de meetings et des enregistrements dispersés, qui rendent difficile la mise en récit complète de la façon dont un deal a été gagné. Les insights précieux, verbatims clients et preuves de ROI restent enfouis dans les enregistrements Claap au lieu d'être transformés en récit qui célèbre le succès, enablement de l'équipe, et générer du pipe.

Transformer un deal en customer story demande habituellement :

• Un rédacteur qui interviewe l'AE pendant 30 à 60 minutes
• Une chasse manuelle aux bons verbatims dans les enregistrements
• Un designer qui construit la page dans Webflow ou similaire
• Plusieurs tours de relecture

Résultat : les customer stories sortent des semaines après le closing du deal, ou jamais.

⚙️ Ce que fait cet agent

Cet agent IA crée automatiquement une page customer story cinématique et on-brand à partir de vos enregistrements Claap :

• Extrait tous les enregistrements liés au deal ou à la société sur tout le cycle de vente
• Extrait le récit : pain points, moments décisifs, verbatims clients, métriques de ROI
• Applique votre design system de marque (couleurs, polices, composants) via une skill de branding réutilisable
• Génère une page story complète : hero, carrousel de verbatims, key learnings, timeline du deal, highlights ROI, CTA
• Sort en artifact React pour preview instantané, ou publie directement dans votre CMS (Webflow, Contentful, Sanity, WordPress, Ghost…) via leur MCP

🧩 Setup

1️⃣ Enregistrez vos sales calls dans Claap

Stockez les enregistrements dans vos channels sales et clients. L'agent extrait les transcripts des calls liés au deal.

2️⃣ Activez le MCP Claap et le MCP de votre CMS dans Claude

Connectez Claap comme serveur MCP dans Claude Desktop ou Claude Code. Optionnellement, connectez le MCP de votre CMS (Webflow, Contentful, Sanity, WordPress, Ghost, Strapi…) si vous voulez publier la story directement sur votre site.

3️⃣ Ajoutez une skill de branding (skill design-system optionnelle)

La skill de branding apprend votre identité visuelle à l'IA pour que chaque page story reste on-brand. Pour les pages story qui doivent paraître pleinement natives sur votre site (patterns de composants, animations de hero, comportement du carrousel), associez-la à une skill design-system.

Extract the full design system from this page:
- Color palette: backgrounds (dark/light/neutrals), accents, text colors, gradients. Capture exact hex or HSL values.
- Typography: heading font (display, weight, tracking, uppercase rules), body font, caption font. Include exact families, weights, sizes, line-heights.
- Component patterns: cards (background, border, radius, padding, shadow), buttons (primary/secondary/ghost), stat callouts, section backgrounds, CTAs.
- Logo: exact URL to the SVG or PNG file.
- Layout rules: spacing scale, container widths, section rhythm, dark-first vs light-first, footer patterns.
- Motion: hover effects, transition timings, scroll animations, easing functions.

Navigate to 2 or 3 other pages (product, pricing, blog) to confirm the tokens hold, and flag any drift.

Then generate a reusable skill file I can save as my branding reference. Format it as a structured document with design tokens, usage rules, and a quick-reference code snippet I can copy-paste into future projects.

Read this Figma frame via the Dev Mode MCP and extract the full design system:
- Variables: color tokens, spacing tokens, radius tokens, shadow tokens (exact names and values)
- Text styles: heading display, body, captions with exact font families, weights, sizes, line-heights, letter-spacing
- Component patterns: cards, buttons, callouts, section layouts — their structure and variants
- Layout grids and breakpoints
- Effects and motion styles (if defined in the file)

Generate a reusable branding skill document I can reuse across all deck generation. Include a quick-reference code snippet mapping every token to a Tailwind or CSS variable.

4️⃣ Créez un projet dans Claude et ajoutez ces instructions

💡 Déposez votre skill de branding dans le projet pour que chaque customer story hérite de votre identité visuelle.

You're a senior content marketing strategist. Your mission: create a
cinematic, on-brand customer story page from real Claap meeting data for a
won deal. The page tells the story of how the deal was won, surfaces what
made it possible, and showcases the customer outcome.

Your brand identity comes from the branding skill loaded in this project.
Apply it for colors, typography, and visual tokens.

If a design-system skill is also loaded, use it for component patterns
(hero, quotes carousel, flip cards, timeline, CTA) and motion — prefer its
patterns over inventing new ones.

Do not invent visual style outside these skills.

Every quote, metric, and moment must come from an actual Claap recording. Do not fabricate data.

# Runtime input
- [COMPANY] → required, the customer company or deal name

# Data sourcing

Use the Claap MCP:
1. search_companies / search_recording_transcripts with [COMPANY] to find all recordings in the deal cycle
2. get_recording_transcript on each one (discovery, demo, negotiation, close, post-sale if any)
3. Extract:
- Customer context (industry, size, strategic goals)
- Pain points they described, verbatim
- The key moment(s) that tipped the deal
- Solution elements that resonated
- Real ROI metrics or outcome statements (only if stated on the call)
- Stakeholder names, roles, memorable quotes
- Deal timeline milestones with dates

# Page structure

Generate a React page (Tailwind CSS) with these sections, all styled per the branding skill:

🏁 Hero — Company name, catchy one-liner, AE(s), customer persona, short description
💬 Featured quotes — 3 to 5 verbatim quotes with context labels, speaker name and role, carousel
🧠 Key learnings — 4 flip cards in a 2x2 grid, numbered badges
📅 Deal timeline — 3 to 5 milestones with dates and outcomes
💰 ROI & impact — up to 3 real KPIs or outcome statements with source context
🏆 Call to action — "Watch key moments" (Claap link), "Share with the team", closing line

# Styling rules
- Pull all visual tokens from the branding skill
- If no branding skill is loaded, ask the user to load one before generating

# Technical implementation
- Framework: React
- Styling: Tailwind CSS + tokens from the branding skill
- Animation: Framer Motion
- Icons: Lucide-react
- Responsive: mobile + desktop

# Output
- React artifact by default
- If a CMS MCP is connected and requested, publish directly (Webflow, Contentful, Sanity, WordPress, Ghost...)

# Tone
- Authentic, celebratory, educational. Not marketing fluff.
- Use the customer's real voice (verbatim quotes, their metrics).
- Short sentences. Strong verbs. No hype.

5️⃣ Vous êtes prêt

Dites : « Crée une customer story pour [Nom de la société] » 👏. L'agent récupère tous les enregistrements liés au deal, extrait le récit et génère la page story en utilisant votre branding. Prévisualisez en artifact React, itérez sur des sections spécifiques, ou publiez dans votre CMS.

🎨 Comment customiser cet agent

Template de story

• Adaptez l'ordre des sections à votre storytelling. Certaines équipes veulent une section ROI plus forte en haut, d'autres préfèrent le verbatim client en premier.
• Ajoutez des sections : architecture d'intégration, story d'implémentation, interview d'équipe, embed vidéo.
• Retirez les sections qui ne collent pas à votre récit.

Format de sortie

• Artifact React (défaut) : preview et itération instantanés dans Claude
• Publication directe CMS : Webflow, Contentful, Sanity, WordPress, Ghost, ou n'importe quel CMS avec un MCP
• Export MDX : pour les sites Next.js / Astro / Docusaurus
• HTML statique : export en fichier unique pour hébergement n'importe où
• Screenshots sociaux : demandez à l'agent un rendu mobile étroit optimisé pour LinkedIn / Slack

Langue

Fonctionne dans n'importe quelle langue. Précisez-le dans votre prompt : « Génère la story en français » ou « Suis la langue du client ».

❓ Besoin d'aide pour customiser ?

Contactez-nous à support@claap.io.