Code as medium for storytelling: My presentation at Vibe Coding Jam event

The theme of my uh presentation today is code as a medium for storytelling. So um

I never thought of myself as a coder. I

come from a humanities background. Um

didn't study CS in school. I worked

mostly in marketing and product and I on the side I do a lot of content across uh US and Chinese platforms. And so I've always been more comfortable with words

than numbers or code. Um but then then I discovered cloud code and vibe coding and then I realized okay maybe I can have a new identity as a vibe coder or a

builder. So this is currently my life is

builder. So this is currently my life is basically work family and clock code.

Like whenever I'm not working or not with my family I'm basically spending all of my time in cloud code and completely addicted to building. And I I think because I don't come from a CS

background I approach it kind of in a different way from most people. I

actually see my coding as a new way to express myself. So it's like a new found

express myself. So it's like a new found freedom to express yourself through code because in the past I mostly express myself with words like uh blog post or videos etc. But now I realize when I'm

building a project or a product I'm actually embedding my viewpoints and my perspectives on the world into the product and when other people are using the product they're like adopting my perspective. So I found that to be

perspective. So I found that to be really really cool. I think that method of expressing yourself was not accessible to most people before AI coding. In the past only engineers could

coding. In the past only engineers could could do that mostly and in the past if I wanted to uh if I had a product idea I had to maybe hire engineer or uh like raise money and start a company etc. But

now all of that is not necessary anymore. Basically clock code is my 247

anymore. Basically clock code is my 247 engineer always patient always helpful and ready to turn whatever crazy idea I have into reality. So I find that to be

super liberating in a way. I I have this notebook of almost more than 60 coding ideas that slowly turn into reality. So

I wanted to share some of the projects I've made recently. Uh none of them are super technically complicated but uh some of them have uh gone viral on social media. I think they resonated

social media. I think they resonated with people because they're kind of simple but also mo a lot of people don't think about coding that way. So for

example, this is a CL skill I made called front end slides. Actually this

exact presentation you're seeing right now is made through code. So it's not a PowerPoint file. It's not a Google

PowerPoint file. It's not a Google slide. It's not a GMA. It's like I coded

slide. It's not a GMA. It's like I coded this with cloud code. It's HTML. So this

entire slide is a HTML file on my computer. And I did all of this through

computer. And I did all of this through prompting cloud code. Um and you can as you can see there's a lot of like cool animations. There's a lot of like it's

animations. There's a lot of like it's actually very pretty. And I can embed these like I can embed these tweets and when I click it actually works. Uh so

this is the skill I made front end slides. This is the type of slides you

slides. This is the type of slides you can make with code. So for example you could add all these like cool hover uh hover effects. You can embed interactive

hover effects. You can embed interactive elements. Uh you can uh on the side you

elements. Uh you can uh on the side you have these navigation dots and then you can actually embed these interactive stuff. It's basically like a front end

stuff. It's basically like a front end web page. Um, and then you can have all

web page. Um, and then you can have all these uh appearance on click just like how you do um in the regular slideshow.

Um, as you can see the my cursor is turned into a like a circle which is pretty cool. And then when you hover

pretty cool. And then when you hover over it there's like all these 3D effects you can you can make. Um, so I I made this skill and like uh I did not

expect it to be pretty viral. Like this

is the GitHub for the skill. is

currently at 995 stars on GitHub. So I

because I I have a lot of So I actually have a lot of followers on social media, but GitHub is the platform that I did not expect to receive um a

lot of uh stars as a non-coder myself.

So I find that to be really cool that everybody can now just like upload stuff on GitHub. Um and I really uh this is

on GitHub. Um and I really uh this is the default way for me to make slides these days. I really really recommend

these days. I really really recommend it. And then as you can see there's like

it. And then as you can see there's like the navigation dots and then when I hover over it you can actually see the the title of that slide >> um on the navigation as well. So the

other type of uh projects I made a lot is called the content remix. So I really enjoy remixing one type of content into another through coding. Uh because we

