Code as a Medium for Storytelling with Zara Zhang

All right, I'm just going to admit all and disable the waiting room.

We're on Hello everybody. Toronto, Nigeria,

Hello everybody. Toronto, Nigeria, Austin Panama London Montreal Panama beautiful Chicago Barcelona

Michigan Malaysia Paris, Hong Kong, so cool.

Shangdu Boston DC Bangkok.

Uh, hi Jane. Yes, a recording will be available. So, no worries if you need to

available. So, no worries if you need to hop and do other things.

Hi Karen from Hollywood, Vancouver Boston Edmonton Canada Cleveland

Los Angeles, Singapore. We've got an international crowd today. Netherlands

calling in. The recording will be emailed to everyone. Saudi Arabia,

London Amsterdam.

So cool. So many familiar Sublime faces, but also members of the Zara fan club.

So, welcome, welcome to to this month's Sublime session, everyone. I I mean, I feel like an hour of Zara's time is precious, so we should just get started.

I'm sure people will continue to to trickle in. Happy Friday, everyone. We

trickle in. Happy Friday, everyone. We

are so excited about today's session, and we've got a full house here. I um so for those of you who don't know um Sublime, so we have an inspiration

management tool, but we also invite one guest every month for a Sublime session.

And it's usually a creative person, a builder, a thinker we love and are inspired by and want to learn from. And

I am just so grateful that Zara said yes to this invitation because she is I am just so inspired by her work and and really just the fact that she learns by

doing and then teaches by example and has just been so generous with with the internet and and we have a full hour with her today to just um unpack her

lessons and soak up her knowledge and wisdom. I know when we first sent out

wisdom. I know when we first sent out this invite, a few people replied and said, "Oh my god, that's amazing. I use

Zara's front-end skills for my presentations." Um, so Zara, you really

presentations." Um, so Zara, you really have sort of been around um like are well known in the Salon community. So

without further ado, I'm going to pass on the mic and uh there will be room for Q&A throughout. So feel free to use the

Q&A throughout. So feel free to use the chat and ask questions and yeah take it away.

Hi everyone. Thanks Zary for having me.

Um so I'm my name is Zara. Uh many of you might know me from my content. Um I

I I post a lot on like Twitter, LinkedIn and other platforms. Um so my day job is a product manager um at a tech company but I am also a builder. That's probably

a new identity for me since I only started um using coding agents maybe like six months ago. But I've been building a lot of um interesting stuff uh which I want to share with you today.

Um this is the deck I'll be using is actually uh like a website built for my own front-end slide skill. I also send the link to the slides in the chat so

you can view it on your own at your own pace as well. So everyone can see my screen. Right. Okay. So uh the theme of

screen. Right. Okay. So uh the theme of my presentation is code as a medium for storytelling. Um I think because I don't

storytelling. Um I think because I don't come from from a traditional background, I think of coding from a different lens from most um professional engineers or programmers.

And so today I'll talk about a few things. Um I'll go through uh my own

things. Um I'll go through uh my own background, how I started VIP coding and the projects I've built and how I built them and then why it matters. So first

where I started. So, I actually never thought of myself as a coder. I studied

humanities in school. I've never um like took CS. Um and actually in 2023, I

took CS. Um and actually in 2023, I wrote a blog post called why I'm not learning to code. That kind of went viral. So, at that point, I was like,

viral. So, at that point, I was like, I'm proudly a humanities person working in tech and I think tech needs more humanities people with a different lens.

Um I was challenging the traditional uh uh belief that only like technical people can work in tech. Um but a lot changed in the past year. So I started

vibe coding maybe a year or two ago. Um

I first tried a lot of the web- based tools. Um and but at that time the

tools. Um and but at that time the models weren't good enough. So I

couldn't complete projects. It was

mostly like demos or little tools for myself. I couldn't really build for

myself. I couldn't really build for other people. But I think January this

other people. But I think January this year was a turning point. So in January I started using cloud code and other coding agents and I was able to ship

products end to end to users other than myself. Um, and I've somehow got

myself. Um, and I've somehow got accumulated like almost more than 30,000 stars on GitHub with more than five projects with over a thousand stars,

which was like beyond my belief because you as you can see in this chart like before this January, I've never even used GitHub. I wasn't even sure like how

used GitHub. I wasn't even sure like how GitHub worked. Um, but since January, I

GitHub worked. Um, but since January, I think January was a water watershed moment for um AI coding. it really a lot of the nontechnical people could really get their hands on coding and start

building uh real projects. So uh I'll go through a few of the projects I build.

The first one is front end slides. So

the deck you're seeing right now is built from this skill. So this is a skill that allows you to build presentations using HTML. So leveraging

the coding agents front end capabilities. So replacing the

capabilities. So replacing the traditional PowerPoints. Um this was

traditional PowerPoints. Um this was inspired by the fact that I think the coding agents are very very good at front-end design. So I I was thinking

front-end design. So I I was thinking how can we apply it to an area that also has to do with design but it's not traditionally ch uh change uh touched by

code. So I realized that um HTML is a

code. So I realized that um HTML is a great canvas for the model to express itself. So the the the what you're

itself. So the the the what you're seeing right now is like just a bunch of the templates I've built for the uh HTML slides and you they they look really

beautiful. I don't think they look like

beautiful. I don't think they look like a traditional slides. Um I I do believe that even for slides we can make them like um I actually give them a lot of

references from like artworks and [clears throat] like a very unique color combination. So, I wanted to create more

combination. So, I wanted to create more different looks from the traditional slice. Um, this this is my most popular

slice. Um, this this is my most popular skill so far. So, it has more than uh 21,000 stars on GitHub. Um, I actually didn't expect it to take off, but I

