dayuse-pptx

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Dayuse PPTX Skill

Dayuse PPTX 技能

This skill creates Dayuse-branded presentations following the company's visual identity (sourced from the official Figma brand guidelines), storytelling framework, and slide patterns.

Before creating any presentation, always also read the main
pptx
skill for technical guidance on creating PPTX files with PptxGenJS.

本技能可根据公司的视觉标识（源自官方Figma品牌指南）、叙事框架和幻灯片模板，创建符合Dayuse品牌的演示文稿。

在创建任何演示文稿之前，请务必阅读主
pptx
技能文档，获取使用PptxGenJS创建PPTX文件的技术指导。

Figma Sources

Figma 资源来源

Resource	File Key	Content
Design System v2.0.3	`1kQ21QwHaQxQrfR1Ozz7ys`	187 icons (8 categories), colors, typography, components
ICONS-LIBRARY	`VYZeBPPWPcilQddvldU8w0`	Réassurance gradient + UI icon sets
Image Bank	`VU7niZDEMGOhmquJcpAk2P`	35+ lifestyle photos (photoshoot June 2023)
On-boarding Assets	`XVlA3zCtO7jJ4GI4oaFLCV`	App screens, splash, UI components

资源	文件密钥	内容
设计系统 v2.0.3	`1kQ21QwHaQxQrfR1Ozz7ys`	187个图标（8个分类）、配色、排版、组件
图标库	`VYZeBPPWPcilQddvldU8w0`	安心感渐变图标集 + UI图标集
图片库	`VU7niZDEMGOhmquJcpAk2P`	35+张生活方式照片（2023年6月拍摄）
入职素材	`XVlA3zCtO7jJ4GI4oaFLCV`	App界面、启动页、UI组件

Asset Catalog

素材目录

All brand assets are organized in

assets/

. ALWAYS use these real assets rather than generating placeholders.

所有品牌素材都存放在

assets/

目录下。请务必使用这些真实素材，而非生成占位图。

Logos (assets/logos/)

标志（assets/logos/）

File	Description	Usage	Aspect Ratio
`logo-gradient.png`	Wordmark "DAYUSE" in expressive gradient (jaune → orange → corail → bleu)	OOH, social, printed merch, expressive presentations. Requires background removal preprocessing.	2:1
`logo-black.png`	Wordmark "DAYUSE" in Evening Blue `292935`	Website, web banners, formal documents, toned-down communications	2:1

文件	描述	使用场景	宽高比
`logo-gradient.png`	渐变风格的“DAYUSE”文字标志（黄色→橙色→珊瑚色→蓝色）	户外广告、社交媒体、周边印刷、创意演示文稿。使用前需先去除背景。	2:1
`logo-black.png`	深夜蓝 `292935` 风格的“DAYUSE”文字标志	官网、网页横幅、正式文档、简约沟通材料	2:1

Icons / Symbols (assets/icons/)

图标/符号（assets/icons/）

File	Description	Usage
`icon-gradient.png`	"Y" symbol in sun gradient circle (jaune → orange → corail)	Expressive use: social media favicons, app icon contexts. Can ONLY be used with the sun gradient.
`icon-black.png`	"Y" symbol in Evening Blue circle	Functional use: slide footers, small placements, formal contexts
`icon-app.png`	App icon (Y symbol on rounded-square gradient background)	App references, product mockups

文件	描述	使用场景
`icon-gradient.png`	太阳渐变圆形背景的“Y”符号	创意场景：社交媒体图标、App相关场景。仅可搭配太阳渐变使用，请勿重新着色
`icon-black.png`	深夜蓝圆形背景的“Y”符号	功能性场景：幻灯片页脚、小尺寸放置、正式场合
`icon-app.png`	App图标（渐变圆角方形背景的Y符号）	App参考、产品原型

Image Bank (Figma — Photoshoot "New Brand June 2023")

图片库（Figma — 2023年6月品牌拍摄）

Source: Figma file

VU7niZDEMGOhmquJcpAk2P

The Dayuse Image Bank is the official repository of brand photography for all channels (CRM, Social Media, Website, presentations). It contains 35+ retouched, validated lifestyle photos from the June 2023 brand photoshoot.

来源：Figma文件

VU7niZDEMGOhmquJcpAk2P

Dayuse图片库是所有渠道（CRM、社交媒体、官网、演示文稿）的官方品牌摄影资源库，包含35+张经过修图和审核的生活方式照片，均来自2023年6月的品牌拍摄。

Photo Categories & Subjects

照片分类与主题

Theme	Description	Example IDs	Usage in Slides
Couple en chambre	Couples in hotel rooms: bed, breakfast, petals, relaxation	DAYUSE0026, DAYUSE0085, DAYUSE0456	Cover slides, lifestyle backgrounds, "experience" sections
Piscine / Pool	People in hotel pools, underwater shots, poolside	DAYUSE1876, DAYUSE2375, DAYUSE2059	Leisure slides, amenities, summer campaigns
Spa & Wellness	Bathrobes, face masks, spa treatments, skincare	DAYUSE0060, DAYUSE0620, DAYUSE0064	Wellness proposition, hotel amenities
Sauna	Couples in sauna, relaxation	DAYUSE0559, DAYUSE0620-2, DAYUSE0620-3	Relaxation theme, hotel features
Travail / Remote Work	Business travelers with laptops in hotel settings	DAYUSE0143, DAYUSE0226	"Work" use case, B2B slides, business travel
Selfie & Fun	Playful photos, selfies, confetti, rose petals	DAYUSE0801, DAYUSE2138, DAYUSE2202	Social media references, fun/playful slides
Marché Asie	Asia-specific imagery (couples, luxury hotels)	Asia A, Asia B variants	APAC market slides, international expansion

主题	描述	示例ID	幻灯片使用场景
客房情侣	酒店客房内的情侣场景：床、早餐、花瓣、放松	DAYUSE0026, DAYUSE0085, DAYUSE0456	封面幻灯片、生活方式背景、“体验”板块
泳池	酒店泳池内的人物、水下镜头、池边场景	DAYUSE1876, DAYUSE2375, DAYUSE2059	休闲类幻灯片、设施介绍、夏季活动
水疗与养生	浴袍、面膜、水疗护理、护肤场景	DAYUSE0060, DAYUSE0620, DAYUSE0064	养生服务介绍、酒店设施
桑拿房	桑拿房内的情侣放松场景	DAYUSE0559, DAYUSE0620-2, DAYUSE0620-3	放松主题、酒店特色
远程办公	酒店场景中使用笔记本电脑的商务旅客	DAYUSE0143, DAYUSE0226	“办公”使用场景、B2B幻灯片、商务出行
自拍与趣味	趣味照片、自拍、彩纸、玫瑰花瓣	DAYUSE0801, DAYUSE2138, DAYUSE2202	社交媒体参考、趣味幻灯片
亚洲市场	亚洲专属场景（情侣、奢华酒店）	Asia A, Asia B 变体	亚太市场幻灯片、国际扩张

Available Photos (assets/photos/)

可用照片（assets/photos/）

File	Theme	Description
`hero_girl_bed_room.jpg`	Chambre	Femme sur lit d'hôtel — hero/cover slide
`bed-1.jpg`	Chambre	Scène de chambre d'hôtel
`bath-2-1.jpg`	Spa/Wellness	Scène de salle de bain
`couplepool.jpg`	Piscine	Couple à la piscine
`girlpool.jpg`	Piscine	Femme à la piscine
`coupleontop.jpg`	Couple	Couple en extérieur
`frenchcouple_ontop.jpg`	Couple	Couple lifestyle
`girl_la_view_swimsuit.jpg`	Lifestyle	Femme avec vue panoramique
`dayuse_20_01_251245-1.jpg`	Brand shoot	Photo shoot officiel
`dayuse_20_01_251524-1.jpg`	Brand shoot	Photo shoot officiel
`dayuse_20_01_251693-2-1.jpg`	Brand shoot	Photo shoot officiel

Note:
POOL 1.png
(311 MB / 460M pixels) a été exclu car trop volumineux. Ré-exporter depuis Figma à ≤4000px de large.

文件	主题	描述
`hero_girl_bed_room.jpg`	客房	酒店床上的女性 — 封面/首屏幻灯片
`bed-1.jpg`	客房	酒店客房场景
`bath-2-1.jpg`	水疗/养生	浴室场景
`couplepool.jpg`	泳池	泳池中的情侣
`girlpool.jpg`	泳池	泳池中的女性
`coupleontop.jpg`	情侣	户外情侣场景
`frenchcouple_ontop.jpg`	情侣	情侣生活方式场景
`girl_la_view_swimsuit.jpg`	生活方式	拥有全景视野的女性
`dayuse_20_01_251245-1.jpg`	品牌拍摄	官方拍摄照片
`dayuse_20_01_251524-1.jpg`	品牌拍摄	官方拍摄照片
`dayuse_20_01_251693-2-1.jpg`	品牌拍摄	官方拍摄照片

注意：
POOL 1.png
（311 MB / 4.6亿像素）因体积过大已被排除，如需使用请从Figma重新导出为宽度≤4000px的版本。

Photo Style Guidelines (for Presentations)

幻灯片照片使用规范

Full-bleed: Use photos as full-slide backgrounds for cover or closing slides
Half-bleed: Photo on one half, content on the other (50/50 split)
Card crop: Crop photos into rounded rectangles (
```
rectRadius: 0.12
```
) for cards
Overlay: Photo with gradient text overlay (see
```
assets/brand-guide/images-best-practice.png
```
)
Always use brand gradient band at bottom when photo is NOT full-bleed

javascript

// Example — full-bleed photo background with text overlay:
slide.addImage({ path: "assets/photos/hero_girl_bed_room.jpg", x: 0, y: 0, w: 10, h: 5.625 });
// Add semi-transparent overlay for text readability:
slide.addShape(pptx.shapes.RECTANGLE, { x: 0, y: 3.5, w: 10, h: 2.125, fill: { color: "292935", transparency: 40 } });
slide.addText("Room to daydream.", { x: 0.6, y: 3.8, w: 8.8, fontSize: 36, fontFace: "Manrope", color: "FFFFFF", bold: true });

