Builder
Builder
  • 103
  • 613 188
Introducing Visual Copilot 1.0: AI powered design-to-code using YOUR components
Updates to Visual Copilot, bring your own components. Coming soon features, Component Set Generation and Prompt-to-Design.
Chapters:
[00:08] Huge problem with AI tools
[00:28] Announcing Visual Copilot 1.0
[01:29] Prompt-to-design
[02:18] How does Visual Copilot learn about your design systems and components
[02:32] Install Builder’s Devtools and Component Mapping
[03:27] Component set generation
[04:27] Additional updates
Read more about the new features www.builder.io/blog/visual-copilot
Follow us on:
Twitter: builderio
LinkedIn: www.linkedin.com/company/builder-io/
Get started for free - www.builder.io/signup
Get help with questions at our Community Forum - forum.builder.io/
Developer Documentation - www.builder.io/c/docs/developers
Design to Code with Visual Copilot - www.builder.io/m/design-to-code
Speakers: Steve Sewell
Products Mentioned: Visual Copilot
Переглядів: 14 849

Відео

Figma to code - Best practices for Visual Copilot
Переглядів 6 тис.9 місяців тому
Builder's Figma to Code plugin can generate clean, responsive code from Figma designs in real time. While the plugin is designed to handle most design files effortlessly, we recognize the uniqueness of each project. Some designs might need that extra touch to ensure a seamless import. In this video, we'll share specific techniques that can optimize your designs for a smooth transition from Figm...
Turn Figma Designs Into Commerce Experiences With AI
Переглядів 3,7 тис.10 місяців тому
AI-Enabled Design to Code for Commerce Teams Watch our recorded session on AI-Enabled Design to Code for Commerce Teams. Join Builder.io's Head of Customer Engineering, Tim Garibaldi, and Product Marketing Lead, Mike Chirokas, as they dive into real-world customer use cases, demonstrating how you can harness the power of AI to efficiently transform your Figma designs into commerce experiences. ...
Use this smooth navlink transition for your next website!
Переглядів 2,7 тис.11 місяців тому
In this video, we'll explore how to create a smooth active navlink transition with HTML, CSS and JavaScript in 4 simple steps. Active Navlink Transition HTML, CSS and JavaScript Try out Builder at www.builder.io/ [00:10] Step 1: Use Visual Copilot Builder Plugin to Generate HTML and CSS [00:39] Step 2: Update HTML [00:50] Step 3: Update CSS [01:10] Step 4: Add JavaScript For more resources, vis...
Transform Figma to code with Visual Copilot
Переглядів 17 тис.Рік тому
Watch how to transform Figma to clean code using Visual Copilot. Use AI to build a new component and build a new landing page from scratch. Builder.io’s CEO, Steve Sewell, will teach you how to use AI to turn Figma files into clean code with Visual Copilot. Get a recap of what you missed during our launch and updates post-launch. In this video, Steve will teach you how to: - Use AI to build a n...
Figma to Code in One Click - How to use Visual Copilot
Переглядів 30 тис.Рік тому
At Builder.io, we’ve created Visual Copilot - an AI-powered Figma to code toolchain that leverages AI to swiftly and accurately convert Figma designs to clean and responsive code. One-click conversion Visual Copilot not only converts your Figma design into your favourite framework of choice but also generates the associated CSS code, ensuring that the stylistic elements of your design are prese...
Introducing Visual Copilot - Design to Code in a Click
Переглядів 204 тис.Рік тому
Visual Copilot: AI-powered design assistant that turns your ideas into UI Visual Copilot is a new AI tool that helps you create user interfaces and web designs just by describing what you want. Visual Copilot generates custom UI components and layouts tailored to your needs. It's like having a design partner that understands your vision and brings it to life instantly. Whether you're a develope...
Headless CMS explained in 30 seconds
Переглядів 3,1 тис.Рік тому
Explaining what Headless CMS is in 30 seconds. Content management systems (CMS) have become essential tools for efficiently managing and delivering content across various platforms. Among the various CMS options available, the concept of a headless CMS has emerged as a powerful and flexible solution. Try out Builder at www.builder.io/headless-cms [00:04] Decoupling content creation and presenta...
How To Ship Your First Personalized Web Experience
Переглядів 1,4 тис.Рік тому
Watch to learn from Builder’s Customer and Product teams members as they share common questions and challenges product and marketing team members face in personalization workflows and show how to solve them using Builder.io’s personalization capabilities. Timestamps 00:00 - How to Ship Your First Personalized Web Experience 01:46 - What we’ll cover 02:55 - Recommended Approach to Shipping Your ...
Integrate Custom Components with Next.js and Builder
Переглядів 4,2 тис.Рік тому
Guided tutorial on how to register your custom components with an integrated app. This example uses Next.js, but the process is similar for any framework. Check out the links below for other frameworks. [00:14] Intro [00:54] Registering it in your code [01:17] Creating a custom component [01:25] Using it in Builder Written instructions and code to accompany this video are in the Integrating Cus...
Composable Commerce - Personalization, Localization, and Targeting
Переглядів 2,3 тис.Рік тому
Watch Steve Sewell, Co-founder & CEO of Builder.io for an all-demo, no-pitch session showing how to compose a personalized, localized, and high-performance composable commerce experience with Builder.io, Algolia, Cloudinary, Elastic Path, Phrase, Segment, and Vercel. Use one of the integrations in this webinar Phrase: phrase.com/?Referral& Cloudinary: cloudinary.com/products/image_video_technol...
4 Approaches to Visual Editing with a Headless CMS, Compared
Переглядів 3,7 тис.Рік тому
4 Approaches to Visual Editing with a Headless CMS, Compared
Smart Targeting | Target Personalized Experiences with Your CDP
Переглядів 292Рік тому
Smart Targeting | Target Personalized Experiences with Your CDP
Integrating Next.js with Builder.io
Переглядів 11 тис.Рік тому
Integrating Next.js with Builder.io
Visually Build with AI
Переглядів 4,8 тис.Рік тому
Visually Build with AI
How to Build: Localization
Переглядів 1,7 тис.Рік тому
How to Build: Localization
How to Build: Environments
Переглядів 2,5 тис.Рік тому
How to Build: Environments
Unlocking creativity & growth through collaborative development
Переглядів 3352 роки тому
Unlocking creativity & growth through collaborative development
New Features & Capabilities / Demo
Переглядів 4852 роки тому
New Features & Capabilities / Demo
New features announcement: collaborative development
Переглядів 3052 роки тому
New features announcement: collaborative development
A New paradigm in CMS
Переглядів 1 тис.2 роки тому
A New paradigm in CMS
Visual CMS / Demo
Переглядів 11 тис.2 роки тому
Visual CMS / Demo
WTF is Visual CMS?
Переглядів 1,4 тис.2 роки тому
WTF is Visual CMS?
The Evolution of Content & Experience Management
Переглядів 6012 роки тому
The Evolution of Content & Experience Management
Build Event / Visual CMS
Переглядів 7 тис.2 роки тому
Build Event / Visual CMS
Below the fold Clock Demo
Переглядів 4132 роки тому
Below the fold Clock Demo
Resumable Applications
Переглядів 4332 роки тому
Resumable Applications
Streamable Applications
Переглядів 3782 роки тому
Streamable Applications
What is Hydration?
Переглядів 21 тис.2 роки тому
What is Hydration?
Next.js Conference - Optimally connect 3rd parties to Next.js
Переглядів 5382 роки тому
Next.js Conference - Optimally connect 3rd parties to Next.js