think slides is such a universal thing that a lot of people need. Um, and with this skill, you can make them really, really quickly without having to, you know, do any of the pixel pushing

yourself. So, this is the from the user

yourself. So, this is the from the user experience how it works. So first uh the agent like claude code will actually start with ask you a few questions like what is the purpose and use case for

your deck uh roughly how long do you want it to be? Do you have the content ready or should I help you write them?

And then it will ask you like is it speakerled or more for reading like so because it determines the density of the slides and then it will actually build you three different style previews for for you to choose from. So it will build

three different designs for the covers.

Um so this is to let the user have more say in how the the design uh the design is made and then it will go and build the full slide and then after that you

have the option to edit it or you can publish it to a URL like the the deck I have right now is like deployed to versel and then I had it point to my own domain. So it become becomes kind of a

domain. So it become becomes kind of a website that you can easily share with people and what's nice is you can also track it because it's a website. So you

can actually know how many people have opened it etc. So uh and then I realized HTML is actually a really great medium for slides because first of all AI

models kind of speak HTML as a native language because it's all over their training data like a lot most of the models are trained on tons of web pages.

So they are very very good at arranging text and images um on screen and then also websites and slides have a lot in common. They're basically just text and

common. They're basically just text and images arranged in like re rectangular boxes and sections. Um and also um if you make it in HTML it becomes

interactive and sharable. So for example uh for this slide I have there are a lot of cool interactions like as you can see my cursor is turned into a laser uh

pointer and then on the bottom you have these like navigation dots that allow you to easily jump to different slides and also hover to see the title. Um and

then you have interactions like uh you can these animation effects or you can click to enlarge any of the media. So

these are all the cool things you could do on the web. Um

and the and I wanted to talk a little bit about aesthetic aesthetics because I think that is the key to the skill. Um I

spent a lot of time on figuring out how to make uh the slides look stunning or like at least not AI slop. And the

solution I came up with was like templates but not the traditional templates. So, if you think about

templates. So, if you think about traditional PowerPoint templates, they're just PowerPoint files that you fill content in. Um, and at first I tried making the templates like HTML

files. Um, but then I realized the model

files. Um, but then I realized the model would overfit the template. So, it would just take whatever arrangement or layout the template had and then try to squeeze

the content in that layout which compromised the content quality. So then

I heard I read this awesome uh concept called uh design. MD. Sorry, I think I

need to reshare. One second.

Okay.

Yeah. So there there's a great concept called design.mmd which is basically a

called design.mmd which is basically a markdown file that describes the design of a kind of a set of design tokens for

a web page. So things like the color combination the the fonts um uh the vibe and overall uh design guidelines etc. So

it's just a markdown file. Um, and so I realized actually the model can do a better job with just uh this markdown file rather than the um like a HTML

file. So that's uh what I ended up

file. So that's uh what I ended up using. So basically if you look at the

using. So basically if you look at the the templates, every folder is just a markdown file. Um and then just from

markdown file. Um and then just from this markdown file, the model can do a pretty good job replicating the uh the the design system.

Um and so, uh, behind the scenes of how the deck I'm currently using was made, I you might be wondering like how do you insert so many media uh, so much media

into the deck like images, videos, etc. So, I uh, so yeah, how how to prevent AI slop in design? So, I think the first thing is to use cloud code because uh,

cloud is a lot better than codec or other models when it comes to front-end design. So I in my day-to-day I use clot

design. So I in my day-to-day I use clot both cloud code and codeex a lot. Uh but

if it's anything that has to do with design I always choose cloud because it's just a lot better. Um and also give a lot of opinionated references. So

these are some of the examples of the kind of images I would collect um on like Pinterest or other places. Um I

would just save them in the folder and then let Claude reference them when making designs. Um and then uh codify

making designs. Um and then uh codify design guidelines as designd like I just showed. Um and also I think um we need

showed. Um and also I think um we need to know what AI slop is before we can prevent it. So I think last year AI slop

prevent it. So I think last year AI slop looked like this. So you have a lot of like purple gradients. Uh but this year AI slop is a lot looking like this. So

it's like this look is very clawed. So

it's just like instrumental serif like itallic. So I think the goalpost for AIS

itallic. So I think the goalpost for AIS lab is always constantly moving forward.

Uh because once everyone starts using the same tools like claw design like you just see a lot of designs that look very similar to each other and then people get tired of it. So um I think we just

need to know what like what this commonly designed slob looks like and then just ban them. And I I like to make playgrounds. So what what I mean by

playgrounds. So what what I mean by playgrounds is basically uh an HTML file um where um

where you can see the uh a lot of different options for for different things. So for example,

things. So for example, this is a playground for fonts for this deck. So basically just have Claude make

deck. So basically just have Claude make a bunch of different options for you to compare. Um, and then this is a

compare. Um, and then this is a playground for colors. So, you could just click through the different combinations and get a feel for which

one you like. Um, and this is a playground for animations. So, you can view all the types of cool stuff it can do on the basically let it show all the

tricks it can do. So, then you can kind of pick and choose what you want to use.

Kind of like a menu.

So, I think if you're not sure what you want, uh, just have Claude makes make a playground with lots of different options and then choose from there.

Um, and also I realized SVG could be pretty useful. So, this this was a

pretty useful. So, this this was a website I made. Uh, the way it's like a list of my favorite restaurants and

shops in Tokyo cuz I visit a lot. And um

the the the way I made it was actually in uh there's a thing called Google Takeout where you can actually take out all of your personal data from Google products. So you could actually export

products. So you could actually export all your saved locations in Google Maps um as like a Excel spreadsheet and I give that spreadsheet to Clock to turn into a website. Uh but what I really

