brag-slim

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

/brag-slim

/brag-slim

You built it. Now brag. You make the whole video yourself — story, visuals, audio, render — with whatever tools are on the machine.
Whatever the tone, it should feel like a modern, slick, polished launch video: nothing on screen or in the soundtrack that doesn't earn its place.
Usage:
/brag-slim [input] [options]
. Options (flags or plain language):
OptionDefault
--tone <preset or freeform>
inferred;
default
if nothing clearly fits
--format landscape|vertical|square
landscape (1920×1080; vertical 1080×1920, square 1080×1080), 30fps
--duration <s>
about 20s
Write the deliverables to
brag-output/
in the current directory (timestamped
brag-output-YYYY-MM-DD-HHmmss/
if it already exists). Keep every intermediate file (frames, downloads, scripts, stems) in a
work/
subfolder inside it.
你构建了它。现在来炫耀吧。你完全靠自己制作整支视频——故事、画面、音频、渲染——使用机器上现有的任何工具。
无论是什么基调,它都应当像一支现代、流畅、精致的发布视频:屏幕上或配乐中,没有任何不值得存在的东西。
用法:
/brag-slim [input] [options]
。选项(flag 或自然语言):
选项默认值
--tone <preset or freeform>
自动推断;若没有明显匹配则用
default
--format landscape|vertical|square
横屏 (1920×1080;竖屏 1080×1920,方形 1080×1080),30fps
--duration <s>
约 20 秒
将交付产物写入当前目录下的
brag-output/
(如果已存在,则使用带时间戳的
brag-output-YYYY-MM-DD-HHmmss/
)。将所有中间文件(帧、下载内容、脚本、分轨)保存在其中的
work/
子文件夹中。

1. Inspect

1. 检查

First decide what the input is, then gather material from it. Only the source changes; everything from the questions below onward is the same for every input.
InputHow to recognize itWhere the material comes from
ProjectNo input given, and the current directory is a projectThe code
WebsiteAn
http(s)://
URL, or a bare domain like
example.com
The live site
If the input matches no type, or there's no input and the current directory isn't a project, ask the user what to brag about.
首先确定输入是什么,然后从中收集素材。只有来源会变化;从下面的问题开始,所有输入的处理方式都是一样的。
输入如何识别素材来源
项目未提供输入,且当前目录是一个项目代码
网站一个
http(s)://
URL,或裸域名如
example.com
线上站点
如果输入不匹配任何类型,或没有输入且当前目录不是项目,请询问用户想炫耀什么。

Project

项目

Read the code: the main page, styles (exact colors and fonts), README, routes and key components. The best material is the product in use — find its 2–3 beats: entry → key action → result.
You have the source, so use it directly: import or render the project's real components, stylesheets, fonts, images and animations in the video instead of rebuilding them.
阅读代码:主页、样式(精确的颜色和字体)、README、路由和关键组件。最好的素材是使用中的产品——找出它的 2-3 个节拍:进入 → 关键操作 → 结果。
你有源码,所以直接使用它:在视频中导入或渲染项目真实的组件、样式表、字体、图片和动画,而不是重新构建它们。

Website

网站

Get the site as a visitor sees it. Many sites build their page with JavaScript, so a plain download can come back as an almost empty shell. If it does, load the page in a headless browser to get the rendered result. Dismiss cookie banners and other overlays, and scroll section by section, since content that animates in on scroll stays blank in a single full-page capture.
  • Copy: headline, tagline, section headings, feature names, calls to action, testimonials. Also check the title, meta description and social-preview tags.
  • Identity: exact colors from the site's CSS and the fonts it loads.
  • Visuals: the logo, product screenshots, hero images, demo videos. Download the ones you'll use into
    work/
    .
  • Screenshots: capture the page at the video's aspect ratio to understand the layout. In the video, reuse the site's real markup, CSS and assets and animate those, rather than panning over flat screenshots.
  • The product in use: check the demo videos, how-it-works sections and linked docs for the entry → key action → result flow.
