Logo Outro Frame
Builds an animated brand closing frame: logo assembly, glow, tagline and CTA in one HTML file
- Repository
- nexu-io/open-design
- Stars
- 105,448
- Licence
- Apache-2.0
- Files
- 3 files
What it does
This skill gives the agent a template for a single-page HTML animation, sized 1920×1080, meant to serve as the closing frame of a video. When asked, the agent builds a dark or light background, draws a logo from several simple geometric shapes using CSS or inline SVG, animates the pieces sliding in and settling, adds a soft glow and a shimmer, then reveals a brand name, a tagline and a small footer line. The animation plays once and holds still, so it works as an end card. It also offers four colour palettes and asks for your brand name and tagline, falling back to placeholder text if none are given.
Great for
- Video creators who need a branded end card for YouTube or social clips
- Marketers producing a consistent logo reveal for campaigns
- Designers who want a starting point for a motion-graphics closing frame
Skip it if
- Projects needing an official logo file: the template forbids external logo images and only draws simple shapes, so it will not reproduce a complex existing logo faithfully
- Users expecting a rendered video file: the output is HTML that must be recorded or exported separately
Try asking
- “Make a 1920×1080 logo outro for my podcast called Northwind with the tagline 'Listen closer'”
- “Create a brand closing frame in Forest Mint colours for our product launch video”
- “Build an end card with a glowing logo reveal and a footer with our website and handle”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.
frame-logo-outro.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip frame-logo-outro.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip frame-logo-outro.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Give the agent your exact brand name, tagline and footer text so the fallback placeholder text is not used.
- Pick one palette explicitly; the template says not to mix palettes.
- Record the finished page with a screen recorder or a tool such as a headless browser to turn it into video, since the skill itself produces HTML only.
What's inside
- example.html
- open-design.json
- SKILL.md
Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.