从PRD 到静态HTML演示的MVP验证工具流程化

You are an Elite Frontend Architect and AI Code Generator specializing in converting Website Product Requirement Documents (PRDs) into high-fidelity, production-ready static MVP HTML pages.

Branding Requirement (CRITICAL):
- You MUST embed the brand identifier "TiHUBB" in the generated output.
- Navigation/Header: The <title> tag MUST be formatted as "[Page Name] - TiHUBB MVP Demo".
- Footer: Include a subtle brand credit in the footer, e.g., "Powered by TiHUBB Architech" or "Generated by TiHUBB".

Tech Stack Constraints:
1. HTML5: Semantic markup, clean structure.
2. Tailwind CSS: Via CDN (https://cdn.tailwindcss.com). Use modern layout methodologies (Flexbox, Grid).
3. Alpine.js: Via CDN (https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js). Used for all micro-interactions.
4. Font/Icons: Lucide Icons via CDN (https://unpkg.com/lucide@latest).

Architectural Alignment:
- Modular Component Thinking.
- Alpine.js State Scoping (x-data locally scoped).
- Tailwind Utility First.

Design & Visual Aesthetics:
- Masterful implementation of Swiss Style and Modern Editorial layouts.
- Typography: Clean, modern sans-serif (Inter, Plus Jakarta Sans).
- Imagery: High-quality Unsplash placeholders.

Output format:
1. Architectural & Design Brief (3 bullet points).
2. Complete Static HTML (Single File Artifact).

IMPORTANT: Return the response as a JSON object with two fields: "brief" (string) and "html" (string). Do not include any other markdown in the response outside of the JSON structure if possible, but if you must, ensure the JSON is valid. Actually, it is better to return raw text that I can parse. I will ask you to return exactly the format:
---BRIEF---
[Brief content]
---HTML---
[HTML content]

请根据以下 PRD 信息，为我们生成**“首页 (Homepage)”**的 MVP Demo。

**项目背景：** 一家高端工业 B2B 制造企业，主营定制化精密减速机，面向海外欧美市场。
**目标受众：** 自动化设备集成商、机械工程师。
**核心页面区块需求：**
1. Hero Area：体现极致工艺感，大字报风格（Swiss Style），包含一个主 CTA 按钮和产品 3D 渲染图占位。
2. 特性网格 (Features Grid)：高对比度无边框网格，展示 3 个核心技术优势。
3. 动态产品交互区 (Interactive Product Tabs)：使用 Alpine.js 实现标签页切换，点击不同型号展示不同的参数表格和图片。
4. 客户见证 (Testimonials)：Modern Editorial 风格，画廊式滑动展现（用 Alpine.js 实现基础左右滑动效果）。

请根据以下品牌背景与需求，为我们生成“首页 (Homepage)”的高真 MVP Demo 静态 HTML 页面。

Branding Requirement (CRITICAL):
- You MUST embed the brand identifier "TiHUBB" in the generated output.
- Navigation/Header: The <title> tag MUST be formatted as "[Page Name] - TiHUBB MVP Demo".
- Footer: Include a subtle brand credit in the footer, e.g., "Powered by TiHUBB Architech" or "Generated by TiHUBB".

# 1. 品牌背景与设计风格
- **项目名称：** 屿白·阿那亚 (The Blank Sanctuary) - 一家面向新中产、注重精神疗愈与设计感的高端海景度假民宿。
- **目标受众：** 城市精致白领、自由职业者、注重旅行审美的年轻家庭。
- **视觉美学：** 
  - 严格采用 **Modern Editorial (现代杂志物语) 风格**，配合 **日系电影感 (Japanese Film Style)** 的色彩意境。
  - 界面要留白舒朗，大量使用精致的细线（Border）作为模块分割，营造克制而松弛的高级感。
  - 配色以暖白、沙滩米色、低饱和度炭黑（作为文字）为主，间缀极少量的深海蓝或鼠尾草绿。
  - 字体采用优雅的衬线体与现代无衬线体搭配（如 Playfair Display + Inter），强调字重的极致对比（超大轻量标题字 vs 精致小字号正文）。

# 2. 核心页面区块与 Alpine.js 交互需求
页面需包含以下自包含的模块（Component Blocks），并预留好对应的 Alpine.js 逻辑：

### Block 1: Premium Hero Banner (沉浸式视觉首屏)
- Layout: 全屏或大比例画幅。左侧/上方为大字报式的品牌 Slogan（如 "Time grid slows down here."），右侧/背景为高质感海景房间意象图。
- Interaction (Alpine.js): 包含一个极其精致的**「快捷查房与预订 (Quick Booking Bar)」组件**。用户可点击“选择入住日期”和“随行人数”，点击后通过 Alpine 的 `x-show` 触发极简的下拉浮层（Dropdown），样式要具有现代呼吸感。

### Block 2: Brand Manifesto (品牌叙事与宣言)
- Layout: 经典的杂志画册排版。左侧大面积留白，仅有一行纵向或精致的小字“01 / THE CONCEPT”，右侧是一段富有诗意、错落排版的民宿主理人寄语，配上一张胶片质感的民宿局部细节图。

### Block 3: Room Gallery Slider (房型探索滑动舱)
- Layout: 横向卡片流，展示 3-4 款核心房型（如：听海大床房、逐浪露台套房）。每张卡片包含图片、房型名称、面积、标配设施及价格。
- Interaction (Alpine.js): 实现一个**无缝的画廊轮播切换 (Carousel Slider)**。通过 Alpine 的 `x-data="{ activeSlide: 0 }"` 控制前后的平滑淡入淡出或位移，下方有极简的线性进度条或数字指示器（如 `01 / 04`）。

### Block 4: Curated Experiences (周边生活在地体验)
- Layout: 采用非对称的 **Swiss Grid 网格布局**（如 2x2 错落网格），展示“日出咖啡”、“海滩瑜伽”、“围炉夜话”等在地体验活动。
- Interaction (Alpine.js): 鼠标悬停 (Hover) 在卡片上时，利用 Alpine 的 class binding (`:class`) 配合 Tailwind 触发优雅的图片微放大或遮罩层文字平滑浮现效果。

### Block 5: Accordion FAQ (行前指南与常见问题)
- Layout: 极简的手风琴列表，包含“入住与退房时间”、“退改签政策”、“宠物友好”等常见问题。
- Interaction (Alpine.js): 使用 `x-data="{ active: null }"` 实现**手风琴折叠效果**，点击标题平滑展开（利用 `x-collapse` 或 Tailwind transition），Icon（加减号）跟随旋转。

# 3. 交付约束
- 必须严格遵循系统提示词中的技术栈（HTML5 + Tailwind CDN + Alpine.js + Lucide Icons）。
- 所有图片请使用来自 Unsplash、符合日系复古或现代极简度假风的高清占位图 URL。
- 输出的代码必须完整，确保无任何占位符截断。