dayuse-pptx
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseDayuse 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 skill for technical guidance on creating PPTX files with PptxGenJS.
pptx本技能可根据公司的视觉标识(源自官方Figma品牌指南)、叙事框架和幻灯片模板,创建符合Dayuse品牌的演示文稿。
在创建任何演示文稿之前,请务必阅读主技能文档,获取使用PptxGenJS创建PPTX文件的技术指导。
pptxFigma Sources
Figma 资源来源
| Resource | File Key | Content |
|---|---|---|
| Design System v2.0.3 | | 187 icons (8 categories), colors, typography, components |
| ICONS-LIBRARY | | Réassurance gradient + UI icon sets |
| Image Bank | | 35+ lifestyle photos (photoshoot June 2023) |
| On-boarding Assets | | App screens, splash, UI components |
| 资源 | 文件密钥 | 内容 |
|---|---|---|
| 设计系统 v2.0.3 | | 187个图标(8个分类)、配色、排版、组件 |
| 图标库 | | 安心感渐变图标集 + UI图标集 |
| 图片库 | | 35+张生活方式照片(2023年6月拍摄) |
| 入职素材 | | App界面、启动页、UI组件 |
Asset Catalog
素材目录
All brand assets are organized in . ALWAYS use these real assets rather than generating placeholders.
assets/所有品牌素材都存放在目录下。请务必使用这些真实素材,而非生成占位图。
assets/Logos (assets/logos/)
标志(assets/logos/)
| File | Description | Usage | Aspect Ratio |
|---|---|---|---|
| Wordmark "DAYUSE" in expressive gradient (jaune → orange → corail → bleu) | OOH, social, printed merch, expressive presentations. Requires background removal preprocessing. | 2:1 |
| Wordmark "DAYUSE" in Evening Blue | Website, web banners, formal documents, toned-down communications | 2:1 |
| 文件 | 描述 | 使用场景 | 宽高比 |
|---|---|---|---|
| 渐变风格的“DAYUSE”文字标志(黄色→橙色→珊瑚色→蓝色) | 户外广告、社交媒体、周边印刷、创意演示文稿。使用前需先去除背景。 | 2:1 |
| 深夜蓝 | 官网、网页横幅、正式文档、简约沟通材料 | 2:1 |
Icons / Symbols (assets/icons/)
图标/符号(assets/icons/)
| File | Description | Usage |
|---|---|---|
| "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. |
| "Y" symbol in Evening Blue circle | Functional use: slide footers, small placements, formal contexts |
| App icon (Y symbol on rounded-square gradient background) | App references, product mockups |
| 文件 | 描述 | 使用场景 |
|---|---|---|
| 太阳渐变圆形背景的“Y”符号 | 创意场景:社交媒体图标、App相关场景。仅可搭配太阳渐变使用,请勿重新着色 |
| 深夜蓝圆形背景的“Y”符号 | 功能性场景:幻灯片页脚、小尺寸放置、正式场合 |
| App图标(渐变圆角方形背景的Y符号) | App参考、产品原型 |
Image Bank (Figma — Photoshoot "New Brand June 2023")
图片库(Figma — 2023年6月品牌拍摄)
Source: Figma file
VU7niZDEMGOhmquJcpAk2PThe 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文件
VU7niZDEMGOhmquJcpAk2PDayuse图片库是所有渠道(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 |
|---|---|---|
| Chambre | Femme sur lit d'hôtel — hero/cover slide |
| Chambre | Scène de chambre d'hôtel |
| Spa/Wellness | Scène de salle de bain |
| Piscine | Couple à la piscine |
| Piscine | Femme à la piscine |
| Couple | Couple en extérieur |
| Couple | Couple lifestyle |
| Lifestyle | Femme avec vue panoramique |
| Brand shoot | Photo shoot officiel |
| Brand shoot | Photo shoot officiel |
| Brand shoot | Photo shoot officiel |
Note:(311 MB / 460M pixels) a été exclu car trop volumineux. Ré-exporter depuis Figma à ≤4000px de large.POOL 1.png
| 文件 | 主题 | 描述 |
|---|---|---|
| 客房 | 酒店床上的女性 — 封面/首屏幻灯片 |
| 客房 | 酒店客房场景 |
| 水疗/养生 | 浴室场景 |
| 泳池 | 泳池中的情侣 |
| 泳池 | 泳池中的女性 |
| 情侣 | 户外情侣场景 |
| 情侣 | 情侣生活方式场景 |
| 生活方式 | 拥有全景视野的女性 |
| 品牌拍摄 | 官方拍摄照片 |
| 品牌拍摄 | 官方拍摄照片 |
| 品牌拍摄 | 官方拍摄照片 |
注意:(311 MB / 4.6亿像素)因体积过大已被排除,如需使用请从Figma重新导出为宽度≤4000px的版本。POOL 1.png
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 () for cards
rectRadius: 0.12 - 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 (node )
XVlA3zCtO7jJ4GI4oaFLCV445:3150Contains 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文件(节点)
XVlA3zCtO7jJ4GI4oaFLCV445: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 ()
VYZeBPPWPcilQddvldU8w019 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: (key = icon name, value = SVG string).
assets/icons/marketing-icons.json| Key | Description | Usage |
|---|---|---|
| Bar chart with gradient bg | Business metrics, revenue |
| User silhouette | Customer-related stats |
| Headset agent | Support, service quality |
| Two people | Couples, social |
| Diamond shape | Premium, luxury |
| Calendar with cross | Cancellation policy |
| Gift box | Promotions, offers |
| Building | Hotel count, partners |
| House | Alternative accommodations |
| Globe | International presence |
| Keys | Access, bookings |
| Trophy/medal | Market leadership |
| Map pin | Geographic coverage |
| Coins/bills | Revenue, savings |
| Crossed credit card | No card required |
| Star rating | Reviews, ratings |
| Line chart | Growth trends |
| Bar chart | Comparative data |
| Discount tag | Discounts, savings |
来源:Figma图标库()
VYZeBPPWPcilQddvldU8w019个带有品牌渐变填充(橙色/珊瑚色/黄色)的SVG图标, viewBox为49x49。用于路演PPT、营销材料、价值主张。所有图标存储在单个JSON文件中:(键为图标名称,值为SVG字符串)。
assets/icons/marketing-icons.json| 键 | 描述 | 使用场景 |
|---|---|---|
| 渐变背景的柱状图 | 业务指标、营收 |
| 用户剪影 | 客户相关数据 |
| 头戴耳机的客服 | 支持服务、服务质量 |
| 两个人物 | 情侣、社交场景 |
| 钻石形状 | 高端、奢华 |
| 带叉号的日历 | 取消政策 |
| 礼品盒 | 促销、优惠 |
| 建筑 | 酒店数量、合作伙伴 |
| 房屋 | 替代住宿选择 |
| 地球仪 | 国际布局 |
| 钥匙 | 入住、预订 |
| 奖杯/奖牌 | 市场领先地位 |
| 地图标记 | 地理覆盖范围 |
| 硬币/纸币 | 营收、节省 |
| 带叉号的信用卡 | 无需信用卡 |
| 星级评分 | 评价、评分 |
| 折线图 | 增长趋势 |
| 柱状图 | 对比数据 |
| 折扣标签 | 折扣、优惠 |
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 Evening Blue). ViewBox 24x24. Used for all presentation contexts. All icons are stored in a single JSON file: (key = icon name, value = SVG string).
#292935assets/icons/ui-icons.jsonNaming convention (keys in JSON):
- — UI navigation actions (arrows, check, cross, edit, trash, menu, etc.)
nav-xxx - — Status & feedback (alert, check, clock, discount, gift, info, lock, star, etc.)
ind-xxx - (no prefix) — Amenities & features (wifi, pool, parking, spa, bed, tv, restaurant, etc.)
xxx
来源:Figma设计系统v2.0.3 — 导出的SVG图标
184个扁平轮廓风格的SVG图标(描边为深夜蓝), viewBox为24x24。适用于所有演示文稿场景。所有图标存储在单个JSON文件中:(键为图标名称,值为SVG字符串)。
#292935assets/icons/ui-icons.json命名规范(JSON中的键):
- — UI导航操作(箭头、勾选、叉号、编辑、删除、菜单等)
nav-xxx - — 状态与反馈(警告、勾选、时钟、折扣、礼品、信息、锁、星级等)
ind-xxx - (无前缀) — 酒店设施与特色(wifi、泳池、停车场、水疗、床、电视、餐厅等)
xxx
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— easy to recolor via thestroke="#292935"param. Marketing icons have baked-in brand gradients (linearGradient orange→coral→yellow) — use as-is.color
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 |
|---|---|
| The 4 brand gradients (Generic, Primary, Complementary 1, Complementary 2) |
| Rules for applying gradients ON text (direction: top-left → bottom-right) |
| Rules for applying gradients AS backgrounds (direction: bottom-left → top-right) |
| HQ angular gradients with background blur for key visuals |
| Font hierarchy: Maison Neue (H1), Manrope (H2/body), secondary text rules |
| Color/gradient usage on text with examples |
| Color spectrum with emotional values (Liberté → Bien-être) |
| Sky photography inspiration for the brand palette |
| Diverse layout examples (portrait, landscape, stories) |
| Image + gradient text overlay example |
这些是从Figma导出的页面,用于设计幻灯片时的视觉参考:
| 文件 | 内容 |
|---|---|
| 4种品牌渐变(通用、主色、互补色1、互补色2) |
| 文字渐变应用规则(方向:左上→右下) |
| 背景渐变应用规则(方向:左下→右上) |
| 高清角度渐变搭配背景模糊,用于关键视觉元素 |
| 字体层级:Maison Neue(H1)、Manrope(H2/正文)、次要文字规则 |
| 文字颜色/渐变使用示例 |
| 配色光谱与情感价值(自由→舒适) |
| 品牌调色板的天空摄影灵感来源 |
| 多样布局示例(竖版、横版、故事型) |
| 图片+渐变文字叠加示例 |
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.pngAlso 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.pngThen use everywhere. NEVER use the raw asset files directly.
/tmp/dayuse-*.png源标志(渐变版本)为带黑色背景的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.
whjavascript
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 (they are all 1:1 viewBox)
w === h - Photos: Always use helper or manually compute
fitImage()h = w / ratio - Logos: Wordmark = 2:1, Symbol = 1:1 (see below)
所有图片和图标必须保持原始宽高比,切勿随意设置和,请始终根据其中一个参数计算另一个。
whjavascript
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 + 营销):始终使用正方形(均为1:1 viewBox)
w === h - 照片:始终使用辅助函数或手动计算
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 → #6E69ACDIRECTION 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 for the complete list of 187 icons with names, descriptions, and react-icons equivalents.
references/icon-catalog.mdSource: Figma Design System v2.0.3 — Icons page (node )
40:927完整目录:请查看获取187个图标的完整列表,包含名称、描述和react-icons等效图标。
references/icon-catalog.md来源:Figma设计系统v2.0.3 — 图标页面(节点)
40:9278 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 , use those directly:
assets/icons/{category}/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 (Font Awesome) with Dayuse brand colors. Check for the react-icons equivalent of each Dayuse icon.
react-icons/fareferences/icon-catalog.mdjavascript
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图标未导出为文件时,可使用(Font Awesome)并搭配Dayuse品牌颜色。请查看获取每个Dayuse图标对应的react-icons等效图标。
react-icons/fareferences/icon-catalog.mdjavascript
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 sharpIcon 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 or accent colors (
292935,F66236,FDAA9A,FEB900)FF003E - Color on dark bg (UI icons): Use White
FFFFFF - All icons are 1:1 ratio — always use when placing
w === h
- 风格:轮廓线图标(匹配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 maintenant1. 愿景/背景 → 我们为何在此,全局视角
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 | |
| Texte secondaire | Gray | |
| Texte tertiaire | Light Gray | |
| Accent principal (titres highlights, CTA) | Orange | |
| Accent secondaire | Coral | |
| Accent tertiaire / urgence | Hot Pink | |
| CTA / boutons / énergie | Yellow Gold | |
| Fond encarts takeaway | Rose pâle | |
| Fond encarts bloc | Beige clair | |
| Fond cards | Off-white | |
| 角色 | 颜色 | 十六进制码 |
|---|---|---|
| 主文字/标题 | 深夜蓝 | |
| 次要文字 | 灰色 | |
| ** tertiary文字** | 浅灰色 | |
| 主强调色(标题高亮、行动号召) | 橙色 | |
| 次强调色 | 珊瑚色 | |
| 第三强调色/紧急 | 亮粉色 | |
| 行动号召/按钮/活力 | 黄金黄 | |
| 重点提示框背景 | 浅粉色 | |
| 区块背景 | 浅米色 | |
| 卡片背景 | 米白色 | |
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 :
- — Coral (doux, secondaire)
FDAA9A - — Orange (principal, énergie)
F66236 - — Yellow Gold (CTA, attention)
FEB900 - — Hot Pink (urgence, contraste)
FF003E - — Rose pâle (fonds, encarts)
FFE5EA
Note : les anciens bleus (,51B0B0) et le violet (3597C8) ne font plus partie de la palette d'accent. Utiliser uniquement la gamme chaude ci-dessus.6E69AC
用于图表、徽章、标签、图标圆形背景的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 () on light backgrounds (
292935,FFFFFF, gradients clairs)F8F8F8 - White text () on dark backgrounds (
FFFFFF), colored backgrounds (Yellow, Orange, Hot Pink), or gradient backgrounds292935
“字体应始终最大化可读性和强对比度”,请始终遵循:
- 深色文字()搭配浅色背景(
292935,FFFFFF, 浅色渐变)F8F8F8 - 白色文字()搭配深色背景(
FFFFFF)、彩色背景(黄色、橙色、亮粉色)或渐变背景292935
BACKGROUND RULES (CRITICAL)
背景规则(核心)
Evening Blue () is FORBIDDEN as a slide background. It is a TEXT color only.
292935Allowed slide backgrounds:
- (white) — default for ALL content slides
FFFFFF - (off-white) — subtle variation
F8F8F8 - Brand gradient backgrounds — for section divider slides ONLY (WHY? / HOW? transitions)
- (yellow) — for bold statement slides (e.g. "Only 3% of French people have heard of Dayuse")
FEB900 - 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禁止将深夜蓝()用作幻灯片背景,它仅可作为文字颜色使用。
292935允许使用的幻灯片背景:
- (白色) — 所有内容幻灯片的默认背景
FFFFFF - (米白色) — 细微变体
F8F8F8 - 品牌渐变背景 — 仅用于章节分隔幻灯片(WHY? / HOW? 过渡页)
- (黄色) — 用于大胆声明幻灯片(例如“仅3%的法国人听说过Dayuse”)
FEB900 - 生活方式照片作为全屏背景(用于结束页)
唯一例外:可作为小尺寸强调元素的形状填充(而非幻灯片背景),例如“Victor Barnouin”卡片或数据药丸徽章。
292935Typography — 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%
颜色: 54545DRunning 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%
颜色: 54545DSecondary 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 7F7F86Example: / /
MADE WITH LOVE AT DAYUSEROOM TO DAYDREAMVIEW OUR HOTELS用于行动号召、签名、引导标签、重要次要信息。始终使用大写并设置字间距。
字体: Manrope Bold(字重700)
字号: 可变(通常为10-14pt)
字间距: 17%
转换: 大写
颜色: 292935或7F7F86示例: / /
MADE WITH LOVE AT DAYUSEROOM TO DAYDREAMVIEW OUR HOTELSFull Typography Reference Table
完整排版参考表
| Element | fontFace | Size | Weight | Color | Notes |
|---|---|---|---|---|---|
| Hero title (H1) | | 36-48pt | 800 (ExtraBold) | | Section dividers, covers. Can use gradient as image mask |
| Slide title (H2) | | 24-30pt | 700 (Bold) | | Key words in |
| Subtitle | | 16-20pt | 600 (SemiBold) | | |
| Body text | | 12-14pt | 400 (Regular) | | Line height 22, spacing 1% |
| Labels / captions | | 10-11pt | 500 (Medium) | | |
| Big KPI numbers | | 36-48pt | 700 (Bold) | | |
| Label under KPI | | 11pt | 400 (Regular) | | |
| CTA / Signature | | 11-12pt | 700 (Bold) | | FULL CAPS, 17% letter spacing |
| CTA button text | | 11-12pt | 700 (Bold) | | Inside colored shape |
| Section divider text | | 60-80pt | 800 (ExtraBold) | | On gradient backgrounds |
| Orange highlight words | | same as parent | 700 (Bold) | | Within titles only |
| 元素 | 字体 | 字号 | 字重 | 颜色 | 说明 |
|---|---|---|---|---|---|
| 首屏标题(H1) | | 36-48pt | 800(ExtraBold) | | 章节分隔页、封面,可使用渐变作为图片遮罩 |
| 幻灯片标题(H2) | | 24-30pt | 700(Bold) | | 关键词使用 |
| 副标题 | | 16-20pt | 600(SemiBold) | | |
| 正文 | | 12-14pt | 400(Regular) | | 行高22,字间距1% |
| 标签/说明文字 | | 10-11pt | 500(Medium) | | |
| 大KPI数字 | | 36-48pt | 700(Bold) | | |
| KPI下方标签 | | 11pt | 400(Regular) | | |
| 行动号召/签名 | | 11-12pt | 700(Bold) | | 全大写,字间距17% |
| 行动号召按钮文字 | | 11-12pt | 700(Bold) | | 放置在彩色形状内 |
| 章节分隔文字 | | 60-80pt | 800(ExtraBold) | | 渐变背景上使用 |
| 橙色高亮文字 | | 与父元素字号相同 | 700(Bold) | | 仅用于标题内 |
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 | | Brand statements, logo, signature elements. Full spectrum = balance between all polarities |
| Primary | | 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| 渐变 | 颜色 | 使用场景 |
|---|---|---|
| 通用渐变 | | 品牌声明、标志、标志性元素。全光谱 = 平衡所有极性 |
| 主色渐变 | | 简洁地强化品牌标识,用于传递活力/激情的信息。“注意:有时颜色过于鲜艳,需谨慎使用” |
| 互补色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 yellow background
FEB900 - 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 () sur la moitié gauche
E8E8E8 - 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 () avec texte blanc
292935 - 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 en
ROUNDED_RECTANGLEF8F8F8 - 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 VISIONOUR 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_RECTANGLEF8F8F8 - 顶部居中放置彩色圆形内的图标
- 居中粗体标题
- 带勾选图标的列表项
10. 愿景/引用幻灯片(品牌平台风格)
- 白色背景
- 左侧添加细渐变竖条(宽度约0.15英寸,全屏高度)
- 引导文字使用Manrope Bold大写 + 小图标:,
OUR VISIONOUR 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 () pour conclusions/punchlines
FDE8E4 - Pastilles données : rounded rect avec texte blanc
292935 - Cercles colorés autour des icônes (0.4-0.7" diameter)
- CTA buttons : rounded rect orange avec texte blanc bold
F66236 - Cards : ,
ROUNDED_RECTANGLE, fillrectRadius: 0.1-0.12F8F8F8 - 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.12F8F8F8 - 全大写次要文字: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 skill PptxGenJS workflow
pptx - Apply ALL Dayuse visual identity rules
- QA via pptx skill verification process
- 与用户确认PPT类型、受众、内容
- 提出幻灯片结构(洞察标题)供用户确认
- 素材预处理:标志去背景 + 生成渐变条 + 生成渐变背景
- 通过技能的PptxGenJS工作流制作PPTX
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.pngLogo déformé / écrasé :
→ Ratio non respecté. Wordmark: . Symbol: .
h = w / 2h = wFont 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 pour générer un PNG. Vérifier que est installé.
makeGradientText()sharpIcô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 et . Utiliser les helpers et . Les clés sont sans extension : , , , .
ui-icons.jsonmarketing-icons.jsonuiIconPng(name)marketingIconPng(name)"wifi""nav-check""ind-star""hotel"Photo trop lourde / lente :
→ Les photos haute-res peuvent ralentir le PPTX. Utiliser pour redimensionner avant insertion : .
sharpsharp(photo).resize(1920).jpeg({ quality: 80 })SVG icons invisible sur fond blanc :
→ Les icônes UI sont en stroke . Sur fond blanc elles sont visibles. Si nécessaire, recolorer le stroke dans le SVG avant conversion PNG.
#292935Deck 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 / 2h = w字体未显示:
→ 目标机器未安装Manrope,请从Google Fonts安装,Google Slides原生支持该字体。
渐变文字未渲染:
→ PptxGenJS不原生支持渐变文字,请使用函数生成PNG,确保已安装。
makeGradientText()sharp图标不可见(白色在白色背景上):
→ 白色图标必须放置在彩色圆形内,切勿直接将白色图标放在白色背景上。
JSON中的SVG图标:
→ 图标存储在和中,请使用和辅助函数,键不带扩展名:, , , 。
ui-icons.jsonmarketing-icons.jsonuiIconPng(name)marketingIconPng(name)"wifi""nav-check""ind-star""hotel"图片过大/加载缓慢:
→ 高分辨率图片会导致PPTX运行缓慢,请使用在插入前调整大小:。
sharpsharp(photo).resize(1920).jpeg({ quality: 80 })白色背景上的SVG图标不可见:
→ UI图标描边为,在白色背景上可见,如有需要,请在转换为PNG前修改SVG中的描边颜色。
#292935PPT缺乏冲击力:
→ 每个幻灯片添加一个视觉元素
→ 增大标题(32pt+)与正文(14pt)的对比度
→ 使用彩色提示框突出重点
→ 添加至少1-2个渐变背景的章节分隔页
叙事平淡:
→ 重新检查“愿景优先”结构
→ 标题为结论而非主题
→ 章节间添加过渡页(渐变分隔页)
→ 使用黄色背景的大胆声明幻灯片突出关键数据点