love about it is these cool illustrations like this cat and like uh these uh like this little illustrations for the different types of

restaurants and stuff. So these were generated as SVGs using a product called Quiver AI. Um so Quiver specializes in

Quiver AI. Um so Quiver specializes in like AI generated SVGs. Um, but I really like how intricate it is and how it kind of seamlessly blends into the overall

vibes of the design. So I think SVGs is a very underrated um form factor that we can blend into, you know, HTML designs.

Um, and then for this deck itself, uh, the way I made it was first I I just had a folder of the various images and videos cuz I I did have a lot of media I

wanted to embed. So I just put them in a folder and then I give it like very specific instruction on what I want to include in each slide. So this was like the the first prompt I give it and then

of course it took a lot of rounds of different iterations but I did have a very specific idea of what I want um in each slide and then I I tell Claude how

to use the different media assets.

Uh love the playground idea. Would love

to learn more about that. Yeah. So for

playground is actually super simple.

Literally I just tell Claude like I want to explore different fonts. Make me a playground that show me the different options. Um and it will do that with

options. Um and it will do that with like actual content that you're designing.

Um so the next c uh category of software I made was super uh interesting. It's

like modifying your own software interfaces to fit your own goals. So

what I mean by that is uh we you uh this is especially um good for the web. So

you can make uh Chrome extensions for yourself that modify websites or apps that you frequently use uh to make them better for you. So for example,

I have a I built a little Chrome extension called Tab Out. So, the

problem I struggle with, as you can see now, I have a lot of tabs in my browser and I never close them. Like, the only time I close my tabs is when my computer

crashes and they are of forced closed.

Um, so but so the the I struggle with like finding the right tab when I need it and then it's just like too much to deal with. So, I want I just

deal with. So, I want I just brainstormed with Claude like how what can we build to do this? And it it turns out that you can actually customize your

new tab tab. So this is the new the new tab tab. So when you open a new tab,

tab tab. So when you open a new tab, this landing page, you can actually v code this landing page. Um so I turn this landing page into kind of a mission

control for all your open tabs. So you

can see them at a glance. Um and then you can also um close close any tabs at one click. So,

for example, I can see what are duplicate tabs and then just like close them with one tab. And then there's also a very satisfying like swish and sound

and confetti when I close them. So, uh,

and then if I can close a lot of different tabs at one go for, for example, if I want to close all my Gmail, I can just click that and then close all my homepages. So, it it

becomes almost like a game. It's very

addictive. Um, I wanted to make closing tabs addictive because I think the way most browsers are designed, they only encourage you to open more tabs. They

never encourage you to close them. So, I

was like, I want to modify the the interface so that it encourages different behavior.

Um, it groups them by domains which makes it easy to see what you have. Um,

so this extension is open source. Yeah,

you can change the sound. You can change whatever you like. Like this is the cool thing about um open source is a lot of people have actually modified it to fit

their own habits. So for example uh this user just uh sent me this video the other day like they actually changed it to like a to-do management system. So

you could have your tasks uh you could have like your your schedule like your to like reading list whatever you want on this page. So, I think the new tab

tab is a very underutilized real estate on our computers because we just open it so frequently throughout a day, but usually it's just like a Google search

bar or some random stuff. So, I

encourage everyone to kind of um uh make the full use of the new tab page and just customize it however you like.

Like some people change it to dark mode, some people add their frequently visited web pages. So because it's open source,

web pages. So because it's open source, anyone can just like do whatever they want with it. So for most of my open source project, I actually want people to not just use it, but like remix it.

Um, and so yeah, this is the code on GitHub. So you can just uh download it

GitHub. So you can just uh download it and or get cloud code to install it for you. Um, and the other cool uh

you. Um, and the other cool uh interesting thing which I'm still building, it's not finished is like a a tool that helps me learn from long YouTube videos. So

YouTube videos. So right. So they

right. So they so for example I have this like super long podcast that I want to watch but I may not have t time to consume the full length or the the content might be too

dense for me. It's like a lot of technical stuff. So I could open this

technical stuff. So I could open this side panel which first first it grabs the full transcript of the podcast so I can quickly read the text. is also fully

work audio and I can click right or trust part to like jump to that um part of the video. Uh if there's anything I don't um

video. Uh if there's anything I don't um understand um I can just like uh select it and then uh

and then the AI will actually me in the context of this specific specific video.

So this is very useful for like any sort of technical uh videos or podcasts for education. Um and then if you're not

education. Um and then if you're not sure if you if this is worth your time you uh there's an overview tab where you know you get um highlight of the highle

overview of what the video is about and worth watching if you are you know one of these things and then um it also divides it into chapters and then you can click on any chapter data efficient right

to that part of the video. Um, it will also pull the top quotes from the video um, using LLM and then you can click any

part to open or copy it with one click.

Um, and I I also like this remixing idea because sometimes uh, I prefer to read it. Um, but I don't want to read a bland

it. Um, but I don't want to read a bland summary because the summaries are usually really bad. Like they don't capture the best parts of the video.

They're too brief and too generic. So I

I've I I I like a few um form factors for the remix. The first one is a magazine article. So the prompt is

magazine article. So the prompt is basically like transform the transcript into like a New Yorker style magazine uh or whatever magazine you like um article

um that is like a long substantial read but also a lot more uh easy to consume than like maybe a long video. Um, so

this is an example of like a magazine article remixed from this specific video and it this is very uh suitable for things like a long video podcast like

Lex Freeman type of podcast. Um, and

[clears throat] you can also do like a business biography if it's like a person being interviewed or you can do like a briefing whatever format you like. Um,

and uh notes is also really interesting.

So as I'm watching the video, you can see there is a note button here. So what

