Clinical Web Designer Skill
This skill guides you to create a premium, high-trust website for the healthcare industry. The aesthetic is "Clinical Trust": clean, white, bright, with specific blue accents (Calendly Blue: #006BFF), avoiding dark mode which clinics often find untrustworthy.
Phase 1: Research & Strategy (Mandatory)
Before writing any code, you MUST ask yourself these 10 questions and research the answers:
- Trust Signals: What specific visual cues do doctors/clinics trust in 2026? (e.g., specific certifications, clean typography, white space).
- Color Psychology: Why is
#006BFF (Calendly Blue) effective? How does it pair with white/gray for a "sterile but warm" look?
- Motion: How can we use motion to feel "efficient" rather than "flashy"? (e.g., smooth transitions, no jarring jumps).
- Imagery: What kind of imagery resonates? (Real clinic interiors, diverse medical staff, no generic 3D bots).
- Competitors: What are top UK/US health-tech sites doing right? (e.g., Doctolib, Zocdoc).
- Typography: What font pairings scream "professional"? (e.g., Inter, Plus Jakarta Sans).
- Layout: How does a "Bento" grid work in a light, clinical context? (Soft shadows, distinct borders).
- Navigation: Is the path to "Login" and "Get Started" frictionless?
- Mobile: How does this translate to a doctor's iPad or phone?
- Performance: Is it instant? (Clinics have no patience for loading).
Phase 2: Design Specifications
1. The "Clinical Trust" Palette
- Background: Pure White (
#FFFFFF) or extremely subtle cool gray (#F8FAFC).
- Primary Accent: Calendly Blue (
#006BFF). Use for primary buttons and key highlights.
- Text: Navy/Slate (
#0F172A) for headings, Cool Gray (#64748B) for body. NEVER pure black.
- Borders: Subtle, crisp borders (
#E2E8F0).
2. Typography
- Headings: Clean, sans-serif, confident. (e.g.,
Inter, Plus Jakarta Sans).
- Body: Highly readable, generous line height.
3. Imagery & Assets
- Use Real Assets: Use
clinic-interior.png, roxan_voice_interface.png from public/.
- Avoid: Generic "AI Brain" nodes, dark cyber aesthetics, glitch effects.
4. Motion (Framer Motion)
- Feel: "Professional Polish".
- Transitions: Smooth fades, slight slides up (
y: 20 -> y: 0).
- Hover: Subtle lift or shadow increase. No massive scaling.
Phase 3: Implementation Rules
- Mobile First: Ensure responsiveness.
- Accessibility: WCAG AA standard (contrast ratios are critical in healthcare).
- Components: Build reusable, clean components (
TrustBadge, ClinicalCard, TestimonialCarousel).
Example Prompt to Self
"I need to redesign the login page.
Research: Clinics value security.
Design: Split layout. Left side: High-quality clinic image with a 'Secure' badge. Right side: Clean white form, blue primary button.
Motion: Form fades in gently. No spinning 3D elements."
1---2name: clinical-web-designer3description: Design and build high-trust, clinical-grade websites for healthcare AI. Use when the user wants a "Calendly-like" aesthetic, light mode, or a trusted medical look.4---56# Clinical Web Designer Skill78This skill guides you to create a premium, high-trust website for the healthcare industry. The aesthetic is "Clinical Trust": clean, white, bright, with specific blue accents (Calendly Blue: `#006BFF`), avoiding dark mode which clinics often find untrustworthy.910## Phase 1: Research & Strategy (Mandatory)1112Before writing any code, you MUST ask yourself these 10 questions and research the answers:13141. **Trust Signals**: What specific visual cues do doctors/clinics trust in 2026? (e.g., specific certifications, clean typography, white space).152. **Color Psychology**: Why is `#006BFF` (Calendly Blue) effective? How does it pair with white/gray for a "sterile but warm" look?163. **Motion**: How can we use motion to feel "efficient" rather than "flashy"? (e.g., smooth transitions, no jarring jumps).174. **Imagery**: What kind of imagery resonates? (Real clinic interiors, diverse medical staff, no generic 3D bots).185. **Competitors**: What are top UK/US health-tech sites doing right? (e.g., Doctolib, Zocdoc).196. **Typography**: What font pairings scream "professional"? (e.g., Inter, Plus Jakarta Sans).207. **Layout**: How does a "Bento" grid work in a light, clinical context? (Soft shadows, distinct borders).218. **Navigation**: Is the path to "Login" and "Get Started" frictionless?229. **Mobile**: How does this translate to a doctor's iPad or phone?2310. **Performance**: Is it instant? (Clinics have no patience for loading).2425## Phase 2: Design Specifications2627### 1. The "Clinical Trust" Palette2829- **Background**: Pure White (`#FFFFFF`) or extremely subtle cool gray (`#F8FAFC`).30- **Primary Accent**: Calendly Blue (`#006BFF`). Use for primary buttons and key highlights.31- **Text**: Navy/Slate (`#0F172A`) for headings, Cool Gray (`#64748B`) for body. **NEVER** pure black.32- **Borders**: Subtle, crisp borders (`#E2E8F0`).3334### 2. Typography3536- **Headings**: Clean, sans-serif, confident. (e.g., `Inter`, `Plus Jakarta Sans`).37- **Body**: Highly readable, generous line height.3839### 3. Imagery & Assets4041- **Use Real Assets**: Use `clinic-interior.png`, `roxan_voice_interface.png` from `public/`.42- **Avoid**: Generic "AI Brain" nodes, dark cyber aesthetics, glitch effects.4344### 4. Motion (Framer Motion)4546- **Feel**: "Professional Polish".47- **Transitions**: Smooth fades, slight slides up (`y: 20 -> y: 0`).48- **Hover**: Subtle lift or shadow increase. No massive scaling.4950## Phase 3: Implementation Rules51521. **Mobile First**: Ensure responsiveness.532. **Accessibility**: WCAG AA standard (contrast ratios are critical in healthcare).543. **Components**: Build reusable, clean components (`TrustBadge`, `ClinicalCard`, `TestimonialCarousel`).5556## Example Prompt to Self5758> "I need to redesign the login page.59> *Research*: Clinics value security.60> *Design*: Split layout. Left side: High-quality clinic image with a 'Secure' badge. Right side: Clean white form, blue primary button.61> *Motion*: Form fades in gently. No spinning 3D elements."
Odiabackend099