English-language product landing page for a personal AI stylist service (quiz + photo analysis → PDF report on style). Role: design, structure, and technical implementation of the landing page.
The main value of the project is the design and conversion structure, designed using AI (Claude Design) with subsequent manual refinement to achieve a clean working result. Technical layout and integrations are based on this design.
Stack: pure HTML / CSS / JS (no builders), mobile-first, editorial style (warm palette, premium typography).
What has been done:
Design and structure (core work):
– Designing the landing page concept: editorial aesthetics, warm palette, premium typography
– Building the conversion structure of the page: hero block with CTA, "How it works", report examples, benefits, testimonials, FAQ, pricing
– Funnel logic: entry into the quiz and photo upload scenario
– Development of design and structure using Claude as a prototyping tool
Technical implementation:
– Responsive layout in pure HTML/CSS/JS, mobile-first
– Sliders for examples and testimonials, interactive FAQ accordion
– Legal pages (Terms, Privacy, Refund) for product sales
– Google Tag Manager, conversion tracking
– SEO basics (meta tags, Open Graph), speed and image optimization
Directions: web design, UX structure of landing pages, AI-assisted design (Claude), HTML/CSS/JS layout, CRO, mobile-first.
#webdesign #landing #ux #aidesign #claude #html #css #cro #mobilefirst
The main value of the project is the design and conversion structure, designed using AI (Claude Design) with subsequent manual refinement to achieve a clean working result. Technical layout and integrations are based on this design.
Stack: pure HTML / CSS / JS (no builders), mobile-first, editorial style (warm palette, premium typography).
What has been done:
Design and structure (core work):
– Designing the landing page concept: editorial aesthetics, warm palette, premium typography
– Building the conversion structure of the page: hero block with CTA, "How it works", report examples, benefits, testimonials, FAQ, pricing
– Funnel logic: entry into the quiz and photo upload scenario
– Development of design and structure using Claude as a prototyping tool
Technical implementation:
– Responsive layout in pure HTML/CSS/JS, mobile-first
– Sliders for examples and testimonials, interactive FAQ accordion
– Legal pages (Terms, Privacy, Refund) for product sales
– Google Tag Manager, conversion tracking
– SEO basics (meta tags, Open Graph), speed and image optimization
Directions: web design, UX structure of landing pages, AI-assisted design (Claude), HTML/CSS/JS layout, CRO, mobile-first.
#webdesign #landing #ux #aidesign #claude #html #css #cro #mobilefirst