starflow-launch

用途

Starflow Launch 用于构建以“活星系”为首屏的页面。引擎已打包，使用者的工作是将其接入页面、按 Astra 风格排版，并撰写能与星空相配的文案。该技能适用于制作发布页（带滚动叙事与形状揭示）或仅首屏（单屏星系/形状加标题与 CTA），也可嵌入已有页面的某个区块。

主要能力

• 提供两种页面模式：Launch page（滚动公告，含故事区块与形状揭示）和 Hero only（单屏，星系或形状加标题与 CTA）。
• 支持嵌入模式：通过 <iframe src="hero.html?shape=…"> 或带 createAstraScene 的 <canvas> 将效果放入已有页面。
• 内置 Starflow 引擎（three.js + 后处理打包，ES 模块，638 KB / 162 KB gzip，MIT 许可）。
• 提供形状预设：cursor（单一闭合路径，快速流动）和 openai-knot（六条弧线）。也支持用户自定义标记，通过 SVG 路径设置 data-astra-shape="brand" 等属性。
• 遵循 openai-astra 设计系统：黑色画布、白色文字、白色透明度次级文字、单一字体（字重 500 / 400）、胶囊控件、669px 文案栏、无渐变、无阴影、文案无滚动效果。
• 提供模板文件：assets/template.html（发布页）、assets/hero.html（仅首屏）。
• 提供参考文档：references/DESIGN.md（设计系统）、references/engine-api.md（引擎 API）、references/choreography.md（滚动编排）。

使用方式

1. 选择模式并收集内容。发布页需要：两个首屏标签、一个标题、一个导语、二到四个故事区块、每个形状提示的说明（四个词以内）、一句收尾语。仅首屏需要：眉题、标题、导语和最多两个 CTA。
2. 复制资源：将 starflow.js 和所选页面复制到输出文件夹，页面重命名为 index.html。保留 <style> 顶部的 :root 令牌块。
3. 应用设计系统：若选用 openai-astra，则遵循其规则；否则阅读 references/DESIGN.md 并保持其规则。
4. 排版页面（发布模式）：保持区块顺序和 data-astra-* 属性。.hero 恰好一屏高且不含文案；第一个 .copy 带 data-astra-intro；[data-astra-shape] 区块为揭示区，框架为 576px × 80vh；最后一个提示保持形状；故事区块为普通 .copy。
5. 选择形状：使用预设或用户自定义标记。
6. 撰写文案：标题用 h2 尺寸，句子独立，无感叹号，揭示区无功能列表。
7. 仅在要求时调参：引擎默认值为 4,000 颗星、大小 2.05、流动 0.8、泛光 0.7 / 0.08 / 0.72、环境色 #23435f 透明度 0.55。调色板：astra、aurora、ember、ice、gold。
8. 在浏览器中验证：1440 和 390 宽度下，介绍播放 5.5 秒，标签揭示，星系倾斜并清空栏位，每个提示形成并消散，最后一个保持，回滚反转一切，无控制台错误，WebGL 禁用时页面仍可读。

适用场景

• 产品发布页，需要以动态星空作为首屏视觉。
• 单屏落地页，需要星系或形状与标题、CTA 组合。
• 已有页面中嵌入星空效果区块。

限制

• 引擎是效果本身，不得根据描述重新实现粒子系统、泛光或滚动数学，必须导入。
• 仅星空响应滚动。文案无视差、无固定区块、无滚动捕捉、无文字揭示动画。
• 黑色保持黑色。无炭灰、无噪点、无 CSS 暗角、无渐变背景、无画布上的 backdrop-filter。
• 单色界面。每屏一个白色胶囊，其他控件为玻璃态（#ffffff1f）。
• 内容不得阻挡画布：保持 .page { pointer-events: none }，仅在链接和按钮上重新启用。
• 保留静态回退路径并尊重 prefers-reduced-motion。
• 字体：OpenAI Sans 为专有字体，按所写字体栈发布（Inter 回退），不得嵌入。
• 不得添加 OpenAI 标志或文案。若用户非 OpenAI，替换 openai-knot 预设为其自有标记或光标。
• 反模式包括：紫到粉渐变、发光卡片边框、浮动 3D 斑点、星系上居中首屏文案、多于一种 CTA 颜色、第二种字体、星空作为密集 UI 背景纹理、滚动时文案动画、画布阻止触摸滚动。

归属

引擎：Starflow（https://github.com/Win-Hao/starflow，MIT；本技能位于同一仓库的 skill/ 下），是对 GPT-6 Astra 发布页粒子编排的重新实现。设计系统是对该页面公开 CSS 的独立提炼，与 OpenAI 无关联。