КОМЕНТАРІ

  • @boc_fan
    @boc_fan День тому

    I’m sorry, but builder io is a major fail. The editor sucks (especially the UI), it’s super confusing to use, and the tutorials are usually not very informative. It doesn’t integrate with platforms well at all. It wraps each component in a div provided by builder, which just screws with the styles of the component you’re using. I’ve been trying to make builder work for the past week, but I’m about to give up. I’m simply quicker programming it all myself.

  • @AlamKhan-yt9wd
    @AlamKhan-yt9wd 4 дні тому

    Very well explained! ❤❤

  • @calvinnguyen1451
    @calvinnguyen1451 6 днів тому

    Super powerful and look forward to using this.

  • @malarajagopal4871
    @malarajagopal4871 8 днів тому

    could not understand how to use this site

  • @Леонид-с5з
    @Леонид-с5з 17 днів тому

    22:34

  • @dpuerto
    @dpuerto 21 день тому

  • @wearesling1441
    @wearesling1441 24 дні тому

    This is an amazing feature! Love seeing tools like this making web development more accessible while keeping things flexible for devs. I've been exploring similar concepts recently, and it’s cool to see how Builder is setting the standard for low-code innovation. Excited to see where this space is headed!

  • @pablocesarvegavalverde6927
    @pablocesarvegavalverde6927 24 дні тому

    I have many problems, does anyone can help me?

  • @RossLemenille
    @RossLemenille 27 днів тому

    And then what? How do I use it?

  • @RossLemenille
    @RossLemenille 27 днів тому

    Then what? How do I actually use it?

  • @jakobkristensen2390
    @jakobkristensen2390 Місяць тому

    Holy f*ck Steve this looks awesome! Whats the pricing model for this feature?

  • @danielf4438
    @danielf4438 Місяць тому

    I want to start using it with my Hydrogen project. Any suggestions where to start, how to import it, what plan do I need to use, etc ?

  • @Nhensh
    @Nhensh Місяць тому

    This is amazing, although I see the junior front-end developer roles disappearing one AI tool at a time

  • @SravanKing-x1q
    @SravanKing-x1q Місяць тому

    when its available to all?

  • @_the_one_1
    @_the_one_1 Місяць тому

    THIS IS BIG! AT LEAST... even if it doesn't generate code it would be SO MUCH HELPFUL to create designs/prototypes/mockups for a new feature we want to use. For example, we can sit with the product team and come up with a really nice design based on the existing design system + components before we go into developing the Backend + Frontend. That would be REALLY helpful

  • @pickashoe7870
    @pickashoe7870 Місяць тому

    make this work

  • @kumardeepanshu8503
    @kumardeepanshu8503 Місяць тому

    Is there anykind of opening?, i wanted to work on this 😅

  • @IRS320
    @IRS320 Місяць тому

    this is fucking crazy bro

  • @felipemanhaes470
    @felipemanhaes470 Місяць тому

    Nice job! Does it work with Next.js as well ?

  • @businessoftechnology
    @businessoftechnology Місяць тому

    I was hoping Nuxt was in the list, vue is close... but it's still not Nuxt. :)

  • @JulianKovalsky
    @JulianKovalsky Місяць тому

    Incredible stuff guys!

  • @marwane144
    @marwane144 Місяць тому

    This is what I've been waiting for, great job KUDDOS to the whole team behind Builder

  • @SjarMenace
    @SjarMenace Місяць тому

    Bruh i was working in a visual editor for myself yesterday and now you did it

  • @oliver5356
    @oliver5356 Місяць тому

    Does this also support backend integrations with say a python fastapi be or any custom APIs we have? Can we buikd a full web app with this or is it more for simple websites/landing pages?

    • @matthewlal
      @matthewlal Місяць тому

      Yes my team and I use it for our SaaS (fullstack)!

  • @timlmit
    @timlmit Місяць тому

    Steve, figma is limiting us right now We can't even test your tool as they are asking to pay for figma first :(

  • @James-n5b8j
    @James-n5b8j Місяць тому

    I bet it’s easier to write few lines of CSS than learn your entire framework. Same result. I’m not a fan, just another spinning your wheels product and nothing new

    • @trainfarb
      @trainfarb Місяць тому

      So you think an absolute beginner would be able to learn everything needed for css before learning how to write these prompts?

    • @OldGamr
      @OldGamr Місяць тому

      It all depends on your capacity to learn and apply new concepts.

    • @jonloi3794
      @jonloi3794 Місяць тому

      Im going with Make This Work

    • @aiamfree
      @aiamfree Місяць тому

      you’re just mad you can’t even write that CSS without checking W3School and this guy showcased 1 hour of Feature after Feature

    • @azizabbas9916
      @azizabbas9916 Місяць тому

      did you watch the demo? this is far beyond few lines of CSS, it'll have context of your own design systems, components, and data sources

  • @loinnufilia4889
    @loinnufilia4889 Місяць тому

    Awesome 🚀 What about pricing is it same price model now ?

  • @AdminOne-hj4dt
    @AdminOne-hj4dt Місяць тому

    Wow

  • @dedovagency
    @dedovagency Місяць тому

    THIS IS INSANE!!!

  • @tom3fitzgerald
    @tom3fitzgerald Місяць тому

    Crushing it!

  • @henryburden
    @henryburden Місяць тому

    I was worried you guys disappeared. Loved the original idea. But now, mind blown. EXACTLY what I was hoping for.

  • @s1z0v
    @s1z0v Місяць тому

    Seems awesome, Steve! You guys are trully fckn geniuses.

  • @theantibeta
    @theantibeta Місяць тому

    Wow, cuanta cantidad de código basura generado ufffff.... claro... la IA lo mantendrá, no importa que tan mal esté...

  • @dantesbytes
    @dantesbytes Місяць тому

    when i'm using my Linux machine my videos don't start and stop every 3 seconds,

  • @matthewlal
    @matthewlal Місяць тому

    9:16 I thought export to code with the Builder plugin did use AI screenshots? How can you make the exports exactly match the Figma designs? I know there’s the mapping feature, but we’ve been using AutoHTML to get a near perfect translation from figma to react because the Builder plugin was using AI vision which has limitations that you point out in your blog.

    • @Steve8708
      @Steve8708 Місяць тому

      We use a custom model (not LLM vision) for the figma to code flow. We do use LLM vision in rare ish cases to augment the export though, but it’s not accurate enough for most needs

    • @matthewlal
      @matthewlal Місяць тому

      @@Steve8708 Oh I see! I tried again with some components in our design system, we have a layer with ‘background: linear-gradient(…)’ and it doesn’t translate even though it’s in the Figma layer.

  • @meetshinde
    @meetshinde Місяць тому

    when are we gonna see flutter conversion ?

    • @Steve8708
      @Steve8708 Місяць тому

      Already exists!

    • @jankubr5597
      @jankubr5597 Місяць тому

      @@Steve8708 Do you have any input on how to work with Builder in collaboration with Flutter? I haven't found any documentation. Thank you.

  • @muhammadibrar2263
    @muhammadibrar2263 Місяць тому

    Very unfair with the developers using free version. Struggling very hard to get things aligned and page view is messed in browser.

  • @muhammadibrar2263
    @muhammadibrar2263 Місяць тому

    It does not create correct code that work exactly as design. It produces a lot of issues. we wish you to create a simple project

  • @pranavkumar1000
    @pranavkumar1000 Місяць тому

    does it create responsive code

  • @moonfrommoon1866
    @moonfrommoon1866 Місяць тому

    FrigmAaaaaa

  • @philippe8742
    @philippe8742 2 місяці тому

    The tool seems amazing, the problem is that the documentation seems to be a mess without clear steps on what to install and how. I'll keep looking though but that would be great to improve the doc.

  • @Zeeman_gaming
    @Zeeman_gaming 3 місяці тому

    You just chose the simplest webpage every made.

  • @thomasdeutsch3748
    @thomasdeutsch3748 3 місяці тому

    Steve is the Sean Evans of JS :)

  • @erikswanson3441
    @erikswanson3441 3 місяці тому

    the only thing i have an issue with is your pricing model with page views. I dont think that u should, pretty much, get continuous pay based on page views. Its a little bit excessive.

  • @evraya1
    @evraya1 4 місяці тому

    Sounds like future :-) Is that something Locofy's working?

  • @evraya1
    @evraya1 4 місяці тому

    So, the resumability is just the reconciliation done right? Resumability = Hydration optimized

  • @evraya1
    @evraya1 4 місяці тому

    So, reconciliation uses JavaScript not html??? Weird as the whole point of reconciliation is "to use existing html nodes"?

  • @evraya1
    @evraya1 4 місяці тому

    Soo, that's an explanation of the evolution process from php to resumability, right? So, hydration is also the past, right?

  • @tebesvet
    @tebesvet 4 місяці тому

    The quality of the generated code has nothing to do with a language model level. Writing good HTML/CSS sometimes requires you to think like a human and create solutions that don't exist in the previous projects you had to deal with. That's why the code generated by AI is almost always of poor quality. It can look relatively good but release it in production and try it out on real users ;)