all absorb content and learn different ways like some people prefer to read, some people like listening, some people like video whatever. So uh content remix is basically you take one type of

content and then turn into another format. A few examples of this one is uh

format. A few examples of this one is uh I turn you long YouTube podcast or interviews into uh ebooks or

newsletters. So I watch a lot of long

newsletters. So I watch a lot of long video podcast like you know the Lexman whatever like the very long one like almost often two or three hours long. uh

a lot of them with AI researchers and entrepreneurs and stuff and I don't have time to go through all of them but there's a lot of valuable knowledge in there so how can I absorb this knowledge

without sitting through all those videos um so I uh build a skill with claude where every week it will go to a a specified list of YouTube channels and

fetch his latest videos fetch their transcript and then use claude to rewrite them into published magazine articles and then compile compile those articles into a newsletter and then send

to my email. So every week um on a specified time I will I will get that email and then in the attachment of the email is actually a like a ebook file that I can read. So I can basically read

YouTube videos as a ebook and then it even comes with a table of content. So

each chapter is like one YouTube video.

Um so each uh each magazine article is probably a couple thousand words. So, I

purposfully did not want to write a summary of the video. So, I personally don't like summaries because I feel like you're you're you're losing most of the valuable essence uh with the summary, which is

why I in the prompt I specified like don't summarize like make it a very polished magazine article and actually preserve a lot of the original quotes that the speakers said. So, there are a few advantages to this one. Uh it allows

you to consume the content in a much shorter period of time. So it takes you maybe five minutes to read an article whereas it would have taken you two hours to watch the entire video and also because the videos actually have a lot

of very dense and technical information that I may not actually understand. Uh

whereas in the text uh in my prompt for claude I actually said like for all the technical terms I actually explain them in layman language for someone who's not technical. So it also lowers the barrier

technical. So it also lowers the barrier for information consumption. Um, and

also when you're reading, you're actually a lot more focused than when when you're watching something. So

that's how I found that to be useful.

Uh, this is the kind of thing you can just set up as like a regular workflow uh with uh with claw cloud code and I actually for what I also printed out a

physical book. So I turned the acquired

physical book. So I turned the acquired podcast into a physical book which I printed out in China. It's cheap there.

Wow. But yeah, so that's a kind of remixing you can do.

>> And then the other thing is I some I turn Excel spreadsheet like CSV files into interactive dashboard. So I'm sure everyone has a lot of Excel files lying around on your computer. I would totally

try just sending it to cloud code and say like turn this into a beautiful interactive dashboard. So this is the

interactive dashboard. So this is the before. If I move over you'll see the

before. If I move over you'll see the after. So this is the after. So uh it's

after. So this is the after. So uh it's a visualized uh timeline for this is this particular spreadsheet is my Twitter uh analytics. So on Twitter you

can actually download a CSV file of your analytics data. Uh the Twitter dashboard

analytics data. Uh the Twitter dashboard is on itself is not very uh sophisticated. So I prefer to visualize

sophisticated. So I prefer to visualize it with a customized dashboard. So here

you can see the total follower growth.

If I hover over the line you can see the daily growth. And then here you can see

daily growth. And then here you can see the top tweets of all time. And then you can also uh this is what I really like about it. It can actually analyze like

about it. It can actually analyze like why my top tweets went viral. And then

from that analysis it can give me my content market fit. It's like what is your positioning uh on Twitter which is the nontechnical person's guide to thriving in the AI age which is quite

helpful to me. Um, and it can analyze my unique thought patterns and then give me ideas for future topics to post about.

So, I think this is super helpful for anyone who's trying to create content on social media. Um, and all it takes is uh

social media. Um, and all it takes is uh download a CSV file from Twitter and then giving it to Claw Code. Um, the

other one is super fun for me as a someone who's learning to code. So, um,

my personal way of learning to code is build first, learn later. So, in school we kind of learn first, build later.