I can do is even without pausing the video, I can click it to take note. So

let's say I'm watching entropic and then he says something I want to take note sun micros and it's just going to pop up this

little panel that just take what he just said into you know a note and then uh put it in my notes panel. So, uh, it's going to rewind maybe like a few seconds to capture what I just heard and then

put it, uh, turn the transcript into a little note, which I can like copy the text or time stamp, like maybe I can turn into a tweet or, you know, put into my notebook or whatever. So, this is

kind of just like a personal learning tool to make the most of uh, long YouTube videos.

Um, how much time does it take to make a new projects? Um, it really depends. I think

projects? Um, it really depends. I think

the making part is actually not that not that hard or time consuming. The time

consuming part is actually using it and feeling it, feeling it and iterating it based on how how you're how you're using it actually and then your own kind of uh

how how you're actually using it your own behavior because uh for example for tabouts I first made a more sophisticated tool actually I I had an

LLM categorize all my tabs into like tasks and themes um and then I realized I just wasn't using that feature, I ended up just like want to being able to

close them. So, I turned closing tabs

close them. So, I turned closing tabs into the main feature after just feeling it for a while. So, I think even if building it only took like a day or a few hours, it maybe took me a week to

get a hang of how I'm actually interacting with it and how I can shape it more around my actual behavior.

Um and uh the other category I I I thought was really fun which was uh uh I think you

can create your own personal ad network to shape your own behavior. So what I mean by that is so advertisers are constantly trying to capture our attention on the different platforms. Uh

but what if we can kind of manipulate our own attention to do things we actually want to do. So for I'm uh I have this habit of hoarding X bookmarks.

So I save a lot of posts on X as bookmarks, but I I just rarely open them. Uh I just sometimes I just forget

them. Uh I just sometimes I just forget about it or I don't have time. So I just end up with like hundreds of bookmarks um that I don't I don't go through. So I

was like how can I get myself to actually read the bookmarks?

Um, so I tried this thing uh which was uh I built a little Chrome extension that modify the X homepage. So I think the cool thing with uh browser

extensions is they can actually like modify the web interface of products you use. So uh here I inserted like a

use. So uh here I inserted like a bookmark from uh my bookmarks into like the top of my X homepage. So it's almost

like an ad. So every time I open the X homepage, the first post I see is like something from my bookmark. So it's a great reminder to, you know, okay, go read your bookmarks first before

scrolling the rest of X because the X homepage is something I'm already frequently opening. Um, it's like a

frequently opening. Um, it's like a great entry point for me to read the bookmarks. So that's this is what I mean

bookmarks. So that's this is what I mean by like a personal ad network. So uh

usually if you use any social media like this spot will be occupied by a lot of ads but you can actually use a chrome extension to shape it to to you know get the uh the behavior you want in

yourself. Um and the same thing with

yourself. Um and the same thing with like YouTube watch later etc. I think another real estate uh very underutilized is the phone wallpaper

because we just open our phone like hundreds of times per day. So, uh, when I was learning Japanese, um, I tried

turning my wallpapers into shuffling, uh, Japanese vocabulary images. So, you can build these like

images. So, you can build these like wallpapers using uh, claw code or any agents. So, the the the images are just

agents. So, the the the images are just HTML. So, you can just get the agent to

HTML. So, you can just get the agent to make a HTML in like the phone dimension and then export as images. Um and then you can put them in a al album on your

phone and on iPhone you can actually set sh um your wallpaper to be like a shuffle for a specific album. So this is how you get this like on key effect on the wallpaper and then every time you

tap it it shuffles to a different wallpaper. So uh this is kind of like

wallpaper. So uh this is kind of like how you can this like almost like a personal ad system if you want to study something. Um and this is also a cool

something. Um and this is also a cool lesson which is you you you most people think you uh you can only make images with image gen models but actually code

is very good with designing images like this. So if especially if it has to do

this. So if especially if it has to do with arranging text on screen or text and images actually code and front end is very very good for that. So if you

want to make posters or like these cards or you know decks like code is actually a lot better than image generation.

Um and the the the next category is content remixing. Um so I think uh now

content remixing. Um so I think uh now that we have agents, we actually have the opportunity to remix any sort of content into whatever format you like because we all consume content in

different ways. So for example, I tried

different ways. So for example, I tried turning the acquired podcast into a physical book. Um I I like the acquired

physical book. Um I I like the acquired podcast. Uh it was but it's just super

podcast. Uh it was but it's just super super long and I don't have time to like go through all of them. So, I was like, if if it's a physical book, I would love to read it. So, um I actually just

downloaded their transcript from their website and then use Claude uh use a super long prompt to turn each uh episode into a chapter of a book. U so

each chapter will be like 20 pages. It's

still very very long. It's still a very long read, but um I I actually really like reading it because the content is so dense and sometimes when I'm listening to the podcast, I find myself

drifting off or like it's just hard to focus and whereas when I'm reading, it's a lot easier for me to focus. So I and I actually got it printed um as a physical book and I designed the cover and

everything. So this is what it looks

everything. So this is what it looks like. Um and then each chapter is like

like. Um and then each chapter is like an episode of the show. Um, and uh this is the prompt I use. It's pretty long, but basically I get it to uh it's it's

not a generic summary because I don't think a summary works. It's also not very readable. So I uh I got Cloud to

very readable. So I uh I got Cloud to write it as a great business biography kind of like you know Shoe Dog, The Everything Store, that kind of uh vibes.

And then uh they also it needs to preserve the best quotes and an anecdotes from the original show as much as possible so that you still get the

best parts. Um but then it um maps maps

best parts. Um but then it um maps maps it in a story that's very readable and then um also if there are a lot of technical or business concepts that may

