fantacy

# Fantacy 产品是一个社交场景：用户说出自己的信息和想法，拿到一个炫酷、可交互的个人网站，然后和别人互相炫耀、互相认可品味。 这决定了三件事，本 skill 的每条规则都从这里来。 1. **默认追求让人想分享的表现力。** 在用户没有限定时，主动探索大胆的视觉与有记忆点的交互；用户明确要求专业、严肃、克制时，以其使用场景为准。 2. **用户不写 spec，只会挑。** 需求通过"再来几个""这个丑""基于这个继续"表达。必须先给候选，候选之间必须在骨架上不同。 3. **动效是核心价值，不是装饰。** 静态截图无法证明动效；没有被观看过运行状态的交付等于没有交付。 默认的“炫酷、炫技”要体现在选定设计里的一个完整标志性交互，而不只是一组 hover、淡入或小幅位移。参考图和选稿决定视觉语言，交互可以在这套语言内增强；不能把“专业严肃”自动理解为低完成度，也不能为了炫技强加 3D、声音或某个组件库。功能完成与表现力达标分别记录，单次演示成功不代表所有输入都能稳定达到同等设计质量。 ## 入口与网页闭环 用户从客户端的 slash command / skill 选择器选择 **Fantacy**，或在对话中提出需求并附图片：Codex 用 `$fantacy`，Claude Code 用 `/fantacy` 或按描述自动触发，其他宿主按各自的 skill 或 rules 机制加载。具体菜单由宿主客户端提供；skill 本身不注册一个通用 `/fantacy` HTTP 路由。宿主差异只在生图与 `watch` 两处，做法见 [image-review](phases/image-review.md) 末尾的"宿主差异"。 首次进入、生成设计稿、网页选稿、从 `session.json` 恢复时，读 [phases/image-review.md](phases/image-review.md)。工作台随 skill 一起打包，Node 22+ 即可运行，不需要 npm install 或单独的云端 agent。 **先生图，再选稿，再 coding。** 设计稿通过当前 agent 的图像生成工具产生，在网页中逐张出现。只有最新一轮存在用户真实提交的 `action: implement`、且 `handoff` 返回 `allowCoding: true`，才能开始个人网站 coding。关闭网页、等待超时、agent 推荐、脚本退出 0 都不能代替选择。 用户提交“基于这个调整”或点击“换一批方向”时，继续图像设计轮次。保存父稿与固定特征；不得开始网站 coding。用户已授权“选用这个设计”后，无须再重复确认。 **网页点击直接驱动当前 agent。** 打开工作台后，用 `workbench.mjs watch` 保持事件监听，处理新需求或选稿后 `reply` 并立即再次 `watch`。在 Codex 中让前台 exec 可 yield，持续读取该 exec session；不能启动监听后结束回合。无事件超时继续监听，直到用户停止、任务完成或存在明确阻塞。不要要求复制返回指令。已中断的对话恢复时，扫描同一 root 的持久化事件即可接上，无须用户提供路径或重新点击。 ## 循环 ```text brief -> design images -> web selection -> refine or implement -> verify ``` - **diverge**：从个人事实生成 N 张骨架不同的设计图。每张附标志交互的设计意图；静态图不声称已经实现动效。 - **select**：用户挑。这是产品里最有信息量的一步，不要用"综合评分"替用户挑。 - **derive**：被选中的方向成为母本，锁住用户认可的槽，只在未锁的轴上再发散。 - **deepen**：把选中方向做到电影级动效，先写 motion score 再写代码。 - **verify**：在浏览器里跑，留证据，按证据修。 任何一段都可以单独进入。用户说"再来十个"是 diverge；说"基于 03 再做"是 derive；说"这个的动效深挖一下"是 deepen。 ## 加载什么 先读[源语](#源语)里与当前动作相关的几条，再读对应阶段文件。不要一次把全部读完。 | 当前动作 | 读 | | --- | --- | | 启动选稿页、生成图片、读取选择、恢复会话 | [phases/image-review.md](phases/image-review.md) | | 生成候选、用户嫌都一样 | [phases/diverge.md](phases/diverge.md) | | 用户选定后做完整站、做动效 | [phases/deepen.md](phases/deepen.md) | | 站能跑了、要验收或修 | [phases/verify.md](phases/verify.md) | | 写方向契约、挑家族、写生图 prompt | [families/_index.md](families/_index.md) 加 [knowledge/concept.md](knowledge/concept.md) | | 实现动效、排版、配色、布局 | [knowledge/](knowledge/) 对应域的规则表，见下文知识库 | ## 源语 六条，所有阶段共用。改规则先改这里，不要在阶段文件里复制一份新的。 | 源语 | 管什么 | | --- | --- | | [direction-contract](primitives/direction-contract.md) | 一个方向由哪些槽构成，什么能随机、什么被锁死 | | [anti-template](primitives/anti-template.md) | 候选之间"真的不同"的判据，以及类目默认动作的禁用清单 | | [motion-score](primitives/motion-score.md) | 动效先编排后实现的记谱格式，以及四条合格线 | | [craft-floor](primitives/craft-floor.md) | 任何页面在进入评审前必须达到的质量底线 | | [evidence](primitives/evidence.md) | 什么算证据，产物放哪，什么话不能说 | | [taste-signal](primitives/taste-signal.md) | 把用户的挑选变成下一轮的输入，而不是把风格词当硬约束 | ## 知识库与家族 源语只定判据，数值和技法在规则表里。每个规则表同一格式：id、rule、scope、exception、values、source、verify；数值按 style profile 分列，由家族决定取哪一列。 | 文件 | 管什么 | 哪个阶段读 | | --- | --- | --- | | [knowledge/concept.md](knowledge/concept.md) | 从个人事实推导方向、读 brief、首轮播种、轮换与项目记忆 | diverge | | [families/_index.md](families/_index.md) | 八个填好参数的方向家族，每个一份文件 | diverge 挑家族，deepen 取数值 | | [knowledge/motion.md](knowledge/motion.md) | 四个作用域的动效预算、曲线、时长、属性 | deepen | | [knowledge/typography.md](knowledge/typography.md) | 字体、字号、行长行高、换行、hero 文字纪律 | deepen | | [knowledge/color.md](knowledge/color.md) | color_strategy 四档、对比度、色阶、渐变、token | deepen | | [knowledge/layout.md](knowledge/layout.md) | 间距、节奏、首屏、页内构图轮换、eyebrow | deepen | | [knowledge/surfaces-and-icons.md](knowledge/surfaces-and-icons.md) | 圆角、阴影、图片描边、图标、材质、素材真实性 | deepen 按需 | | [knowledge/gestures.md](knowledge/gestures.md) | 速度移交、投影、回弹、打断、指针捕获 | deepen 做标志交互时 | | [knowledge/copy.md](knowledge/copy.md) | 事实不编、按钮、错误、空状态、链接文字 | deepen 按需，verify 查事实 | | [knowledge/accessibility.md](knowledge/accessibility.md) | 焦点、命中区、hover 门控、缩放、reduced-motion 分档 | verify | | [knowledge/gates.md](knowledge/gates.md) | Hallmark 58 项人审清单与 impeccable 检测覆盖 | verify | | [recipes/](recipes/README.md) | 逐字保留的 web 代码配方，带出处与许可 | deepen 一次读一个 | 每阶段实际加载的行数有上限：diverge 1500、deepen 2500、verify 1500。超了先砍按需文件，不砍规则。 ## 硬规则 这几条不随 brief 改变。 - **事实不编。** 姓名、经历、作品、奖项、联系方式只能来自用户提供的内容。缺就留空或去掉该区块，不要填充看起来更好看的假履历。 - **风格词是首轮种子。** 用户说"K-pop 风""赛博朋克"表达的是"年轻、有冲击"，不是让你照字面执行。首轮按 [knowledge/concept.md](knowledge/concept.md) 的映射表播种；用户选过一次之后，以实际选中的东西为准，见 [taste-signal](primitives/taste-signal.md)。 - **quick 只限业务范围。** 网站实现阶段仍需认真编排动效；选稿阶段先完成图像比较，不提前开发多个动态网站。按本次任务约定控制投入和迭代次数。 - **候选差异是结构级的。** 换配色、换字体、换图不算新方向。判据在 [anti-template](primitives/anti-template.md)。 - **不用静态截图声称动效完成。** 交付必须包含在固定操作脚本下录制的帧序列或录屏，见 [evidence](primitives/evidence.md)。 - **模型和组件不冒认、不锁死。** 请求的 GPT-Image 2.5 与实际工具/模型分别记录。工具未暴露模型参数时，不虚构型号。按选稿结果和交互需要选择 UI、Motion、Three.js 等能力；网页工作台的技术栈不约束生成网站。没有内置图像工具的宿主用 `scripts/imagegen.mjs` 直接调 OpenAI Images API，model 默认 `gpt-image-2.5`，这时 `attach --model` 写真实型号。 - **验证脚本给的是数字，不是结论。** 四个脚本都只输出诊断；退出码为 0 不等于做完了。 ## 脚本 `scripts/workbench.mjs` 是网页与 skill 的本地桥接，具体用法见 [image-review](phases/image-review.md)。其他四个诊断脚本依赖 Python 3.10+，前三个另需 Pillow，缺依赖时用 `uv run` 执行。诊断结果拒绝覆盖，每轮用新目录。 | 脚本 | 回答的问题 | 典型调用 | | --- | --- | --- | | `scripts/distinct.py` | 这批候选里有没有两个是同一个骨架换了皮 | `--candidate 03:a.png --candidate 04:b.png --out-dir round-01` | | `scripts/motion_trace.py` | 这段动效是真有编排，还是原地漂浮 | `--frames-dir frames --interval-ms 100 --out-dir trace-01` | | `scripts/pixel_diff.py` | 实现与参考图在保留区域偏了多少 | `--reference r.png --actual a.png --out-dir compare-01` | | `scripts/detect.py` | HTML 与 CSS 里有没有 impeccable 的 61 条反模式 | `--target dist/ --out-dir detect-01`，二进制缺失时报告 skipped | | `scripts/imagegen.mjs` | 任意宿主生成设计图，Node 22 起零依赖，model 钉 `gpt-image-2.5` | `--prompt-file p.txt --out d.png --reference r.png`，需要 `OPENAI_API_KEY` | 用法和阈值校准见 [phases/verify.md](phases/verify.md)。改脚本要同步跑 `python3 -m unittest discover -s tests`。