Thank you again, everybody.

Introduction

Why DevPunks built a playful alternative to boring lead forms

So today I will talk to you about a tool that we built for our self. So yeah, as it was already told, I'm Simone, I'm the founder and the CTO of DevPunks, but mainly software engineer.

year so and we in our company we try to use AI to solve problems and to also to have fun so in we basically work with a lot of software developers because we are a sort of freelance collective so we meet a lot of developers we go to a lot

of events and we try to to solve a boring problem with fun solution because everybody hates form lead is boring nobody wants to fill forms and give your data for no reason so we instead of just asking for emails and yeah in standard

way we just played around with the AI and we created this this avatar we call it avatar tool I will show you how it works and then I will show you what's going on behind the scenes at AI level okay so basically when you reach us

there is a form that there is a flow that you can complete and then we create a DevPunk version of you so with a card with your physical characteristics and there is some matching going on but yeah I will show you okay so thanks thanks so

Live Walkthrough: “Form 2.0” Avatar Experience

So the first thing, we will just ask you a few questions about yourself. So describe your typical approach when cooking a new dish.

So I call the delivery, yeah, okay, Ikea furniture to assemble, what do you do about it, okay, I call the neighbor, okay, then organize trip, yeah, of course, obviously, I ask GPT, GPT,

well then as I promised that yeah of course there is some personization going on so there is some selfie so we are GDPR compliant by the way but I won't tell you where I saw the image at some point there is a lead collection for of course because we give some beautiful experience to the user but also we ask

ask for data so yeah let's enter a fake email so I cannot receive spam from you okay that punks okay okay yeah okay thank you so behind the scenes as I was

was telling you uh we are trying to match yourself from a set of avatars that are we we created a full set of uh famous avatars between people relevant in informatics and similar stuff so

that's my unique card okay as you can see that's me and i was matched with the linus torward i guess you you already know him and there is okay some imagine like a Pokemon card or a magic card so this is something really engaging with young people and

with developer with nerds in general and so we have some tags yeah rule follower abstractions and there is a unique description of myself and what I have in in common with the avatar.

And so this is the result of this Form 2 .0 process.

I just wanted now, I want to show you, because I'm a practical guy, and I'm also an engineer, but I'm also curious.

And if I were in your place, I would be curious to see what's going on under the scene. actually with the AI and LLMs is not that difficult so I just want to show you how easy it is to create an experience like that so first of all so

Under the Hood: Observability, Prompts, and the LLM Workflow

what happened during this process yeah I will show you exactly observation observation tools in software engineering we love tools that can help us debug the application and understand what's going on so those kind of of tools are used a lot of times to observe the application,

if it's healthy, if it's slow, if it's fast, what's going on. OK.

Step 1 — AI matching on personality axes

So in here, I will focus on the LLM part. This is the first step. The first step, as I mentioned, is an AI matching.

Because there is this set, I should understand which is the most relevant match to yourself. So this is a prompt,

a part of the system prompt, yeah you're a person expert in personal analyst blah blah blah, this is when you hear about the prompt engineering, this is prompt engineering. So sorry about the ugly aspect but this is actual how it works and this is production stuff.

So as you can see the questions in here Here we have the questions and the answers. We expect the LLM to give as an output some scores. How do we score such things?

every child character has some personality axis and what we achieve through AI is to calculate the value for each one of those so in the output for example I have speed 58 abstraction 43 and so so on okay and so and how does it work really we have this is our back office

where we have the set of avatars okay each one of those have some characteristics some something that help us to do this matching to match yourself with the best matching one. So for this example Linux Tower has the speed 49, abstraction 44, etc.

There are some information about that as well as, sorry I have a tedious sharing bar here, just a second okay as well as we we have also a definition of a matching questionnaire

okay because we we need to we if you tell the LM how to do seeing things and how to evaluate things you are more in control of the process so you can guide him better okay so we define like we call it a matching model so we define what speed is and yeah of course an LLM knows what speed is but we we guide him on how to to to score it precisely for our purpose we give examples AI and

LLMs work very good with examples so for example this is the speed axis because it's we evaluate speed versus safety okay and those are examples so level 0 is like neutral level 25 yeah it's a safety level there are some example I follow the recipe step by step yeah and for example 1 per 100 yeah extreme speed I invent recipe yeah wherever never mind and so in this thing is is like the

The source combined with the user data and with the answers is what makes the score working. OK. This is the first step of the matching.

But there are other things going on. So let's see. After that, we have, OK, no problem.

Step 2 — Extracting physical traits from a selfie

yeah after the the questionnaire is submitted there is also a step where we have to process your avatar and by processing yeah I mean process your selfie by processing your selfie it means extracting the physical

characteristics again prompt engineering so you are an expert on analyzing human faces in photos extracted detail text or description blah blah blah and yeah this This is the actual question we want to answer.

So we want to understand from the picture, for example, the gender, some hair characteristics, hairstyles, hair density, whatever, facial hair, if I have beard or not, accessories, and stuff like that.

So this is the answer. Okay, a male in his late 20s to early 30s, yeah, thank you Gemini, reading headlight short, accessory guys non -visible and stuff like that.

Those are textual description for every physical characteristics that is then used to build the actual avatar.

