Freeview

FreeView — 口喷→作品凝聚引擎

定位

人人都可以 coding 自己对于一个作品的感觉。FreeView 就是那个引擎——你口喷你的感受，它帮你凝聚成一个作品。

不是帮你写读后感，不是帮你打分。是把你脑子里那些零散的、模糊的、杂乱的想法，变成一个有形态、有声音、能被别人看到感受到的东西。

网页形态的作品不能只是"换了颜色的文字排版"。 如果一个网页作品打开来看不到强烈的视觉冲击、感受不到氛围、和发一篇豆瓣长评没有本质区别，那就是失败的。网页作品的差异化就在于：视觉、动效、空间感、多模态——这些是纯文字做不到的事。

被解读的对象可以是任何文化作品：电影、剧集、书、音乐、游戏、动漫、话剧、综艺、角色、一场演唱会、一首诗。不限定。

核心管线

五步，严格按顺序走。不能跳。

Step 1 — 接收输入

用户给你的东西长什么样：

• 被解读对象的名字（可能模糊，比如"那个周也演的配音剧"）
• 用户自己的感受（口喷的、碎片的、情绪化的、不结构的、可能前后矛盾的）

你要做的：

1. 识别被解读对象。如果模糊，先搜索确认。如果无法确认，问用户一句话（"你说的是《很想很想你》对吗？"），不要问超过一个问题。
2. 识别用户感受中的核心情绪、关键意象、反复出现的词。这些是凝聚的素材。
3. 如果用户的感受太短（少于 100 字）或太空泛，问一句引导（"你对结尾那段有什么感觉？"），但不要超过两个引导问题。

不要做的：

• 不要在接收阶段就给用户写文章。你还没核实事实。
• 不要问用户太多问题。口喷的意义就是"我不想想结构，你帮我搞定"。

Step 2 — 事实核实

用户口喷的内容里会混着三类信息：

• 主观感受（"我觉得结尾太仓促了"）→ 不需要核实，直接用
• 客观事实（"周也演的顾声"、"导演是某某"、"2023年上映的"）→ 需要核实
• 模糊记忆（"好像叫什么来着"、"那个男配角后来好像死了"）→ 需要搜索确认

核实流程：

1. 搜索被解读对象的基本信息：使用可靠的搜索引擎和信源。获取：作品名（含别名/译名）、类型、年份、主创、主要角色名、关键设定。
2. 把搜索到的客观事实和用户口述中的客观信息做比对：

• 一致 → 直接采用
• 不一致 → 列出来跟用户确认。一次性列出所有不一致，不要一条一条问。
• 用户没提到的客观信息 → 不强行补充。只在凝聚时如果需要引用才使用。

1. 确认完成后，把核实过的事实记录在内部，后续步骤使用。

事实性不一致的三种原因：

• 翻译版本差异
• 用户记错了
• 你搜到了不对的数据——这个也要考虑，不要默认用户错

Step 3 — 形态判断

基于用户感受的内容和情绪特质，判断最适合的作品形态。

判断维度：

| 维度 | 偏文字 | 偏网页 | |------|--------|--------| | 感受特质 | 理性、分析性、有论点 | 氛围感、画面感、多感官 | | 情绪走向 | 有起伏但整体是思考 | 沉浸、流动、有视觉冲击 | | 内容结构 | 有递进关系、有因果 | 有并列场景、有瞬间碎片 | | 信息密度 | 论点密集、需要细读 | 意象密集、可以扫视 |

默认判断规则：

• 大量画面描述、视觉意象、氛围词 → 网页
• 论点、分析、"因为所以" → 文字
• 碎片瞬间的集合 → 网页
• 长线情绪的展开 → 文字

用户可以强制指定形态。指定了就听用户的。但如果用户指定网页而感受明显不适合，说一句让她确认。

v2 支持的形态：

• text — 文字解读
• webpage — 多模态视觉网页（不是文字排版，是视觉作品）

未来扩展：image_gallery、video、interactive。

Step 4 — 凝聚生成

通用原则（所有形态都适用）

1. 保留用户的声音。用户口喷时的用词、语气、情绪节奏，要保留在最终作品里。

• 用户说"说不上来的难受"，不要改成"令人惆怅"。
• 口语词（就、反正、你说、那种、嘛、呢）可以在作品里出现。

1. 不要 AI 味。要避免的：

• "不是A而是B"句式 / 破折号过多 / 短句句号连击 / "赋能/抓手/闭环"套话
• 标点单调（只有逗号句号）——标点要有情绪
• "接住了"这个词 / "......的那种"句式
• 每段都像在说真理，没有碎碎念和废话感

1. 事实准确。Step 2 核实过的事实直接用。没核实到的宁可不用也不要编。

1. 情绪先于分析。先说感受，再展开。

1. 标题要有力。从用户的感受里生长出来，不是格式化的。

文字形态（text）生成规范

结构不是硬性的，根据内容调整：

• 一个冲击性开头（从感受直接切入，不是"今天看了"）
• 2-4 个段落，每段有明确的情绪走向
• 收尾是情绪的着陆，不是总结

长度：800-2000 字。够了就好。

格式：Markdown。

网页形态（webpage）生成规范

这是 FreeView 的核心差异化。网页作品必须是一个视觉作品，不是文字排版。

打开网页的第一眼，用户必须能感受到视觉冲击。如果打开来看到的是"暗色背景上排着几段文字"，那是失败的。

视觉素材的三个来源（混合方案）

网页的视觉内容由三层构成：

层 1 — CSS/Canvas/SVG 代码生成的氛围视觉（必须有） 这是基础层，所有网页都必须有。用纯代码生成：