以访问者看到的方式获取网站。许多网站用 JavaScript 构建页面,所以直接下载可能只会得到一个近乎空白的壳。如果是这样,就在无头浏览器中加载页面,获取渲染后的结果。关掉 cookie 横幅和其他浮层,逐段滚动,因为随滚动而动画出现的内容,在单次整页捕获中会一直是空白。
  • 文案: 标题、标语、章节标题、功能名称、行动号召、用户评价。同时检查 title、meta description 和社交预览标签。
  • 视觉标识: 网站 CSS 中的精确颜色,以及它加载的字体。
  • 视觉素材: logo、产品截图、主视觉图片、演示视频。把你要用的下载到
    work/
    。
  • 截图: 以视频的宽高比捕获页面,以理解布局。在视频中,复用网站真实的 markup、CSS 和资源并让它们动起来,而不是在平面截图上做平移。
  • 使用中的产品: 查看演示视频、工作原理章节和相关文档,寻找 进入 → 关键操作 → 结果 的流程。

Then, for every input

然后,对每个输入

Before planning, answer: What is it (one sentence)? Who is it for, and what does it do for them? What sets it apart? What's the most impressive or funniest claim? What's the visual hook? What real UI or flow should be shown? What tone fits? What's the one-line share caption?
规划之前,先回答:它是什么(一句话)?它面向谁,为他们带来什么?它有什么不同?最令人印象深刻或最有趣的主张是什么?视觉钩子是什么?应当展示什么真实 UI 或流程?什么基调合适?一行分享文案是什么?

2. Plan

2. 规划

Write
brag-plan.md
: the angle, the hook, 2–3 highlights, the punchline, tone, visual identity, and a scene-by-scene storyboard with durations that sum to the target.
If the user points at one part — a new version, a new feature, one angle — make this the focus of the video.
Shape: Hook (2–3s) → Reveal (2–4s) → 2–3 sharp highlights → Punchline/outro (2–4s). A starting shape, not a template.
编写
brag-plan.md
:角度、钩子、2-3 个亮点、收尾金句、基调、视觉标识,以及一个逐场景分镜,各场景时长相加等于目标时长。
如果用户指向某一部分——新版本、新功能、某一个角度——就把这部分作为视频的焦点。
结构: 钩子(2-3 秒)→ 揭示(2-4 秒)→ 2-3 个犀利亮点 → 收尾金句/结尾(2-4 秒)。这是一个起始结构,不是模板。

Creative laws

创意法则

  • Short. 15–25 seconds; 18–22 is the sweet spot.
  • Clear to a stranger. After one viewing, someone who's never heard of it knows what it does, who it's for, and how to get it. Lead with that, not with how it's built.
  • The hook is everything. The first 2 seconds decide whether anyone keeps watching. Plan it first.
  • Show the thing. Reuse the real thing from the source — its UI, components, copy, images, videos and animations — rather than re-creating it. Rebuild only what you can't reuse. Prefer the working app doing its job over a landing page describing it. Small illustrative UI text is fine when showing the product in use (a filename, an "Exported" toast); invented claims, numbers, or testimonials are not. Never abstract filler.
  • Specific. It must feel made for this exact project. Use its own copy and claims; no generic SaaS language ("streamline your workflow" is banned).
  • Readable. Pace comes from motion and cuts, not from pulling text away early. Any line the viewer is meant to read stays fully visible and settled long enough to read it (roughly 0.3s per word), counted from when the whole line is on screen. Text that's only texture doesn't need to be read.
  • Make it alive. Things that appear one by one, simulated clicks, swipes, and typing beat static slides.
  • Funny earns its place. Humor comes from the project's own absurdity, not from trying.
  • Every frame postable. Any frozen frame should be worth sharing.
  • 简短。 15-25 秒;18-22 秒是最佳区间。
  • 让陌生人看懂。 只看一遍之后,从没听说过它的人就能知道它是做什么的、为谁而做、以及怎么获取。先讲这些,而不是先讲它是怎么构建的。
  • 钩子就是一切。 前 2 秒决定了有没有人继续看。先规划钩子。
  • 展示真实的东西。 复用来源里的真实内容——它的 UI、组件、文案、图片、视频和动画——而不是重新创造。只重建你无法复用的东西。优先展示正在工作的应用,而不是描述它的落地页。在展示产品使用时,少量说明性 UI 文本是允许的(比如一个文件名、一个“Exported” toast);编造的主张、数字或用户评价不行。绝不用抽象的填充物。
  • 具体。 它必须让人觉得是为这个特定项目而生。使用它自己的文案和主张;不要通用的 SaaS 语言(“streamline your workflow”是禁词)。
  • 可读。 节奏来自运动和剪辑,而不是提前把文字移走。任何需要观众阅读的文字行,都要保持完整可见并稳定停留到足以读完(大约每词 0.3 秒),从整行出现在屏幕上开始计时。只是作为纹理的文字不需要被阅读。
  • 让它活起来。 逐一出场的元素、模拟点击、滑动和打字,胜过静态幻灯片。
  • 幽默要配得上位置。 幽默来自项目自身的荒诞,而不是刻意搞笑。
  • 每一帧都可发布。 任何冻结帧都应当值得分享。

