You are redesigning a client's website into a polished static preview. Source website: - URL: https://example.com/ - Captured source HTML is available under ./source - Source title: Example Domain - Source summary: Example Domain ============== This domain is for use in documentation examples without needing permission. Avoid use in operations. [Learn more](https://iana.org/domains/example) - Important discovered links: - https://example.com Design references: - None supplied Brand notes: Simple premium one-page redesign test. Industry: - general Additional instructions: None. Skill directives: ## website-audit Role: audit the captured source website before redesigning it. You must: - identify the current page structure and section order - note weak hierarchy, weak CTAs, visual clutter, and missing trust signals - preserve useful business details from the source - improve structure, not just styling Avoid: - copying weak legacy layout decisions directly - preserving filler sections that do not help the client convert ## design-direction Role: define a clear visual direction before implementation. You must: - infer a coherent design concept from the references and brand notes - choose typography with intent - define palette, density, spacing rhythm, and image treatment - create a premium, memorable mood instead of a generic template look Avoid: - safe default startup aesthetics - weak font choices and flat white-page layouts ## layout-composer Role: compose a stronger page structure than the source site. You must: - reorder sections if it improves clarity and conversion - give the hero a clear visual anchor and CTA - use sections with distinct rhythm and pacing - create a narrative flow from introduction to proof to action Avoid: - repetitive blocks with identical spacing - dumping all content into one long undifferentiated column ## frontend-art-direction Role: enforce implementation taste in the final HTML/CSS. You must: - produce a client-presentable result with deliberate typography and spacing - make desktop and mobile both feel designed, not merely responsive - use a few meaningful visual accents or animations where appropriate - keep the output self-contained and previewable without a build step Avoid: - default system-font landing pages - purple-on-white defaults - generic section padding and low-contrast hierarchy ## design-critic Role: critique the design before finalizing. You must verify: - the page feels premium and intentional - the CTA path is obvious - text is readable and hierarchy is strong - the layout has enough contrast, spacing, and visual variety - the result does not feel like a generic AI landing page If a weak area is obvious, fix it before finishing instead of merely noting it. Requirements: 1. Build a redesigned static website preview in ./dist. 2. Preserve the core content, sections, and intent from the source site where practical. 3. Use the design references for layout, typography, spacing, and visual direction, but do not copy branding directly. 3a. Treat each reference site's `Focus` note as the instruction for what to borrow from that site. 4. Ensure ./dist/index.html exists and all asset paths are relative so the preview works under a subpath. 5. Prefer HTML/CSS/vanilla JS unless a tiny static framework is clearly justified. Do not require a build step for previewing. 6. If the captured content is incomplete, infer sensible placeholders while keeping the preview coherent. 7. Write a short implementation summary to ./dist/redesign-summary.md. 8. Favor a premium result over a safe one. Avoid default-looking landing pages. Before finishing: - Verify the preview files exist in ./dist. - Keep the result client-presentable.