not be understandable easily I I also got it to explain it in layman language.

Um, so that's kind of the uh yeah, I use prompt to I use I this kind of prompt I build it with Claude. So I have an idea of the types of things I like and then I

just uh bounce ideas um with Claude together. So

together. So um do I spend a lot of time on prompt building? Um I think I just spend a lot

building? Um I think I just spend a lot of time chatting with Claude. I think

the specific words don't matter that much. I think when the models first came

much. I think when the models first came out, you sort of had to say like the magic words to get them to do certain things, but now they're smart enough that um you can just brain dump your

thoughts. I think brain dumping is very

thoughts. I think brain dumping is very important. I know a lot of people use

important. I know a lot of people use the voice input to do that. I think

that's very good. So basically just like ramble, just give it a lot of thought.

It doesn't even have to be super structured, but I think just giving it your raw unfiltered thoughts and a lot of the context uh would be good. And

then like um clog can help you turn it into a very structured prompt. Um the

other type of remixing is uh turn videos into newsletter. Just like how I showed

into newsletter. Just like how I showed you, I can remix a podcast into like a magazine article. Um, you can also turn

magazine article. Um, you can also turn that magazine article into a EPUB kind of like a ebook and then you can have it emailed to your inbox on a regular

basis. So you could get a weekly

basis. So you could get a weekly newsletter of your favorite podcasts and then read them in the ebook app almost like a book.

Um, and this is also a super interesting project because I don't really know how to code still. Um

[clears throat and cough] but I kind of want to understand how the code works under the hood. Um I also had an opinion around how we should learn computer science uh in this age of AI. I think

traditionally in school we learned bottoms up. So you had to go through a

bottoms up. So you had to go through a lot of the foundational courses first before moving up to the more interesting stuff. But I feel like now we should

stuff. But I feel like now we should just like build first. we should just turn our ideas into reality with the coding agents and then go and ask it hey how did you build it how does it work

under the hood so um uh I made this project called codebase to course because I think the best CS course you can take is your own vibe coded project

like that's the best learning material so uh this is a demo of that so for example I built this tool called long cut and then clot code I just gave the codebase to cloud code and like it's

turn into a course. So this the course is just like HTML file that's interactive. So it first breaks down um

interactive. So it first breaks down um what it does the user journey and then for the if there are technical terms you can hover over it to see a layman

explanation. Um it also had this really

explanation. Um it also had this really useful side by side of like here's the code and here's the layman like English version translation of that. Um and then

it will also give you quizzes to help you understand the key concepts. Um and

then uh this part is really interesting where I actually got it to um uh simulate the different uh so first of all you can trace a user journey through

like these cool animations. So we can see for example how data flows in the system and then um you can also uh simulate how the

components interact with each other as a group chat. So it's like the different

group chat. So it's like the different APIs or you know technologies in the codebase they're talking to each other just like people talking to group chat.

So I found kind of simulating them this way really helps with understanding. So

just a lot of different tricks to help you break down technical concepts into easy to understand components.

All of this is packaged into a skill that you can use on GitHub. So basically

point it to any GitHub repo or local codebase and it will turn into like a HTML based CS course.

Um and then also turn Excel spreadsheets into interactive dashboard. So I think uh HTML is very good at um visualizing data. So for example, here is a excel

data. So for example, here is a excel spreadsheet of my act analytics. Um and

then you can just uh give it to clock or any agent. It will turn into like

any agent. It will turn into like interactive chart uh that you can play with.

Uh which tool I use for which skills? Um

I mainly just use cloud code and codeex.

And the the the use cases uh I I pick for them is like if it has anything to do with design um or brainstorming products, I always use claw code. Uh if

it's just executing or like everyday day-to-day task, I use codeex. Um I

think codeex is great for when you already know what you want or you just need to like fix a bug. Um it would it's great at execution. is also a little bit cheaper. But if you don't know what you

cheaper. But if you don't know what you want, you just want to like brainstorm and chat or you want product ideas, you want to be inspired, you want great

design, then claw code is much better.

Um, yes. Yeah, the YouTube digest tool I plan to publish when I'm done. I'm still

working on it. Yeah. Um, so the next uh so uh the last part was about the projects I build. The next section will be about how I build them. So first of all how to get product ideas. Um the way

I think about product ideas is I think it's an interse uh kind of where the intersection of users and technology. So

a product brings user and technology together.

So uh when you think about product ideas there are two directions you can take it. The one is one is to start with the

it. The one is one is to start with the user and the other is to start with the technology. I think both can work really

technology. I think both can work really well. If you start with the user, I

well. If you start with the user, I think I got a lot of ideas uh not just from my own pain points but also from talking to people who are very different

from you because um I think products are all about meeting a lot of people's pain points and if we um and you need the pain points that's actually like

generalizable and has a sizable audience which is why I think uh creating content has helped me a lot because uh when I put content out there I get a lot of feedback on on people who are very uh

from people who are very different from me. So, uh I get to know how people

me. So, uh I get to know how people think and then I I also meet a lot of people for coffee and and stuff. So, um

just hearing the pain points from a lot of different people really help uh inspire my ideas. Um, the other is uh feel your own point, brainstorm with clock code. And uh this is important

clock code. And uh this is important like use it for a week and see if you'll still use it because I actually killed a lot of product ideas because I thought theoretically I would like use this

product but then my own behavior just showed that I wasn't using it as much.

So then I I just felt like it didn't work. So I think a good idea has to be

work. So I think a good idea has to be proven empirically that you or someone would actually stick with it. Um, so

here I wanted to give an example of like tab out. I actually went back to cloud

tab out. I actually went back to cloud code and was like like hey go through our chat history like and then build me a HTML that kind of simulate how this idea came about. So it didn't start out

