电影感产品发布设计

给新品一个值得停留的展示舞台。

适合高端硬件、消费产品和新品发布。暗色产品舞台、安静大标题、克制浅蓝动作和充足影像空间。把产品资料交给 Agent，生成设计规范和可编辑响应式页面，也可以把这套方向应用到现有项目。

可放进项目的 DESIGN.md、语义化 tokens.css、版式规则和图片制作需求。
响应式 HTML/CSS/JS、原创示例主视觉、可编辑 JSON 需求与检查清单。
AI 视觉方向参考 + 中英文真实模板案例

现已开放 · v1.0.0

USD 9.99 · 单次购买，或通过 Pro 获取。

你想完成哪件事？

制作 LUMA ONE 同方向页面

我有产品资料，希望按这个视觉方向做一个新页面。

使用你的文案完成原创页面、设计变量、主视觉需求与响应式源文件。

改造现有页面

保留现有路由和功能，为这一页建立统一视觉。

适配原项目框架的局部视觉改动和限定范围的设计变量。

检查风格一致性

我已有页面，想知道它哪里偏离这套方向。

具体问题、文件位置、图片建议和按优先级排列的修改项。

LUMA ONE · 从视觉方向到可编辑页面

AI 生成效果示意 · 非网页运行截图

给它什么

LUMA ONE 的原创虚构需求：一次关于便携影院的概念设计。

怎么处理

Codex 生图制作概念效果和独立主视觉，包内工具依据同套规范生成真实页面。图库可分别查看两类证据。

浏览全部输出示例

AI 效果示意 · LUMA ONE — 由 Codex 生图根据原创虚构需求制作。图片用于展示视觉方向；购买前可切换查看另附的真实模板输出。
真实模板输出 · 英文 — 使用安装包内示例和生成主视觉运行本地工具后截取的浏览器画面，交付可编辑 HTML/CSS/JS。
真实模板输出 · 中文 — 同一工具使用中文内容生成的真实页面。手机菜单、锚点和问答可交互，业务服务需要另行接入。

从你的材料，到交付文件

确认视觉方向
先读规范，确认哪些特征适合你的产品：暗色产品舞台、安静大标题、克制浅蓝动作和充足影像空间。用效果图沟通画面，不从图片推断功能已经实现。
用你的材料制作
将文案和素材交给 Agent。新页面可运行包内 Node 工具，已有页面则适配现有组件；有可用工具时再生成新的主体图片。
检查真实页面
在浏览器打开结果，检查桌面和手机布局、菜单、焦点、锚点和问答。发布前替换虚构内容，并单独接入和验证业务服务。

把这项任务带到你的 Agent

先准备这些材料

准备产品资料、受众、已确认文案和主要操作；改造时提供现有项目。主视觉可使用有权使用的素材，或让已有生图工具生成，模型费用自行承担。

登录后获取安装包。
将整个文件夹解压到项目中： .agents/skills/cinematic-product-design/SKILL.md (Codex) 或 .claude/skills/cinematic-product-design/SKILL.md (Claude Code).
在该项目打开新对话，附上材料，将下方需求中的方括号替换为真实信息，先让 Agent 检查说明与依赖。

使用 $cinematic-product-design，为面向[受众]的[产品]制作页面，目标操作是[主要操作]。先读 DESIGN.md，使用我提供的文案与素材，说明主视觉方向，再制作响应式页面。仅在工具可用时生成图片，保留事实，交付可编辑 HTML/CSS/JS 和桌面、手机检查结果，暂不发布。

安装与排错指引

得到第一版后，可以这样继续改

保持既定配色和层级，只修改首屏文案与一张确认过的图片，再检查手机断行和焦点对比度。

安装包交付什么

可放进项目的 DESIGN.md、语义化 tokens.css、版式规则和图片制作需求。
响应式 HTML/CSS/JS、原创示例主视觉、可编辑 JSON 需求与检查清单。

你需要另外准备什么

自己的 Codex 或 Claude Code 服务；本地模板工具需要 Node.js 22+ 和浏览器，无 npm 依赖。
生成新图需要可用生图工具与自己的额度；已有应用继续使用它本身的框架依赖。

使用前须知

安装后会自动得到和效果图一模一样的网页吗？

不会。效果图用于表达视觉方向，真实模板输出另有截图。Agent 会根据你的项目调整文案、图片和组件，生图结果也存在差异。

这是把 Refero 的文件重新打包出售吗？

不是。指令、设计变量、模板和案例均由 SiSkill 独立编写；Refero 作为研究参考，其原始文档、代码、截图、字体和品牌资产不进入安装包。

AI 效果图展示视觉方向，不是网页运行截图，也不承诺逐像素复现；另有真实模板截图可核对交付。包含静态原型，不含登录、支付、统计或业务后台。SiSkill 原创商品，与 Refero 及参考品牌无官方关联。模型和生图费用另计。