3.7 KiB
1
我已经安装了一套到.codex，你看下你能看见这个技能么ui-ux-pro-max?
在你的流程里会涉及到remotion做页面，我希望在设计页面时，可以使用这个技能的能力，让页面更漂亮些。 对此你有什么思路。
我的思路是：把 ui-ux-pro-max 放在 Remotion 页面生产链路的“设计增强层”，而不是替代现有 visual-system / slides / Remotion Skill 流程。
建议流程
-
项目级先生成一次设计系统 在 Remotion 项目开始或视觉系统定稿前，用
ui-ux-pro-max --design-system根据项目类型跑一次，比如：science explainer cinematic dashboard dense、AI product demo modern technical、internal meeting full-screen visual。输出不直接进代码，而是沉淀成：
projects/<project>/visual-system/style/ui-ux-design-system.md -
把它转成 Remotion 可用的设计约束 从设计系统提炼：
- 色彩 tokens
- 字体层级
- 间距密度
- 卡片/图表/标题/注释组件规范
- 动效强度：subtle / standard / complex
- 禁用项：低对比、随机圆角、装饰性动效、文字拥挤等
Remotion 代码里再镜像成
tokens.ts或 CSS variables，而不是每个页面临时写一套样式。 -
每个 Remotion 页面先写
design，再写代码 对需要页面美感的 Remotion scene，可以在现有 slide 产物里增加或复用：slides/sNN/sNN-vN-design.md这里加入一个固定小节：
UI/UX Pro Max Guidance内容包括布局密度、主视觉层级、字体比例、组件形态、图表/信息结构、运动原则。然后 Remotion brief/code 只消费这个设计约束。 -
不要每页都重跑完整技能 项目级设计系统跑一次；只有当页面类型明显变化时才做 page override，比如：
- 数据仪表盘页
- 时间线页
- 对比矩阵页
- 人物/案例页
- 结论页
这样不会把生产-light 流程重新变重。
-
验收增加 UI 质量检查点 Remotion 输出前后做窄检查：
npx remotion still抽关键帧- 检查 16:9 构图、文字不重叠、对比度、层级、边距
- 动效只用 transform/opacity，避免 layout shift
- 数据图表不只靠颜色表达
- 字幕/标题在安全区内
我建议的定位
ui-ux-pro-max 负责“页面为什么好看、信息怎么摆、视觉系统怎么稳定”；
Remotion Skill 负责“代码怎么写、时间轴怎么动、如何渲染 MP4”；
visual-system 仍然是 Video Workbench 的视觉权威文件。
这样接入后，Remotion 页面会更像有设计系统的成片画面，而不是普通 React 页面截图，也不会破坏你现在已经稳定的 append-only、production-light、review none 规则。
下一步可以把这条作为正式规则补进 AGENTS.md 的 Remotion Workflow 或 docs/workflows/slide-task-orchestration.md：Remotion 页面设计阶段必须先消费 ui-ux-pro-max 的项目级设计系统或页面 override。
2
策划导演GPT没有加入ui-ux-pro-max 的相关能力。我认为：
- 当任务涉及网页、产品界面、Dashboard、Landing Page、交互式页面或 Codex 前端实现时，你可以输出 UI/UX Design Brief，但不进入前端代码、设计系统生成或执行层实现。后续由 Codex 调用 ui-ux-pro-max-skill 完成。
强哥的策划导演（GPT） → 明确页面目标、用户、信息架构、模块、内容优先级、表达风格
强哥执行导演（Codex） → 调用 ui-ux-pro-max-skill → 生成设计系统 → 选择 UI 风格、颜色、字体、组件、交互 → 实现前端代码 → 做 UI/UX 检查
现在将其补充进相关规则。