- 103
- 613 188
Builder
United States
Приєднався 16 бер 2020
Go from idea to production with unprecedented efficiency
Builder is driving the next generation of front-end programming, with the only Visual Development Platform that offers an AI-powered design-to-code tool, a visual editor, and an enterprise CMS.
Builder is driving the next generation of front-end programming, with the only Visual Development Platform that offers an AI-powered design-to-code tool, a visual editor, and an enterprise CMS.
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
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
Unlocking creativity & growth through collaborative development
Переглядів 3352 роки тому
Unlocking creativity & growth through collaborative development
New features announcement: collaborative development
Переглядів 3052 роки тому
New features announcement: collaborative development
The Evolution of Content & Experience Management
Переглядів 6012 роки тому
The Evolution of Content & Experience Management
Next.js Conference - Optimally connect 3rd parties to Next.js
Переглядів 5382 роки тому
Next.js Conference - Optimally connect 3rd parties to Next.js
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.
Very well explained! ❤❤
Super powerful and look forward to using this.
could not understand how to use this site
22:34
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!
I have many problems, does anyone can help me?
And then what? How do I use it?
Then what? How do I actually use it?
Holy f*ck Steve this looks awesome! Whats the pricing model for this feature?
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 ?
This is amazing, although I see the junior front-end developer roles disappearing one AI tool at a time
when its available to all?
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
make this work
Is there anykind of opening?, i wanted to work on this 😅
this is fucking crazy bro
Nice job! Does it work with Next.js as well ?
I was hoping Nuxt was in the list, vue is close... but it's still not Nuxt. :)
Incredible stuff guys!
This is what I've been waiting for, great job KUDDOS to the whole team behind Builder
Bruh i was working in a visual editor for myself yesterday and now you did it
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?
Yes my team and I use it for our SaaS (fullstack)!
Steve, figma is limiting us right now We can't even test your tool as they are asking to pay for figma first :(
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
So you think an absolute beginner would be able to learn everything needed for css before learning how to write these prompts?
It all depends on your capacity to learn and apply new concepts.
Im going with Make This Work
you’re just mad you can’t even write that CSS without checking W3School and this guy showcased 1 hour of Feature after Feature
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
Awesome 🚀 What about pricing is it same price model now ?
Wow
THIS IS INSANE!!!
Crushing it!
I was worried you guys disappeared. Loved the original idea. But now, mind blown. EXACTLY what I was hoping for.
Seems awesome, Steve! You guys are trully fckn geniuses.
Wow, cuanta cantidad de código basura generado ufffff.... claro... la IA lo mantendrá, no importa que tan mal esté...
when i'm using my Linux machine my videos don't start and stop every 3 seconds,
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.
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
@@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.
when are we gonna see flutter conversion ?
Already exists!
@@Steve8708 Do you have any input on how to work with Builder in collaboration with Flutter? I haven't found any documentation. Thank you.
Very unfair with the developers using free version. Struggling very hard to get things aligned and page view is messed in browser.
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
does it create responsive code
FrigmAaaaaa
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.
You just chose the simplest webpage every made.
Steve is the Sean Evans of JS :)
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.
Sounds like future :-) Is that something Locofy's working?
So, the resumability is just the reconciliation done right? Resumability = Hydration optimized
So, reconciliation uses JavaScript not html??? Weird as the whole point of reconciliation is "to use existing html nodes"?
Soo, that's an explanation of the evolution process from php to resumability, right? So, hydration is also the past, right?
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 ;)