全屏 bleed：将照片用作封面或结束页的全屏背景
半屏 bleed：照片占一半区域，另一半放置内容（50/50分割）
卡片裁剪：将照片裁剪为圆角矩形（
```
rectRadius: 0.12
```
）用于卡片组件
叠加层：照片搭配渐变文字叠加（参考
```
assets/brand-guide/images-best-practice.png
```
）
若照片未全屏显示，底部必须添加品牌渐变条

javascript

// 示例 — 全屏照片背景搭配文字叠加层:
slide.addImage({ path: "assets/photos/hero_girl_bed_room.jpg", x: 0, y: 0, w: 10, h: 5.625 });
// 添加半透明叠加层提升文字可读性:
slide.addShape(pptx.shapes.RECTANGLE, { x: 0, y: 3.5, w: 10, h: 2.125, fill: { color: "292935", transparency: 40 } });
slide.addText("Room to daydream.", { x: 0.6, y: 3.8, w: 8.8, fontSize: 36, fontFace: "Manrope", color: "FFFFFF", bold: true });

On-boarding Assets (Figma Reference)

入职素材（Figma参考）

Source: Figma file

XVlA3zCtO7jJ4GI4oaFLCV

(node

445:3150

)

Contains mobile app onboarding screens, splash screens, and UI component variations. Useful as reference for:

Product mockups in pitch decks (screenshot the app screens)
App UI illustrations for product slides
Onboarding flow diagrams for internal roadmap presentations

来源：Figma文件

XVlA3zCtO7jJ4GI4oaFLCV

（节点

445:3150

）

包含移动App入职界面、启动页和UI组件变体，可用于：

路演PPT中的产品原型（截取App界面截图）
产品幻灯片中的App UI插图
内部路线图演示中的入职流程示意图

Marketing Icons — "Réassurance Gradient" (assets/icons/marketing-icons.json)

营销图标 — “安心感渐变”（assets/icons/marketing-icons.json）

Source: Figma ICONS-LIBRARY (

VYZeBPPWPcilQddvldU8w0

)

19 SVG icons with brand gradient fills (orange/coral/yellow). ViewBox 49x49. Used for pitch decks, marketing materials, value propositions. All icons are stored in a single JSON file:

assets/icons/marketing-icons.json

(key = icon name, value = SVG string).

Key	Description	Usage
`business`	Bar chart with gradient bg	Business metrics, revenue
`customer`	User silhouette	Customer-related stats
`customer-service`	Headset agent	Support, service quality
`duo`	Two people	Couples, social
`diamond`	Diamond shape	Premium, luxury
`free-cancellation`	Calendar with cross	Cancellation policy
`gift`	Gift box	Promotions, offers
`hotel`	Building	Hotel count, partners
`house-traditional`	House	Alternative accommodations
`international`	Globe	International presence
`keys`	Keys	Access, bookings
`leader`	Trophy/medal	Market leadership
`location`	Map pin	Geographic coverage
`money`	Coins/bills	Revenue, savings
`no-card`	Crossed credit card	No card required
`rated`	Star rating	Reviews, ratings
`stats-lines`	Line chart	Growth trends
`stats-pipes`	Bar chart	Comparative data
`-75pct`	Discount tag	Discounts, savings

来源：Figma图标库（

VYZeBPPWPcilQddvldU8w0

）

19个带有品牌渐变填充（橙色/珊瑚色/黄色）的SVG图标， viewBox为49x49。用于路演PPT、营销材料、价值主张。所有图标存储在单个JSON文件中：

assets/icons/marketing-icons.json

（键为图标名称，值为SVG字符串）。

键	描述	使用场景
`business`	渐变背景的柱状图	业务指标、营收
`customer`	用户剪影	客户相关数据
`customer-service`	头戴耳机的客服	支持服务、服务质量
`duo`	两个人物	情侣、社交场景
`diamond`	钻石形状	高端、奢华
`free-cancellation`	带叉号的日历	取消政策
`gift`	礼品盒	促销、优惠
`hotel`	建筑	酒店数量、合作伙伴
`house-traditional`	房屋	替代住宿选择
`international`	地球仪	国际布局
`keys`	钥匙	入住、预订
`leader`	奖杯/奖牌	市场领先地位
`location`	地图标记	地理覆盖范围
`money`	硬币/纸币	营收、节省
`no-card`	带叉号的信用卡	无需信用卡
`rated`	星级评分	评价、评分
`stats-lines`	折线图	增长趋势
`stats-pipes`	柱状图	对比数据
`-75pct`	折扣标签	折扣、优惠

UI Icons — Design System (assets/icons/ui-icons.json)

UI图标 — 设计系统（assets/icons/ui-icons.json）

Source: Figma Design System v2.0.3 — exported SVGs

184 SVG icons in flat outline style (stroke

#292935

Evening Blue). ViewBox 24x24. Used for all presentation contexts. All icons are stored in a single JSON file:

assets/icons/ui-icons.json

(key = icon name, value = SVG string).

Naming convention (keys in JSON):

```
nav-xxx
```
— UI navigation actions (arrows, check, cross, edit, trash, menu, etc.)
```
ind-xxx
```
— Status & feedback (alert, check, clock, discount, gift, info, lock, star, etc.)
```
xxx
```
(no prefix) — Amenities & features (wifi, pool, parking, spa, bed, tv, restaurant, etc.)

来源：Figma设计系统v2.0.3 — 导出的SVG图标

184个扁平轮廓风格的SVG图标（描边为

#292935

深夜蓝）， viewBox为24x24。适用于所有演示文稿场景。所有图标存储在单个JSON文件中：

assets/icons/ui-icons.json

（键为图标名称，值为SVG字符串）。

命名规范（JSON中的键）：

```
nav-xxx
```
— UI导航操作（箭头、勾选、叉号、编辑、删除、菜单等）
```
ind-xxx
```
— 状态与反馈（警告、勾选、时钟、折扣、礼品、信息、锁、星级等）
```
xxx
```
（无前缀） — 酒店设施与特色（wifi、泳池、停车场、水疗、床、电视、餐厅等）

Icon Helper Functions

图标辅助函数

javascript

const fs = require("fs");
const sharp = require("sharp");

// Load icon catalogs once
const UI_ICONS = JSON.parse(fs.readFileSync("assets/icons/ui-icons.json", "utf8"));
const MKT_ICONS = JSON.parse(fs.readFileSync("assets/icons/marketing-icons.json", "utf8"));

// UI icon → PNG (with optional recolor)
async function uiIconPng(name, color = "#292935", size = 128) {
  let svg = UI_ICONS[name];
  if (!svg) throw new Error(`UI icon "${name}" not found. Available: ${Object.keys(UI_ICONS).join(", ")}`);
  svg = svg.replace(/stroke="#292935"/g, `stroke="${color}"`);
  const buf = await sharp(Buffer.from(svg)).resize(size).png().toBuffer();
  return "image/png;base64," + buf.toString("base64");
}

// Marketing icon → PNG (gradient, use as-is)
async function marketingIconPng(name, size = 128) {
  const svg = MKT_ICONS[name];
  if (!svg) throw new Error(`Marketing icon "${name}" not found. Available: ${Object.keys(MKT_ICONS).join(", ")}`);
  const buf = await sharp(Buffer.from(svg)).resize(size).png().toBuffer();
  return "image/png;base64," + buf.toString("base64");
}

// Examples:
const wifiCoral = await uiIconPng("wifi", "#FDAA9A");          // coral
const starOrange = await uiIconPng("ind-star", "#F66236");     // orange
const checkWhite = await uiIconPng("nav-check", "#FFFFFF");    // white (for dark bg)
const alertPink = await uiIconPng("ind-alert", "#FF003E");     // hot pink
slide.addImage({ data: wifiTeal, x: 1, y: 1, w: 0.4, h: 0.4 });

const hotelIcon = await marketingIconPng("hotel");
slide.addImage({ data: hotelIcon, x: 1, y: 1, w: 0.5, h: 0.5 });

Recoloring: UI icons use
stroke="#292935"
— easy to recolor via the
color
param. Marketing icons have baked-in brand gradients (linearGradient orange→coral→yellow) — use as-is.

javascript

const fs = require("fs");
const sharp = require("sharp");

// 一次性加载图标目录
const UI_ICONS = JSON.parse(fs.readFileSync("assets/icons/ui-icons.json", "utf8"));
const MKT_ICONS = JSON.parse(fs.readFileSync("assets/icons/marketing-icons.json", "utf8"));

// UI图标 → PNG（支持重新着色）
async function uiIconPng(name, color = "#292935", size = 128) {
  let svg = UI_ICONS[name];
  if (!svg) throw new Error(`UI icon "${name}" not found. Available: ${Object.keys(UI_ICONS).join(", ")}`);
  svg = svg.replace(/stroke="#292935"/g, `stroke="${color}"`);
  const buf = await sharp(Buffer.from(svg)).resize(size).png().toBuffer();
  return "image/png;base64," + buf.toString("base64");
}

// 营销图标 → PNG（渐变风格，直接使用）
async function marketingIconPng(name, size = 128) {
  const svg = MKT_ICONS[name];
  if (!svg) throw new Error(`Marketing icon "${name}" not found. Available: ${Object.keys(MKT_ICONS).join(", ")}`);
  const buf = await sharp(Buffer.from(svg)).resize(size).png().toBuffer();
  return "image/png;base64," + buf.toString("base64");
}

// 示例:
const wifiCoral = await uiIconPng("wifi", "#FDAA9A");          // 珊瑚色
const starOrange = await uiIconPng("ind-star", "#F66236");     // 橙色
const checkWhite = await uiIconPng("nav-check", "#FFFFFF");    // 白色（深色背景使用）
const alertPink = await uiIconPng("ind-alert", "#FF003E");     // 亮粉色
slide.addImage({ data: wifiTeal, x: 1, y: 1, w: 0.4, h: 0.4 });

