I think I just saw the future.

A new tool called Bifrost can turn any Figma design into code instantly using AI. The alpha was just released yesterday, and already Twitter is blowing up.

Introducing Bifrost, a tool that uses AI to turn anything from Figma into clean React code automatically.

How it works:
– Generates usable code for anything in Figma
– Drops the code directly into your code editor
– Learns how to structure code just like yours

1/4 pic.twitter.com/F0X2hoQ57z
— sathaxe ✨ (@sathaxe) February 13, 2023

Bifrost lets you take a graphical design for your product and make it real.

First, you design the appearance of your app using Figma, the ubiquitous design tool. Next, you turn it into React code with a couple of clicks.

It even learns how your team likes to code to make sure its output matches your style.

The average front-end web developer makes $152,000 a year. If Bifrost can make them even 20% more productive, that’s worth $30,000 a year.

Per person.

Today, Bifrost can create web app front-ends. In the future, Bifrost and tools like it may produce all forms of software.

Perhaps most amazing is the tiny team that produced this huge advance. Bifrost appears to have just four engineers.

I’m very excited about what a tool like Bifrost can do! Many people have awesome ideas for products but don’t know how to code them.

Removing that barrier could unleash a whole new wave of entrepreneurs.

What do you think of Bifrost? Leave a comment and let me know!

Snipt: Search Engine for Code Snippets

We are excited to announce the release of snipt.dev, a search engine to help engineers find safe and reliable code patterns. Code Snippets are very popular for developers but the ecosystem of tools is very fragmented and not unified. Developers are often looking for snippets to use and spend hours searching on Google, StackOverflow or Sourcegraph.

To help developers find the right code snippet, we built snipt.dev: a one-stop shop for searching for code you can reuse.

But first, what is a Code Snippet?

A Code Snippet is a block of code you can share and reuse. By reusing safe and proven code, you not only improve your productivity but you also make sure you always import the correct code and are not missing anything (e.g. missing argument, not checking error code or exceptions).

By using rock-solid, proven code, you avoid many common pitfalls and mistakes developers already did. You find the correct block of code to reuse to focus on what matters: shipping code and improving a product.

Why use Code Snippets?

Writing code is quite complex and requires having a really good knowledge of the language and libraries you are using. Even with languages with lots of abstractions, it is often hard to follow the code path and understand how code actually works! Sharing and using vetted code patterns directly in your IDE maximizes your productivity but also make sure you are using the correct code block for your job!

So now, what is snipt.dev?

snipt.dev is a new platform for searching code snippets. It includes a semantic analysis feature that detects what framework, library, or language you are looking for and optimizes the search results based on your criteria. For example, if you look for “react typescript”, the engine will only show snippets related to TypeScript while “react javascript” will show you only snippets related to JavaScript (and obviously, react).

snipt.dev is built to be blazing fast: a request takes just a few milliseconds to come back to you. As with most search engines, results are suggested as you type, showing you the most relevant snippets for your query.

Adding your own snippets

The engine indexes and searches snippets from the Codiga platform. To add your own snippet to snipt.dev, simply add snippets on the Codiga platform: they will be automatically indexed and visible on snipt.dev. Adding snippets is very easy and can be done directly from your IDE using Codiga plugin (see VS Code, JetBrains, or Chrome plugins). You can find more information in the Contribute section of snipt.dev

Open-Source

snipt.dev has been designed using popular open-source libraries (NextJs, GraphQL) and it was natural for us to share this project with the community. You can find this project on GitHub. If you have any comments or issues to report, please open an issue on the GitHub project.

Pretty cool, eh? Have a great weekend everyone! 👋

If you found this post interesting, please share it on Twitter/Reddit/etc. This helps more people find the blog!

Save Money on Stuff I Use:

Fundrise

This platform lets me diversify my real estate investments so I’m not too exposed to any one market. I’ve invested since 2018 and returns have been great so far.

Tremendous

Tag Archives: React

From Design to Code in Seconds with AI

Find Code Faster Than Ever