# Create UGC-style video ads with reusable Framefields edits

A creator-style ad can start with a recognizable problem, demonstrate a product and end with a clear next step. The important input is credible footage. Framefields gives you a way to assemble that footage into variations while keeping the offer, typography and end card consistent.

Use footage from a creator who has agreed to the intended use. Write the ad around what the footage actually demonstrates. A scripted brand message should not be presented as an independent customer review.

## Plan one body and three openings

For a cable organizer, keep the example simple: a cluttered desk becomes easier to use. Build a 25-second vertical ad, then test three different three-second introductions against the same remaining edit.

| Time | Shot | Role |
| --- | --- | --- |
| 0–3 s | Problem, result or question | Variable hook |
| 3–8 s | Creator shows the desk | Establish context |
| 8–18 s | Organizer being used | Demonstrate the benefit |
| 18–22 s | Finished desk | Show the outcome |
| 22–25 s | Product and approved CTA | Give one next step |

Possible hooks include “My charger kept falling behind this desk,” a direct shot of the finished setup, and “Where does your charging cable disappear?” Treat these as creative options, not promised winners.

## Make variations controlled

Build hook, demonstration, result and end-card scene functions. Use `Layer.sequence` for the edit, `Layer.caption` for the approved SRT, and text layers for the offer. Keep a hook identifier with each output filename so performance data can be traced back to the correct version.

Framefields is useful here because content creation becomes a small set of explicit inputs: clip, hook, offer, logo and CTA. Batch those inputs only after one complete version passes review. A mistake in the shared offer otherwise spreads to every export.

If your workflow begins in CapCut, you can export creator footage there and use it as a media asset here. This is an MP4 handoff; it does not imply importing an editable CapCut project.

## Use Codex, ChatGPT, Claude, Cursor or Grok Bot

You can use **Codex, ChatGPT, Claude, Cursor, or Grok Bot** to plan the edit and write Framefields TypeScript. In a coding environment with project and terminal access, ask the assistant to implement the brief and run the checks. In a chat-only environment, ask for the source files, save them locally and run them in your Framefields project. Rendering needs Node.js 22+ and a supported WebGPU environment; see [getting started](/docs/getting-started/).

For Codex or Cursor, install the [Framefields skills](/docs/agents/install/):

```bash
npx skills add gatewai-dev/framefields -a codex -a cursor
```

For Claude Code, use `/plugin install framefields`. With ChatGPT or Grok Bot, supply the [agent reference](https://framefields.dev/docs/llms.txt), your brief and asset list; available execution tools depend on your environment. The workflow does not require a native integration in every assistant.

Create a project with `npx framefields init my-video --install --pm npm`, then work inside `my-video`. Use the generated font setup and put your source media under `assets/`. Run `npm run typecheck`, inspect `comp.lint()` findings, render selected frames and a grid, then run `npm run preview` before `npm run render`. The [agent workflow](/docs/agents/workflow/) covers inspection and QA. Check portrait layouts against the destination app's current controls before uploading.

## Prompt for the first edit

```text
Make a 25-second 1080x1920, 30 fps Framefields ad for a cable
organizer using approved creator footage in assets/footage/.
Read assets/brief.md for claims, offer, CTA and disclosure text.
Create three 3-second hooks sharing the same 22-second body.
Use only supplied claims and real demonstration footage. Keep
captions clear of the product. Name outputs by hook ID.
First build and preview one complete version with sound. After
feedback, apply the shared corrections to all three variants.
```

## Judge the whole path

Check the opening without sound, then watch through the CTA. Does the demonstration support the hook? Does the offer match the landing page? Is the product visible while the caption is on screen?

Compare variants against the same campaign objective and a comparable audience. Hold the body steady when testing the hook so you can learn which opening made a difference. Framefields produces the video files; upload and campaign management happen in your publishing tools.

Use the [product demo guide](/blog/saas-product-demo-videos/) for a longer, feature-led explanation.