First, to be straight: what this is
/brag is not mine. It is an open source skill by latent-spaces, under the MIT license, and it builds on HyperFrames. You will find it at github.com/latent-spaces/brag. This guide is about the work before and after: the preparation and the review. It is what I learned in my first runs on live sites. The method is young and will still change.
Step 1: snapshot the live site
/brag expects a project folder. So make one. Put in a working folder what the skill would normally find in a project:
- the HTML and CSS of the pages that matter: the homepage plus one or two pages that show the product
- logos as SVG, or the largest PNG you can find
- the real copy: headline, subline, the three strongest proof points, the call to action
- real product photos or real screens, at the highest resolution the site offers
Only do this for sites that are yours or that you are allowed to work on. Note for every asset where it came from.
Step 2: write the brief yourself
Do not leave the plan to chance. In my first render the UI scenes were too small: neatly built, but unreadable on a phone. The fix was not a better prompt but a better number. Since then the brief carries minimum sizes in pixels, for UI scenes and for every text role.
The brief contains:
| Part |
What you fill in |
| One message |
What the viewer has to remember, in one sentence |
| Scenes |
Per scene: what is on screen, which real asset, which text word for word |
| Minimum sizes |
Per format: UI scene, headline, body, logo |
| Brand rules |
What has to be in and what may never be said, literally |
| Logo reveal |
At which second, and whether the music has to land on it |
Brand rules apply in video too. If a brand never uses a certain word on its site, it does not use it in second twelve of the video either.
Text sizes come from one scale, not from feel. I wrote a separate guide on that: Stop guessing text sizes.
Step 3: real photos
Icons used as placeholders read as a mock-up in the final video. Real product photos and real screens make it look like the actual product. Look at every photo before you keep it. If the resolution is too low or another brand is in the picture, choose another one.
Step 4: three formats, three layouts
| Format |
Size |
Where |
| Landscape |
1920x1080 |
site, YouTube, LinkedIn video |
| Vertical |
1080x1920 |
Reels, Stories, Shorts |
| 4:5 |
1080x1350 |
feed |
Vertical and 4:5 are a real relayout. A two by two grid becomes a stack, scenes side by side become scenes one after another. A crop of the landscape version loses the message. For vertical I keep the essential content between y=270 and y=1300. That is a working value: check it against the platform's current interface.
Step 5: music on the beat
If you have a track, cut it so the drop falls on the logo reveal. /brag ships a script that returns the beats in video time. Put cuts and entrances on those beats. Only use music you have a license for, and check the license of any track that came bundled with something before you publish.
Step 6: review with contact sheets
Judging a video by playing it ten times works badly. A contact sheet works better: one image with a frame every half second. You see at a glance where text is too small, where a scene floats in empty space, and whether the first second works without sound.
The checklist:
- Every text readable at phone size
- UI scenes large enough
- Every asset real, sharp, no other brands in the picture
- Every brand rule holds in every frame
- The first second works without sound
- The last second shows where to go
- Vertical and 4:5 are relayouts, inside the safe zone
- Cuts sit on the beat, the music is licensed
A failed check becomes a changed number or a changed scene in the brief. Not a vague note. Then you render again.
A division of work that worked well for me: I write the plan and the brief, a subagent builds and renders, I judge the frames.
The companion skill
The skill runs the intake in five questions, builds the working folder, fills in the brief, hands over to /brag and makes the contact sheet. /brag itself is not included: you install it, together with HyperFrames, from their own repositories. You also need ffmpeg.
Download the Launch video brief skill (zip)
In the zip: the skill, the contact sheet script, the composition brief in English and Dutch, and the review checklist. No Claude Code? The brief and the checklist also work as plain documents for whoever builds the video.
One next step
Fill in the composition brief for one page of your site, before you install anything. If you cannot get the one message into one sentence, no tool will solve that for you.