89 lines
3.7 KiB
Markdown
89 lines
3.7 KiB
Markdown
# 1
|
||
|
||
我已经安装了一套到`.codex`，你看下你能看见这个技能么`ui-ux-pro-max`?
|
||
|
||
在你的流程里会涉及到remotion做页面，我希望在设计页面时，可以使用这个技能的能力，让页面更漂亮些。
|
||
对此你有什么思路。
|
||
|
||
我的思路是：把 `ui-ux-pro-max` 放在 Remotion 页面生产链路的“设计增强层”，而不是替代现有 `visual-system` / `slides` / Remotion Skill 流程。
|
||
|
||
**建议流程**
|
||
|
||
1. **项目级先生成一次设计系统**
|
||
在 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`
|
||
|
||
2. **把它转成 Remotion 可用的设计约束**
|
||
从设计系统提炼：
|
||
- 色彩 tokens
|
||
- 字体层级
|
||
- 间距密度
|
||
- 卡片/图表/标题/注释组件规范
|
||
- 动效强度：subtle / standard / complex
|
||
- 禁用项：低对比、随机圆角、装饰性动效、文字拥挤等
|
||
|
||
Remotion 代码里再镜像成 `tokens.ts` 或 CSS variables，而不是每个页面临时写一套样式。
|
||
|
||
3. **每个 Remotion 页面先写 `design`，再写代码**
|
||
对需要页面美感的 Remotion scene，可以在现有 slide 产物里增加或复用：
|
||
`slides/sNN/sNN-vN-design.md`
|
||
|
||
这里加入一个固定小节：
|
||
`UI/UX Pro Max Guidance`
|
||
内容包括布局密度、主视觉层级、字体比例、组件形态、图表/信息结构、运动原则。然后 Remotion brief/code 只消费这个设计约束。
|
||
|
||
4. **不要每页都重跑完整技能**
|
||
项目级设计系统跑一次；只有当页面类型明显变化时才做 page override，比如：
|
||
- 数据仪表盘页
|
||
- 时间线页
|
||
- 对比矩阵页
|
||
- 人物/案例页
|
||
- 结论页
|
||
|
||
这样不会把生产-light 流程重新变重。
|
||
|
||
5. **验收增加 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 检查
|
||
|
||
---
|
||
|
||
现在将其补充进相关规则。
|
||
|
||
|