GoodLadTom/navaigate-present

navaigate-present 是做什么的？

属于用户自己品牌的交互式演示文稿。该技能没有预装任何品牌或室内风格。每个演示文稿看起来都像用户的品牌，而非 NavAIgate 的风格。在制作第一个演示文稿之前，它会先找到用户想要的风格：通过提问、研究用户的网站及其喜爱的网站，并向用户展示可供选择的方向。

无论是什么品牌，每个演示文稿都保留以下特性：

• 每个屏幕一个想法。 文字位于左侧：一个标签、一个逐字出现的标题（带有一个重音短语）以及一段简短明了的段落。右侧是一个现场画布演示。
• 演示通过操作来教学。 演示者按下、拖动或切换某个元素，屏幕会立即响应：数字跳动、图表重绘、卡片滑到新位置。每次变化都带有缓动效果，因此不会跳跃。
• 永远不死板。 每个演示在其幻灯片进入视野时会重演其到达动画，并在等待时保持一些轻柔的动态。页面背景会缓慢移动，并在点击处产生波纹。
• 像演讲一样运行。 向下箭头（或空格、Page Down、右箭头）精确移动一张幻灯片。向上和向左返回，Home 和 End 跳转到两端。F 键进入全屏。底部分组进度条，顶部栏显示幻灯片名称，地图幻灯片可跳转到任意位置。这些都来自 template\core.js：切勿在幻灯片中修改。
• 像电影一样测试。 每张幻灯片都在三种尺寸下截图，并按下所有控件。没有重叠、裁剪或抛出错误。

表达要清晰：大多数用户不是程序员。在每一步之前用一行说明正在做什么，除非他们询问，否则不要透露命令。他们的品牌存放在自己的文件夹 ~/.navaigate-present/brands/ 中，因此更新此技能不会影响它们。

0. 哪个品牌？

运行 python -I scripts\brand.py list。

• 尚无品牌，或用户想要新品牌：先执行设置（第 1 至 4 节），大约需要 15 分钟。
• 一个品牌：直接使用。多个品牌：询问使用哪个，除非请求已明确。

1. 问题

告诉用户接下来会发生什么：几个问题、查看他们的网站和他们喜欢的风格，然后展示两个或三个方向供选择。使用 AskUserQuestion（一次调用，四个问题）：

1. 感觉应该怎样？ 沉稳高端 / 大胆有活力 / 友好温暖 / 干净技术感。
2. 浅色还是深色？ 浅色 / 深色 / 匹配我的网站 / 两者都展示。
3. 按钮和标签的边角？ 完全圆角（药丸状）/ 轻微圆角 / 直角 / 匹配我的网站。
4. 幻灯片背后的背景？ 柔和点阵 / 精细网格 / 坐标纸线条 / 纯色。

然后在聊天中，通过一条消息询问：

• 品牌名称和网站；
• 标志（文件路径，或拖入）。SVG 最佳，否则为带透明背景的 PNG。可以说如果用户没有文件，可以从网站获取；
• 品牌指南（如果有）：PDF 或链接；
• 一到三种他们喜欢的风格：网站、演示文稿、品牌或截图，甚至来自其他行业。可以说任何能让他们的幻灯片有类似感觉的东西；
• 他们永远不想看到的东西（例如药丸状、表情符号或霓虹色）；
• 演示文稿的目标受众，一句话；
• 保存演示文稿的位置（建议在文档中创建一个 <品牌> presentations 文件夹）。

2. 研究