const hotelIcon = await marketingIconPng("hotel");
slide.addImage({ data: hotelIcon, x: 1, y: 1, w: 0.5, h: 0.5 });

重新着色说明：UI图标使用
stroke="#292935"
，可通过
color
参数轻松重新着色。营销图标已内置品牌渐变（线性渐变：橙色→珊瑚色→黄色），请直接使用。

Brand Guide References (assets/brand-guide/)

品牌指南参考（assets/brand-guide/）

These are exported Figma pages for visual reference when designing slides:

File	Content
`gradients-4types.png`	The 4 brand gradients (Generic, Primary, Complementary 1, Complementary 2)
`gradient-text-rules.png`	Rules for applying gradients ON text (direction: top-left → bottom-right)
`gradient-background-rules.png`	Rules for applying gradients AS backgrounds (direction: bottom-left → top-right)
`hq-gradients.png`	HQ angular gradients with background blur for key visuals
`typography-best-practice.png`	Font hierarchy: Maison Neue (H1), Manrope (H2/body), secondary text rules
`typography-colors.png`	Color/gradient usage on text with examples
`color-spectrum-values.png`	Color spectrum with emotional values (Liberté → Bien-être)
`color-inspiration-skies.png`	Sky photography inspiration for the brand palette
`layouts-best-practice.png`	Diverse layout examples (portrait, landscape, stories)
`images-best-practice.png`	Image + gradient text overlay example

这些是从Figma导出的页面，用于设计幻灯片时的视觉参考：

文件	内容
`gradients-4types.png`	4种品牌渐变（通用、主色、互补色1、互补色2）
`gradient-text-rules.png`	文字渐变应用规则（方向：左上→右下）
`gradient-background-rules.png`	背景渐变应用规则（方向：左下→右上）
`hq-gradients.png`	高清角度渐变搭配背景模糊，用于关键视觉元素
`typography-best-practice.png`	字体层级：Maison Neue（H1）、Manrope（H2/正文）、次要文字规则
`typography-colors.png`	文字颜色/渐变使用示例
`color-spectrum-values.png`	配色光谱与情感价值（自由→舒适）
`color-inspiration-skies.png`	品牌调色板的天空摄影灵感来源
`layouts-best-practice.png`	多样布局示例（竖版、横版、故事型）
`images-best-practice.png`	图片+渐变文字叠加示例

Logo Usage Rules (from Figma Brand Guidelines)

标志使用规则（来自Figma品牌指南）

CRITICAL RULES:

The symbol (Y icon) and wordmark (DAYUSE text) each have their own place and time. NEVER use them as a lock-up together on the same element. They CAN appear on the same layout, but never combined as one unit.
Functional (Evening Blue versions): for practical uses — website, small sizes, web banners, formal documents
Expressive (Gradient versions): for expressive uses — OOH, social channels, printed merch, hero slides
The expressive core symbol (icon-gradient) can ONLY be used with the sun gradient — never recolor it
Always use the supplied artwork — never try to recreate the wordmark

核心规则：

符号（Y图标）和文字标志（DAYUSE文字）各有其使用场景，切勿在同一元素中组合使用。它们可以出现在同一布局中，但不能合并为一个单元。
功能性版本（深夜蓝风格）：用于实用场景 — 官网、小尺寸、网页横幅、正式文档
创意版本（渐变风格）：用于创意场景 — 户外广告、社交媒体、周边印刷、首屏幻灯片
创意核心符号（icon-gradient）仅可搭配太阳渐变使用，切勿重新着色
请始终使用提供的素材，切勿尝试重新制作文字标志

Step 0: Preprocess Assets (MANDATORY)

步骤0：素材预处理（必须执行）

Run these steps BEFORE writing any slide code.

在编写任何幻灯片代码之前，请先执行以下步骤。

Logo — Remove Black Background

标志 — 去除黑色背景

The source logos (gradient versions) are RGB with a black background. They MUST be converted to transparent PNG before use, or they will display as an ugly black rectangle on slides.

bash

python scripts/preprocess-logo.py assets/logos/logo-gradient.png /tmp/dayuse-logo-gradient.png
python scripts/preprocess-logo.py assets/icons/icon-gradient.png /tmp/dayuse-icon-gradient.png

Also prepare the black versions (which have white backgrounds to remove):

bash

python scripts/preprocess-logo.py assets/logos/logo-black.png /tmp/dayuse-logo-black.png
python scripts/preprocess-logo.py assets/icons/icon-black.png /tmp/dayuse-icon-black.png

Then use

/tmp/dayuse-*.png

everywhere. NEVER use the raw asset files directly.

源标志（渐变版本）为带黑色背景的RGB图片，必须转换为透明PNG后使用，否则会在幻灯片上显示为难看的黑色矩形。

bash

python scripts/preprocess-logo.py assets/logos/logo-gradient.png /tmp/dayuse-logo-gradient.png
python scripts/preprocess-logo.py assets/icons/icon-gradient.png /tmp/dayuse-icon-gradient.png

同时处理黑色版本（需要去除白色背景）：

bash

python scripts/preprocess-logo.py assets/logos/logo-black.png /tmp/dayuse-logo-black.png
python scripts/preprocess-logo.py assets/icons/icon-black.png /tmp/dayuse-icon-black.png

之后请使用

/tmp/dayuse-*.png

，切勿直接使用原始素材文件。

⚠️ CRITICAL — Image & Icon Aspect Ratio (NO DISTORTION)

⚠️ 核心规则 — 图片与图标宽高比（禁止变形）

ALL images and icons MUST maintain their original aspect ratio. Never set both

and

arbitrarily — always compute one from the other.

javascript

const sharp = require("sharp");

// Helper: get image dimensions and compute correct placement
async function fitImage(imagePath, maxW, maxH) {
  const meta = await sharp(imagePath).metadata();
  const ratio = meta.width / meta.height;
  let w, h;
  if (ratio >= maxW / maxH) {
    // wider than slot → fit to width
    w = maxW;
    h = maxW / ratio;
  } else {
    // taller than slot → fit to height
    h = maxH;
    w = maxH * ratio;
  }
  return { w, h };
}

// For base64 data (icons from JSON), use the SVG viewBox or known ratio:
// UI icons: viewBox 24x24 → ratio 1:1 → ALWAYS use same w and h
// Marketing icons: viewBox 49x49 → ratio 1:1 → ALWAYS use same w and h
// Photos: use fitImage() helper above

// CORRECT — 1:1 icon
slide.addImage({ data: iconData, x: 1, y: 1, w: 0.5, h: 0.5 });

// CORRECT — photo fitted to slot
const { w, h } = await fitImage("assets/photos/couplepool.jpg", 4.5, 3.0);
slide.addImage({ path: "assets/photos/couplepool.jpg", x: 0.5, y: 1, w, h });

// WRONG — arbitrary w/h stretches the image
slide.addImage({ path: "assets/photos/couplepool.jpg", x: 0.5, y: 1, w: 4.5, h: 3.0 }); // DISTORTED!

Rules:

Icons (UI + Marketing): Always square
```
w === h
```
(they are all 1:1 viewBox)
Photos: Always use
```
fitImage()
```
helper or manually compute
```
h = w / ratio
```
Logos: Wordmark = 2:1, Symbol = 1:1 (see below)

所有图片和图标必须保持原始宽高比，切勿随意设置

和

，请始终根据其中一个参数计算另一个。

javascript

const sharp = require("sharp");

// 辅助函数：获取图片尺寸并计算正确的放置参数
async function fitImage(imagePath, maxW, maxH) {
  const meta = await sharp(imagePath).metadata();
  const ratio = meta.width / meta.height;
  let w, h;
  if (ratio >= maxW / maxH) {
    // 比容器宽 → 适配宽度
    w = maxW;
    h = maxW / ratio;
  } else {
    // 比容器高 → 适配高度
    h = maxH;
    w = maxH * ratio;
  }
  return { w, h };
}

// 对于base64数据（来自JSON的图标），使用SVG viewBox或已知比例：
// UI图标：viewBox 24x24 → 比例1:1 → 始终使用相同的w和h
// 营销图标：viewBox 49x49 → 比例1:1 → 始终使用相同的w和h
// 照片：使用上述fitImage()辅助函数

// 正确示例 — 1:1图标
slide.addImage({ data: iconData, x: 1, y: 1, w: 0.5, h: 0.5 });

// 正确示例 — 适配容器的照片
const { w, h } = await fitImage("assets/photos/couplepool.jpg", 4.5, 3.0);
slide.addImage({ path: "assets/photos/couplepool.jpg", x: 0.5, y: 1, w, h });

// 错误示例 — 随意设置w/h会导致图片变形
slide.addImage({ path: "assets/photos/couplepool.jpg", x: 0.5, y: 1, w: 4.5, h: 3.0 }); // 变形！

规则:

图标（UI + 营销）：始终使用正方形
```
w === h
```
（均为1:1 viewBox）
照片：始终使用
```
fitImage()
```
辅助函数或手动计算
```
h = w / ratio
```
标志：文字标志为2:1，符号为1:1（见下文）

Logo — Respect the 2:1 Aspect Ratio (Wordmark Only)

标志 — 遵守2:1宽高比（仅文字标志）

The wordmark logos are 2000x1000px = exactly 2:1 ratio. Always maintain this ratio when placing:

javascript

// CORRECT — 2:1 ratio maintained
const LOGO_W = 1.8;
const LOGO_H = LOGO_W / 2; // = 0.9
slide.addImage({ path: "/tmp/dayuse-logo-gradient.png", x: 0.6, y: 0.4, w: LOGO_W, h: LOGO_H });

// WRONG — distorted logo
slide.addImage({ path: logo, x: 0.6, y: 0.4, w: 1.8, h: 0.5 }); // squished!

Common sizes (all 2:1):

Cover top-left:
```
w: 1.8, h: 0.9
```
Closing centered:
```
w: 1.4, h: 0.7
```
Small footer:
```
w: 1.0, h: 0.5
```