with like hey build me a Chrome extension that does blah blah. It

actually started with a question. The

question was like my Chrome browsing history is stored locally, right? Can

you access it? because I just saw someone on Twitter build something with their Chrome history and I thought, "Oh, wow. The AI can access my browser

wow. The AI can access my browser history." Like, it must there must be

history." Like, it must there must be some room there for building cool stuff.

But I I didn't know exactly what I wanted to build yet. So, I literally just asked Claw like like you have it, right? And then it was like, "Yes, I

right? And then it was like, "Yes, I have it." I was like, "Let's do

have it." I was like, "Let's do something with it." And then I just told him my problem. My problem is I hoard too many tabs. I never close them. Some

of them are tasks um that I haven't finished like what can you do to help? I

didn't really have a specific idea. And

then Claude gave me a few ideas. Um but

then I I I I said like how do you make sure I'll actually use it because a lot of ideas sound uh simple in theory. Like

there's so many to-do lists or like task management apps. So, I just end up like

management apps. So, I just end up like still not doing my to-dos. Um cuz all of them require you to be very disciplined to like click certain buttons, remember

to open certain things. Um, so, um, then Claude said like maybe have you considered like making it your new tab page, which I thought was a brilliant

idea because on my own I didn't know the new tab page could be customized and like Claude told me that. So, I was like, "Okay, do that." And then that's how um that became the entry point for

the product because I at first it it was it was it wanted to build me an extension that's you know where you have to click a button to pull out your tabs and I just told it I will never click

the button like I will never remember to click a button so can you put it somewhere where I don't have to click anything like I'm already naturally like opening it frequently. Um and that

that's how it came up with a new tab page. Um and then uh I got it to build

page. Um and then uh I got it to build some mockups and then uh just gave it a lot of specific feedbacks. Um and

uh most of it is just from my own behavior.

Um and for example, can can you add like satisfying animation and sound effect? I

just wanted to make it a lot more fun and addictive. Um yeah. So that's uh

and addictive. Um yeah. So that's uh also I got a lot of user feedback. So uh

which I'll talk about later like the power of building public.

Um so this is uh starting with the user and the other way is to start with a technology. So I'm always on X. I think

technology. So I'm always on X. I think

I've tuned my al X algorithm such that it's like a very high density um information hub for like new technology

and AI stuff. So I get a lot of new models, new products, new APIs, new cool technologies like use cases, designs. So

I bookmark them and actually block out time to actually try them hands-on. So I

think it's very important to try technology hands-on. If you see a cool

technology hands-on. If you see a cool new product or API, just like send it to Claude and like be like, hey, how do I how can we build something with it? So a

lot of times it's not like you have a you start with a painoint. A lot of times you just start with a technology like a cool API for example and then you can brainstorm with claw like what can

we build with it. Um I also I actually want to advocate for building something small because um I think most of the internet will teach you to build something big. Um but I actually think

something big. Um but I actually think in the age of AI there's a lot of value in building small. Uh so first of all every big thing starts as a small thing.

I think in order to capture people's imagination, you need a very sharp value proposition and positioning to stand out. And right now I'm hearing so many

out. And right now I'm hearing so many products that oh like allin-one AI agent that helps you with everything in your work and life and integrates with everything. And I just feel like that's

everything. And I just feel like that's so generic. Like if that's your

so generic. Like if that's your positioning, I may as well just use Claude, you know, cuz Claude is that. So

like if you want me to make me if you want make if you want me to use your product you have to offer something differentiated and special that has a opinion and soul behind it and I think

you you need to start with targeting a very specific use case and a very specific um target audience and the problem and opinion. Yes doing

everything means it's doing nothing and speaking to everybody means you're speaking to nobody. So uh that's why I think we should start with building something small and also think we should build for fun and build to learn. So

someone asked how did you monetize these projects? So I didn't actually build

projects? So I didn't actually build them for monetization. Um these were mostly just like side hustles and hobby projects. Um I also a great way for me

projects. Um I also a great way for me to learn because um I I think the best way to learn how to learn product management is just to build products

from zero. And this wasn't available as

from zero. And this wasn't available as an option if you were trying to become a PM say like three years ago because back then you had to rely on engineers to

build out your ideas. But now you can literally go with from idea conception to building it to distributing it all on your own. So I'm kind of my own product

your own. So I'm kind of my own product manager, my own designer, my own engineer, my own marketer allin-one. So

I think that's just a great learning experience is also really fun like almost like um you can build a community of people who who are using your

products and think alike. And I also think opinionated products survive. So

like I said, if you're just building a generic unopinionated AI tool, like people may as well just use like their gener like codec clock or whatever. So

the I think the reason people will use your tool is because they uh the the opinion behind the product resonates with them. So here is the opinion behind

with them. So here is the opinion behind my products for front end slides is like like oh I don't like PowerPoint use HTML

to replace PowerPoint like HTML is the next medium for um uh like uh storytelling. And then for codebase to

storytelling. And then for codebase to course uh the the tool that turns a codebase into a HTML based course the the uh opinion behind it is like in the

past in traditional education we learn to build whereas now I think it should be reverse which is build to learn like we should build first and learn later um and for tab out it's like we should make

closing tabs addictive and then kind of change the default behavior around browsers and I think the reason a lot of the products resonated with people is because the ideas and the opinions

behind the products resonated with people. So sometimes I almost think of

people. So sometimes I almost think of my GitHub as like a substack. So because

uh in the past when you had an opinion you wrote an article or you make a video or something. Now when you have an

or something. Now when you have an opinion you can put it into into a skill or a product cuz I think every product actually is a expression of how you

