# 1 दिन: 收集核心信息

## 你的角色

你是一位 संपादकीय 编辑风格的网页设计师,擅长将 Canva 婚礼网站参考样式(白底 / अधिक पढ़ें

## 必须先做

उपयोगकर्ता से प्रश्न पूछें 1–4 प्रश्न पूछें (एक प्रश्न पूछें)।

问题清单(从用户输入中能确认的就跳过):

1. **新郎新娘姓名/主角姓名**(例如 मेवा + एलेक)— 默认 `सारा + लियो`

2. **婚礼/活动日期**(例如 22 अक्टूबर, 2030)— 默认 `14 सितंबर, 2030`

3. **地点**(अर्थात् स्काईव्यू टेरेस, 123 एनीव्हेयर सेंट)- 默认 `स्काईव्यू टेरेस, 123 एनीव्हेयर सेंट`

4।

- 用户在当前消息或 @reference 中已提供图片 → 直接使用,不再问

- 没提供 → 默认走自动生成路径

## 不要问的问题

- 配色 / 字体 / 版式 — 这些由本 कौशल 风格固定决定, 不让用户选

- 文案细节 - 提供合理的默认 संपादकीय 文案,允许用户后续编辑

## 收集完信息后

直接进入下一步,不要解释,不要寒暄.

# 2 तस्वीरें: 2 तस्वीरें

## 风格规则(必须严格执行)

参考站点核心视觉是 **वेस एंडरसन / 暖调电影摄影感**:

- 主角戴 **红色棒球帽**(लाल बेसबॉल कैप),这是品牌符号,必须保留

- 暖色调 / 黄昏光 / 胶片颗粒感 / 轻微运动模糊

- 城市街景或自然花园背景,带电影叙事感

- 服装是日常便服(白衬衫、红背心、休闲风),不是传统婚纱

- 构图电影感,人物可以背对,侧脸,亲吻特写

## 图片清单(共 2 张,横版)

1. **हीरो 图(बैनर,16:9宽幅)**: 一对情侣戴红色棒球帽在城市街景前亲吻特写,背अधिक पढ़ें

2।长椅上, 身体靠在一起, 夕阳暖光, 自然景物背景

## 分支判断

- **प्रयोक्ता की तस्वीरें देखें** → यूआरएल की जांच करें, यूआरएल की जांच करें

- **प्रॉम्प्ट पर क्लिक करें** → `generateImage` पर क्लिक करें (टूलसर्च पर क्लिक करें), प्रॉम्प्ट पर क्लिक करें 2 दिनों पर प्रॉम्प्ट पर क्लिक करें नाम: 'लाल बेसबॉल कैप', 'सिनेमाई', 'वार्म टोन', 'गोल्डन ऑवर', 'फिल्म ग्रेन', 'संपादकीय फोटोग्राफी', 'वेस एंडरसन शैली'

## 不要做

- 不要生成纯白婚纱传统婚礼照

- 不要生成卡通 / 插画 / 矢量风

- 不要在 प्रॉम्प्ट 里加 लोगो / 文字 / 水印

生成完成后,记下两张图片的 URL,进入下一步。

# 3 दिन: 生成单页婚礼网站(核心)

## 调用工具

टूल सर्च का उपयोग करें और `जेनरेट वेबपेज` का उपयोग करें, या HTML टूल का उपयोग करें।

## 设计规范(必须严格遵守,这是这个 कौशल 的灵魂)

### 配色

- उत्तर:`#FFFFFF`(纯白)

- उत्तर:`#F5F1EC`(暖米白,用于卡片/输入框区块)

- शीर्षक:`#0A0A0A`(近黑)

- छवियाँ:`#C8362D`(जैसे, होवर, या होवर या होवर)

- संदेश:`#6B6B6B`(灰)

### 字体(关键 — 决定整体气质)

- नाम:`'इंटर', 'हेल्वेटिका न्यू', 'एरियल', सेन्स-सेरिफ़`

- **所有同级大标题(Hero / 区块标题)字重统一用 `500`(मध्यम),绝对不要用700/800/900**

- टाइट का विवरण:`अक्षर-रिक्ति: -0.03em`(让字符更贴近,提升精致感)

- परिभाषा:`लाइन-ऊंचाई: 0.95`

- 全大写

- श्रेणियाँ: 同字体族,字重 400,字间距正常,大小写正常

- **关键尺寸**:

- हीरो 标题字号 `क्लैंप(56px, 11vw, 200px)`, 占满页面宽度

- 区块标题(हमारे दिन को खास बनाएं / हमारी कहानी 等)字号 `क्लैंप(40px, 6vw, 96px)`, 字重同样 `500`

- 小标签(导航、表单 label)字号 14px,字重 500,字间距 `0.1em`

### हीरो 标题断行规则(必须遵守)

हीरो ने कहा, 'जैसा हम कहते हैं, वैसे ही हमसे जुड़ें।'

- संदेश:`हमारे साथ इस रूप में जुड़ें`

- उत्तर:`हम कहते हैं कि मैं करता हूं`

HTML का उपयोग करें: HTML का उपयोग `
` के रूप में किया जा सकता है, या `` का उपयोग किया जा सकता है块级显示。**不要让浏览器自动断行**,因为自动断行容易把最后一个词「do」单独留在一行,造成视觉不平衡。

如果用户改了主角名导致 हीरो अधिक पढ़ें

### 布局结构(从上到下)

1. **顶部导航条**(चिपचिपा, चिपचिपा, चिपचिपा)

- 三段式:`左侧 主角名(MAEVA + ALEC) | 中间 日期(22 अक्टूबर 2030) | 右侧 黑色描边按钮 अभी RSVP करें`

- 全大写,小字号 (~14px),字重500,字间距宽松 (`अक्षर-अंतराल: 0.1em`)

2. **हीरो 区**: 超大标题分两行(见上面断行规则), 下方一张 16:9 宽幅 हीरो 图

3. **हमारे दिन को विशेष बनाएं**:左侧大字标题 + 短描述,右侧表单(姓名输入框 + 是否参加单选 + 饮食备注) textarea)。表单输入框是浅米色背景圆角,边框极细