文字标志的尺寸为2000x1000px，宽高比严格为2:1，放置时请始终保持该比例：

javascript

// 正确示例 — 保持2:1比例
const LOGO_W = 1.8;
const LOGO_H = LOGO_W / 2; // = 0.9
slide.addImage({ path: "/tmp/dayuse-logo-gradient.png", x: 0.6, y: 0.4, w: LOGO_W, h: LOGO_H });

// 错误示例 — 标志变形
slide.addImage({ path: logo, x: 0.6, y: 0.4, w: 1.8, h: 0.5 }); // 被压缩！

常用尺寸（均为2:1）:

封面左上角：
```
w: 1.8, h: 0.9
```
结束页居中：
```
w: 1.4, h: 0.7
```
页脚小尺寸：
```
w: 1.0, h: 0.5
```

Icon Symbol — 1:1 Aspect Ratio

符号图标 — 1:1宽高比

The symbol icons are circular = exactly 1:1 ratio:

Slide footer symbol:
```
w: 0.35, h: 0.35
```
Cover accent:
```
w: 0.5, h: 0.5
```

符号图标为圆形，宽高比严格为1:1:

幻灯片页脚符号：
```
w: 0.35, h: 0.35
```
封面装饰：
```
w: 0.5, h: 0.5
```

Gradient Band

渐变条

Create the Dayuse signature gradient band (jaune → orange → corail → bleu/vert) as a PNG image to place at the bottom of every slide:

javascript

async function makeGradientBand(width = 2000, height = 12) {
  const svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
    <defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FEB900"/>
      <stop offset="33%" stop-color="#FD7030"/>
      <stop offset="67%" stop-color="#FDAA9A"/>
      <stop offset="100%" stop-color="#B7D5D5"/>
    </linearGradient></defs>
    <rect width="${width}" height="${height}" fill="url(#g)"/>
  </svg>`;
  const buf = await sharp(Buffer.from(svg)).png().toBuffer();
  return "image/png;base64," + buf.toString("base64");
}

// Place at bottom of every content slide:
slide.addImage({ data: gradientData, x: 0, y: 5.525, w: 10, h: 0.1 });

创建Dayuse标志性渐变条（黄色→橙色→珊瑚色→蓝绿色）作为PNG图片，放置在每张幻灯片的底部：

javascript

async function makeGradientBand(width = 2000, height = 12) {
  const svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
    <defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FEB900"/>
      <stop offset="33%" stop-color="#FD7030"/>
      <stop offset="67%" stop-color="#FDAA9A"/>
      <stop offset="100%" stop-color="#B7D5D5"/>
    </linearGradient></defs>
    <rect width="${width}" height="${height}" fill="url(#g)"/>
  </svg>`;
  const buf = await sharp(Buffer.from(svg)).png().toBuffer();
  return "image/png;base64," + buf.toString("base64");
}

// 放置在每个内容幻灯片的底部:
slide.addImage({ data: gradientData, x: 0, y: 5.525, w: 10, h: 0.1 });

Gradient Backgrounds (for Section Slides)

渐变背景（用于章节幻灯片）

The brand supports 4 gradient types for backgrounds. Use these for section divider slides (like WHY? / HOW? transitions):

javascript

// Generic Gradient (full spectrum — for brand statement slides)
async function makeGenericGradientBg(width = 1920, height = 1080) {
  const svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
    <defs><linearGradient id="g" x1="0%" y1="100%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FEB900"/>
      <stop offset="33%" stop-color="#FD7030"/>
      <stop offset="67%" stop-color="#FDAA9A"/>
      <stop offset="100%" stop-color="#B7D5D5"/>
    </linearGradient></defs>
    <rect width="${width}" height="${height}" fill="url(#g)"/>
  </svg>`;
  const buf = await sharp(Buffer.from(svg)).png().toBuffer();
  return "image/png;base64," + buf.toString("base64");
}

// Primary Gradient (warm tones — for energy/passion slides)
// #FEB900 → #FD7030 → #FDAA9A

// Complementary 1 (blues — for calm/wellness slides)
// #B7D5D5 → #7BBFCF → #3597C8

// Complementary 2 (corail → violet — for creative/experience slides)
// #FDAA9A → #C88AAE → #6E69AC

DIRECTION RULE (from Figma):

Gradient on text: direction top-left → bottom-right (reading direction)
Gradient as background: direction bottom-left → top-right

品牌支持4种渐变背景，用于章节分隔幻灯片（如WHY? / HOW? 过渡页）:

javascript

// 通用渐变（全光谱 — 用于品牌声明幻灯片）
async function makeGenericGradientBg(width = 1920, height = 1080) {
  const svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
    <defs><linearGradient id="g" x1="0%" y1="100%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FEB900"/>
      <stop offset="33%" stop-color="#FD7030"/>
      <stop offset="67%" stop-color="#FDAA9A"/>
      <stop offset="100%" stop-color="#B7D5D5"/>
    </linearGradient></defs>
    <rect width="${width}" height="${height}" fill="url(#g)"/>
  </svg>`;
  const buf = await sharp(Buffer.from(svg)).png().toBuffer();
  return "image/png;base64," + buf.toString("base64");
}

// 主色渐变（暖色调 — 用于活力/激情幻灯片）
// #FEB900 → #FD7030 → #FDAA9A

// 互补色1（蓝色系 — 用于平静/舒适幻灯片）
// #B7D5D5 → #7BBFCF → #3597C8

// 互补色2（珊瑚色→紫色 — 用于创意/体验幻灯片）
// #FDAA9A → #C88AAE → #6E69AC

方向规则（来自Figma）:

文字渐变：方向为左上→右下（阅读方向）
背景渐变：方向为左下→右上

Icons — Dayuse Custom Icon Library (187 icons)

图标 — Dayuse自定义图标库（187个图标）

Full catalog: See

references/icon-catalog.md

for the complete list of 187 icons with names, descriptions, and react-icons equivalents.

Source: Figma Design System v2.0.3 — Icons page (node

40:927

)

完整目录：请查看

references/icon-catalog.md

获取187个图标的完整列表，包含名称、描述和react-icons等效图标。

来源：Figma设计系统v2.0.3 — 图标页面（节点

40:927

）

8 Categories:

8个分类:

Category	Count	Usage	Key Icons
Navigation	21	UI chrome, arrows, actions	Chevron, Check, Cross, Menu, Filter, Edit, Trash, Map, Eye
Indicators	33	Status, feedback, badges	Circle check, Alert, Info, Star, Clock, Security, Gift, Sparkle
Access	16	Core app actions	Search, Place, Calendar, Home, Booking, Heart, User, Settings
Search	6	Transport/location types	City, Plane, Metro, Train, Hotel
Interest & Social	15	Sharing, social brands	Share, Copy, Link, Apple, Google, Facebook, Instagram, WhatsApp
Hotel Amenities	46	Hotel features	Pool, Wifi, Parking, Fitness, Spa, Restaurant, Elevator, Rooftop
Hotel Room Amenities	38	In-room features	Bed, TV, AC, Shower, Bathtub, Safe, Mini-bar, Kitchen, Iron
Pool Amenities	11	Pool features	Towels, Locker, Cabana, Sunscreen, Umbrella, Lounge chair

分类	数量	使用场景	核心图标
导航	21	UI框架、箭头、操作	Chevron、勾选、叉号、菜单、筛选、编辑、删除、地图、眼睛
指示器	33	状态、反馈、徽章	圆形勾选、警告、信息、星级、时钟、安全、礼品、闪光
访问	16	核心App操作	搜索、地点、日历、首页、预订、收藏、用户、设置
搜索	6	交通/地点类型	城市、飞机、地铁、火车、酒店
兴趣与社交	15	分享、社交品牌	分享、复制、链接、Apple、Google、Facebook、Instagram、WhatsApp
酒店设施	46	酒店特色	泳池、Wifi、停车场、健身、水疗、餐厅、电梯、屋顶
客房设施	38	客房内特色	床、电视、空调、淋浴、浴缸、保险箱、迷你吧、厨房、熨斗
泳池设施	11	泳池特色	毛巾、储物柜、小屋、防晒霜、遮阳伞、躺椅

How to use icons:

图标使用方法:

Option 1 — Exported Dayuse icons (PREFERRED): If Dayuse SVG/PNG icons have been exported from Figma into

assets/icons/{category}/

, use those directly:

javascript

slide.addImage({ path: "assets/icons/hotel-amenities/wifi.png", x: 1, y: 1, w: 0.4, h: 0.4 });

Option 2 — react-icons fallback: When Dayuse icons aren't available as files, use

react-icons/fa

(Font Awesome) with Dayuse brand colors. Check

references/icon-catalog.md

for the react-icons equivalent of each Dayuse icon.

javascript

const React = require("react");
const ReactDOMServer = require("react-dom/server");
const sharp = require("sharp");
const { FaWifi, FaSwimmingPool, FaParking } = require("react-icons/fa");

async function iconPng(IconComponent, color, size = 256) {
  const svg = ReactDOMServer.renderToStaticMarkup(
    React.createElement(IconComponent, { color, size: String(size) })
  );
  const buf = await sharp(Buffer.from(svg)).png().toBuffer();
  return "image/png;base64," + buf.toString("base64");
}

// Usage with Dayuse palette colors:
const wifiIcon = await iconPng(FaWifi, "#FDAA9A");     // coral for amenities
const poolIcon = await iconPng(FaSwimmingPool, "#F66236"); // orange for leisure
const parkIcon = await iconPng(FaParking, "#FEB900");   // yellow for functional
slide.addImage({ data: wifiIcon, x: 1, y: 1, w: 0.4, h: 0.4 });

Install deps:

npm install -g react-icons react react-dom sharp

选项1 — 使用导出的Dayuse图标（推荐）: 如果Dayuse SVG/PNG图标已从Figma导出到

assets/icons/{category}/

，请直接使用：

javascript

slide.addImage({ path: "assets/icons/hotel-amenities/wifi.png", x: 1, y: 1, w: 0.4, h: 0.4 });

