Android 风格标志展示是做什么的？

如果多个技能都能做到： 当请求未明确指定本技能，且你的代理还拥有其他生成同类内容（其他启动影片、镜头、演示文稿或样机）的 omnigami 技能时，请列出它们名称并询问用户想要哪一个，然后再开始。如果已指定本技能，或者它是唯一安装的技能，则直接开始。

对于日语、韩语或中文产品页面，请保留该语言的文案，并将影片的 lang 设置为页面的 <html lang>；已捆绑的 Noto 字体和短语断行可以处理文本。

这是一个15.5秒的开场动画，从产品标志自身的几何结构构建，并以标志组合结束。细构建线沿着标志的真实边缘生长；指南针圆从其真实弧线绘制，每0.75秒一个，同时四条短线说明产品为用户提供的功能；标志填充、滑向中心并保持；摄像机推入标志，直到其颜色充满整个画面；产品描述的第一个字单独、巨大地出现；标志自身形状的一次擦除将该字带入其余描述文字；一个圆盘拉伸成产品自己的输入框（或其主按钮），最后几个词在其中被输入；点击发送，标志颜色的圆盘在画面中绽放，摄像机从标志拉出到标志组合。纯色平面，无模糊、无渐变、无阴影。30 fps，120 BPM 网格，宽幅（1920 × 1080）。

你通过适配一个已完成影片来工作。reference/ 是 Ostlery（一个虚构的住宿预订助手，用于 omnigami 的示例；其故事和来源在 reference/STORY.md 中）的完整影片。保留其机制：缓动、时间线、摄像机的推拉、擦除、圆盘、绽放、标志组合的比例以及影片自身的检查。将其中的名词替换为用户内容：标志、从该标志绘制的构建、四条描述文字、单行描述、输入框、颜色、字体和字标。你更改的每个设置都在 reference/index.html 中标记为 ADAPT；标记为 KEEP 的内容则保持不变。

在规划之前阅读 style.md，在评判之前阅读 critique.md。

它需要什么

作为矢量路径的标志（SVG）。构建是基于标志的真实几何结构，因此 PNG 不够：要求提供 SVG（或在产品源代码或网站中找到它）。永远不要描摹、重绘或“改进”标志。
产品的单行描述：产品自身的一句话，三到七个词，能读作两部分（Ostlery：“Plan a stay” + “in a sentence.”）。第一个词必须简短有力：它单独落地，占据画面允许的最大尺寸。
产品为您做的四件事，使用产品自身的语言（来自其网站或品牌指南）。
产品的真实输入框或按钮，按照产品样式：最好是带有内部发送按钮的字段（编辑器、带前往按钮的搜索框、提示输入框）；否则是其主操作按钮。永远不要使用产品不存在的组件（参见“输入框”）。
其字体（附带许可证的文件）：单行描述使用的显示字体、界面字体、字标字体，或矢量化的字标 SVG。如果无法提供某种字体，请要求获取许可文件，或使用最接近的开源字体并说明。

在提问前先阅读网站；然后一次性提出它无法回答的问题。如果用户不希望提问或要求无人值守运行，则根据你能获取的信息自行决定并告知你的决定。

设置

检查 Node 20+、ffmpeg 和 Chrome 系列浏览器（scripts/chrome.mjs 可找到它；CHROME_PATH 可覆盖）。解释任何缺失的内容并停止。在当前目录的 logo-reveal/ 中工作；首先将 SKILL_DIR 设置为该文件的文件夹：

SKILL_DIR=/path/to/android-style-logo-reveal   # 该 SKILL.md 所在的文件夹
mkdir logo-reveal && cd logo-reveal
cp -R "$SKILL_DIR/reference" reference && cp -R "$SKILL_DIR/reference" film && cp -R "$SKILL_DIR/scripts" scripts && cp -R "$SKILL_DIR/music" music
rm -rf reference/out film/out film/STORY.md
npm init -y >/dev/null && npm i -D puppeteer-core
node scripts/render.mjs reference --times key --sheet --out out/reference

reference/ 保持原样，用于对比。你编辑 film/：其 index.html 及其 assets/（将 mark.svg 和字体替换为产品的，每个字体旁附带其许可证，并在你的字体加载后删除参考文件的字体）。你的 STORY.md 和 PRODUCT.md 放在 logo-reveal/ 的顶部。现在查看 out/reference/16x9-sheet.png：那就是基准。

1. 读取品牌信息

