awaiting upload

Meta

Prompt Claude Design

Copie ce prompt et colle-le dans claude.ai/design . Claude Design générera la landing page sans te poser de questions.

# Claude Design Brief — Meta

## Context
You are redesigning the landing page for **Metacognitia** (Healthtech AI medical imaging).
Source URL (for reference only, do not copy its structure): https://metacognitia.com/
Generate the entire page in English.

## Business context
- **Audience:** Cardiac radiologists, interventional cardiologists, and hospital decision-makers
- **Core value proposition:** Metacognitia augments existing cardiac images with AI to provide deeper 3D coronary insights without extra radiation exposure.
- **Primary CTA:** Contact Us
- **Tone:** innovative and scientific

## Current site audit results
UX 63/100 · AEO 30/100 · SEO 38/100 · COPY 61/100 · DESIGN 68/100 · CONVERSION 57/100 · PERFORMANCE 52/100 · ACCESSIBILITY 49/100

### Key problems to fix
- [CRITICAL] **SEO:** Meta description is missing and title is generic, limiting click-through and keyword relevance. → Add a keyword-rich title and meta description focused on AI cardiac imaging, coronary augmentation, and radiation-free insights.
- [CRITICAL] **CONVERSION:** The page lacks a strong primary conversion path; CTAs are generic and do not match a medtech B2B buying journey. → Use one primary CTA like “Request a demo” or “Book a clinical discussion” and repeat it with clear benefits.
- [MAJOR] **AEO:** Content is not structured for answer engines; no FAQ, concise definitions, or visible schema cues are present. → Add FAQ sections, clear product definitions, and schema markup for Organization, Product, FAQ, and MedicalBusiness.
- [MAJOR] **COPY:** Messaging is innovative but jargon-heavy, making the value proposition harder to grasp quickly for first-time visitors. → Simplify hero copy to state what the product does, for whom, and what outcome it improves in one clear sentence.
- [MAJOR] **UX:** Information architecture is shallow; Home, Company, Solution, and Contact do not guide users through proof, use cases, and action. → Add sections for clinical use cases, how it works, benefits, evidence, and contact/demo flow in a clear narrative.
- [MAJOR] **CONVERSION:** Trust signals are weak; there is little visible proof such as clinical validation, partners, certifications, or testimonials. → Show clinical results, advisory board, hospital partners, regulatory status, and media or investor credibility near CTAs.

### Focus areas (lowest scores)
- Dramatically improve **AEO**
- Dramatically improve **SEO**
- Dramatically improve **ACCESSIBILITY**
- Dramatically improve **PERFORMANCE**
- Dramatically improve **CONVERSION**

---

## Existing brand identity (preserve & modernize — do not invent from scratch)

### Colors extracted from the source site
- **Primary:** "Font Awesome 6 Brands"
- **Other colors observed on the page:** #000000, #abb8c3, #ffffff, #f78da7, #cf2e2e, #ff6900, #fcb900, #7bdcb5

### Typography extracted from the source site
- **Headings stack:** Poppins, sans-serif
- **Body stack:** "Open Sans", sans-serif
If the stack references a Google Font or Adobe Font, reuse the exact same `@font-face` / stylesheet URL in the new page.

### Brand assets (reuse these exact URLs)
- **Logo:** https://metacognitia.com/wp-content/uploads/2024/01/Metacognit-Dark.png — reuse this URL directly as `<img src="…">`.
- **Favicon:** https://metacognitia.com/wp-content/uploads/2024/01/cropped-Metacognit-Light-32x32.png
- **Open Graph image:** https://metacognitia.com/wp-content/uploads/2024/03/wired-gradient-1249-heart-beat-4.gif
**Hero / above-the-fold images** (priority for the new hero):
  - https://metacognitia.com/wp-content/uploads/2024/03/wired-gradient-1249-heart-beat-4.gif
