GPT-4 Vision

Overview

GPT-4 Vision allows the understanding and processing of images. This allows for a direct comparison between the generated code and the initial design. This comparison lays the foundation for further refinements, ensuring the final code not only matches the design visually but also functions as intended. Below are the enhancements we've implemented to bolster our code output.

Getting Started

You don't really need to do anything additional. After every generation, you will be prompted to enhance the code output with GPT Vision. Simply follow through and you will end up with GPT-enhanced code. You will also be able to use the initially generated code if gpt's version is not up to par.

Key Improvments to Code Quality

Semantic Element Detection

Design elements such as buttons and input fields will be automatically detected and their functionality implemented. This means that your generated code will be more semantically sound and also more SEO-friendly

Originally generated code

Semantic predicton with GPT Vision

Removing unecessary divs and CSS

Designs in Figma may not always be optimized for code generation. This causes unnecessarily nested frames and repeated CSS that result in poor code quality. GPT-4 Vision tackles this issue by identifying and eliminating all unecessary divs and CSS found within the initial generation.

Originally generated code

Reduced nesting and simplified styles with GPT Vision