node scripts/capture.mjs <url> capture 并阅读每个截图和 capture/brand.json。打开产品本身（其应用、演示或源代码）。本地应用：运行它（python3 -m http.server）并使用其地址。
编写 PRODUCT.md：用一句话描述其功能、其语气、字体及许可证、标志的理念（其形状代表什么：Ostlery 的拱门是“门中之门”，门道是“它找到的唯一住宿”）、其输入框或主按钮及其样式、单行描述和四个收益点（每个都要注明来源）以及日期。以及按角色分类的颜色（影片的令牌 C）：
- paper 背景色，ink 文本色，card 输入框的填充色；
- ember 标志的颜色（名称是参考文件的名称；保留角色名称）；
- lake 构建线的颜色：品牌用于链接、线条或地图的冷色调。如果没有，或保留给其他用途，则使用其 ink 色（永远不要用浅灰色：看起来不明显）；
- ok 线条旁边的勾选颜色：其成功色，如果该颜色已用于其他用途则使用其 ink 色（Tovra 将其绿色保留给已到账的款项）。

2. 文字内容

四条收益描述说明产品为用户做什么：收益，使用品牌语气，每条两到五个词。它们以 64 px 设置在一个 650 px 的列中，并全部缩小以适应最宽的一条：将最长的一条控制在约 22 个字符（Ostlery 的最长一条“Finds the one that fits”为 23 个 Figtree 字符，刚好在 64 px 处合适；较宽的字体适合更少的字符，而设置低于约 56 px 的线条会显得很小）。永远不要使用样本数据的具体内容：不是过滤器、价格、客户、结果名称（Ostlery 拒绝了“Under $220 a night”和“Best fit · Heron Point Cabin”：它们没有说明任何人想要它的原因）。按照产品的运作方式排列它们；最后一条是回报，在标志填充时落地。四条，永远不要五条：每条必须大约有一秒的阅读时间。
单行描述，分为两部分：line1，陈述句（两到四个词），以及 line2，其余部分，在输入框中输入（20 个字符或更少效果最佳；如果输入时间过长导致按发送前输入未完成，影片检查会失败），或按钮自身的标签。如果产品有自己的单行描述，请使用它。一个关键词可以用 *like this* 标记，在标志颜色中设置，在任一部分均可，但永远不是第一个词（它会在背景色下落地在标志的场地上）。仅围绕该词编写标志；影片将 *paid*. 读作 *paid.*。一个将其颜色保留给特定含义的品牌可能不进行任何标记。
字标：产品名称，按照其标志组合的样式（其大小写、字体和字重，或其轮廓 SVG）。

按照 reference/STORY.md 的格式编写 STORY.md：TL;DR，每个节拍的内容，以及包含你标志的构建、填充、擦除、角落形状和输入框的节拍表，以及每个词及其来源。向用户展示四条收益描述、单行描述和构建计划（用几行文本），并要求进行一次审核，除非他们要求无人值守运行。永远不要将沉默视为批准。

3. 从标志自身的几何结构构建标志

这是影片的核心：观众应该感受到标志是经过精心设计的，因为绘制的每条线条都真实存在于标志中。以下每个数字都在影片的 100 单位框内（标志居中于 (50, 50)，其较长边从 8 到 92 运行）。首先从 SVG 的数字在纸上计算出来，然后输入它们。