like you take a few years of foundational classes and you're not qualified to build until like a few years later. Whereas now, I think you

years later. Whereas now, I think you should do the complete opposite like skip the classes, skip the boot camp, just go straight to building something and then getting that positive feedback, the dopamine rush from seeing your idea

come to life and then go back and ask claw, hey, how did you do that? How does

the code work under the hood? So that's

what I'm doing now. I used to uh after I built something that works, I used to just tell Claw to write a markdown file explaining the code base and what each file does and how they're connected

together, but then I upgraded that to HTML. So I was like, why I don't want to

HTML. So I was like, why I don't want to read a markdown? It's just so ugly. So I

turned that markdown into HTML. So this

is the uh interact uh HTML that cloud code built for me to explain my project is Cali core which is a uh screen recording tool that I built. Um so first

it's got to tell me what are the underlying technologies that this project used and then it's uh visualizing the different layers of the

codebase. Um and then this part is my

codebase. Um and then this part is my favorite like how the services talk to each other. So it I got it to you use an

each other. So it I got it to you use an analogy where where like all the APIs and files in the project are like people in the group chat. So so for example the user says I'm ready to record and then

the app say like okay showtime XY drawer give me the whiteboard webcam give me the face and then the XY drawer whiteboard is like okay here are my screenshots and then the app is like okay now code uh web codec go and

compress everything. So, it's like this

compress everything. So, it's like this group of people working together to make the app work and it's a very cool way to uh lower the barrier of understanding how it works under hood and it's

actually really fun to read as well. Uh

you can basically just tell it to visualize and explain the code base in um imaginative ways and I I specifically told it to do it in a group chat which I thought was really fun. Um, and then

this is also pretty fun. Like my phone's wallpaper is basically Japanese vocabulary flashcards. Oh my god. Now,

vocabulary flashcards. Oh my god. Now,

>> so you know on iPhone wallpaper, you can set up a shuffle where every time you tap on it, it will change to a different uh wallpaper. So I was like, why can't I

uh wallpaper. So I was like, why can't I change that into like vocabulary flashcard or like to learn something useful? So I built this little app where

useful? So I built this little app where um I exported my vocabulary list from my dictionary app. So it allows you to

dictionary app. So it allows you to export a long list of words as a PDF. I

give clock code a PDF and it was like turn each of these into a 9 by16 like iPhone wallpaper image. Uh the

interesting thing is these images are not generated by image generation model.

This is all generated by code.

>> So all of these images are generated by code. These are not pixels. These are

code. These are not pixels. These are

code. So uh because in the past we always thought of uh image gen video gen as like pixels as like oh you have to use nano banana or something but you don't have to you can actually just use

code to do all of that which same thing with the slice like you can just use code uh because this is very simple so the code can actually do a very good job

of arranging content on on the specific set uh size of the screen and then uh I export the images uh sync them to my phone and then you on the iPhone you can

set up a customized wallpaper with as a shuffle. So basically you need to save

shuffle. So basically you need to save all of these photos in a specific album uh in the photo app on your phone and then you just set the shuffle as like the shuffle for that album. So every

time you tap it's like a random new word. Yeah. So this is applicable to not

word. Yeah. So this is applicable to not just vocabulary. You can you can have

just vocabulary. You can you can have like motivational quotes, you can have like to-do list, uh whatever you want like so basically your lock screen can be turned into a personalized like

content library which I found to be really cool. And in this way I actually

really cool. And in this way I actually accidentally learn a lot of words when I'm just like checking the time or something because this is the shortest path to like you don't even need to unlock the phone, open an app, open the

voc like that's just too much friction for most learning. Yeah.

So uh so those were the projects I wanted to share and then I just wanted to reiterate the fact that I think coding is a form of self-expression. I

think I built a lot of the content remix ideas because I'm personally really interested in content. So I was like oh why can't I do this? Why can't I do that? So uh I I'm sure everyone will

that? So uh I I'm sure everyone will bring your own perspectives and opinions into your project. So I I like to build opinion native products.

