Video-to-UI Brief Skill for ChatGPT: Extract Layout, States and Motion From a Showcase
Turn authorized frames, timestamps, or observations into an implementation brief. Identify regions, hierarchy, states, and motion while keeping unseen interactions open.
中文Install in ChatGPT
Requires a ChatGPT workspace where you can create skills. This is a text adaptation of the pinned GitHub source.
- Review the inputs and outputs in the pinned plugins/frontend-vibe-suite/skills/video-to-ui-brief/SKILL.md.
- In ChatGPT, open Plugins, Skills, Create, and Create with editor.
- Write the skill rules using the workflow described here. Provide authorized video observations or frames, timestamps, product context, and the interaction to understand.
- Save the skill and check the fictional example in a new chat.
Example task
A fictional showcase displays a sidebar and table at 0–4 seconds, dark mode at five, and a filtered empty state at eight. Easing is unknown. Draft a UI brief.What to check
Record structure and timestamps with theme and empty states. Offer implementation notes, keep easing unknown, and do not infer keyboard behavior from the clip.
Original SKILL.md on GitHub · Updated
Frequently asked question
Does a mouse-only demo establish keyboard support?
Record the visible click path. Keep focus, keyboard, and reduced-motion checks as separate acceptance items.