放置标志（MARK_D、MARK_FIT、BOX）。将 SVG 的路径数据精确复制到 MARK_D，每个部分一项（一个部分是一个你将单独填充的片段；fill-rule="evenodd" 的路径保持原样）。如果 SVG 不是在 100 单位框中绘制的，设置 MARK_FIT = [s, 0, 0, s, tx, ty]，其中 s = 84 / (其较长边)、tx = 50 - s × (其中心 x)、ty = 50 - s × (其中心 y)；然后每个 SVG 数字 v 映射为 s × v + tx（x）或 s × v + ty（y）。将 BOX 设置为标志在框中的边界（正方形标志：8, 8, 92, 92；宽标志保持 x 从 8 到 92，其 y 边界向内移动）。多色标志：为 drawMark 和填充赋予每个部分各自的颜色。
网格（GRID_X、GRID_Y）：每条真实边缘对应一条线。列出每个垂直直线边缘的 x、每个水平直线边缘的 y、每个弧线的切线（其中心 ± 其半径，两个方向）、每个部分自身的对称轴以及中心轴在 50 处（绘制得稍深一些）。合并距离小于 2 单位的线条；保持约 6–12 条垂直线和 4–8 条水平线。网格上不能有不是边缘、切线或标志轴的内容。
基本图形（PRIMS、T.circles）：标志设计师用来绘制标志的基本图形，按从大到小排列，最多五个。每个图形由一个移动点在 0.65 秒内绘制在 STROKE 上，在起点有一个锚点，中途有一个锚点，旧图形变暗，同时尺寸线滑向最新图形：
- 一个圆形，来自标志的一个弧线：{ x, y, r }，其中心和半径（从右侧弹簧点开始，向上越过顶部）。共享同一中心的弧线构成最强的构建（Ostlery 的五个是同心圆）；
- 任何其他轮廓：{ path, half }，盒子单位中的 SVG 路径数据，从点应起始的位置开始，以及第二个锚点位于其长度的比例：一个圆角条作为一条轮廓，一个正方形的对角线，一个三角形的中线，一个字母的茎和碗。没有弧线的标志需要这些。 为每个图形提供 dim: [x, 50]，尺寸线从中心轴（其右边缘的交叉点）开始，因此线条与收益文字列水平对齐。查看构建的每个阶段：大圆内的小圆可能看起来像一张脸（Tovra 的硬币带有三个小弧线看起来像两只眼睛和一个皱眉的表情）；而是绘制它们所圆化的形状（T 作为两个圆角条）。永远不要使用边界框、钢笔工具、光标或任何设计工具道具。
收益文字和基本图形的时间（LINES、T.lines、T.circles）：收益文字在 0.75、2.0、3.25 和 4.5 秒（最后一个与填充同时）。五个基本图形从 0.75 秒开始每 0.75 秒一个；如果少于五个，则每个收益文字时间开始一个（三个：0.75、2.0、3.25）。然后将 keyTimes（靠近文件末尾）调整到影片的对应时刻：每个基本图形的绘制和每条收益文字的保持时间内部。
填充（FILLS）：顺序来自标志的理念，理念的回报部分首先点亮。每个步骤是 rise（一个部分从其底部向上填充）、along（一条条带沿其中心线填充，在盒子单位中给出为路径，附带其长度，从一端到另一端）或 grow（一个部分从一个点向外填充）；每个在 STROKE 上持续 0.6–0.75 秒，下一个在前一个完成前开始，因此没有步骤停止。Ostlery：门道从其门槛上升，然后外拱和内拱沿各自的路径填充，左脚越过顶部。单一部件标志填充一次（Tovra 的硬币从其底部以绿色上升，就像其应用的已付款条）。
摄像机推向何处（DOOR）：标志实心部分中间的一个点，该部分周围至少有 19.2 × 10.8 单位（拉力开始时的画面，100 像素为一个单位），因此推入落在一个颜色上。如果没有部分那么大，则一起提高 UP 和 UP2（影片的检查会说明何时落地）。推入到标志理念所说“进入”的位置（Ostlery：穿过其门）。

4. 擦除、角落形状、单行描述场地和输入框

擦除（archWipe、WIPE、T.wipe）：从标志场地到单行描述场地的变化永远不是硬切。它是标志自身的形状之一，缩放得比画面宽得多，在 0.55 秒内从场地上升起或滑过，下一场景在其内部，刚好在其边缘清除画面远角时结束，因此其稳定发生在屏幕上。Ostlery 的是其门道；Tovra 的是其硬币的圆盘。在 archWipe 中将你的擦除绘制为一条路径（保留其 keep 参数：影片也会在其外部进行裁剪）。第一个词骑在两个场地上。
角落形状（corners）：标志的两部分从画面边缘窥视进入单行描述场地（Ostlery：其外拱顶部右角，填充；一个门道轮廓底部左角），以缓出方式滑入；足够大以识别为形状，绝不穿过单行描述或输入框，也绝不被画面裁剪成杂散缺口。
单行描述场地（LINE）：墨水色，其文字在背景色上（参考文件）。如果产品的输入框或按钮是深色的，它会在墨水色上消失：设置 LINE = { field: C.paper, text: C.ink }（那么第一个词在擦除内部使用线条颜色）。
输入框（INPUT、SEND、BUTTON、COMP、ICON_UP）：产品的真实组件，从影片比例的 CSS 重新绘制，永远不要将其两个不存在的部件拼接在一起。 按偏好顺序：
1. 带有内部发送按钮的字段（INPUT.kind = 'field'，参考文件）：其填充、其圆角（INPUT.round，其圆角半径与其高度之比；0.5 为完全圆角）、其发送按钮的颜色、形状（SEND.round）和图标、其文本字体和字重。一个白色圆盘弹出，拉伸成字段，发送按钮在其末端进入，line2 以 0.045 秒一个字母的速度输入，带有稳定的插入符。
2. 其主操作按钮（INPUT.kind = 'button'），当它没有这样的字段时：一个按钮颜色的圆盘弹出并拉伸成按钮（其自身半径，INPUT.round），其图标和标签（line2，按钮的真实标签）作为一个动作设置；无输入。BUTTON 保存其尺寸：保持应用自身的比例

Android 风格标志展示