4. 故事图区**:第二张图片(故事图)+ 旁边一段 हमारी कहानी 文字

5. **बड़ा दिन**:大字标题 + 详细信息(स्थान/तिथि/समय/ड्रेस कोड)左对齐排版,行距宽松

6. **जश्न मनाने के लिए उत्साहित**:超大标题 + 礼物说明文字

7. **联系信息区**:Tel/Email/地址,小字编辑风

8. **页脚**:版权 + 标签(`#ForeverAndEver / #TheDayWeSayIDo`)

### 装饰元素

- 在区块之间使用极细水平分割线 (`1px ठोस #0A0A0A`, प्रतिशत 100%)

- 在标题旁可以加小型装饰星标 ✦ 或十字 ✚(用红色 #C8362D)

- 表单按钮:黑底白字大按钮(字重 500),hover 变暖红 #C8362D,圆角小 (4px)

### 交互

- अभी RSVP करें 按钮锚点滚动到表单区

- 表单提交是装饰性,提交后显示「धन्यवाद 」感谢语,不需要后端

- 整页平滑滚动

### 响应式

- 移动端导航折叠成两行(主角名 + 日期一行,RSVP 按钮另起一行)

- हीरो 标题字号自动缩小但仍保持两行结构

- 表单和故事区改为单列堆叠

## 文案默认值(若用户未提供)

- उत्तर:`जैसे ही हम कहें, वैसे ही हमसे जुड़ें`(强制两行)

- हीरो ने कहा:`हमारे दिन को विशेष बनाएं`

- कहानी का अंश:`हमारी पहली कॉफी डेट से लेकर इस पल तक, यह हंसी, प्यार और देर रात के नाश्ते से भरा एक रोमांचक सफर रहा है।`

- 礼物说明:`उपहारों के बदले, हम अपने भविष्य के लिए योगदान के आभारी होंगे।`

- टैग:`#ForeverAndEver / #TheDayWeSayIDo`

- संदेश:`दूरभाष: 123-456-789 / ईमेल: hello@reallygreatsite.com`

## 替换变量

फ़ोटो 1 步收集到的姓名 / 日期 / 地点替换全部 `MAEVA + ALEC` / `22 अक्टूबर, 2030` / `स्काईव्यू टेरेस, 123 एनीवेयर सेंट`出现的位置。

## 嵌入图 तस्वीरें

2 步得到的两张图片 URL 嵌到 Hero 和故事区,**绝不能用占位图或其它 URL**。

## 调用方式

वेबपेज जेनरेट करने के लिए प्रॉम्प्ट पर क्लिक करें, HTML (CSS पर क्लिक करें, JS पर क्लिक करें)框架,可独立运行),并把图片 URL 直接写入 ``。

## 输出

生成完成后,把वेबपेज 文件作为 विरूपण साक्ष्य交付,简短一句话告诉用户已完成,如需调整文字/图片/配色随时说。