I've recently developed a strong interest in front-end development, and I especially want to try out some new interface designs. However, I ran into a tricky problem: after completing the UI design, how to efficiently translate it into code for HTML or other front-end frameworks. Although I ended up spending quite a bit of time knocking out the code line by line, I wanted to share my process so that I could provide a reference for others with similar needs. Maybe someone will benefit from it so they can avoid wasting time looking for a solution again.
If you also have a better method or suggestion, feel free to share it in the comments section so we can explore and learn together to improve. Next, I'll detail my exploration process and some tools that may be useful. I hope it will be helpful to all of you!
Design UI
Typically, this part of the work is done by designers working on multiple pages based on product requirements. One of the familiar tools is Blue Lake, which greatly facilitates collaboration between designers and developers.
Blue Lake
Indeed, Blue Lagoon is an excellent team collaboration platform that provides an efficient collaboration environment for designers and developers. Users can easily access all of their project's design files and related materials simply by entering the team space.
However, I didn't want to focus on the design itself, but preferred to have direct access to the front-end code. After all, nowadays we are in the age of AI and we can't always rely on the manual way of writing code. Surprisingly, I found that Blue Lagoon does offer the ability to convert designs into code, which definitely saves us a lot of time and effort.
In fact, after comparing them, I found that the similarity between the design draft and the generated code is quite high, basically able to reach about 90%. This is certainly a good result. This is despite the official claim that page restoration can be as high as 98.1%.
However, it is worth noting that the code provided by BlueLake is only a preliminary framework, and does not restore all the details of the design 100%. In the actual development process, we still need to adjust accordingly.
It was with high expectations that I copied the code generated from Blue Lagoon locally, only to be disappointed. I couldn't believe my eyes when I saw that the actual restoration was actually only 30%. Almost all the components were not working properly, and the input element in the original design was incorrectly rendered as a div, which made me helpless. Faced with such a problem, I finally had to choose to give up.
I then asked some friends in the Tencent Cloud community to find out if there was an effective solution to this problem. Sure enough, many different solutions and suggestions were shared.
Other Programs
first
Hiring a front-end developer to make the changes would theoretically solve these problems and is indeed a viable option. However, as a regular programmer, where would I get such a resource? I don't have the extra budget to hire someone; after all, this is all purely a personal hobby and desire to explore for me.
With that in mind, I ultimately decided not to go with this advice. After all, my original intention was simply to learn and practice in the process, not rely on outside help.
second reason
Try Semi's D2C feature, known as "Design to Code". This feature is designed to help designers and developers collaborate more smoothly and simplify the process of converting a design into actual code.
Learn the address:/zh-CN/start/design-to-code
Design to code (D2C) is a design to code feature provided by Semi Design, which supports one-click recognition of layer layouts + Semi components in Figma pages, pixel-level design restoration, translation to JSX and CSS code, and quick preview, without the need to develop from zero. From now on, you can leave the UI restore work to the tool and focus more on realizing business logic.
Through my personal experience with Semi's D2C functionality, I've found it to be very handy in real-world applications, especially when it comes to quickly turning designs into code.
The framework is really excellent, feature-rich and efficient, but you need to pay to use it. For those of you who have the financial backing, we recommend you to try this tool, after all, it can bring a significant boost to your project. However, it is worth mentioning that the platform also offers a 7-day free trial.
third
Found a very interesting AI platform at:/
This platform was recommended to me by someone else and is worth checking out. Its main function is to allow users to upload images and then automatically generate the corresponding HTML code. Compared to some other tools, such as Blue Lake, this platform generates much better results and is able to more accurately restore the design intent.
However, as we all know, really good tools are usually not provided for free, so you need to pay a certain amount of money for using this platform. According to my understanding, the price is similar to that of GPT-4, which means that one has to consider one's financial situation while enjoying a high-quality service.
summarize
In exploring front-end development, I have come to deeply appreciate the challenge of translating UI design into code. It is not only a technical problem, but also a journey of innovation and practice. Faced with a variety of tools and platforms to choose from, I sensed that many solutions existed in the market, but not all of them could fully meet my needs. The initial attempts of BlueLake made me realize that despite the convenience it provided, the results in practical applications failed to meet my expectations. Semi's D2C functionality and platform, on the other hand, opened up new possibilities for me and showed me how technology can bridge the gap between design and development.
In this fast-moving era, the choice and use of tools is not only about efficiency, but also influences how we create and realize ideas. I hope you will also find the right tools to create better work in your own learning journey!