think and the your unique way of perceiving the world. Um yeah, so if you want to uh get started with building similar projects, here are some

practical tips to get started. But first

of all is I think uh especially for beginners like using the best model can really save you a lot of time and even even save you money because uh I think

Boris who's the founder of clock code once said uh if you use the best and most expensive model it can sometimes turn out to be cheaper because um if you use a cheaper model sometimes it will

just get stuck at solving certain problems or it just it just doesn't work and then you end up spending more time in token to get it to work. So I usually just use the best model by default. Uh

but unless you have like wrote repetitive work in that case you can use a cheaper one. Um and the way I talk talk to the model is I I don't treat it as my employee or assistant. I actually

treat the model uh as my co-founder. So

I do a lot of brainstorming with it. I

describe problems not solutions. So for

example for tab out I just said like all my browser history is here. What can we do with it? um without a specific idea in mind and Claude was the one who came

up with the specific idea. So I think uh we don't have to have a very uh complete spec when we talk to claw. We can just describe the mess we're in and see what

we can do with it. Um and then the third one is build around your actual behavior and not what you think you'll do because human behavior is very messy. Humans are

lazy. We're forgetful. We're like uh unpredictable. So uh if sometime for a

unpredictable. So uh if sometime for a lot of the products I think there's a lot of wishful thinking. It's like they expect people to like remember to open a website and click on a button and do one

two three like most people will just never do that or like they'll just forget. So I like to build products

forget. So I like to build products around like which is why I think after I build something it takes me like a week to feel it to see okay am I still using

this or did I forget or you know did it did it actually is it actually shaped around my actual behavior and then tweak it from there. Um and then the next one

is cut more than you add. So I think the models are very good at adding stuff and then what because adding things is so easy and the cost is so low these days we tend to become very greedy it's like

more and more and more uh whereas I think now the human's role is actually subra sub subtraction more than addition so we actually need to be very

disciplined and always get the model to cut stuff uh so for example for tab out I first uh built in a um AI organization feature that categorize the tabs. Um,

but then I realized just I just didn't end up finding it that useful. It also

consume a lot of tokens. So, in the end it was like just let as let's just get rid of that. Like I'll just categorize them by domain. So, this tool ended up having like no AI but it also ended up

being better cuz it was shaped around what I actually needed. So, I think before I ship anything, I always take the time to cut a lot of things. Um, and

then uh I think putting the wraps is really important. So like anything in

really important. So like anything in life, the more you do it, the better you get. So um I think I got a feel for it

get. So um I think I got a feel for it maybe after like my eighth project or so. So I just built a lot and then some

so. So I just built a lot and then some of them fail, some of them more successful, but I think just building a lot um is uh putting the reps actually

really helps. And then building a public

really helps. And then building a public is really useful. So uh when I posted tab out on Twitter, it got almost half a million views. And then this um uh

million views. And then this um uh visitor said like why does it need to run a NodeJS server? So at that point it had a server and I actually didn't know why I needed a server. So I just asked

cloud code like why do we need this? And

then cloud was like oh we we don't actually need it. So I just deleted it in the end. But I I wouldn't have known if like uh he had not commented on my post to tell me that cuz so I think uh

bu showing your product in public uh just and then having people giving you feedback and comment especially from like engineers is really helpful because

um then you can actually learn from the internet and then uh get better at what you build. Um and then the last one is

you build. Um and then the last one is just make it fun. So, I think it's important to be not so utilitarian. Um,

like you don't have to like make a ton of money from it or, you know, get like 100 million users. Uh, even if it's just for you and your friends, uh, it can be really useful and, um, educational. Uh,

so I really like this quote by Peter Steinberger, who is the creator of Open Claw. He said, "It's hard to compete

Claw. He said, "It's hard to compete with somebody who's just there to have fun." And I think OpenClaw was born out

fun." And I think OpenClaw was born out of, you know, like a fun side hustle. it

wasn't he didn't set out to build like a billion dollar business. So I think a lot of good ideas can come out of these like non-utilitarian pursuits and then if we just try to have

fun with the models try to push uh them to their limits and see what they can do we end up with a lot of good product ideas.

Um and then uh because a lot of people are trying to make skills I wanted to talk a little bit about skills specifically. So for example, for front-

specifically. So for example, for front- end slice, the way I make it is uh first you just have an idea and then just try to get claw to do it. So for example, like I want to make a slide HTML, like

just give it the content and do it without a lot of specific instructions and then it will inevitably make slop.

So the first iteration is probably really really bad. So you just give it a lot of feedback um like oh don't use purple gradients, don't do this, don't do that. And then this iteration will

do that. And then this iteration will probably take like 10 or 20 or dozens of turns. Um, but this is very important

turns. Um, but this is very important like you actually need to spend a lot of time on this at this stage. But then the next part is really important. It's like

tell the AI turn everything we just did and then package it into a skill. So

kind of the workflows and iterations you went into that is the actual skill. So

um the way you make the skill is not by starting with making a skill. is but by ending uh with a skill. So you do the thing first and then you say hey turn whatever we just did into a skill and

because you give it so much specific feedback it's able to incorporate your specific taste and criteria into the skill. Um and then uh at the for the

skill. Um and then uh at the for the last step you can kind of package it into a more user friendly version and then just publish it on GitHub to share

with others. Um

with others. Um so uh to close out I think uh I feel like coding is evolving from a profession into a skill. So what I mean

by that is um it's kind of like writing.

So traditionally we think of writing more as a skill. So there are professional writers uh like journalists and uh book writers but mo we mostly think of writing as a skill. So no

matter what you do you can benefit from being a good writer. I think coding is the same. So uh before AI coding we

the same. So uh before AI coding we mostly thought of coding as a profession. So only the engineers did it

