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.
@_jeff.medeiros10 ай бұрын
Your script was the thing I actually liked the most, nice content Jack!
@ВладиславВитковский-п8н10 ай бұрын
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 .
@tebesvet2 ай бұрын
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.
@Dylan_thebrand_slayer_Mulveiny10 ай бұрын
Figma is so damn good. We replaced Photoshop with it years ago and it's made our development process SO much better.
@lutfiikbalmajid5 ай бұрын
who use photoshop nowadays? we replaced Photoshop to Figma, and Illustrator & PPT with Canva 😅
@tebesvet2 ай бұрын
The video is not about Figma.
@Dylan_thebrand_slayer_Mulveiny2 ай бұрын
@@tebesvet You need to read the title of the video again.
@tebesvetАй бұрын
@@Dylan_thebrand_slayer_Mulveiny you need to re-read it as well.
@Dylan_thebrand_slayer_MulveinyАй бұрын
@@tebesvet "Visual Copilot Converts Figma Mocks to React Fast and Accurately" Do you not see the word Figma in that title?
@darenbaker456910 ай бұрын
This is awesome sharing this tomorrow with the team, thanks so much.
@anisdragan10 ай бұрын
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!
@jherr10 ай бұрын
Thanks!
@ujolmaharjan201010 ай бұрын
Omg I'm currently converting figma mockup to react on my current job.😅
@jherr10 ай бұрын
It's free! Give it a go!
@axelsomerseth5 ай бұрын
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
@last.journey10 ай бұрын
You would still have to turn it into dynamic code and that is the point actually
@mostafahamid947910 ай бұрын
nice one, really handy
@romansernato652610 ай бұрын
looks like a good solution for nocode like bs enthusiasts
@VLADICA94KG9 ай бұрын
Can you create a video on setting up the terminal to look like yours? It is useful and advanced. Thanks for the great content!
@gorbulevsv10 ай бұрын
Thanks, cool!
@letmeplaygames246610 ай бұрын
great video thanks
@tebesvet2 ай бұрын
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.
@thith_thin10 ай бұрын
Super cool 🎉
@BeeBeeEight10 ай бұрын
I'm surprised Steve Sewell hasn't thumbs up-ed this video yet 😅
@sharqyyem10 ай бұрын
Amazing job as always 👏 thanks for sharing. Can make it generate components if it was created in Figma.
@jherr10 ай бұрын
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.
@durgeshjhalwa663910 ай бұрын
🎉🎉🎉
@JustThinkingAboutIt-i5k5 ай бұрын
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?
@jamesfoley442610 ай бұрын
Jack, what's your go to eccom stack? Have you ever thought about a video series on the JackStack EccomPack to make a FatStack?
@jherr10 ай бұрын
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.
@zb423810 ай бұрын
🕶Keep up Jack
@창완-f3m9 ай бұрын
Thanks Jack for this video!! what is the cli auto complete tool??
@jherr9 ай бұрын
Fig.
@davestockley817410 ай бұрын
they took ma jeeeeerb
@jherr10 ай бұрын
My guess is that there is a lot more to your job than laying out HTML and CSS.
@davestockley817410 ай бұрын
True true. But it's all billable hours
@anubisai10 ай бұрын
@@davestockley8174 trash approach to life
@darkmift7 ай бұрын
Use skeleton loaders its better UI and you don't need to worry about manipulating the resources.
@nickname12332110 ай бұрын
Great, time to look for a new job.
@jherr10 ай бұрын
Nah. Still tons do to AFTER the conversion. And the conversions are never perfect with any of the tools I've tried.
@yuur144010 ай бұрын
The script not work for me :( TypeError: Cannot read properties of null (reading '1')
@muhammaddanielzuhad64910 ай бұрын
nice content, what theme do you use sir??
@jherr10 ай бұрын
Night Wolf [black] wth Jetbrains Mono
@muhammaddanielzuhad64910 ай бұрын
@@jherr thankss
@bruv102910 ай бұрын
Do you think development is a good career for young people, would it be viable in the near future?
@jherr10 ай бұрын
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.
@hermann9510 ай бұрын
Seems like it's best for building basic components with it, to get a baseline and help with the boring stuff.
@djcardwellai10 ай бұрын
Keep telling yourself that. Our jobs are at risk 100%
@hermann9510 ай бұрын
@@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.
@nickwoodward81910 ай бұрын
@@djcardwellai they really aren't, unless you're piss poor at your job.
@Rensoku61110 ай бұрын
@@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
@brimmedHat10 ай бұрын
rly like those shoes wtc
@Crevulus10 ай бұрын
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?
@jherr10 ай бұрын
you could use it at a micro level to generate the code and then refactor that code into a library component.
@ZlatkoIliev-s4j10 ай бұрын
Oh no! We are done! AI will take our jobs now :(
@samsuriahmad212810 ай бұрын
Fast for slicing 😂😂😂❤
@pavanbhat9210 ай бұрын
The colour theme looks pretty good. What's it call ?
@jherr10 ай бұрын
Night Wolf Black with JetBrains Mono.
@pavanbhat9210 ай бұрын
@@jherr Thanks
@draco-qr7ye10 ай бұрын
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
Hello dear Jack, How can contact you directly , I have some question and need consultant .
@jherr10 ай бұрын
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.
@saeedkhazalvand482110 ай бұрын
@@jherr it is OK. ❤
@lukasoliveira738 ай бұрын
figma is awesome
@anaslaraki10 ай бұрын
this thing is gonna replace devs soo
@m-ok-637910 ай бұрын
AI will be designing and coding 60-70% of the work in 2-3 years.
@Zechey10 ай бұрын
probably works the best with regular react, tried to convert my mobile app figma into react-native components and only poop came out
@jherr10 ай бұрын
i don't think it's made for that, at the moment.
@waleedsharif61810 ай бұрын
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)
@greendsnow10 ай бұрын
Where does Web dev go?
@jherr10 ай бұрын
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.
@greendsnow10 ай бұрын
@@jherr You'll do it just once and AI will copy it instantly. You can only be so creative every time...
@davestockley817410 ай бұрын
@@jherr since when has building UI been grunt work... this stuff scares the crap out of me.
@jherr10 ай бұрын
@@davestockley8174 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.
@IvanRandomDude10 ай бұрын
To using 3rd party and SaaS solutions
@djcardwellai10 ай бұрын
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.
@nickwoodward81910 ай бұрын
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.
@mattweihl10 ай бұрын
This is KZbin, not X/ Twitter. You don't need to be a bluecheck Elon reply guy here.
@Rensoku61110 ай бұрын
@@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
@nickwoodward81910 ай бұрын
@@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
@djcardwellai10 ай бұрын
@@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?
@phoneywheeze10 ай бұрын
is it free?
@jherr10 ай бұрын
The fast mode is free, the Quality mode is pay for.
@humbertoventura13445 ай бұрын
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.
@reefgb7710 ай бұрын
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.
@jherr10 ай бұрын
That's why I went on to talk about componentization as something that is left for the UI developer to do.
@alltechneeds_com10 ай бұрын
Adobe came out with this like 10 yrs ago with jsx scripting language in photoshop