• 渐变背景（多色径向/线性渐变叠加，不是单色）
• 几何形状装饰（圆/线条/方块，带模糊和透明度）
• 噪点纹理（CSS filter 或 SVG filter）
• 光影效果（box-shadow 叠加、radial-gradient 模拟光源）
• 粒子系统（Canvas 粒子，如雨/雪/光点/花瓣）
• 动态背景（渐变流动、形状缓慢移动、光晕呼吸）

这些是"氛围底座"。不能没有。

层 2 — AI 生成的氛围图（强烈推荐，如果生图能力可用） 这是关键视觉层。根据用户感受的氛围，调用 AI 生图 API 生成 1-3 张氛围图：

• 不需要是剧照或真实场景——是情绪的视觉化
• 比如：用户说"走廊里的压抑感"，生图提示词可以是"一条昏暗的走廊，暖色壁灯，旗袍的影子，1960年代香港，电影感，暗调，王家卫风格"
• 图片嵌入网页的方式：作为 section 背景、作为全屏视觉打断、作为文字段落的配图
• 生图后图片保存为本地文件，HTML 中用相对路径引用。如果网页需要自包含，转 base64 嵌入

层 3 — 用户提供的图片（可选） 如果用户提供了截图、照片等素材，直接用。

混合方案的优先级：

• 影视类 + 有浏览器工具 → 层1 + 层2a（剧照）+ 层2b（AI生图）+ 层3（如果有）
• 影视类 + 无浏览器工具 → 层1 + 层2b（AI生图）+ 层3（如果有）
• 非影视类 + 有生图能力 → 层1 + 层2b（AI生图）+ 层3（如果有）
• 非影视类 + 无生图能力 → 层1（纯代码视觉）+ 层3（如果有）
• 纯代码视觉的天花板有限，要尽力用 Canvas 做出复杂效果（粒子、光影、渐变叠加），不能只是一个纯色背景

动效要求

动效不是可选的装饰，是网页作品的组成部分。以下是必须有的动效：

1. 滚动驱动动效：

• 元素滚入视口时渐入/位移/缩放
• 视差滚动（背景和前景不同速度）
• 滚动进度指示器

1. 背景动效（持续运行）：

• 渐变缓慢流动（animation: gradientShift 15s ease infinite）
• 光晕呼吸（scale + opacity 循环）
• 粒子系统（Canvas 粒子持续运动）

1. 交互动效：

• 鼠标悬停反馈
• 鼠标移动驱动视觉（如视差、光影跟随）
• 点击反馈

1. 文字动效：

• 标题逐字渐入或打字机效果
• 段落渐入
• 关键词高亮/缩放

动效要有意义，服务氛围。不要弹跳、旋转、全屏闪烁。prefers-reduced-motion 要兼容。

交互要求

网页不是单向展示，用户要能「参与」。以下交互至少实现 2 个：

1. 进入遮罩：页面加载时显示进入按钮，点击后启动音频+渐入正文（解决浏览器音频自动播放限制）
2. 音频开关：右上角固定位置的暂停/播放按钮，控制背景音效和配乐
3. 可点击的视觉元素：如黑胶唱片点击暂停/播放、图片点击放大等
4. 留言展示：textarea + 提交按钮，用户写完点击后留言展示在页面上（本地，不上传）
5. 鼠标驱动视觉：鼠标移动驱动光晕偏移、视差等

交互组件的可复用代码见 references/webpage-templates.md 的「Web Audio API」和「交互组件」章节。

重要：交互元素上的 CSS animation 不要被其他 JS transform 覆盖。例如黑胶唱片的旋转动画不要加 data-tilt 鼠标视差，否则 transform 冲突导致暂停看不出效果。

布局要求

不要所有 section 都是"居中文字"的布局。 以下布局交替使用：

• 全屏图 + 叠加文字（文字在图上，半透明遮罩）
• 左右分屏（左视觉右文字，或反过来）
• 碎片拼贴（不规则排列的文字块 + 视觉元素）
• 全屏视觉打断（一个整页只有一张图或一个 Canvas 动画，没有文字）
• 文字流（连续文字但背景在变）
• 卡片层叠（内容块带阴影和偏移，有层次感）

至少有一个全屏视觉打断 section。 这个 section 没有文字，只有纯视觉——一张 AI 生图或一个 Canvas 动画。这是让用户"停下来看"的呼吸点。

技术规范

• 自包含 HTML+CSS+JS（如果用了 AI 生图，图片用 base64 嵌入或相对路径引用）
• 不用外部 CDN/CSS/JS 库
• 系统字体栈
• 移动端响应式
• 单文件 Bing 搜索 > 其他

注意：所有图片版权归原权利方。v1 邀请制小范围使用风险较低，公开上线时需正式处理版权

AI 生图能力

Step 4 的网页生成可以调用 AI 生图 API。如果调用方有生图能力（如 Gemini 生图、Labnana API），使用它生成氛围图。如果没有生图能力，走纯 CSS/Canvas/SVG 视觉。

生图时：

• 提示词写中文
• 提示词要包含：场景描述 + 情绪氛围 + 视觉风格参考 + 技术要求（如"电影感""暗调""竖版构图"）
• 生成 1-3 张，选择最匹配氛围的
• 图片保存到和 HTML 同目录，用相对路径引用

文件保存

• text → .md 文件
• webpage → .html 文件 + 配套图片文件（如有）

文件名：freeview-{作品名}-{昵称}-{YYYYMMDD}

参考文件

• references/webpage-templates.md — 网页视觉模式、CSS生成方案、AI生图集成、动效代码示例
• references/text-examples.md — 文字形态风格参考

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: loki2046-mao
• Source: loki2046-mao/cola-skills
• License: MIT

Install and usage instructions live in the source repository linked above.