Step 3 — Generating the final avatar image

And after that there is one last step of avatar our generation so the actual image generation i want to also to show you something because usually yeah people ask okay how i the the bug thing i do i debug ai okay in here for example

1you can show also how much time did it take how much how many tokens did it use that single prompt so it's very useful to understand also performances so uh when it's precise or not the answer yeah I can use it those those details of the the input and the output to to double -check is it slow is it fast is it consuming too many tokens those

observability tools are very useful okay and then yeah this is for the for the image generation we use the the Gemini 2 .5 flash image model aka nano banana it It was life -saving because it came out when we were developing that,

and it has really good performances, and we achieved very good results that we didn't achieve with other models. And so this is the prompt passed to the AI for building the final image.

So generate a customized avatar, start with providing base image of the skull charter because we always have that base image that I show you. and but add with the yeah add with the details that I told you yeah gender age twenties thirties maybe it's not me maybe somebody that scanned the QR

before they don't know yeah and then it used that to to actually create the image what we we we discover yeah again I go back to to the images to the set of of avatars.

The AI is good at adding things, not very good to removing things. So for that reason, this is like the main charter avatar.

But for generation, we used like a white label version, because we noticed if you're bald, the other image had hairs. It was creating weird thing in the head,

because the AI didn't know that this was behind the hairs okay so we we face the problem using those white label white sheet white bar whatever avatars okay and that gave us a really good very good result I won't take too long I just want

Performance and cost: tokens, latency, and cents per run

to show you two more things you may ask how much does it cost yeah and the And the answer is, yeah, it's very, very cheap because as you can see, for example, those are the prompts about matching or in general text generation. As you can see, it's fraction of cents, 0 .0001, yeah, it's, yeah, I won't even notice in a monthly bill that. that.

Just the image is a little less cheaper, but in order for creating an image, it took almost four cents.

So with just a bunch of dollars, we can face a whole day in our events. So it's very cheap, actually. So everybody can use such technology, and yeah, really

Turning Fun into a Pipeline: Classifying Leads and Triggering Actions

affordable at all one last thing because in the end we are a company we are funny we're nice but we're also evil and as evil companies do we process data because so we we also use ai to

to activate that data so as i told you we are a company that try to match developers with teams and projects and this is a sample pipeline this is not structural our pipeline that is running in production but it's something like that we can use for such tools or you can even link to a contact form it can it is activated every time we have an inbound so we make inbound

fun and then we activate the data we classify the contact because for us it's relevant to understand if you are a developer or if you are not a developer actually there is also a sales pipeline but yeah sales is too boring now and so if it's if you're a developer it's maybe even more relevant to understand if we have a matching opportunity or not okay

so in case we have we can take different actions so this is I wanted to show you like a real use case of how to use AI to actually make decision do stuff so So matching, actions, and yeah, generation.

So this is something that we really like. It's a ground that we are exploring. And we think that even with today's technology, even if the AI provider stop working,

we can already do great things. Yeah.

The “Recipe” (Tech Stack) to Build It

Just a small recap of, let's say, our recipe. yeah, what we use to cook this product, this recipe, yeah.

One multimodal, AI model, API key multimodal, because the LLM we used are both capable of processing image, both as input, as an output, as well as text.

A full stack JavaScript framework, in our case, Next .js, and yeah, regarding the AI model, we use OpenRouter,

which is a platform where you have all the main provider distributed by this this provider it give you a really similar price to the to the original providers but really rate limits very high so that you can really use in production we even with many many users without hitting any limits because if

you are if you use directly the open AI or the Gemini API you could have lower rates if you don't have like enterprise agreement wherever so we totally bypass that with the open router it's a really good solution we use like yeah an

headless CMS the the back -office that we saw before mainly used by as a repository for the charters so yeah we for CMS yeah there is of course AI is a technology but it works well also with other technology yeah CMS is that is like an old technology but still relevant as as you can imagine we can

use it to to even empower AI so that we could load every new avatar set and new tools a new matching model without changing anything and any 10 for the

the automation, of course, so you can do great stuff with N8n. We like using N8n for, like, we are, as I mentioned, software developers, we like clean code, but a lot of times those kind of sales pipeline,

those kind of pipelines will guide you through dirty code, dirty pattern integration, because those pipelines are usually not very clean, not very, they change often,

So we use NATN in order to take that ugly component away from the clean code. And also, we allow also sales and marketers to change by themselves without touching our system,

because we are very jealous of our code.

But we also use, yeah, we write our code as well with the cloud code. We do not vibe code, but I mean, AI coding, yeah, AI coding and the tools combined with engineering skills

is for us is really life -saving and really empowering and yeah the last piece is like CRM in our case we use notion as CRM it's not really CRM but conceptually we use it like CRM but you can use this is our recipe but it's just

a proof of concept to what you can do you can change ingredients change build build whatever you want it's really that simple it's really also cheap so nothing is blocking us to build good things of course as we saw before big companies that like a huge infrastructure are maybe slower and maybe there is some

more difficulty on using those things in a complex system of course obviously is building new stuff over those technology is very very fast and easy so but yeah

Conclusion

we're a startup and we take advantage of it of course thank you