Um, and I think I've always been a storyteller. Uh, it's just I just

storyteller. Uh, it's just I just discovered new medium. So, it's not like if you become a vibe coder, you have to shift your identity from a storyteller to a vibe coder. It's just a new medium

for storytelling.

>> Uh, and the same thing with the slides.

I think the the slide deck itself is like a medium of storytelling done through code.

>> So, code can uh like to my surprise code can make slides. code can design graphics as you saw in the vocabulary thing. Uh code can create and edit

thing. Uh code can create and edit videos. So I'm not sure you saw the

videos. So I'm not sure you saw the remote skill in cloud code where you can actually create videos and edit videos uh using code. Um and so basically code

can do anything that happens on a computer. So this is one of my

computer. So this is one of my realizations recently is coding agents are general agents. So I think a lot of the vertical agents or or vertical apps

even are going to be replaced by coding agents personally because everything you do on a computer theoretically can be done through code. Um so I think which

is why I think coding is relevant not just for professional coders. It's

actually relevant for anyone who works on a computer.

And I also think coding is evolving from a profession into a skill. So what I mean by that is I' I draw an analogy to writing. So we think of writing as a

writing. So we think of writing as a skill more than a profession because there are professional writers but they're very minority of the population and a lot of the people who benefit from

writing well are not writers right so if you're marketer or you're engineer you benefit from writing so I think coding will be the same um even if you're not a

professional coder you benefit from coding well so I I draw this kind of differentiation between engineering and coding

I think uh engineering is a career. Uh

it's a takes years of training, but coding doesn't have to be. It can be fun. It can just be like it's just a

fun. It can just be like it's just a tool. It's just a tool that anyone can

tool. It's just a tool that anyone can take up and learn.

So, and a lot of people say, "Oh, but you you can't build something that works in production." Well, most people never

in production." Well, most people never need to build anything that works in production, right? Like my slide doesn't

production, right? Like my slide doesn't need to work in production. my remixing

ideas doesn't need to work in production. They just need to work for

production. They just need to work for me. So, and I think that's the case with

me. So, and I think that's the case with 99% of viod project. You don't have even have to ship it to hundreds or millions of people. You can as long as it works

of people. You can as long as it works for you, it's good enough.

>> So, here are uh some lessons I've learned. about uh after spending like

learned. about uh after spending like probably more than 100 hours with cloud coding the past couple months like uh techniques for working with coding agents. The first one is context not

agents. The first one is context not control. So I I'm sure you've heard

control. So I I'm sure you've heard about this management principle from Netflix. Uh I think it's the same thing

Netflix. Uh I think it's the same thing when working with agents is I don't micromanage them. They're really really

micromanage them. They're really really smart. They're smarter than you. So

smart. They're smarter than you. So

you're not supposed to give them very specific instructions. I we used to

specific instructions. I we used to think the longer the prompt the better but I actually think that the prompt should be shorter now. Uh just give it a lot of room to like to exercise its own

creativity and you'll be surprised with what it comes up with. So these days I mostly just describe the outcome I want without spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe spe specifying how to get there. I

think it knows better than me how to get there.

>> And the second one is push it until it breaks. So I think a lot of people don't

breaks. So I think a lot of people don't push the models enough like it gives you an out an output and then you just accept it as what it is and even if it's not good enough you just stop there and

say oh by coding doesn't work. So the

the thing you should do is like go back and push it push it until it works and then you actually realize the the limit of the model. So uh only when you give

it a really um difficult task and then if it cannot complete it then you at least know where the limits are. But if

you just only give it very simple tasks, you're never going to go know where the limits are.

And then the the next one is putting the wraps. I think this is just like

wraps. I think this is just like anything else in life. You just need to spend a lot of time working on it and uh just putting a lot of effort to work with it. Um there's no magical prompt

with it. Um there's no magical prompt template or any shortcut to it. uh even

