ui-ux-pro-max-skill Slides 技能指南基于 Chart.js、设计令牌与策略化布局构建 HTML 演示文稿【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill本篇指南围绕开源仓库 ui-ux-pro-max-skill 中的slides技能入口文档 .claude/skills/slides/SKILL.md展开系统讲解如何用该技能创建战略型 HTML 演示文稿。读完你将掌握技能的命令路由与知识库组织方式、25 种布局模式与 15 种演讲策略的选择逻辑、可直接复用的完整 HTML 模板含 Chart.js 数据可视化、响应式断点与键盘导航、25 条文案公式以及基于 BM25 检索的search-slides.py决策工具与底层决策 CSV 的工作原理。一、技能定位与适用场景slides是 ui-ux-pro-max-skill 仓库中一个面向演示文稿制作的 AI 技能其核心定位见 SKILL.md 元信息是Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.即使用 Chart.js 做数据可视化、使用设计令牌design tokens统一视觉、采用响应式布局适配多端、运用文案公式优化叙事、并结合上下文感知的幻灯片策略组织整个 Deck。调用提示词为[topic] [slide-count]即输入主题与页数即可生成。根据 SKILL.md 的 When to Use该技能适用于四类典型场景营销演示与路演 DeckMarketing presentations and pitch decks以数据驱动、需要 Chart.js 图表的幻灯片Data-driven slides with Chart.js需要布局模式指导的策略型幻灯片设计Strategic slide design with layout patterns需要文案公式优化的演示内容Copywriting-optimized presentation content。二、技能结构与命令路由2.1 命令SubcommandsSKILL.md 定义了技能的子命令体系子命令描述参考文档create创建战略性演示幻灯片references/create.md当前技能以create为唯一入口子命令其执行契约见 references/create.md非常简洁调用slides技能使用设计令牌、Chart.js 与幻灯片知识库创建有说服力的 HTML 幻灯片任务内容即$ARGUMENTS中传入的task。2.2 知识库References技能的知识库由四份参考文档组成见 SKILL.md References 表主题文件布局模式Layout Patternsreferences/layout-patterns.mdHTML 模板HTML Templatereferences/html-template.md文案公式Copywriting Formulasreferences/copywriting-formulas.md幻灯片策略Slide Strategiesreferences/slide-strategies.md2.3 路由逻辑SKILL.md 的 Routing 部分 规定了技能的执行流程从$ARGUMENTS第一个词解析出子命令加载对应的references/{subcommand}.md使用剩余参数执行该子命令。即create命令会路由到references/create.md而create.md内部又依赖布局、模板、文案、策略四份知识文档以及 design-system 技能的数据与脚本协同工作。从源码结构看这是一套入口 SKILL.md → 子命令参考文档 → 共享数据 CSV 检索脚本的三层架构。三、完整 HTML 幻灯片模板可直接复制运行references/html-template.md 给出了一个完整的、单文件自包含的 HTML 幻灯片模板下面按模块拆解其关键设计。3.1 基础结构与 16:9 画布锁定模板在head中通过 CDN 引入 Chart.js 4.4.1UMD 版本script srchttps://cdn.jsdelivr.net/npm/chart.js4.4.1/dist/chart.umd.min.js/script并在:root中预留设计令牌占位/* Paste embed-tokens.cjs output here */这是与 design-system 技能衔接的关键点——可使用 scripts/embed-tokens.cjs 将令牌 CSS 直接内联进独立 HTML。该脚本支持三种模式node embed-tokens.cjs输出完整 CSS、--minimal只输出常用令牌如--color-primary、--primitive-gradient-、--typography-font-等、--style用style标签包裹。Deck 容器通过 CSS 锁定桌面端 16:9 比例视口比例不符时自动 letterbox上下黑边居中.slide-deck { position: relative; width: 100vw; height: 100vh; overflow: hidden; } media (min-width: 769px) { .slide-deck { max-width: calc(100vh * 16 / 9); max-height: calc(100vw * 9 / 16); margin: auto; position: absolute; inset: 0; } }每页幻灯片.slide使用position: absolute叠放通过.active类控制显隐内容统一包裹在.slide-content内约束在安全区域内并防止溢出。3.2 响应式断点模板内置了两级响应式断点见 html-template.md平板≤768px内边距收窄为32px 24px标题字号降为clamp(28px, 5vw, 48px)手机≤480px内边距进一步收窄为24px 16px标题字号降为clamp(22px, 6vw, 36px)导航按钮缩小到 32px。排版使用clamp()流式字号配合--typography-font-heading与--typography-font-body令牌控制标题与正文字体。3.3 导航与进度条模板内置顶部进度条、底部导航按钮与页码计数器并支持键盘与点击翻页let current 1; const total document.querySelectorAll(.slide).length; document.getElementById(total).textContent total; function showSlide(n) { if (n 1) n 1; if (n total) n total; current n; document.querySelectorAll(.slide).forEach((s, i) { s.classList.toggle(active, i n - 1); }); document.getElementById(current).textContent n; document.getElementById(progressBar).style.width (n / total * 100) %; } function nextSlide() { showSlide(current 1); } function prevSlide() { showSlide(current - 1); } document.addEventListener(keydown, (e) { if (e.key ArrowRight || e.key ) { e.preventDefault(); nextSlide(); } if (e.key ArrowLeft) { e.preventDefault(); prevSlide(); } });3.4 Chart.js 数据可视化集成模板给出了一个折线图的完整接入示例并注明支持line、bar、doughnut、radar四种图表类型div classchart-container stylewidth: min(80%, 600px); height: clamp(200px, 40vh, 350px); canvas idrevenueChart/canvas /div script new Chart(document.getElementById(revenueChart), { type: line, // or bar, doughnut, radar data: { labels: [Sep, Oct, Nov, Dec], datasets: [{ label: MRR ($K), data: [5, 12, 28, 45], borderColor: #FF6B6B, backgroundColor: rgba(255, 107, 107, 0.1), borderWidth: 3, fill: true, tension: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { grid: { color: rgba(255,255,255,0.05) }, ticks: { color: #B8B8D0 } }, y: { grid: { color: rgba(255,255,255,0.05) }, ticks: { color: #B8B8D0 } } } } }); /scriptresponsive: truemaintainAspectRatio: false保证图表随容器自适应网格与刻度颜色统一为低对比度暗色与深色主题融合。3.5 动画类与背景图模板预置了四类动画见 html-template.mdanimate-fade-upfadeUp0.6s从translateY(30px)淡入animate-countcountUp1s用于数字滚动animate-scalescaleIn0.5s从scale(0.9)放大淡入animate-stagger对子元素按nth-child依次延迟 0.1s/0.2s/0.3s/0.4s 交错进场。背景图通过半透明渐变遮罩overlay保证前景文字可读div classslide slide-with-bg stylebackground-image: url(https://images.pexels.com/...) div classoverlay stylebackground: linear-gradient(135deg, rgba(13,13,13,0.9), rgba(13,13,13,0.7))/div div classcontent styleposition: relative; z-index: 1; !-- Slide content -- /div /div3.6 CSS 变量速查模板依赖以下核心设计令牌html-template.md变量用途--color-primary品牌主色CTA、高亮--color-background幻灯片背景色--color-secondary次要元素--primitive-gradient-primary标题渐变色--typography-font-heading标题字体--typography-font-body正文字体四、25 种布局模式与决策流程references/layout-patterns.md 维护了 25 种带 CSS 结构与动画类的幻灯片布局。核心的选择表如下布局适用场景动画Title Slide开场/第一印象animate-fade-upProblem Statement建立痛点animate-staggerSolution Overview引入方案animate-scaleFeature Grid展示能力3-6 张卡片animate-staggerMetrics Dashboard展示 KPI3-4 个指标animate-stagger-scaleComparison Table对比选项animate-fade-upTimeline Flow展示进展animate-staggerTeam Grid介绍人员animate-staggerQuote Testimonial客户背书animate-fade-upTwo Column Split对比/对照animate-fade-upBig Number Hero单一重磅指标animate-countProduct Screenshot展示产品 UIanimate-scalePricing Cards呈现价位档animate-staggerCTA Closing驱动行动animate-pulse4.1 核心 CSS 结构Title Slide居中纵向排列.slide-title { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }Two Column Split1fr 1fr 双栏768px 以下折叠为单栏.slide-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } media (max-width: 768px) { .slide-split { grid-template-columns: 1fr; gap: 24px; } }Feature Grid三列网格两级断点降列.slide-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } media (max-width: 768px) { .slide-features { grid-template-columns: repeat(2, 1fr); gap: 16px; } } media (max-width: 480px) { .slide-features { grid-template-columns: 1fr; } }Metrics Dashboard四列指标网格.slide-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } media (max-width: 768px) { .slide-metrics { grid-template-columns: repeat(2, 1fr); } } media (max-width: 480px) { .slide-metrics { grid-template-columns: 1fr; } }4.2 组件变体与视觉处理卡片样式分为五种见 layout-patterns.md样式CSS 类用途Icon Left.card-icon-left带图标的特性卡Accent Bar.card-accent-bar高亮特性Metric Card.card-metric数字/统计Avatar Card.card-avatar团队成员Pricing Card.card-pricing价位档指标样式有四种效果gradient-number数字渐变文字、oversized超大字号 120px、sparkline小型内联迷你图、funnel-numbers转化漏斗阶段数字。视觉处理Visual Treatments按场景选择layout-patterns.md处理使用时机gradient-glow标题页、CTAsubtle-border问题陈述icon-top特性网格screenshot-shadow产品截图popular-highlight定价scale 1.05 放大bg-overlay背景图片contrast-pair前后对比logo-grayscale客户 Logo4.3 布局决策流程layout-patterns.md 给出了四步决策流1. 这张幻灯片的目的是什么 └─ 检索 layout-logic.csv 2. 应触发什么情绪 └─ 检索 color-logic.csv 3. 内容类型是什么 └─ 检索 typography.csv 4. 是否应打破模式 └─ 检查位置1/3、2/3→ 使用全出血版式这套决策流在实际实现中由 design-system 技能的数据与脚本承接目标→slide-layout-logic.csv、情绪→slide-color-logic.csv、内容类型→slide-typography.csv。五、25 条文案公式与叙事映射references/copywriting-formulas.md 提供 25 条用于幻灯片文案的公式其中五条核心公式如下。5.1 核心公式PASProblem-Agitate-Solution——用于问题页、痛点结构Problem → Agitate → Solution模板[Pain point]? Every [time frame], [consequence]. [Solution] fixes this.AIDAAttention-Interest-Desire-Action——用于 CTA、收尾页结构Attention → Interest → Desire → Action模板[Bold statement]. [Benefit detail]. [Social proof]. [CTA].FABFeatures-Advantages-Benefits——用于特性页、产品展示结构Feature → Advantage → Benefit模板[Feature] lets you [advantage], so you can [benefit].Cost of Inaction不作为的代价——用于煽动页、制造紧迫感结构Status Quo → Loss → Time Decay模板Without [solution], youre losing [amount] every [timeframe].Before-After-Bridge前后桥接——用于转型页、案例研究结构Before → After → Bridge模板[Pain point before]. [Desired state after]. [Your solution] is the bridge.5.2 公式→页面类型映射页面类型首选公式情绪Title/HookAIDA, Hook好奇curiosityProblemPAS, Agitate沮丧frustrationCost/RiskCost of Inaction恐惧fearSolutionFAB, BAB希望hopeFeaturesFAB自信confidenceTractionProof Stack信任trustSocial ProofTestimonial信任trustPricingValue Stack自信confidenceCTAAIDA, Urgency紧迫urgency5.3 标题句式与快速参考Power Words 句式Stop [bad thing]、Get [desired result] in [timeframe]、The [adjective] way to [action]、Why [audience] choose [product]、[Number] ways to [achieve goal]。对比句式[Old way] is dead. Meet [new way].、Dont [bad action]. Instead, [good action].、From [pain point] to [benefit].。社会证明句式[Number] [users/companies] trust [product]、Join [notable company] and [notable company]、As seen in [publication]。快速参考copywriting-formulas.md创造紧迫感用 Cost of Inaction/Scarcity建立信任用 Social Proof/Testimonial展示价值用 FAB/Value Stack驱动行动用 AIDA/CTA讲故事用 BAB/Story Arc呈现数据用 Proof Stack。六、15 种 Deck 策略与情绪弧线references/slide-strategies.md 收录了 15 种经过验证的 Deck 结构及情绪弧线emotion arc。6.1 策略选择总表策略页数目标受众YC Seed Deck10-12种子轮融资VCGuy Kawasaki1020 分钟路演投资人Series A12-15A 轮融资成长型 VCProduct Demo5-8展示产品价值潜在客户Sales Pitch7-10促成成交合格线索Nancy Duarte Sparkline不定转变视角任意Problem-Solution-Benefit3-5快速说服时间紧迫者QBR10-15同步季度状态管理层Team All-Hands8-12对齐团队员工Conference Talk15-25思想领导力听众Workshop20-40技能教学学习者Case Study8-12证明价值潜在客户Competitive Analysis6-10战略决策内部Board Meeting15-20董事会汇报董事Webinar20-30获取线索报名者6.2 常见结构示例YC Seed Deck10 页1.Title/Hook → 2.Problem → 3.Solution → 4.Traction → 5.Market → 6.Product → 7.Business Model → 8.Team → 9.Financials → 10.The Ask。 情绪弧线curiosity→frustration→hope→confidence→trust→urgency。Sales Pitch9 页1.个性化 Hook → 2.对方问题 → 3.不作为代价 → 4.你的方案 → 5.证明/案例 → 6.差异化 → 7.定价/ROI → 8.异议处理 → 9.CTA 下一步。 情绪弧线connection→frustration→fear→hope→trust→confidence→urgency。Product Demo6 页1.Hook/Problem → 2.方案概览 → 3.现场演示/截图 → 4.核心特性 → 5.价值/定价 → 6.CTA。 情绪弧线curiosity→frustration→hope→confidence→urgency。6.3 Duarte Sparkline 模式在现状之痛What Is与理想之未来What Could Be之间交替制造张弛What Is → What Could Be → What Is → What Could Be → New Bliss (痛) (希望) (痛) (希望) (收束)在 1/3 与 2/3 位置打破模式会形成参与度峰值——这一规则在实现中对应 slide_search_core.py 的calculate_pattern_break当页数 ≥5 时在third与third * 2位置强制触发模式打破同时当上一页情绪与当前页情绪构成对照如 frustration→hope、hope→fear时也会触发。6.4 场景→策略匹配场景推荐策略融资YC Seed、Series A、Guy Kawasaki卖产品Sales Pitch、Product Demo内部汇报QBR、All-Hands、Board Meeting公开演讲Conference Talk、Workshop证明价值Case Study、Competitive Analysis获取线索Webinar七、search-slides.py知识库检索与上下文推荐引擎技能的知识库并非静态文档而是由 design-system 技能下的脚本驱动实现根据目标/情绪/内容类型自动推荐布局、排版、配色与图表。命令行入口为 search-slides.py。7.1 基础检索命令# 按用途查找布局 python .claude/skills/design-system/scripts/search-slides.py metrics dashboard -d layout # 上下文推荐第 4 页、共 10 页 python .claude/skills/design-system/scripts/search-slides.py traction slide \ --context --position 4 --total 10 # 按目标查找策略 python .claude/skills/design-system/scripts/search-slides.py investor pitch -d strategy # 获取情绪弧线JSON 输出 python .claude/skills/design-system/scripts/search-slides.py series a funding -d strategy --json # 按情绪找文案公式 python .claude/skills/design-system/scripts/search-slides.py urgency cta -d copy7.2 参数说明search-slides.py的参数体系见 search-slides.py 的 argparse 定义参数类型默认值说明query位置参数必填搜索查询词-d, --domain可选自动检测限定域strategy/layout/copy/chart-n, --max-results可选3最大返回条数--all标志关跨全部域搜索--json标志关JSON 输出--context标志关上下文搜索模式--position可选1当前页在 Deck 中的位置1 起--total可选9Deck 总页数--prev-emotion可选无上一页情绪用于对比计算上下文搜索还支持情绪对比例如--prev-emotion frustration会触发frustration→hope类的对照判断。7.3 域名自动检测不指定-d时脚本依据查询词中的关键词自动判定域slide_search_core.pydetect_domainstrategypitch、deck、investor、yc、seed、series、demo、sales、webinar、conference、board、qbr、all-hands、duarte、kawasaki、structurelayoutslide、layout、grid、column、title、hero、section、cta、screenshot、quote、timeline、comparison、pricing、teamcopyheadline、copy、formula、aida、pas、hook、cta、benefit、objection、proof、testimonial、urgency、scarcitychartchart、graph、bar、line、pie、funnel、metrics、data、visualization、kpi、trend、comparison、heatmap、gauge。按命中关键词数打分取最高域若无命中则回退到strategy。八、源码级原理BM25 检索与四维决策系统8.1 BM25 排序实现检索内核位于 slide_search_core.py使用经典 BM25 算法参数k11.5、b0.75分词转小写、去标点、过滤 ≤2 字符的短词索引统计文档长度、平均文档长度与词频计算 IDFlog((N - freq 0.5) / (freq 0.5) 1)打分对查询中的每个 token 累加idf * tf * (k11) / (tf k1*(1-bb*len/avgdl))按得分降序取前 N 条且得分必须大于 0。不同域的搜索列与输出列配置在 CSV_CONFIG 中集中管理例如strategy域检索strategy_name/keywords/goal/audience/narrative_arc列输出strategy_name/slide_count/structure/goal/audience/tone/narrative_arc/sources等字段。8.2 四维决策 CSV上下文搜索模式--context会额外加载四张决策表见 DECISION_CSV_CONFIGslide-layout-logic.csv按goal主键每行给出emotion、layout_pattern、direction、visual_weight、break_pattern、use_bg_image。例如hook→split-hero视觉偏右、70% 视觉占比、使用背景图agitation→full-bleed-stat100% 文字、需要打破模式。slide-typography.csv按content_type主键定义primary_size、secondary_size、accent_size、weight_contrast、letter_spacing、line_height。如hero-statement主字号 120px、字重对比 700-400、字距 tight、行高 1.0quote-block36px、400-italic、字距 loose、行高 1.5。slide-color-logic.csv按emotion主键定义background、text_color、accent_usage、use_full_bleed、gradient、card_style。如frustration→ 深色表面、前景文字、极简强调、subtle-border卡片hope→ accent 出血背景、深色文字、全出血。slide-backgrounds.csv按slide_type主键定义image_category、overlay_style、text_placement、search_keywords。如hero→ abstract-tech 类别、gradient-dark 遮罩、居中文字。决策顺序为get_layout_for_goal布局→get_typography_for_slide排版→get_color_for_emotion配色→ 模式打破与全出血判断calculate_pattern_break、should_use_full_bleed→get_background_config背景图→ 动画类映射animate-map。8.3 全出血规则should_use_full_bleed规定见 slide_search_core.py不出现连续两张全出血页前三分之一、中部与结尾各保留一张仅保留给高情绪节拍hope、urgency、fear、curiosity。具体位置为[1, third, third*2, total-1]且total_slides ≥ 3才启用。8.4 动画映射上下文搜索会按推断目标给出动画类slide_search_core.py目标动画类hookanimate-fade-upproblemanimate-fade-upagitationanimate-count animate-staggersolutionanimate-scalefeaturesanimate-staggertractionanimate-chart animate-countproofanimate-stagger-scalesocialanimate-fade-upctaanimate-pulse九、数据资产与配套脚本一览9.1 知识库 CSV 数据search-slides.py检索的数据文件位于 .claude/skills/design-system/data/ 下四张主表与四张决策表主表slide-strategies.csv15 种 Deck 策略含narrative_arc、emotion_arc、sparkline_beats、key_metrics、sources字段、slide-layouts.csv25 种布局含content_zones、visual_weight、cta_placement、recommended_for、avoid_for、css_structure、card_variant、grid_columns、visual_treatment、animation_class、slide-copy.csv文案公式含components、example_template、emotion_trigger、slide_type、source、slide-charts.csv图表选型含best_for、data_type、when_to_use、when_to_avoid、max_categories、css_implementation、accessibility_notes、sources。决策表slide-layout-logic.csv、slide-typography.csv、slide-color-logic.csv、slide-backgrounds.csv见上文 8.2。例如 slide-strategies.csv 中 YC Seed Deck 的情绪弧线为curiosity→frustration→hope→confidence→trust→urgencySparkline 节拍为hook|what-is|what-could-be|proof|proof|what-could-be|proof|trust|what-could-be|actionslide-charts.csv 则给出了柱状图/折线图/面积图的使用边界如竖向柱状图建议 3-12 个类别、折线图适合 10 数据点的时间序列、面积图不超过 3-4 个系列。9.2 其他配套脚本generate-slide.py幻灯片生成脚本与search-slides.py同属 design-system 的幻灯片生产链embed-tokens.cjs将assets/design-tokens.css中的令牌提取为内联 CSS供独立 HTML信息图、幻灯片使用validate-tokens.cjs 与 html-token-validator.py校验令牌一致性。9.3 展示页slides技能可直接生成preview/xiaomaomi-app.html这样的独立演示页仓库内已有示例 preview/xiaomaomi-app.html可用浏览器直接打开查看效果。十、实战流程建议综合 SKILL.md 的路由契约、四份知识文档与检索脚本推荐的使用流程为明确场景与策略根据受众VC、客户、员工、听众从 15 种策略中选定 Deck 结构与页数必要时用search-slides.py investor pitch -d strategy辅助检索逐页决策对每一页执行四步决策流——目标→layout-logic、情绪→color-logic、内容类型→typography、位置→模式打破/全出血判断可用--context --position N --total M获得推荐编写文案按公式→页面类型映射选用 PAS/AIDA/FAB/Before-After-Bridge 等公式组织每页文案套用 HTML 模板复制 references/html-template.md 的完整模板用embed-tokens.cjs --style注入设计令牌按需加入 Chart.js 图表与动画类验证在浏览器中打开生成的 HTML检查 16:9 锁定、响应式断点、键盘导航与图表渲染是否符合预期。需要注意的是仓库为只读所有脚本search-slides.py、embed-tokens.cjs等与数据 CSV 仅用于在本地查看、运行与配置search-slides.py要求 Python 3 环境且会向 stdout 输出 emoji脚本已内置 UTF-8 强制转换以兼容 Windows 控制台见 search-slides.py 头部注释。【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考