**Additional images available** (pick contextually for Features / Testimonials / Case study sections):
  - https://metacognitia.com/wp-content/uploads/2024/01/Metacognit-Dark.png
  - https://metacognitia.com/wp-content/uploads/2024/03/img15-m.png
  - https://metacognitia.com/wp-content/uploads/2024/03/img30.png
  - https://metacognitia.com/wp-content/uploads/2024/03/img31.png
  - https://metacognitia.com/wp-content/uploads/2024/03/img32.png
  - https://metacognitia.com/wp-content/uploads/2024/04/img33_bis2_white2.png
  - https://metacognitia.com/wp-content/uploads/2024/04/iStock-1360263905-1024x683.jpg
  - https://metacognitia.com/wp-content/uploads/2024/01/cropped-Metacognit-Light.png
  - https://metacognitia.com/wp-content/uploads/2024/04/iStock-1283344380.jpg
  - https://metacognitia.com/wp-content/uploads/elementor/thumbs/Bpifrance_VP_SS_FB_RVB-qhwozegwjd66j7sscxetkos53hci52v1oyguhtwpys.png

### Fallback instruction for Claude Design
If any listed URL 404s, or if key assets are missing (logo, hero image), open https://metacognitia.com/ directly and retrieve the equivalent assets from that page. Do NOT substitute generic stock photos unless the source site itself uses stock.

The new landing MUST feel like it belongs to the same brand as https://metacognitia.com/ — same color anchor, same logo, compatible typography. It is a **modernization**, not a rebrand.

---

## Visual direction (unique to this project)
- **UX archetype:** bold brutalist — contrastes extrêmes, typographie oversized, couleurs crues, énergie brute
- **Color palette mood:** duotone vibrant — deux couleurs complémentaires saturées (ex. violet + lime). Start from the primary brand color **"Font Awesome 6 Brands"**, then layer the `duotone vibrant — deux couleurs complémentaires saturées (ex. violet + lime)` mood over it.
- **Typography:** serif éditorial — titres en serif classique (Playfair, Fraunces), corps sans-serif
- **Hero pattern:** split — texte à gauche, visuel ou panel à droite, 50/50

---

## Page structure
1. hero
2. problem
3. solution
4. features
5. pricing
6. cta

### Section specifications

**1. Hero**
- Headline: bold statement of the value proposition, max 8 words, innovative and scientific tone
- Subheadline: expand in 1-2 sentences, address the audience's main pain point
- CTA button: "Contact Us" — high contrast, impossible to miss
- Hero layout: split — texte à gauche, visuel ou panel à droite, 50/50
- Include the logo in the nav/header using the URL listed above

**2. Social proof / Stats strip**
- Show 3 credibility signals (numbers, client logos, certifications, awards)
- If no real data available, use persuasive placeholders consistent with the sector

**3. Features / Benefits**
- 3-6 benefit cards with icon, short title, 1-sentence description
- Focus on outcomes, not features

**4. How it works / Process**
- 3-4 numbered steps, clear and simple language
- Reduce perceived complexity

**5. Testimonials / Case study**
- 2-3 testimonials or a brief case study
- Include name, role, company if possible

**6. FAQ**
- 4-6 questions optimized for AEO (Answer Engine Optimization)
- Short, direct answers that could be featured snippets

**7. Final CTA**
- Repeat the primary CTA with a supporting copy line
- Add a secondary trust signal (guarantee, no credit card, etc.)

---

## Design requirements
- Standalone HTML file, all CSS inlined or in a `<style>` tag, no external dependencies except fonts and images already identified above
- Mobile-first, fully responsive
- WCAG AA contrast ratios
- Fast: no heavy images without lazy loading, minimal JS
- Smooth scroll between sections
- The visual identity must feel **distinct** from a generic SaaS template — apply the archetype, the extracted brand color anchor, and the palette mood together

---

## Output
Deliver a single, complete, standalone HTML file. Do not ask clarifying questions. Make creative decisions autonomously. The page must be production-ready and visually polished.

Affiner le prompt

Chat de refinement

Demande des ajustements — le prompt sera mis à jour.

Dis-moi ce que tu veux changer dans le prompt.