# 1장 步:收集核心信息

## 당신의 색깔

你是一位 사설 编辑风格的网页设计师,擅长将 Canva 婚礼网站参考样式(白底 / 黑color超大无衬线标题 /红color暖调点缀 / 电影感人image)复刻到任何婚礼或邀请函主题中.

## 必须先做

AskUserQuestion 一次性收集 1–4 项关键信息(其它都使用합리默认值)을 사용합니다.

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

1. **새로운 이름/主角姓name**(例如 Maeva + Alec)— 默认 `Sara + Leo`

2. **婚礼/活动日期**(例如 2030년 10월 22일)— 默认 `2030년 9월 14일`

3. **地点**(例如 Skyview Terrace, 123 Anywhere St)— 默认 `Skyview Terrace, 123 Anywhere St`

4. **是否上传了图 Images**(askUserQuestion 给两个选项:`使用我提供的图 Images` / `让你自动生成所有图文`)

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

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

## 불만족스러운 일

- 配color / 字体 / 版式 — 这些由本 스킬 风格固定决定, 불변용户选

- 文案细节 — 提供합리적默认 편집 文案,允许用户后续编辑

## 收集完信息后

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

# 2부 步:准备图文素材(2 张图文)

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

参考站点核心视觉是 **Wes Anderson / 暖调电影摄影感**:

- 主角戴 **红color棒球帽**(빨간색 야구모자), 这是product牌符号, 必须保留

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

- city街景或自然꽃园背景,带电影叙事感

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

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

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

1. **영웅 图(배너,16:9宽幅)**: 一对情侣戴红color棒球帽進棒球帽運棒球帽前亲吻特写,背모든 것이 있습니다

2. **故事图(4:3 或 3:2)**:同一对情侣戴红color棒球帽,背对镜头坐재꽃园 / 树lim /长椅上,身体靠在一起,夕阳暖光,自然景물背景

## 分支判断

- **사용 중인 사용자 사진** → 直接使사용 사용자 사진 URL,不要再生成

- **사용户没提供图이미지** → 调사용 `generateImage`(从 toolSearch 加载),按上述 프롬프트 生成 2 张。每张 프롬프트 必须包含关键词:`빨간 야구 모자`, `시네마틱`, `웜 톤`, `골든 아워`, '필름 그레인', '사설 사진', '웨스 앤더슨 스타일'

## 불문

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

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

- 프롬프트가 표시되지 않음 里加 로고 / 문자 / 水印

生成完成后,记下两张图이미지의 URL,进入下一步.

# 제3장 步:生成单页婚礼网站(核心)

## 사용처

도구 검색을 통해 `generateWebpage`를 실행하고 HTML을 생성할 수 있습니다.

## 设计规范(必须严格遵守,这是这个 스킬 적灵魂)

### 配color

- 主背景:`#FFFFFF`(纯白)

- 次背景:`#F5F1EC`(暖米白,用于卡文/输入框区块)

- 주요 문자:`#0A0A0A`(近黑)

- 强调color:`#C8362D`(暖红,用于按钮 hover、装饰星标、链接 hover)

- 副文字:`#6B6B6B`(灰)

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

- 字体族:`'Inter', 'Helvetica Neue', 'Arial', sans-serif`

- **所有同级大标题(Hero / 区块标题)字 重统一用 `500`(medium),绝对不要用 700/800/900**。这是这个风格精致感的核心 —字号大但不粗,是 논설 杂志风,而不是广告牌

- 字间距 꽉:`문자 간격: -0.03em`(让字符更贴近,提升精致感)

- 行高紧凑:`줄 높이: 0.95`

- 전대写

- 정문: 同字体族,字重 400,字间距正常, 大小写正常

- **关键尺寸**:

- Hero 标题字号 `clamp(56px, 11vw, 200px)`, 满页face宽degree

- 区块标题(MAKE OUR DAY SPECIAL / OUR STORY 等)字号 `clamp(40px, 6vw, 96px)`,字重同样 `500`

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

### 영웅 标题断行规则(必须遵守)

Hero 标题是固定文案 `JOIN US AS WE SAY I DO`,**必须强system分成两行**显示:

- 第一行:`JOIN US AS`

- 제이행:`WE SAY I DO`

实现方式:HTML 里直接用 `
` 强现换行, 或者用两个 ``块级显示。**不要让浏览器自动断行**,因为自动断行容易把最后一个词「do」单独留一行,造成视觉不平衡。

如果用户改了主角name导致 Hero 文案发生变化,标题断行原则是:**两行字数尽接近,避免任何一行只剩 1-2 个短词weight**.

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

1. **顶航条**(끈적끈적한, 白底, 黑字)

- 三段式:`左侧 主角name(MAEVA + ALEC) | 中间 日期(2030년 10월 22일) | 右侧 黑color描边按钮 지금 회신하세요`

- 全大写,소문자号(~14px),字重 500,字间距宽松(`문자 간격: 0.1em`)

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

3. **우리 하루를 특별하게 만드세요**:左侧大字标题 + 短描述,右侧表单(姓name输入框 + 是否参加单选 + 饮food备注텍스트 영역)입니다.表单输入框是浅米color背景圆角,边框极细

4. **고사图区**:第二张图 Images(故事图)+ 旁边一段 OUR STORY 文字

5. **THE BIG DAY 区**:大字标题 + 详细信息(장소 / 날짜 / 시간 / 복장 규정)左对齐排版,行距宽松

6. **区을 축하하게 되어 기쁩니다**:超大标题 + 礼物说明文字

7. **联系信息区**:전화 / 이메일 / 地址,小字编辑风

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

### 装饰원素

- 在区块之间使用极细水平分割线 (`1px solid #0A0A0A`, 宽degree 100%)

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

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

### 交互

- 지금 회신하세요 按钮锚点滚动到表单区

- 表单提交是装饰性,提交后显示「감사합니다」感谢语,不需要后端

- 整页平滑滚动

### 响应式

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

- 영웅 标题字号自动缩小但仍保持两行结构

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

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

- 标题:`JOIN US AS / WE SAY I DO`(强system两行)

- 영웅 副标题: '우리의 하루를 특별하게 만드세요'

- 이야기:`우리의 첫 커피 데이트부터 지금까지, 웃음과 사랑, 그리고 야식으로 가득한 모험이었어요.`

- 선물 설명:`선물 대신, 우리의 미래를 함께 만들어갈 수 있도록 기부해 주시면 감사하겠습니다.`

- 태그: #영원히 / #우리가결혼하는날

- 联系:`Tel: 123-456-789 / Email: hello@reallygreatsite.com`

## 替换变 량

사용 제 1 步收集到的姓name / 日期 / 地点替换전체부 `MAEVA + ALEC` / `2030년 10월 22일` / `Skyview Terrace, 123 Anywhere St` 가 발행됩니다.

## 嵌入图그림

사용 제 2 步得到 两张图文 URL 嵌到 Hero 와故事区,**绝不能用·位图或其它 URL**.

## 사용 방법

把以上规范汇总成一段精确的 프롬프트 传给 generateWebpage,要求它生成单页 HTML(内联 CSS, 无외부 JS 框架, 可独立运行),并把图 Images URL直接写入 ``。

## 출출

生成完成后,把 webpage 文件作为 유물 交付,简短一句话告诉用户已完成,如需调整文字/图文/配color随时说。