for people with years of engineering experience I think this is a new skill uh people need to learn on how to effectively work with coding agents so I think uh to some extent we're all on the

same like level playing field there because this this is something everyone needs to learn um and then the next one is waste tokens

try everything uh because I actually think a lot of my experiments would traditionally be considered an overkill it's like oh it's just a slide is it worth coding or it's just the newsletter

like why code for it like people would think oh it's just a waste of tokens but I think that's where uh new ideas come from you just need to approach it with with a very playful spirit like almost

experimental oh I wonder how that would work um I I was listening to this podcast with Peter Steinberg who's the creator of openclaw on Lex Freeman and Lex asked him oh there's so many people

building AI agents why do you think yours succeeded and he says something I uh which left a huge impression which is he said it's very hard to compete with

someone who's just there to have fun and I heard something similar with Boris who's the founder of claw code >> because claw code was born out of a side project

>> it's not supposed to be like a strategic initiative or something so I think there is something to the idea of approaching AI with a playful spirit without a very

utilitarian um mindset uh you just need to enjoy it, have fun, and then see what it comes up with. And then you'll be surprised by the results.

Um, and then the next one is build in public. Like this one has been super

public. Like this one has been super important for me because every time I build something that works, my first reaction is record the screen, send it on Twitter because this way I think one

you can meet a lot of awesome people like you guys. That's how we connected a lot. Um, and then you can also learn a

lot. Um, and then you can also learn a lot. Actually, I think the best textbook

lot. Actually, I think the best textbook for by coding is Twitter. And the best teachers you can have are people who are slightly more advanced than you on Twitter. So, I don't think there is a

Twitter. So, I don't think there is a course or some boot camp you can take that's tailored to you. Um, I think yeah, I I learned most of the prompts and tricks and features just from

watching other people do it on Twitter.

>> Yeah.

>> Um, and then yeah, make it fun. I think

a lot of times I've laughed at cloud output because sometimes it can be genuinely funny. So I think we just need

genuinely funny. So I think we just need to make it Yeah. Uh don't don't take it too seriously. That's how we make it

too seriously. That's how we make it sustainable. And the last one is if you

sustainable. And the last one is if you can talk you can vibe code. So I used to be super intimidated by screens of code that was uh unintelligible to me. Uh and

then I could never like six months ago I didn't know what a terminal was and now I'm spending most of my time in the terminal. So uh I think don't be

terminal. So uh I think don't be intimidated. So I think the hard thing

intimidated. So I think the hard thing now is actually not the coding. The hard

thing is coming up with something worth building and then making people care once you've built it. So the coding is the easy part that I can take care of you for you.

>> Yeah.

>> Uh I have some tips for getting started if you don't have ideas. So first of all, you can just like what I showed, you can turn any Word, Excel,

PowerPoint, PDF into interactive HTML.

Uh, which I think is a very good starting point for someone who hasn't done this before. And then if you have absolutely no idea, I actually vipcoded an app to help people find VIP code ideas. So if you go to vibecoding

ideas. So if you go to vibecoding ideida.com um this is a web app that I built to help people especially beginners find vibe coding projects that are both

tailored to your pain points and your skill level. So it's going to generate a

skill level. So it's going to generate a dynamic type form like survey where it will ask you oh what what do you do for work? What are your manual repetitive

work? What are your manual repetitive tasks work? Um what what what pain

tasks work? Um what what what pain points do you have in your life? And

then uh the questions are uh dynamic which means they're generated by a large language model based on what you answered in your last question. So it's

not a standard one-sizefits-all survey.

It's actually a dynamic customized survey. And after you answer the

survey. And after you answer the questions, the AI is actually going to generate three personalized project ideas that are tailored to your work and

life pain points as well as your skill level. And uh you can it will actually

level. And uh you can it will actually also generate the prompts for those projects that you can copy and paste into any coding agent with one click. So

and you can download that as a markdown or copy it somewhere. So, uh, if you don't know where to start, go to vcoding ideida.com.

ideida.com.