Tones

基调

Presets are defaults; freeform direction ("fake Series A launch from 2016") refines or overrides them.
ToneFeelPacing / transitions
default
Punchy, playful, clean4–5 scenes; soft transitions
polished
Serious, elegant, restrained3–4 scenes, long holds; soft fades
yc-parody
Deadpan startup launch, played straight4–5 scenes, one claim each; hard cuts
chaotic
FAST, LOUD, ALL CAPS6–8 scenes, some under 2s; flash/zoom cuts
deadpan
Calm, dry, nothing is a joke3–4 scenes, big empty space; slow fades
cinematic
Trailer-scale, epic claims4–5 scenes, big type; dramatic wipes
app-store
Clean feature cards4–6 scenes; smooth slides
预设即默认值;自由形式的方向(比如“fake Series A launch from 2016”)可以细化或覆盖它们。
基调感觉节奏/转场
default
有力、俏皮、干净4-5 个场景;柔和转场
polished
严肃、优雅、克制3-4 个场景,长停留;柔和淡入淡出
yc-parody
面无表情的创业发布,一本正经地演4-5 个场景,每个一个主张;硬切
chaotic
快、响、全大写6-8 个场景,有些低于 2 秒;闪光/缩放切换
deadpan
冷静、干巴巴、什么都不好笑3-4 个场景,大量留白;慢速淡变
cinematic
预告片级,史诗感主张4-5 个场景,大字号;戏剧性划像
app-store
干净的功能卡片4-6 个场景;平滑滑动

Sound

声音

Write the music and sound effects as one piece: effects in the same key and the same space as the music, blended in rather than laid on top. Give it a basic, proper mix, the way a real track is mixed: effects sit softly under the music, nothing harsh or spiky, and repeated little sounds stay in the background.
把音乐和音效作为一个整体来写:音效与音乐同调、同空间,融合进去而不是铺在上面。给它一个基础、恰当的混音,就像真正的成品曲目被混音那样:音效轻柔地垫在音乐下面,没有刺耳或尖利的东西,重复的小音效留在背景中。

3. Build, check, render

3. 构建、检查、渲染

Build it with whatever works on this machine. If you draw the video in a browser, make every frame a pure function of time and wait for fonts and images to load before capturing each one.
Before the full render, look at stills from every scene and from mid-transition, and fix overflow, collisions, and low contrast. A plain crossfade between two busy layouts makes a muddy double exposure; stagger it (old content out, then new content in) or dip through the background. Then render
brag.mp4
.
用这台机器上能用的任何方式构建它。如果你在浏览器里绘制视频,就让每一帧都是时间的纯函数,并在捕获每一帧前等待字体和图片加载完成。
在完整渲染之前,查看每个场景以及过渡中途的静帧,并修复溢出、碰撞和低对比度。两个繁忙布局之间的普通交叉淡化会产生浑浊的重影;把它错开(旧内容退出,再进新内容),或做背景淡场切换。然后渲染
brag.mp4
。

4. Deliver

4. 交付

  • Poster: pull the strongest settled frame (text fully in, not mid-transition) to
    brag.jpg
    , and bake it in as frame 0 of
    brag.mp4
    so every platform's thumbnail shows it. Replace frame 0 rather than adding a frame, so the duration and audio sync stay the same.
  • share-copy.txt
    :
    1–3 sentences, postable as-is, specific, matching the tone. No "excited to share."
  • Tell the user where the video and copy are, give one sentence on the creative angle, and offer to re-roll a scene or try another tone.
  • 海报: 挑出最强有力的稳定帧(文字完全就位、不在过渡中途),导出到
    brag.jpg
    ,并把它作为
    brag.mp4
    的第 0 帧烧录进去,这样所有平台的缩略图都会显示它。替换第 0 帧而不是新增一帧,以保持时长和音频同步不变。
  • share-copy.txt
    :
    1-3 句,可直接发布,具体,贴合基调。不要写“excited to share.”
  • 告诉用户视频和文案在哪里,用一句话说明创意角度,并主动提出可以重做一个场景或尝试另一种基调。