profession. So only the engineers did it for a living. But now that um AI coding has made it accessible to everyone I think it's evolving into a skill where anyone can just talk to the models and

um you know turn the ideas into reality.

So and no matter what you do if you're a business owner you're a marketer you're a product manager designer I think uh knowing how to work with the coding models will help you level up in whatever you do.

Um and so I I think we need to differentiate engineering from coding.

So engineering is a very serious like discipline. It's a career. It requires a

discipline. It's a career. It requires a lot of training. But coding is just a tool. It's just just like writing like a

tool. It's just just like writing like a skill like if you have an idea you can uh you know turn it into reality. And um

most people never need to build stuff in production like cuz you you you're not necessarily engineer working on like a production level product but you can still build something that improves your

own lives that you use with yourself, your family or your friends. So I kind of think of it as like we should stop thinking about coding as something

that's like super serious and like different distant from my life. Um so I think co vibe coding is a form of self-expression. So actually for most of

self-expression. So actually for most of my career I was a storyteller. So I

started as a journalist. I worked as a marketer. So I I did a lot of writing.

marketer. So I I did a lot of writing.

So um but I think when I started vibe coding I realized um I didn't pivot from storyteller to coder. I just discovered a new medium for storytelling and that

medium is code. So uh which goes back to my title which is code is a a medium for storytelling. So I I kind of encourage

storytelling. So I I kind of encourage everyone to tell your own story through code cuz previously you probably told it through you know uh writing or videos or

content but now if you have an opinion idea or specific taste you can turn it into a product a skill and then share on GitHub with others. Um [snorts] so

that's all I wanted to talk about. So

you can take this stack with you by going to this URL or scanning the code and all of the projects I mentioned are on my GitHub which you can see here.

Yeah, thank you.

That was fantastic, Zara. Thank you so much. Um,

much. Um, yeah. I mean, all I can say is, wow, I'm

yeah. I mean, all I can say is, wow, I'm with you, Erin. Thank you so so so so much. Truly my

much. Truly my going through the chat for questions.

Uh, yeah. Do you mind specifying which uh do

yeah. Do you mind specifying which uh do you know how handling animations?

Uh I'm not an expert in animations. I

mainly just tell it to build animation.

Like just try to describe what I want and then have it build a lot of different uh options and then see which one I like. Um

what else?

uh cloud co-work versus code. Uh I

mainly just use cloud code because I think it like it's I think codework is a subset of what cloud code can do. So I

just got into the habit of using clock I also had a change in the past few months whereas before I mostly use clock code in the terminal uh but now I mostly use

it in the Mac app. I use both claw code and codecs in the Mac app and not the terminal cuz I I think the app experience is better than the terminal [snorts]

difference between front end slides versus HTML file templates.

Uh so front end slides is like the skill you can use to make these HTML decks and then the templates are just design guidelines to make it uh look good.

Yeah. And then the in the skill the templates are structured as markdown files that specify the different designs uh before code. Do you think it makes

sense to use chat to avoid spending more tokens? I don't think it makes sense to

tokens? I don't think it makes sense to use chat first because um I actually do the brainstorming with cloud code instead of like cloud chat because

the brainstorming and the coding are kind of melted into one process. So once

you bring like once you decide on idea you kind of want cloud code to just like build a mockup or you know build some previews in chat is very very difficult

to do that. Also you want to seamlessly transition from chatting to building. So

if you built if you chatted with it in the chat um then you need to somehow port the context into code which could be troublesome. So I just prefer to all

be troublesome. So I just prefer to all do it in the code interface.

Uh what do you think about cloud design versus cloud code? Um I think cloud design is good if you have very very specific design tasks like the HTML

slice template. I made them with cloud

slice template. I made them with cloud design. Uh but they're very uh the the

design. Uh but they're very uh the the the weekly limit is the is very low. So

I tend to rent out very quickly. Um so

if you have something specific that you really need to look good like a website or UI um maybe use cloud design for that and then you can pour the code into

cloud code. But if if it's just everyday

cloud code. But if if it's just everyday stuff that uh the look doesn't matter that much then I'll just use claw code.

Do you often start new chat sessions while working on the same projects? Uh

any tips for keeping the contact seamless across sessions?

Yeah. Uh that's a good question. Um I

usually use the same session for the same project and the um sometimes I'll start new ones if I like had to close my computers or something. And then the way

you can keep the context seamless is get it to write markdown files to hand over to its future self. So at different intervals like if I just did a big

change or something, I'll just get it to write a markdown file of everything we just did so far, the pitfalls we ran into, the lessons we've learned, the

bugs, etc. And then uh it would just uh it's kind of like writing a letter to its future self. So the next time you start a new session, it will read the

file first to get all the context.

Uh when you show the YouTube transcript, can you share a bit more about the LLM you used? Um I'm using Deep Seek for

you used? Um I'm using Deep Seek for this one because it's very token intensive. So I wanted to use a cheaper

intensive. So I wanted to use a cheaper model, but you could use uh whatever model you like. Yeah.

Do you uh do you have approaches for optimizing usage I guess for tokens? Um

tokens? Um I I guess just for the easier task use use like uh codeex not cloud cuz cloud is quite expensive. Um codeex is a lot

more generous. So maybe I'll start with

more generous. So maybe I'll start with start an idea with cloud code to get the product into shape and then get the design right. But then once you're

design right. But then once you're getting to the ex execution phase like fixing bugs then you can switch to a cheaper model.

Well, I think we're at time. Yeah. Thank

you.

Thank you so much everyone.

Thank you. Uh you can if you want to stay in touch like here's my ex feel free to follow and stay in touch. Yeah.

Thank you. Bye.