选项2 — 使用react-icons作为备选: 当Dayuse图标未导出为文件时，可使用

react-icons/fa

（Font Awesome）并搭配Dayuse品牌颜色。请查看

references/icon-catalog.md

获取每个Dayuse图标对应的react-icons等效图标。

javascript

const React = require("react");
const ReactDOMServer = require("react-dom/server");
const sharp = require("sharp");
const { FaWifi, FaSwimmingPool, FaParking } = require("react-icons/fa");

async function iconPng(IconComponent, color, size = 256) {
  const svg = ReactDOMServer.renderToStaticMarkup(
    React.createElement(IconComponent, { color, size: String(size) })
  );
  const buf = await sharp(Buffer.from(svg)).png().toBuffer();
  return "image/png;base64," + buf.toString("base64");
}

// 搭配Dayuse调色板颜色使用:
const wifiIcon = await iconPng(FaWifi, "#FDAA9A");     // 珊瑚色（设施类）
const poolIcon = await iconPng(FaSwimmingPool, "#F66236"); // 橙色（休闲类）
const parkIcon = await iconPng(FaParking, "#FEB900");   // 黄色（功能类）
slide.addImage({ data: wifiIcon, x: 1, y: 1, w: 0.4, h: 0.4 });

安装依赖：

npm install -g react-icons react react-dom sharp

Icon styling rules:

图标样式规则:

