first time coming across one of your video and is pretty cool. Not only the tool you are using that is awesome, but also the explanation is straight to the point and very clear!!
This is actually pretty good. The issue with most tools that generate code is the semantic aspect of it but the "Quality" mode is actually alright. Gives you a good starting point.
This mock-up is veeery simple, first of all. And come one guys, already one year ago it was able to create working apps by photo. I do not underestimate AI and it will be able to write code ( and that is 20% of my working day), but if we are talking about complexity and real problem solving it is nowhere nearer to replace even a copywriter or content creator (at least for now😂). And I will let myself a chance to predict the future of it and say that it’s going to reach it plato in a year or two. Soon we won’t be frustrated but happy that it is here .
Yeah, you're completely right. These tools create garbage code not possible to maintain and scale. Also, I'm pretty sure Pagespeed Insights scores would be around 20% if you build a website with an AI tool.
Hi Jack, fantastic work, Your explanation and insights were really helpful. I noticed a slight issue with some background noise, particularly noticeable on the right audio channel during quieter moments. It's a minor thing but thought to mention it in case it's helpful for future videos. Thanks for the great content!
When I design in Figma, I create mobile, tablet and desktop frames. I may use one component for say ‘pricing’ and it has 3 variants. I use modes and variables to make the right variant work for each frame size i.e. mobile, tablet, desktop. How do I use Visual Copilot to use my responsive work in Figma?
Good question. I don't really have one. I looked at Saleor a while back, and Shopify of course. Normally the choice is already made. If I do merch it'll probably be either the merch vendor or Stripe.
Is this tool useful for generating code from component library designs? I quite often get designs with, for example, a button that can have a hover state, optional icon, optional text, disabled state etc. Does anyone know if this tool can generate code/styling based on those facets?
Hi I use the windows system and I cannot run the script with the given command is there any specific command for windows THank you cat src/app/page.tsx | node scripts/download-images.js | pbcopy
My DMs on Twitter and Discord are open, but please do me a favor and start the conversation with "I'm so and so from the comments, wanted to talk with you about consulting." If you hit me up with just "Hello", I'm unlikely to answer.
I've just tried out this plugin (Builder io) and another one (Figma to Code) on a relatively simple Figma design. To be honest the results were awful. Figma to Code was completely useless as it hardcoded lots of values with Tailwind JIT notation. I'm not even sure it would speed up the development process somehow because most of the code would need to be thrown away and written from scratch. These tools make a bad precedent though making employers believe that writing HTML/CSS is super simple work that even a robot could do.
@@djcardwellai I can only comment on the stuff that I see right now, and that's definitely not threatening. The future might look different, of course.
@@nickwoodward819that's cope... even if you're good at your job you're still at risk in the long term because AI will keep improving exponentially for many years to come
To actually develop the actual code that runs the page, connects to the services, does the responsive work, internationalization, etc. This just gets a lot of the grunt work out of the way. And maybe not even all the grunt work if the design is tough.
@@magicsponjamin since when has "building UI" consisted of simply copy and pasting CSS values from Figma into VS Code? that's just a tiny fraction of "building UI" and I'm happy to see it automated since it can make it way faster to build UIs. "Building UI" to mean means way more than just styling some divs, it means adding interactivity, making it data driven from services, adding internationalization, accessibility, animations, routing, the list goes on and on. The demo pages that I showed here are only 20% done at best, probably less since the responsiveness is good, but probably far from what the customer would actually want. So, yeah, I consider that first part of copy and pasting values from Figma to VS Code trying to make it as close to "pixel perfect" as possible very much grunt work.
Let's be honest, if AI keeps progressing at this rate it won't be long before we all have to look for new careers. At the end of the day, we are paid problem solvers, and it's okay if we have to solve new problems. I'm actually excited for it. Also, it's time for us to accept that the Cyber Truck is real. As much as we all wanted to pretend like it would never happen and that Elon is a scam, turns out we were wrong. It's easy to doubt, harder to believe.
you've not used AI for any significant coding have you? it's a useful tool, it's no where near a replacement for devs. also, the cybertruck has been "real" for fucking ages. it's the fact that it's a joke that's the problem.
@@nickwoodward819 Common mistake: OP is talking about the future, not the present. AI in the future (less than 7 years from now) will definitely replace the vast majority of software engineers becaue it's a pretty easy job for an AI to do. We're not nurses or air conditioner repairmans. Software engineering is one of the areas with highest exposure to automation
@@Rensoku611 I understand what the OP was talking about, he said "if it progresses at this rate it won't be long before we all have to look for new careers", and I replied that it's "nowhere near a replacement for devs" - the implication being that it *will* be long because people have underestimated what it takes to write quality code. And LLMs by their very nature are not a suitable replacement for software engineers writing that code. They're not accurate or consistent enough, and who knows if they ever will be. They're a useful tool for suggestions, but not something I'd let stink up my code base without checking every line. And it's not going to be something embraced by project managers either. No one is risking their neck on an LLM with even the faintest chance of hallucinating
@@nickwoodward819 at least you've progressed to calling it a useful tool. About a year ago you were telling yourself it is a joke. Sounds like you're pretty butt hurt about the cyber truck delivery event tomorrow. Which part of the cyber truck is a joke?
Why dont you just take photo of your Figma design and give that image to ChatGpt 4 and ask it to make it website and give html and css for it (i did it and it works very fast and was accurate)
Locofy is a piece of shit. It shows the design adaptive on its simulator but on Xcode its all mess up. I can't belive they actually made a crappy plugin and call it a good.
Cool ai tool but too much garbage HTML. This render is huge, foiled with HTML tags (what's the idea of using react without custom components), unreadable, not reusable, looks like spaghetti code in vanilla. But the idea behind it is good.
first time coming across one of your video and is pretty cool. Not only the tool you are using that is awesome, but also the explanation is straight to the point and very clear!!
This is actually pretty good. The issue with most tools that generate code is the semantic aspect of it but the "Quality" mode is actually alright. Gives you a good starting point.
Your script was the thing I actually liked the most, nice content Jack!
This is awesome sharing this tomorrow with the team, thanks so much.
This mock-up is veeery simple, first of all. And come one guys, already one year ago it was able to create working apps by photo. I do not underestimate AI and it will be able to write code ( and that is 20% of my working day), but if we are talking about complexity and real problem solving it is nowhere nearer to replace even a copywriter or content creator (at least for now😂). And I will let myself a chance to predict the future of it and say that it’s going to reach it plato in a year or two. Soon we won’t be frustrated but happy that it is here .
Yeah, you're completely right. These tools create garbage code not possible to maintain and scale. Also, I'm pretty sure Pagespeed Insights scores would be around 20% if you build a website with an AI tool.
Hi Jack, fantastic work, Your explanation and insights were really helpful. I noticed a slight issue with some background noise, particularly noticeable on the right audio channel during quieter moments. It's a minor thing but thought to mention it in case it's helpful for future videos. Thanks for the great content!
Thanks!
Great content. I will try it out next week. It will help me a lot with the HTML of a platform that I am building
🕶Keep up Jack
Figma is so damn good. We replaced Photoshop with it years ago and it's made our development process SO much better.
who use photoshop nowadays? we replaced Photoshop to Figma, and Illustrator & PPT with Canva 😅
The video is not about Figma.
@@tebesvet You need to read the title of the video again.
@@Dylan_thebrand_slayer_Mulveiny you need to re-read it as well.
@@tebesvet "Visual Copilot Converts Figma Mocks to React Fast and Accurately"
Do you not see the word Figma in that title?
Can you create a video on setting up the terminal to look like yours? It is useful and advanced.
Thanks for the great content!
You would still have to turn it into dynamic code and that is the point actually
Omg I'm currently converting figma mockup to react on my current job.😅
It's free! Give it a go!
looks like a good solution for nocode like bs enthusiasts
nice one, really handy
Thanks, cool!
Amazing job as always 👏 thanks for sharing.
Can make it generate components if it was created in Figma.
Yeah, that's the whole point. You could generate block by block to create components. Or do whole pages as I did here. Your call.
great video
thanks
Super cool 🎉
When I design in Figma, I create mobile, tablet and desktop frames. I may use one component for say ‘pricing’ and it has 3 variants. I use modes and variables to make the right variant work for each frame size i.e. mobile, tablet, desktop. How do I use Visual Copilot to use my responsive work in Figma?
🎉🎉🎉
Thanks Jack for this video!!
what is the cli auto complete tool??
Fig.
Jack, what's your go to eccom stack? Have you ever thought about a video series on the JackStack EccomPack to make a FatStack?
Good question. I don't really have one. I looked at Saleor a while back, and Shopify of course. Normally the choice is already made. If I do merch it'll probably be either the merch vendor or Stripe.
rly like those shoes wtc
Great, time to look for a new job.
Nah. Still tons do to AFTER the conversion. And the conversions are never perfect with any of the tools I've tried.
they took ma jeeeeerb
My guess is that there is a lot more to your job than laying out HTML and CSS.
True true. But it's all billable hours
@@magicsponjamin trash approach to life
I'm surprised Steve Sewell hasn't thumbs up-ed this video yet 😅
Fast for slicing 😂😂😂❤
Is this tool useful for generating code from component library designs? I quite often get designs with, for example, a button that can have a hover state, optional icon, optional text, disabled state etc. Does anyone know if this tool can generate code/styling based on those facets?
you could use it at a micro level to generate the code and then refactor that code into a library component.
Hi I use the windows system and I cannot run the script with the given command is there any specific command for windows THank you
cat src/app/page.tsx | node scripts/download-images.js | pbcopy
MODEL UBUNTU
```bash
cat src/app/page.tsx | node scripts/download-images.js | xclip -selection clipboard
```
MODEL WIN POWERSHELL (Not Tested)
```powershell
Get-Content .\src\app\page.tsx | node .\scripts\download-images.js | Set-Clipboard
```
The script not work for me :(
TypeError: Cannot read properties of null (reading '1')
Use skeleton loaders its better UI and you don't need to worry about manipulating the resources.
Do you think development is a good career for young people, would it be viable in the near future?
As with any career you have to adapt constantly. So if you are willing to do that, then I do think there are careers in tech long term.
Hello dear Jack,
How can contact you directly , I have some question and need consultant .
My DMs on Twitter and Discord are open, but please do me a favor and start the conversation with "I'm so and so from the comments, wanted to talk with you about consulting." If you hit me up with just "Hello", I'm unlikely to answer.
@@jherr it is OK. ❤
I've just tried out this plugin (Builder io) and another one (Figma to Code) on a relatively simple Figma design. To be honest the results were awful. Figma to Code was completely useless as it hardcoded lots of values with Tailwind JIT notation. I'm not even sure it would speed up the development process somehow because most of the code would need to be thrown away and written from scratch. These tools make a bad precedent though making employers believe that writing HTML/CSS is super simple work that even a robot could do.
nice content, what theme do you use sir??
Night Wolf [black] wth Jetbrains Mono
@@jherr thankss
figma is awesome
Seems like it's best for building basic components with it, to get a baseline and help with the boring stuff.
Keep telling yourself that. Our jobs are at risk 100%
@@djcardwellai I can only comment on the stuff that I see right now, and that's definitely not threatening.
The future might look different, of course.
@@djcardwellai they really aren't, unless you're piss poor at your job.
@@nickwoodward819that's cope... even if you're good at your job you're still at risk in the long term because AI will keep improving exponentially for many years to come
The colour theme looks pretty good.
What's it call ?
Night Wolf Black with JetBrains Mono.
@@jherr Thanks
I will wait till some app does everything for me
Where does Web dev go?
To actually develop the actual code that runs the page, connects to the services, does the responsive work, internationalization, etc. This just gets a lot of the grunt work out of the way. And maybe not even all the grunt work if the design is tough.
@@jherr You'll do it just once and AI will copy it instantly. You can only be so creative every time...
@@jherr since when has building UI been grunt work... this stuff scares the crap out of me.
@@magicsponjamin since when has "building UI" consisted of simply copy and pasting CSS values from Figma into VS Code? that's just a tiny fraction of "building UI" and I'm happy to see it automated since it can make it way faster to build UIs. "Building UI" to mean means way more than just styling some divs, it means adding interactivity, making it data driven from services, adding internationalization, accessibility, animations, routing, the list goes on and on. The demo pages that I showed here are only 20% done at best, probably less since the responsiveness is good, but probably far from what the customer would actually want. So, yeah, I consider that first part of copy and pasting values from Figma to VS Code trying to make it as close to "pixel perfect" as possible very much grunt work.
To using 3rd party and SaaS solutions
is it free?
The fast mode is free, the Quality mode is pay for.
probably works the best with regular react, tried to convert my mobile app figma into react-native components and only poop came out
i don't think it's made for that, at the moment.
Let's be honest, if AI keeps progressing at this rate it won't be long before we all have to look for new careers. At the end of the day, we are paid problem solvers, and it's okay if we have to solve new problems. I'm actually excited for it. Also, it's time for us to accept that the Cyber Truck is real. As much as we all wanted to pretend like it would never happen and that Elon is a scam, turns out we were wrong. It's easy to doubt, harder to believe.
you've not used AI for any significant coding have you? it's a useful tool, it's no where near a replacement for devs.
also, the cybertruck has been "real" for fucking ages. it's the fact that it's a joke that's the problem.
This is UA-cam, not X/ Twitter. You don't need to be a bluecheck Elon reply guy here.
@@nickwoodward819 Common mistake: OP is talking about the future, not the present.
AI in the future (less than 7 years from now) will definitely replace the vast majority of software engineers becaue it's a pretty easy job for an AI to do. We're not nurses or air conditioner repairmans. Software engineering is one of the areas with highest exposure to automation
@@Rensoku611 I understand what the OP was talking about, he said "if it progresses at this rate it won't be long before we all have to look for new careers", and I replied that it's "nowhere near a replacement for devs" - the implication being that it *will* be long because people have underestimated what it takes to write quality code.
And LLMs by their very nature are not a suitable replacement for software engineers writing that code. They're not accurate or consistent enough, and who knows if they ever will be. They're a useful tool for suggestions, but not something I'd let stink up my code base without checking every line. And it's not going to be something embraced by project managers either. No one is risking their neck on an LLM with even the faintest chance of hallucinating
@@nickwoodward819 at least you've progressed to calling it a useful tool. About a year ago you were telling yourself it is a joke. Sounds like you're pretty butt hurt about the cyber truck delivery event tomorrow. Which part of the cyber truck is a joke?
Oh no! We are done! AI will take our jobs now :(
this thing is gonna replace devs soo
Why dont you just take photo of your Figma design and give that image to ChatGpt 4 and ask it to make it website and give html and css for it (i did it and it works very fast and was accurate)
AI will be designing and coding 60-70% of the work in 2-3 years.
Locofy is a piece of shit. It shows the design adaptive on its simulator but on Xcode its all mess up. I can't belive they actually made a crappy plugin and call it a good.
Cool ai tool but too much garbage HTML.
This render is huge, foiled with HTML tags (what's the idea of using react without custom components), unreadable, not reusable, looks like spaghetti code in vanilla.
But the idea behind it is good.
That's why I went on to talk about componentization as something that is left for the UI developer to do.
Adobe came out with this like 10 yrs ago with jsx scripting language in photoshop