1. 他们的网站和他们喜爱的风格。 运行 python -I scripts\research.py "~/.navaigate-present/research/<slug>" <他们的网站> <每个引用>。对于每个网站，它会保存首页和页面的截图，以及页眉中找到的任何标志。它还会测量页面实际使用的字体、背景和文字颜色、强调色、边角和标签样式。查看每张截图。 数字说明具体内容，图片说明总体感觉。
2. 他们的指南（如果提供了）。阅读 PDF：其中的颜色、字体和规则优先于网站显示的任何内容。
3. 没有网站也没有喜爱的风格？ 在网上搜索他们所在领域的三到四个设计良好的网站，并进行研究以供参考。如果连接了 Firecrawl，使用 firecrawl_search 查找它们，并使用 formats: ["branding"] 进行抓取，可以再次读取网站的颜色和字体。
4. 用简洁的语言和几行文字告诉他们你的发现。 例如：“你的网站使用深绿色配奶油色，标题使用衬线字体。你喜欢的演示文稿是深色的，使用直角和大量留白。”

从喜爱的风格中提取什么：感觉（浅色或深色、留白多少、字体的特点、边角、颜色使用程度）。切勿使用其标志、产品名称、文字或精确布局。用户的颜色、标志和名称始终属于他们自己。

3. 方向

在 ~/.navaigate-present/drafts/<slug>-a、-b 和 -c 中创建两到三个草稿品牌。每个包含一个 brand.json（见 references\BRAND.md）、一份标志副本和一个由几个词组成的 "direction" 名称。例如：

• A，忠实于你的品牌： 用户自己网站的颜色、字体和边角。
• B，更接近<喜爱的风格>： 用户自己的颜色和标志，采用喜爱风格的模式、字体特点、边角和背景。
• C，替代方案： 鲜明的对比，例如如果 A 是浅色则用深色，或不同的字体组合。必须仍然符合品牌。

遵循他们的回答：感觉、浅色或深色、边角和背景。如果他们说“匹配我的网站”，则使用研究测量到的值。然后：

1. 对每个草稿运行 python -I scripts\brand.py check <草稿文件夹>，并修复每个 PROBLEM 行。
2. 运行 python -I scripts\brand.py compare <草稿 a> <草稿 b> [<草稿 c>]。它会构建每个方向的开场幻灯片和图表幻灯片，并将它们并排放置在一张图片 directions.png 中。
3. 向他们展示图片以及每个方向 index.html 的完整路径，以便他们可以点击浏览。询问他们喜欢哪一个，或者想要混合什么（“A 的颜色搭配 B 的字体”）。调整并再次比较，直到选出一个合适的。

4. 保存品牌

1. 将选定的方向（包含用户的修改）写入 ~/.navaigate-present/brands/<slug>/（brand.json、标志和任何字体文件）。
2. 运行 python -I scripts\brand.py check <slug>，然后运行 python -I scripts\brand.py sample <slug>。这会以该品牌构建所有五个示例幻灯片并截图。
3. 显示联系表并提供示例 index.html 的完整路径。当用户满意时，设置完成，未来的所有演示文稿都将使用此品牌。

5. 制作演示文稿

1. 简报。 目标受众、他们必须带走的关键信息、大致幻灯片数量、演示地点以及可能用到的事实。只使用用户提供或你可以验证的事实。切勿编造功能、数据或引用。
2. 大纲。 运行 python -I scripts\new_deck.py "<演示文稿文件夹>" "<标题>" <品牌 slug>。它会用示例幻灯片启动演示文稿。然后编写 _build\deck.json：组（将成为进度条）和幻灯片顺序。对于每张幻灯片，决定演示者将按下的一个元素以及它证明什么。没有可按下元素的幻灯片是薄弱的。
3. 文案。 一次性编写每张幻灯片的 label、headline、hl 和 body，使演示文稿具有统一的语调，并符合 brand.json 中的品牌语调。标题 5 到 10 个单词，hl（2 到 4 个单词）放置在标题内。正文最多约 45 个单词。使用平实的词语和短句，避免使用破折号以及“杠杆”、“无缝”或“解锁”等词汇。如果安装了写作风格和人性化技能，请使用它们。
4. 构建。 按照 references\SLIDE-BUILDER.md 构建每张幻灯片。幻灯片是独立的文件夹，因此助手可以并行构建它们。为每个助手提供该运行手册、其幻灯片 ID、品牌 slug、事实以及每张幻灯片的一个演示创意。
5. 测试。 运行 python -I scripts\build.py "<演示文稿>"，然后运行 python -I scripts\shoot.py "<演示文稿>" 1920 1080，然后在 1440 900 和 1280 720 下重复。每次运行必须打印 missing copy: none、fit: clean 和 console: clean。查看每张截图，包括在按下每个控件后拍摄的截图。
6. 审查。 像观众一样阅读每张幻灯片。演示是否证明了标题？文字是否平实真实？示例数据是否加总正确，并且是否标注为“示例数据”？检查品牌的 never 列表。
7. 交付。 提供演示文稿 index.html 的完整路径。它是一个离线可用的文件（除了 Google 字体），如果幻灯片加载图片，则加上 assets\ 文件夹。

