I built my own brand design app with AI – Vibe coding for designers
Never thought building software would be part of my job as a Creative Director! In this video I walk through the Kit Asset Generator, a custom internal tool I vibe-coded with Claude Code to solve one of our Brand Studio team's biggest self-service bottleneck: generating on-brand graphics for ads and social media.
Let me show you behind the scenes of how I actually built it — from my first prompt in Claude Code, to importing designs straight from Figma (using Figma's dev mode and the Figma MCP), to animating templates for MP4 exports, to building a Claude Code skill so my design team can add new templates themselves without touching code.
If you're a designer or creative director curious about vibe coding, AI tools for designers, or how a non-developer can build real internal tools with Claude Code, this one's for you!
TIMESTAMPS:
0:00 Why I'm building software as a Creative Director
0:25 Inside the Kit Asset Generator
7:31 How I built it with Claude Code + Figma MCP
11:37 Making a Claude skill for my team
13:05 What's next
Please remember to click subscribe if you'd like to see more of my videos.
#VibeCoding #ClaudeCode #CreativeDirector
--------------------------------
// WANT TO SUPPORT MY CHANNEL?
Check out my digital products:
Handwritten font: https://charlimarie.com/font
Scribbles vector pack on Figma: https://charli.link/scribbles
Scribbles vector pack as images: https://charli.kit.com/products/scribbles
Personal brand on-demand workshop: https://charlimarie.com/personal-brand-workshop
Or, if you like, you can put something in my tip jar right here: https://pages.charlimarie.com/products/tips
Sharing my videos or recommending my channel to a design friend is also very much appreciated! :)
--------------------------------
// ABOUT ME
I'm Charli and I'm designer from New Zealand currently living in Valencia, Spain. I’m the Creative Director at a remote tech company called Kit and I post videos about the design projects I work on and the tools I use, as well as vlogs of my life as a designer.
💬 Bluesky: https://bsky.app/profile/charlimarie.bsky.social
📷 Instagram: http://instagram.com/charliprangley
--------------------------------
// MORE
Join my free marketing design newsletter: https://charli.link/newsletter
My site & blog: https://charlimarie.com
Design Life podcast: https://designlife.fm
Inside Marketing Design podcast: https://insidemarketingdesign.co/
--------------------------------
// TECH & TOOLS
📹 Get links to all the tech hardware I use to make my videos (and the art on my gallery wall!) right here: https://charlimarie.com/shopmyoffice
💻 Software I use:
Webflow (no-code website builder)*: https://charli.link/webflow
Premiere Pro (video editing)*: https://charli.link/premierepro
Adobe Audition (audio recording)*: https://charli.link/audition
After Effects (intro animation)*: https://charli.link/aftereffects
Figma (web design): https://charli.link/figma
Photoshop (thumbnails)*: https://charli.link/photoshop
Kit (marketing platform): https://charli.link/try-kit
Riverside (podcast interview recording)*: https://charli.link/riverside
Music in this video from Epidemic Sound*: https://charli.link/epidemicsound
Video captions by Rev (very cost effective service! I recommend)*: https://charli.link/videocaptions
Links marked with a * are affiliate links. I can't believe you read the whole description box! You get a ⭐️
Let me show you behind the scenes of how I actually built it — from my first prompt in Claude Code, to importing designs straight from Figma (using Figma's dev mode and the Figma MCP), to animating templates for MP4 exports, to building a Claude Code skill so my design team can add new templates themselves without touching code.
If you're a designer or creative director curious about vibe coding, AI tools for designers, or how a non-developer can build real internal tools with Claude Code, this one's for you!
TIMESTAMPS:
0:00 Why I'm building software as a Creative Director
0:25 Inside the Kit Asset Generator
7:31 How I built it with Claude Code + Figma MCP
11:37 Making a Claude skill for my team
13:05 What's next
Please remember to click subscribe if you'd like to see more of my videos.
#VibeCoding #ClaudeCode #CreativeDirector
--------------------------------
// WANT TO SUPPORT MY CHANNEL?
Check out my digital products:
Handwritten font: https://charlimarie.com/font
Scribbles vector pack on Figma: https://charli.link/scribbles
Scribbles vector pack as images: https://charli.kit.com/products/scribbles
Personal brand on-demand workshop: https://charlimarie.com/personal-brand-workshop
Or, if you like, you can put something in my tip jar right here: https://pages.charlimarie.com/products/tips
Sharing my videos or recommending my channel to a design friend is also very much appreciated! :)
--------------------------------
// ABOUT ME
I'm Charli and I'm designer from New Zealand currently living in Valencia, Spain. I’m the Creative Director at a remote tech company called Kit and I post videos about the design projects I work on and the tools I use, as well as vlogs of my life as a designer.
💬 Bluesky: https://bsky.app/profile/charlimarie.bsky.social
📷 Instagram: http://instagram.com/charliprangley
--------------------------------
// MORE
Join my free marketing design newsletter: https://charli.link/newsletter
My site & blog: https://charlimarie.com
Design Life podcast: https://designlife.fm
Inside Marketing Design podcast: https://insidemarketingdesign.co/
--------------------------------
// TECH & TOOLS
📹 Get links to all the tech hardware I use to make my videos (and the art on my gallery wall!) right here: https://charlimarie.com/shopmyoffice
💻 Software I use:
Webflow (no-code website builder)*: https://charli.link/webflow
Premiere Pro (video editing)*: https://charli.link/premierepro
Adobe Audition (audio recording)*: https://charli.link/audition
After Effects (intro animation)*: https://charli.link/aftereffects
Figma (web design): https://charli.link/figma
Photoshop (thumbnails)*: https://charli.link/photoshop
Kit (marketing platform): https://charli.link/try-kit
Riverside (podcast interview recording)*: https://charli.link/riverside
Music in this video from Epidemic Sound*: https://charli.link/epidemicsound
Video captions by Rev (very cost effective service! I recommend)*: https://charli.link/videocaptions
Links marked with a * are affiliate links. I can't believe you read the whole description box! You get a ⭐️