You are redesigning a client's website into a polished static preview. Follow these standing rules exactly: 1. Build a redesigned static website preview in ./dist. 2. Preserve the core business content and intent from the source site, but improve structure, visual hierarchy, and conversion clarity. 3. Make the result client-presentable, premium, and intentionally art-directed. 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. Write a concise implementation summary to ./dist/redesign-summary.md. 7. Before finishing, verify the preview files exist in ./dist. 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. ## restaurant Industry pack: restaurant Prioritize: - appetite appeal through imagery, texture, and atmosphere - clear reservation or visit CTA - strong display of cuisine identity and location - concise menu highlights rather than overwhelming full-menu dumps - trust signals such as awards, reviews, ambiance, or longevity Visual guidance: - cinematic hero treatment - editorial typography can work well if readability stays strong - use warmth, depth, and material contrast instead of sterile SaaS composition Pre-generation design guardrails: - Do not use overused default fonts like Inter, Roboto, Open Sans, Lato, Montserrat, or Arial as the primary personality font unless the selected design family explicitly calls for them. - Do not use gradient text, decorative background-clip text, or flashy AI-tell effects. - Ensure body text and CTA text clearly exceed WCAG AA contrast; do not leave near-failing warm-on-cream combinations. - Do not animate layout properties like width, height, padding, or margin. Prefer transform and opacity. - Avoid uppercase for long body copy; reserve it for short labels only. - Avoid generic SaaS hero composition, default Tailwind landing-page stacking, and interchangeable startup polish. - Build the first draft from the internal design family and concept blueprint. Do not rely on copied public-site patterns. Operator controls: - Industry: restaurant - Design family: editorial-luxury - Generator profile: quality - Source expansion mode: balanced - Search enrichment: True - Search budget: 4 - Design goal: Make this feel like an expensive, cinematic, editorial restaurant concept that immediately impresses a prospect. - Brand notes: Keep it polished, atmospheric, and reservation-focused without feeling like a generic luxury template. - Additional instructions: Lead with atmosphere and trust. Make reservation and location confidence immediate. - Prompt append: Avoid diner cliches. Make it feel bespoke and premium. Business profile: - Business name: Princess Maria Diner - Category: restaurant - Address: 2044 Rte 35 North, Wall NJ 07719 - Phone: 732-282-1722 - Hours: 7:00am - 10:00pm - Source description: Princess Maria Diner in Wall, NJ. Call us at (732) 282-1722. Check out our location and hours, and latest menu with photos and reviews. - Core highlights: - family-owned - over 30 years - breakfast - lunch - dinner - exceptional service Source website context: - URL: https://princessmariadiner.com/ - Captured source HTML is available under ./source - Source title: Princess Maria Diner - Restaurant in Wall, NJ - Completeness score: 1.00 - Completeness notes: - source markdown has usable length - metadata description found - important internal links discovered - logo-like asset found - multiple visual assets found - business facts present in extracted content - Source summary: 2044 Rte 35 North, Wall NJ 07719 [732-282-1722](tel:7322821722) Opening Hours : 7:00am - 10:00pm [](https://x.com/Mariadiner) [](https://www.facebook.com/Princess-Maria-Diner-115652971791226/) [![Princess Maria Diner](https://princessmariadiner.com/assets/logo-418779bfc65e80a126fe5aaad4864e1b6a9e9f5369431ad16d2a56cf3e745230.png)](https://princessmariadiner.com/) ![Princess Maria Diner](https://princessmariadiner.com/cdn/rs3ha06vhp7te2p5sjnr2es9ua1d/pork-roll-egg-cheese-bkgd.jpg) Serving... - Important discovered links: - https://princessmariadiner.com - https://princessmariadiner.com/menu - https://princessmariadiner.com/gallery - https://princessmariadiner.com/contact - Source asset strength: strong Internal design family: - Family: editorial-luxury - Selection source: operator - Rationale: Operator explicitly selected editorial-luxury. - Summary: High-contrast editorial hospitality direction with dramatic type, cinematic imagery, and restrained premium surfaces. - Typography direction: Expressive serif display paired with clean sans-serif body copy. - Palette logic: Cream, ink, oxblood, brass, and smoked neutrals. - Layout direction: Large image-led hero, alternating narrative bands, generous whitespace, and gallery interludes. - Component language: Understated navigation, elegant reservation CTA, image-framed testimonials, and editorial menu/story sections. - Motion rule: Slow fades, soft reveal transitions, and no flashy motion. - Family anti-patterns: Do not use startup-style feature grids, tiny type, or neon accents. Concept blueprint: - Creative thesis: Make this feel like an expensive, cinematic, editorial restaurant concept that immediately impresses a prospect. - Family summary: High-contrast editorial hospitality direction with dramatic type, cinematic imagery, and restrained premium surfaces. - Typography system: Expressive serif display paired with clean sans-serif body copy. - Color logic: Cream, ink, oxblood, brass, and smoked neutrals. - Layout system: Large image-led hero, alternating narrative bands, generous whitespace, and gallery interludes. - Component language: Understated navigation, elegant reservation CTA, image-framed testimonials, and editorial menu/story sections. - Motion policy: Slow fades, soft reveal transitions, and no flashy motion. - Image policy: Preserve and elevate source imagery where credible, then supplement with premium editorial imagery only if needed. - Conversion priorities: reservations, location-and-hours, menu-confidence - Content focus: family-owned, over 30 years, breakfast, lunch, dinner - Section flow: - Atmospheric hero with reservation-first CTA - Signature positioning and story band - Image-led menu highlights - Ambience gallery or social proof strip - Location, hours, and reservation close External enrichment: - None used (source content considered sufficient) Image and asset strategy: Use a hybrid approach: preserve any usable logo or brand mark, reuse good source photos when credible, and supplement weak imagery with high-quality external/editorial imagery. External imagery is allowed. Reusing source images is encouraged when quality is acceptable. Detected source asset candidates: - https://princessmariadiner.com/assets/logo-418779bfc65e80a126fe5aaad4864e1b6a9e9f5369431ad16d2a56cf3e745230.png (logo) - https://princessmariadiner.com/cdn/rs3ha06vhp7te2p5sjnr2es9ua1d/pork-roll-egg-cheese-bkgd.jpg (general) - https://princessmariadiner.com/assets/gallery/coffee-bar-at-work-58aa315144eff144fad230833006e90bc61ea18ff0b451b5d7cf83ade7400bbf.jpg (general) - https://princessmariadiner.com/assets/gallery/coffee-bar-close-up-view-d66c956fc6ac1fbc7ced300098a2b4174e7f1523530ab1289262a74959c97a3c.jpg (general) - https://princessmariadiner.com/assets/gallery/dining-room-view-847520a3a0c82cd87a78e55b6962498c7cddab980f6bae088c58229b9757c6bd.jpg (general) - https://princessmariadiner.com/assets/gallery/steak-entree-2-2c3eb0c5091920a5295bdda1f40a77c65b3d394696e8903dae9b1c01df647b3f.jpeg (general) - https://princessmariadiner.com/assets/gallery/team-photo-2-a3feac0fd7043cc31d6de016f8a90ab60a2c0747222672063eb1dfe60936cfcf.jpg (general) - https://princessmariadiner.com/assets/gallery/nutella-waffle-and-strawberries-396328ff5021328b6ee8f9b3311973c98c502d864f6f9ecb550fb07cda183172.jpg (general) Implementation expectations: - Use the internal design family and concept blueprint as the dominant visual system. - The source website is for business facts, proof, usable assets, and service/menu details, not for visual inspiration. - Do not imitate or scrape public reference websites. Create a bespoke concept from the internal design family. - Re-express the source business in the selected family’s typography, spacing, component language, and section rhythm. - The first draft should already feel art-directed and prospect-ready, not like a template adaptation. - If the source site's imagery is weak, preserve any usable logo/brand marks and upgrade the preview with better image treatment rather than leaving the page imageless. - If external images are allowed, you may use tasteful editorial/stock imagery that fits the brand and note that choice in redesign-summary.md. - If the captured content is incomplete, infer sensible placeholders while keeping the preview coherent. - Avoid generic AI landing-page patterns, default fonts, flat section stacking, and startup-style feature grids.