规则

• 颜色和字体仅来自品牌。 在 CSS 中使用令牌（--accent、--accent-ink、--s1、--text、--muted、--line 等）。在 canvas 中使用 E.COL 和 E.FONT、E.HEAD 和 E.LABEL。切勿在幻灯片中输入十六进制颜色：这样才能让一张幻灯片在任何品牌中都能工作。
• 重音词使用 --accent-ink（或 E.COL.accentInk），即调整后的强调色直到在背景上可读。填充使用 --accent，强调色填充上的文字使用 --on-accent。
• 边角遵循品牌。 按钮和标签使用 var(--rp)，卡片使用 var(--r)，canvas 中使用 E.R。切勿输入 999px。
• 标志始终是用户的真实文件，由构建工具内联（<!--LOGO--> 在某个分区内）。切勿重绘，也切勿要求图像生成器生成。如果没有标志文件，品牌名称以其标题字体设置。给标志一个固定框并将其适配在内（object-fit: contain）。
• 数据是真实或标记的。 示例数学必须加总正确，并标注“示例数据”。
• **货币和数字使用品牌的 locale 和 currency（E.money、E.num）。语言使用品牌指定的（默认为英式英语）。

文件

• template\page.html：外壳和整个 CSS 设计系统，全部使用品牌令牌。
• template\engine.js (E)：绘图工具包（曲线、卡片、文字、标签、光标、波纹、刻度、平滑图表线条、网格、货币、背景）。
• template\core.js (P)：文案、逐字标题、阶段、键盘和进度、控件、循环。
• scripts\research.py：截图并测量网站。
• scripts\brandkit.py：将 brand.json 转换为令牌、字体和标志，并检查对比度。
• scripts\brand.py：列出、检查、比较和采样品牌。
• scripts\new_deck.py 启动演示文稿，scripts\build.py 构建演示文稿，scripts\shoot.py 测试演示文稿。
• references\BRAND.md：brand.json 格式。references\SLIDE-BUILDER.md：幻灯片合约和演示规则（提供给每个助手）。
• examples\slides\：start（标志展示）、path（地图）、idea（滑块驱动图表）、switch（前后对比并重新排列）和 close。它们是每个新幻灯片必须匹配的标准。

已学到的教训

• 内联代码中的 </script 即使位于注释内，也会提前结束页面的脚本。build.py 会转义它。
• 范围输入的步长必须落在其默认值上，否则浏览器会将其吸附到最近的步长。
• 仅设置宽度和最大高度的标志会溢出其盒子，导致展示的遮罩将其切断。应同时设置宽度和高度，并适配在内。
• shoot.py 按下的控件绝不能真正 disabled。应改用 aria-disabled="true"。
• 某些 Google 字体缺少字重（Space Mono 只有 400 和 700）。brand.py check 会查找每种字体拥有的字重并保存。
• 许多品牌将按钮设为黑色，并将强调色用于文字和图标。research.py 也会在那里查找，因此请将它的强调色列表与截图一起阅读。
• Shell 中的 Here-document 可能会吞掉反斜杠和引号。应使用文件写入工具写入幻灯片文件和脚本。