Style: Outline/line icons (matching Dayuse custom style). Do NOT use filled/solid icons unless specifically named "Solid" in the catalog.
UI icons on slides: May be placed inside colored circles (0.4-0.7" diameter) using Dayuse accent colors, OR used standalone
Marketing icons (gradient): Use standalone ONLY — NO colored circle, NO background shape behind them. They already have their own gradient fill and are self-contained.
Color on white bg (UI icons): Use Evening Blue
```
292935
```
or accent colors (
```
F66236
```
,
```
FDAA9A
```
,
```
FEB900
```
,
```
FF003E
```
)
Color on dark bg (UI icons): Use White
```
FFFFFF
```
All icons are 1:1 ratio — always use
```
w === h
```
when placing

风格：轮廓线图标（匹配Dayuse自定义风格），除非目录中明确标注“Solid”，否则请勿使用填充式图标。
幻灯片中的UI图标：可放置在彩色圆形（直径0.4-0.7英寸）中，使用Dayuse强调色，或单独使用。
营销图标（渐变风格）：仅可单独使用，请勿添加彩色圆形或背景形状，它们已内置渐变填充，自成一体。
白色背景上的UI图标：使用深夜蓝
```
292935
```
或强调色（
```
F66236
```
,
```
FDAA9A
```
,
```
FEB900
```
,
```
FF003E
```
）
深色背景上的UI图标：使用白色
```
FFFFFF
```
所有图标均为1:1比例，放置时请始终使用
```
w === h
```

Step 1: Identify the Deck Type

步骤1：确定PPT类型

Ask the user (if not clear) which type of deck they need:

Type	Audience	Language	Tone
Pitch externe	Hoteliers, partenaires, investisseurs	EN or FR	Inspiring, desirable, business value
Reporting interne	Equipe, management, board	FR (primarily)	Data-driven, actionable, honest
Roadmap / Plan d'action	Equipe produit, strat, ops	FR	Vision-first, structured, progressive
Analyse stratégique	Management, cross-functional	FR	Analytical, insight-led, recommendation-oriented

如果用户未明确说明，请询问用户需要制作的PPT类型：

类型	受众	语言	语气
对外路演PPT	酒店方、合作伙伴、投资者	英文或法文	富有感染力、突出价值、专业商务
内部报告PPT	团队、管理层、董事会	主要用法文	数据驱动、可落地、真实客观
路线图/行动计划PPT	产品团队、战略部、运营部	法文	以愿景为导向、结构清晰、逐步推进
战略分析PPT	管理层、跨职能团队	法文	分析性、洞察导向、建议明确

Step 2: Apply the Dayuse Storytelling Framework

步骤2：应用Dayuse叙事框架

CRITICAL: Every Dayuse presentation follows a "Vision-First" narrative arc. Never start with details — always anchor in the WHY before the WHAT and HOW.

核心要求：每个Dayuse演示文稿都遵循**“愿景优先”**的叙事结构，切勿从细节开始，始终先明确WHY，再讲WHAT和HOW。

Narrative Arc (applies to ALL deck types)

通用叙事结构（适用于所有PPT类型）

1. VISION / CONTEXTE  → Pourquoi on est là, la big picture
2. FRAMEWORK / METHODE → Comment on structure le sujet
3. DONNEES / PREUVES   → Les faits, analyses, résultats
4. INSIGHTS / SO WHAT  → Ce que ça veut dire concrètement
5. ACTION PLAN / NEXT  → Ce qu'on fait maintenant

1. 愿景/背景 → 我们为何在此，全局视角
2. 框架/方法 → 我们如何构建主题
3. 数据/证据 → 事实、分析、结果
4. 洞察/意义 → 这些事实的实际意义
5. 行动计划/下一步 → 我们现在要做什么

Structures par Type de Deck

按PPT类型划分的结构

Pitch externe:

Cover (titre + visuel lifestyle)
Dayuse in figures (crédibilité)
Proposition de valeur
Product demo / mockups
Business model
Marketing support
Contact / CTA

Reporting interne:

Titre + date + scope
Rappel vision / objectif
Vue synthétique KPIs
Deep dives par axe / marché
Insights clés
Action plan

Roadmap / Plan d'action:

Vision et ambition
Contexte et enjeux
Etapes clés + jalons temporels
Détail par étape
Next steps + ownership

Analyse stratégique:

Problématique et objectif
Framework / méthodologie
Données et résultats
Synthèse comparative
Recommandations

对外路演PPT:

封面（标题+生活方式视觉元素）
Dayuse数据概览（建立可信度）
价值主张
产品演示/原型
商业模式
营销支持
联系方式/行动号召

内部报告PPT:

标题+日期+范围
愿景/目标回顾
KPI总览
按领域/市场深入分析
核心洞察
行动计划

路线图/行动计划PPT:

愿景与目标
背景与挑战
关键步骤+时间节点
各步骤细节
下一步计划+负责人

战略分析PPT:

问题与目标
框架/方法论
数据与结果
对比总结
建议

Step 3: Apply Dayuse Visual Identity

步骤3：应用Dayuse视觉标识

Color Palette

调色板

Role	Color	Hex
Texte principal / titres	Evening Blue	`292935`
Texte secondaire	Gray	`54545D`
Texte tertiaire	Light Gray	`7F7F86`
Accent principal (titres highlights, CTA)	Orange	`F66236`
Accent secondaire	Coral	`FDAA9A`
Accent tertiaire / urgence	Hot Pink	`FF003E`
CTA / boutons / énergie	Yellow Gold	`FEB900`
Fond encarts takeaway	Rose pâle	`FFE5EA`
Fond encarts bloc	Beige clair	`F5F0E8`
Fond cards	Off-white	`F8F8F8`

角色	颜色	十六进制码
主文字/标题	深夜蓝	`292935`
次要文字	灰色	`54545D`
tertiary文字	浅灰色	`7F7F86`
主强调色（标题高亮、行动号召）	橙色	`F66236`
次强调色	珊瑚色	`FDAA9A`
第三强调色/紧急	亮粉色	`FF003E`
行动号召/按钮/活力	黄金黄	`FEB900`
重点提示框背景	浅粉色	`FFE5EA`
区块背景	浅米色	`F5F0E8`
卡片背景	米白色	`F8F8F8`

Color Coding par Use Case

按使用场景的颜色编码

Leisure = Coral
```
FDAA9A
```
Fonctionnel = Orange
```
F66236
```
Travel = Yellow
```
FEB900
```
Work = Hot Pink
```
FF003E
```

休闲 = 珊瑚色
```
FDAA9A
```
功能 = 橙色
```
F66236
```
旅行 = 黄色
```
FEB900
```
办公 = 亮粉色
```
FF003E
```

Accent Palette (5 couleurs)

强调色板（5种颜色）

Les 5 couleurs d'accent à utiliser pour les graphiques, badges, tags, cercles d'icônes :

```
FDAA9A
```
— Coral (doux, secondaire)
```
F66236
```
— Orange (principal, énergie)
```
FEB900
```
— Yellow Gold (CTA, attention)
```
FF003E
```
— Hot Pink (urgence, contraste)
```
FFE5EA
```
— Rose pâle (fonds, encarts)

Note : les anciens bleus (
51B0B0
,
3597C8
) et le violet (
6E69AC
) ne font plus partie de la palette d'accent. Utiliser uniquement la gamme chaude ci-dessus.

用于图表、徽章、标签、图标圆形背景的5种强调色：

```
FDAA9A
```
— 珊瑚色（柔和，次要）
```
F66236
```
— 橙色（主要，活力）
```
FEB900
```
— 黄金黄（行动号召，吸引注意）
```
FF003E
```
— 亮粉色（紧急，对比）
```
FFE5EA
```
— 浅粉色（背景，提示框）

注意：旧版蓝色（
51B0B0
,
3597C8
）和紫色（
6E69AC
）已不再属于强调色板，请仅使用上述暖色调系列。

Color Spectrum (Emotional)

配色光谱（情感关联）

Le spectre de couleurs Dayuse représente un voyage émotionnel (de gauche à droite) :

Gauche (chaud): Liberté, Soleil, Joie, Bonheur, Intensité, Amour
Droite (frais): Bien-être, Ciel, Paisibilité, Calme, Temps pour soi, Ressource

Dayuse配色光谱代表一段情感旅程（从左到右）:

左侧（暖色）：自由、阳光、快乐、幸福、激情、爱
右侧（冷色）：舒适、天空、宁静、平静、专属时光、恢复

Contrast Rule (from Figma)

对比度规则（来自Figma）

"Font should always maximise lisibility and strong contrast." Always alternate:

Dark text (
```
292935
```
) on light backgrounds (
```
FFFFFF
```
,
```
F8F8F8
```
, gradients clairs)
White text (
```
FFFFFF
```
) on dark backgrounds (
```
292935
```
), colored backgrounds (Yellow, Orange, Hot Pink), or gradient backgrounds

“字体应始终最大化可读性和强对比度”，请始终遵循：

深色文字（
```
292935
```
）搭配浅色背景（
```
FFFFFF
```
,
```
F8F8F8
```
, 浅色渐变）
白色文字（
```
FFFFFF
```
）搭配深色背景（
```
292935
```
）、彩色背景（黄色、橙色、亮粉色）或渐变背景

BACKGROUND RULES (CRITICAL)

背景规则（核心）

Evening Blue (
292935
) is FORBIDDEN as a slide background. It is a TEXT color only.

Allowed slide backgrounds:

```
FFFFFF
```
(white) — default for ALL content slides
```
F8F8F8
```
(off-white) — subtle variation
Brand gradient backgrounds — for section divider slides ONLY (WHY? / HOW? transitions)
```
FEB900
```
(yellow) — for bold statement slides (e.g. "Only 3% of French people have heard of Dayuse")
A lifestyle photo as full-bleed background (for closing slides)

The only exception where

can be used as a SHAPE fill (not slide bg) is for small accent elements like the "Victor Barnouin" card or data pill badges.

禁止将深夜蓝（
292935
）用作幻灯片背景，它仅可作为文字颜色使用。

允许使用的幻灯片背景:

```
FFFFFF
```
（白色） — 所有内容幻灯片的默认背景
```
F8F8F8
```
（米白色） — 细微变体
品牌渐变背景 — 仅用于章节分隔幻灯片（WHY? / HOW? 过渡页）
```
FEB900
```
（黄色） — 用于大胆声明幻灯片（例如“仅3%的法国人听说过Dayuse”）
生活方式照片作为全屏背景（用于结束页）

唯一例外：

可作为小尺寸强调元素的形状填充（而非幻灯片背景），例如“Victor Barnouin”卡片或数据药丸徽章。

Typography — Manrope Only (Google Slides Compatible)

排版 — 仅使用Manrope（兼容Google Slides）

IMPORTANT: The Figma brand guidelines specify Maison Neue Extended Bold for H1 titles, but since Dayuse presentations are delivered via Google Slides, Maison Neue is NOT available and NOT editable there. Therefore ALL text uses Manrope (Google Font, fully compatible with Google Slides).

The hierarchy below adapts the Figma brand sizing/weight rules to Manrope only.

重要说明：Figma品牌指南规定H1标题使用Maison Neue Extended Bold，但由于Dayuse演示文稿通过Google Slides交付，Maison Neue在该平台不可用且无法编辑，因此所有文字均使用Manrope（Google字体，完全兼容Google Slides）。

以下排版层级是基于Figma品牌尺寸/字重规则，适配为仅使用Manrope的版本。

Title Level 1 (Hero): Manrope ExtraBold

一级标题（首屏）：Manrope ExtraBold

For hero titles, section divider text, bold statements. Replaces Maison Neue in PPTX context.

Font: Manrope ExtraBold (weight 800)
Size: 36-48pt
Line Height: tight (1.1x)
Letter Spacing: 0%
Color: 292935 (or FFFFFF on dark/gradient backgrounds)

用于首屏标题、章节分隔文字、大胆声明，在PPTX场景中替代Maison Neue。

字体: Manrope ExtraBold（字重800）
字号: 36-48pt
行高: 紧凑（1.1倍）
字间距: 0%
颜色: 292935（深色/渐变背景上使用FFFFFF）

Title Level 2 (Slide Title): Manrope Bold

二级标题（幻灯片标题）：Manrope Bold

For slide titles, section sub-headers. The "insight title" used on most content slides.

Font: Manrope Bold (weight 700)
Size: 24-30pt
Line Height: 1.2x
Letter Spacing: 0%
Color: 292935 (key words in F66236)

用于幻灯片标题、章节副标题，是大多数内容幻灯片使用的“洞察标题”。

字体: Manrope Bold（字重700）
字号: 24-30pt
行高: 1.2倍
字间距: 0%
颜色: 292935（关键词使用F66236橙色）

Subtitle: Manrope SemiBold

副标题：Manrope SemiBold

For slide subtitles, chapeau text above titles.

Font: Manrope SemiBold (weight 600)
Size: 16-20pt
Line Height: 1.3x
Letter Spacing: 0%
Color: 54545D

用于幻灯片副标题、标题上方的引导文字。

字体: Manrope SemiBold（字重600）
字号: 16-20pt
行高: 1.3倍
字间距: 0%
颜色: 54545D

Running Text: Manrope Regular

正文：Manrope Regular

For body text, descriptions, explanations.

Font: Manrope Regular (weight 400)
Size: 12-14pt
Line Height: 22
Letter Spacing: 1%
Color: 54545D

用于正文、描述、说明。

字体: Manrope Regular（字重400）
字号: 12-14pt
行高: 22
字间距: 1%
颜色: 54545D

Secondary Text: Manrope Bold (FULL CAPS)

次要文字：Manrope Bold（全大写）

For CTAs, signatures, chapeau labels, important secondary messages. Always uppercase with letter spacing.

Font: Manrope Bold (weight 700)
Size: variable (typically 10-14pt)
Letter Spacing: 17%
Transform: UPPERCASE
Color: 292935 or 7F7F86

Example:

MADE WITH LOVE AT DAYUSE

ROOM TO DAYDREAM

VIEW OUR HOTELS

用于行动号召、签名、引导标签、重要次要信息。始终使用大写并设置字间距。

字体: Manrope Bold（字重700）
字号: 可变（通常为10-14pt）
字间距: 17%
转换: 大写
颜色: 292935或7F7F86

示例：

MADE WITH LOVE AT DAYUSE

ROOM TO DAYDREAM

VIEW OUR HOTELS

Full Typography Reference Table

完整排版参考表

Element	fontFace	Size	Weight	Color	Notes
Hero title (H1)	`"Manrope"`	36-48pt	800 (ExtraBold)	`292935`	Section dividers, covers. Can use gradient as image mask
Slide title (H2)	`"Manrope"`	24-30pt	700 (Bold)	`292935`	Key words in `F66236`
Subtitle	`"Manrope"`	16-20pt	600 (SemiBold)	`54545D`
Body text	`"Manrope"`	12-14pt	400 (Regular)	`54545D`	Line height 22, spacing 1%
Labels / captions	`"Manrope"`	10-11pt	500 (Medium)	`7F7F86`
Big KPI numbers	`"Manrope"`	36-48pt	700 (Bold)	`292935`
Label under KPI	`"Manrope"`	11pt	400 (Regular)	`7F7F86`
CTA / Signature	`"Manrope"`	11-12pt	700 (Bold)	`292935`	FULL CAPS, 17% letter spacing
CTA button text	`"Manrope"`	11-12pt	700 (Bold)	`FFFFFF`	Inside colored shape
Section divider text	`"Manrope"`	60-80pt	800 (ExtraBold)	`FFFFFF`	On gradient backgrounds
Orange highlight words	`"Manrope"`	same as parent	700 (Bold)	`F66236`	Within titles only

元素	字体	字号	字重	颜色	说明
首屏标题（H1）	`"Manrope"`	36-48pt	800（ExtraBold）	`292935`	章节分隔页、封面，可使用渐变作为图片遮罩
幻灯片标题（H2）	`"Manrope"`	24-30pt	700（Bold）	`292935`	关键词使用 `F66236` 橙色
副标题	`"Manrope"`	16-20pt	600（SemiBold）	`54545D`
正文	`"Manrope"`	12-14pt	400（Regular）	`54545D`	行高22，字间距1%
标签/说明文字	`"Manrope"`	10-11pt	500（Medium）	`7F7F86`
大KPI数字	`"Manrope"`	36-48pt	700（Bold）	`292935`
KPI下方标签	`"Manrope"`	11pt	400（Regular）	`7F7F86`
行动号召/签名	`"Manrope"`	11-12pt	700（Bold）	`292935`	全大写，字间距17%
行动号召按钮文字	`"Manrope"`	11-12pt	700（Bold）	`FFFFFF`	放置在彩色形状内
章节分隔文字	`"Manrope"`	60-80pt	800（ExtraBold）	`FFFFFF`	渐变背景上使用
橙色高亮文字	`"Manrope"`	与父元素字号相同	700（Bold）	`F66236`	仅用于标题内

Titre-Insight Pattern (OBLIGATOIRE)

洞察标题模式（必须遵守）

Every slide title MUST be an insight (a conclusion), NOT a descriptive label.

WRONG: "Analyse USA"
RIGHT: "Les hôtels Travel drivent la dynamique nouveaux clients."

WRONG: "Résultats Q3"
RIGHT: "Le Travel comme générateur de valeur : +59% de croissance."

WRONG: "Distribution hôtel"
RIGHT: "Un parc mondial principalement Fonctionnel aujourd'hui."

Implementation: Title text in Evening Blue bold + key words in Orange bold to guide the eye.

javascript

slide.addText([
  { text: "L'IA gère le ", options: { fontSize: 26, fontFace: "Manrope", color: "292935", bold: true } },
  { text: "volume", options: { fontSize: 26, fontFace: "Manrope", color: "F66236", bold: true } },
  { text: ", l'humain gère ", options: { fontSize: 26, fontFace: "Manrope", color: "292935", bold: true } },
  { text: "l'exception.", options: { fontSize: 26, fontFace: "Manrope", color: "F66236", bold: true } },
], { x: 0.6, y: 0.3, w: 8.8, h: 0.8, margin: 0 });

每个幻灯片标题必须是洞察（结论），而非描述性标签。

错误示例: "美国市场分析"
正确示例: "Travel类酒店是新客户增长的核心动力"

错误示例: "Q3结果"
正确示例: "Travel场景驱动价值增长：+59%"

错误示例: "酒店分布"
正确示例: "当前全球布局以功能性酒店为主"

实现方式：标题文字使用深夜蓝粗体 + 关键词使用橙色粗体，引导视线。

javascript

slide.addText([
  { text: "AI负责处理", options: { fontSize: 26, fontFace: "Manrope", color: "292935", bold: true } },
  { text: "海量业务", options: { fontSize: 26, fontFace: "Manrope", color: "F66236", bold: true } },
  { text: "，人工负责处理", options: { fontSize: 26, fontFace: "Manrope", color: "292935", bold: true } },
  { text: "特殊情况。", options: { fontSize: 26, fontFace: "Manrope", color: "F66236", bold: true } },
], { x: 0.6, y: 0.3, w: 8.8, h: 0.8, margin: 0 });

The 4 Brand Gradients

4种品牌渐变

Reference:

assets/brand-guide/gradients-4types.png

Gradient	Colors	When to Use
Generic	`#FEB900` → `#FD7030` → `#FDAA9A` → `#B7D5D5`	Brand statements, logo, signature elements. Full spectrum = balance between all polarities
Primary	`#FEB900` → `#FD7030` → `#FDAA9A`	Affirm brand identity simply. Use when energy/intensity is the message. "Be careful, sometimes it's too hot to be used"
Complementary 1	Blues/teals spectrum	Balance in an ensemble of visual, webpage, brochure pages
Complementary 2	Corail → Violet	Balance in an ensemble of visual, webpage, brochure pages

参考：

assets/brand-guide/gradients-4types.png

渐变	颜色	使用场景
通用渐变	`#FEB900` → `#FD7030` → `#FDAA9A` → `#B7D5D5`	品牌声明、标志、标志性元素。全光谱 = 平衡所有极性
主色渐变	`#FEB900` → `#FD7030` → `#FDAA9A`	简洁地强化品牌标识，用于传递活力/激情的信息。“注意：有时颜色过于鲜艳，需谨慎使用”
互补色1	蓝色/蓝绿色光谱	平衡视觉组合、网页、宣传册页面
互补色2	珊瑚色→紫色	平衡视觉组合、网页、宣传册页面

Gradient Usage Rules (from Figma)

渐变使用规则（来自Figma）

On text: Direction top-left → bottom-right (reading direction). Gradients can ONLY be used on hero titles (Manrope ExtraBold 800) as a title or main message. Never apply gradient to body text or secondary elements.
On backgrounds: Direction bottom-left → top-right. Should generally NOT be used with an image on top (exception: for balance).
HQ Gradients: For key visuals, use angular gradients with background blur overlay. These create a more diffuse, organic look suited for non-print, non-functional use.

文字渐变：方向为左上→右下（阅读方向），渐变仅可用于**首屏标题（Manrope ExtraBold 800）**作为标题或主信息，切勿将渐变应用于正文或次要元素。
背景渐变：方向为左下→右上，通常不与图片叠加使用（平衡需求除外）。
高清渐变：用于关键视觉元素，使用带背景模糊的角度渐变，营造更柔和、自然的效果，适合非印刷、非功能性场景。

Gradient Text in PptxGenJS

PptxGenJS中的渐变文字

Since PptxGenJS doesn't natively support gradient text, simulate it by rendering gradient text as a PNG image:

javascript

async function makeGradientText(text, fontSize = 80, width = 1920, height = 300) {
  const svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#FEB900"/>
        <stop offset="33%" stop-color="#FD7030"/>
        <stop offset="67%" stop-color="#FDAA9A"/>
        <stop offset="100%" stop-color="#B7D5D5"/>
      </linearGradient>
    </defs>
    <text x="0" y="${fontSize}" font-family="Manrope, Arial Black, sans-serif"
          font-weight="800" font-size="${fontSize}px" fill="url(#textGrad)">
      ${text}
    </text>
  </svg>`;
  const buf = await sharp(Buffer.from(svg)).png().toBuffer();
  return "image/png;base64," + buf.toString("base64");
}

由于PptxGenJS不原生支持渐变文字，可通过将渐变文字渲染为PNG图片来模拟：

javascript

async function makeGradientText(text, fontSize = 80, width = 1920, height = 300) {
  const svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#FEB900"/>
        <stop offset="33%" stop-color="#FD7030"/>
        <stop offset="67%" stop-color="#FDAA9A"/>
        <stop offset="100%" stop-color="#B7D5D5"/>
      </linearGradient>
    </defs>
    <text x="0" y="${fontSize}" font-family="Manrope, Arial Black, sans-serif"
          font-weight="800" font-size="${fontSize}px" fill="url(#textGrad)">
      ${text}
    </text>
  </svg>`;
  const buf = await sharp(Buffer.from(svg)).png().toBuffer();
  return "image/png;base64," + buf.toString("base64");
}

Slide Patterns

幻灯片模板

1. Slide Cover

Fond BLANC
Logo wordmark (gradient or black) en haut à gauche (2:1 ratio, transparent)
Titre en Manrope ExtraBold 36-48pt, Evening Blue
Sous-titre et auteur en Manrope Regular gris
```
54545D
```
Bandeau gradient en bas

2. Slide Section Divider (Gradient Background)

Full-bleed gradient background (Generic or Primary)
Gros texte centré en Manrope ExtraBold 60-80pt, BLANC
Sous-texte en Manrope SemiBold, BLANC
NO gradient band at bottom (gradient IS the background)
Use for WHY? / HOW? / WHAT? transitions

3. Slide Bold Statement (Yellow Background)

Full-bleed
```
FEB900
```
yellow background
Titre en Manrope Bold 14pt noir en chapeau
Statement en Manrope ExtraBold 36-44pt noir
Description en Manrope Regular 14pt noir
NO gradient band (colored bg)

4. Slide Titre de Section

Fond gris clair (
```
E8E8E8
```
) sur la moitié gauche
Nom de section en gros, en gradient (utiliser le gradient comme image)
Contenu sur la moitié droite, fond blanc

5. Slide KPI / Chiffres Clés

Icônes dans des cercles colorés
Gros chiffre (36-48pt, bold,
```
292935
```
)
Label sous le chiffre (11pt,
```
7F7F86
```
)
Grille 2x3 ou 3x2

6. Slide Matrice / Tableau

Pastilles arrondies foncées (
```
292935
```
) avec texte blanc
Pastilles colorées pour les highlights
Encart takeaway rose pâle en bas

7. Slide Graphique

Deux graphiques côte à côte quand possible
Bullets d'insights sous chaque graphique
Titre-insight en haut

8. Slide Roadmap / Timeline

Etapes numérotées dans des encarts fond léger
Badges de timing colorés (Q1, Q2-Q3...)
Ligne verticale de connexion entre les étapes

9. Slide Cards (3 colonnes)

3 cards
```
ROUNDED_RECTANGLE
```
en
```
F8F8F8
```
Icône dans cercle coloré centré en haut
Titre bold centré
Items avec check icons

10. Slide Vision/Quote (from Brand Platform style)

Fond blanc
Barre gradient verticale gauche (thin, ~0.15" wide, full height)
Chapeau en Manrope Bold UPPERCASE + small icon:
```
OUR VISION
```
,
```
OUR MISSION
```
Grande citation en Manrope ExtraBold 28-36pt
Description en Manrope Regular 14pt
Symbol icon (black) en bas à droite footer
Bandeau gradient en bas

11. Slide Photo + Text Overlay

Lifestyle photo as partial or full background
Gradient text overlay using Manrope ExtraBold
CTA button with gradient or white background
Logo wordmark bottom-center

Reference:

assets/brand-guide/images-best-practice.png

12. Slide Closing

Fond BLANC (ou photo lifestyle plein écran)
Logo centré (2:1 ratio, transparent)
Message de closing with accent orange
CTA buttons en orange
Bandeau gradient en bas

1. 封面幻灯片

白色背景
文字标志（渐变或黑色版本）放置在左上角（2:1比例，透明背景）
标题使用Manrope ExtraBold 36-48pt，深夜蓝
副标题和作者使用Manrope Regular灰色
```
54545D
```
底部添加渐变条

2. 章节分隔幻灯片（渐变背景）

全屏渐变背景（通用或主色渐变）
居中放置大尺寸Manrope ExtraBold 60-80pt白色文字
副标题使用Manrope SemiBold白色文字
底部不添加渐变条（渐变本身就是背景）
用于WHY? / HOW? / WHAT? 过渡页

3. 大胆声明幻灯片（黄色背景）

全屏
```
FEB900
```
黄色背景
顶部使用Manrope Bold 14pt黑色文字作为引导
声明文字使用Manrope ExtraBold 36-44pt黑色文字
描述文字使用Manrope Regular 14pt黑色文字
不添加渐变条（彩色背景）

4. 章节标题幻灯片

左半部分使用浅灰色背景（
```
E8E8E8
```
）
章节名称使用大尺寸渐变文字（将渐变作为图片使用）
右半部分放置内容，白色背景

5. KPI/关键数据幻灯片

图标放置在彩色圆形内
大数字（36-48pt，粗体，
```
292935
```
）
数字下方添加标签（11pt，
```
7F7F86
```
）
使用2x3或3x2网格布局

6. 矩阵/表格幻灯片

深色圆角药丸（
```
292935
```
）搭配白色文字
彩色药丸用于高亮
底部添加浅粉色重点提示框

7. 图表幻灯片

尽可能放置两个并排图表
每个图表下方添加洞察要点
顶部使用洞察标题

8. 路线图/时间线幻灯片

带编号的步骤放置在浅色背景框内
彩色时间徽章（Q1, Q2-Q3...）
使用垂直线连接各步骤

9. 卡片幻灯片（3列）

3个
```
ROUNDED_RECTANGLE
```
卡片，背景为
```
F8F8F8
```
顶部居中放置彩色圆形内的图标
居中粗体标题
带勾选图标的列表项

10. 愿景/引用幻灯片（品牌平台风格）

白色背景
左侧添加细渐变竖条（宽度约0.15英寸，全屏高度）
引导文字使用Manrope Bold大写 + 小图标：
```
OUR VISION
```
,
```
OUR MISSION
```
大引用文字使用Manrope ExtraBold 28-36pt
描述文字使用Manrope Regular 14pt
页脚右下角放置黑色符号图标
底部添加渐变条

11. 图片+文字叠加幻灯片

生活方式照片作为部分或全屏背景
使用Manrope ExtraBold渐变文字叠加
带渐变或白色背景的行动号召按钮
底部居中放置文字标志

参考：

assets/brand-guide/images-best-practice.png

12. 结束幻灯片

白色背景（或全屏生活方式照片）
居中放置标志（2:1比例，透明背景）
结束信息搭配橙色强调色
橙色行动号召按钮
底部添加渐变条

Elements Visuels Récurrents

重复视觉元素

Bandeau gradient en bas de CHAQUE slide blanc (0.1" height). NOT on gradient/colored bg slides.
Barre gradient verticale gauche : thin stripe (~0.15") on the left edge for vision/quote slides
Encarts takeaway rose (
```
FDE8E4
```
) pour conclusions/punchlines
Pastilles données : rounded rect
```
292935
```
avec texte blanc
Cercles colorés autour des icônes (0.4-0.7" diameter)
CTA buttons : rounded rect orange
```
F66236
```
avec texte blanc bold

Cards :

ROUNDED_RECTANGLE

rectRadius: 0.1-0.12

, fill

F8F8F8

UPPERCASE secondary text : Manrope Bold, 17% letter spacing, for signatures/CTAs

渐变条：放置在每个白色背景幻灯片的底部（高度0.1英寸），渐变/彩色背景幻灯片无需添加。
左侧渐变竖条：用于愿景/引用幻灯片的左侧细条（约0.15英寸宽）
浅粉色重点提示框：用于结论/关键信息
深色数据药丸：深色圆角矩形(
```
292935
```
)搭配白色文字
图标彩色圆形：图标周围的彩色圆形（直径0.4-0.7英寸）
行动号召按钮：橙色圆角矩形(
```
F66236
```
)搭配白色粗体文字

卡片：

ROUNDED_RECTANGLE

，

rectRadius: 0.1-0.12

，填充色

F8F8F8

全大写次要文字：Manrope Bold，字间距17%，用于签名/行动号召

Layout Rules

布局规则

Marges : minimum 0.5" de chaque côté
Espacement entre blocs : 0.3-0.4"
Texte aligné à gauche (sauf titres centrés sur cover/section dividers)
JAMAIS de ligne d'accent sous les titres (hallmark AI)
Varier les layouts (pas 3x le même layout consécutif)
Chaque slide a au moins 1 élément visuel (icône, shape, chart, gradient element)
"The brand is meant to live with diverse and exploratory layouts" — don't be repetitive

边距：每侧至少0.5英寸
模块间距：0.3-0.4英寸
文字左对齐（封面/章节分隔页的标题居中除外）
切勿在标题下方添加下划线（AI生成的常见错误）
变换布局（避免连续3张幻灯片使用相同布局）
每个幻灯片至少包含一个视觉元素（图标、形状、图表、渐变元素）
“品牌应通过多样且富有探索性的布局展现” — 避免重复

Step 4: Build the Presentation

步骤4：制作演示文稿

Confirm deck type, audience, content with user
Propose structure de slides (titres-insights) pour validation
Preprocess assets : logo transparency + gradient band + gradient backgrounds
Build PPTX via
```
pptx
```
skill PptxGenJS workflow
Apply ALL Dayuse visual identity rules
QA via pptx skill verification process

与用户确认PPT类型、受众、内容
提出幻灯片结构（洞察标题）供用户确认
素材预处理：标志去背景 + 生成渐变条 + 生成渐变背景
通过
```
pptx
```
技能的PptxGenJS工作流制作PPTX
应用所有Dayuse视觉标识规则
通过pptx技能的验证流程进行质量检查

Step 5: Quality Checklist

步骤5：质量检查清单

Before delivering, verify ALL of these:

Titres = insights (pas descriptifs)
Mots-clés en orange
```
F66236
```
Palette Dayuse respectée
AUCUN fond Evening Blue — tous blancs, off-white, gradient, ou yellow
Font = Manrope partout (ExtraBold 800 pour H1, Bold 700 pour H2, Regular pour body)
Secondary text in FULL CAPS with letter spacing (signatures, CTAs, chapeaux)
Logo transparent et ratio respecté (2:1 wordmark, 1:1 symbol)
Logo and symbol never used as a lock-up — never combined in one element
Gradient direction correct: text = top-left→bottom-right, background = bottom-left→top-right
Bandeau gradient en bas de chaque slide blanc (NOT on gradient/colored bg slides)
Gros chiffres 36pt+ bold
Arc narratif Vision-First respecté
Pas de slide text-only (every slide has a visual element)
Encarts takeaway rose pour conclusions
Section dividers use gradient backgrounds with large white Manrope ExtraBold text
Slide de fin avec logo + CTA
Langue correcte (FR interne, EN/FR externe)
Contrast rule applied (dark text on light bg, white text on dark/colored bg)

交付前，请验证以下所有项：

标题为洞察（而非描述性）
关键词使用橙色
```
F66236
```
遵守Dayuse调色板
无深夜蓝背景 — 所有背景为白色、米白色、渐变或黄色
所有文字使用Manrope字体（H1使用ExtraBold 800，H2使用Bold 700，正文使用Regular）
次要文字为全大写并设置字间距（签名、行动号召、引导文字）
标志为透明背景且宽高比正确（文字标志2:1，符号1:1）
标志与符号未组合使用 — 切勿合并为一个元素
渐变方向正确：文字渐变左上→右下，背景渐变左下→右上
每个白色背景幻灯片底部添加渐变条（渐变/彩色背景幻灯片无需添加）
大数字使用36pt+粗体
遵守“愿景优先”叙事结构
无纯文字幻灯片（每个幻灯片都有视觉元素）
结论使用浅粉色重点提示框
章节分隔页使用渐变背景搭配大尺寸白色Manrope ExtraBold文字
结束页包含标志+行动号召
语言正确（内部使用法文，外部使用英文/法文）
应用对比度规则（浅色背景用深色文字，深色/彩色背景用白色文字）

Troubleshooting

故障排除

Logo avec fond noir rectangulaire : → Script preprocessing non exécuté. Lancer

python scripts/preprocess-logo.py assets/logos/logo-gradient.png /tmp/dayuse-logo-gradient.png

Logo déformé / écrasé : → Ratio non respecté. Wordmark:

h = w / 2

. Symbol:

h = w

Font ne s'affiche pas : → Manrope non installée sur la machine cible. Installer depuis Google Fonts. Google Slides la supporte nativement.

Gradient text doesn't render : → PptxGenJS ne supporte pas le texte gradient nativement. Utiliser la fonction

makeGradientText()

pour générer un PNG. Vérifier que

sharp

est installé.

Icônes invisibles (blanches sur blanc) : → Les icônes blanches doivent être dans un cercle coloré. Ne jamais placer une icône blanche directement sur fond blanc.

SVG icons depuis JSON : → Les icônes sont dans

ui-icons.json

marketing-icons.json

. Utiliser les helpers

uiIconPng(name)

marketingIconPng(name)

. Les clés sont sans extension :

"wifi"

"nav-check"

"ind-star"

"hotel"

Photo trop lourde / lente : → Les photos haute-res peuvent ralentir le PPTX. Utiliser

sharp

pour redimensionner avant insertion :

sharp(photo).resize(1920).jpeg({ quality: 80 })

SVG icons invisible sur fond blanc : → Les icônes UI sont en stroke

#292935

. Sur fond blanc elles sont visibles. Si nécessaire, recolorer le stroke dans le SVG avant conversion PNG.

Deck manque d'impact : → Chaque slide doit avoir un élément visuel → Augmenter contraste titre (32pt+) vs corps (14pt) → Utiliser encarts colorés pour takeaways → Ajouter au moins 1-2 section dividers avec gradient background

Storytelling plat : → Revérifier arc Vision-First → Titres = conclusions, pas sujets → Ajouter transitions entre sections (gradient divider slides) → Use bold statement slides (yellow bg) for impactful data points

标志显示为黑色矩形背景: → 未执行预处理脚本，请运行

python scripts/preprocess-logo.py assets/logos/logo-gradient.png /tmp/dayuse-logo-gradient.png

标志变形/压缩: → 未遵守宽高比，文字标志请设置

h = w / 2

，符号请设置

h = w

字体未显示: → 目标机器未安装Manrope，请从Google Fonts安装，Google Slides原生支持该字体。

渐变文字未渲染: → PptxGenJS不原生支持渐变文字，请使用

makeGradientText()

函数生成PNG，确保已安装

sharp

。

图标不可见（白色在白色背景上）: → 白色图标必须放置在彩色圆形内，切勿直接将白色图标放在白色背景上。

JSON中的SVG图标: → 图标存储在

ui-icons.json

和

marketing-icons.json

中，请使用

uiIconPng(name)

和

marketingIconPng(name)

辅助函数，键不带扩展名：

"wifi"

"nav-check"

"ind-star"

"hotel"

。

图片过大/加载缓慢: → 高分辨率图片会导致PPTX运行缓慢，请使用

sharp

在插入前调整大小：

sharp(photo).resize(1920).jpeg({ quality: 80 })

。

白色背景上的SVG图标不可见: → UI图标描边为

#292935

，在白色背景上可见，如有需要，请在转换为PNG前修改SVG中的描边颜色。

PPT缺乏冲击力: → 每个幻灯片添加一个视觉元素 → 增大标题（32pt+）与正文（14pt）的对比度 → 使用彩色提示框突出重点 → 添加至少1-2个渐变背景的章节分隔页

叙事平淡: → 重新检查“愿景优先”结构 → 标题为结论而非主题 → 章节间添加过渡页（渐变分隔页） → 使用黄色背景的大胆声明幻灯片突出关键数据点