From design to code: How AI and computer vision helped me to transform Web design screenshots into functional code

As a professional with a solid understanding of CSS and HTML, though not focused on developer tasks in my daily work, I have often found translating design concepts into functional web elements a time-consuming task. Recently, I undertook a project where I needed to create web elements based on a design image. This task, which would typically take me days to perfect, was significantly expedited thanks to the help of an AI assistant.

The project began with a detailed design image illustrating the desired appearance of web elements, including specifics like font sizes, colors, border-radius, and hover effects. My objective was to transform this design into live, functional HTML and CSS code.

The following design was provided to me by the web designer in Photoshop. Some details have been pixelated for confidentiality.

This is the screenshot provided to the AI assistant to begin defining the actual code.

Leveraging my knowledge of CSS and HTML, I started by providing the AI assistant with a screenshot of the design and asked it to define the necessary HTML and CSS to implement that design. From there, I crafted detailed prompts that outlined additional elements and styles. Specifically, I needed:

• A Flexbox layout for centering elements
• Hover effects for interactive feedback
• Color schemes for selected and default states
• Ensuring the entire card is clickable
• Removing the underline from links on hover
• Aligning the product icon and product name on the same line
• Using a specific width to ensure proper alignment
• Adjusting colors for better contrast

Iterative improvement and quick adjustments

The AI assistant provided initial CSS and HTML suggestions, which I then tested and refined. Each iteration brought the design closer to the original image, with the AI assistant accurately interpreting my feedback and making the necessary adjustments. This iterative process was crucial in achieving a polished final product.

Using the attached screenshot of the section of the design that needed to be implemented, my first prompt was:

“Define a CSS and structure to represent the following squares. Note that one of them in the following image has a purple color indicating it is selected. Add a hover effect with a color that harmonizes with the image colors. The title must be in one line (e.g., ‘Product name’ in one of the images). The subtitle must be well-aligned with the title on the left side and positioned below it. Additionally, the entire element should be clickable and function as a link. Define the element only; I will handle the vertical stacking separately.”

Second prompt:

“Adjust the CSS to ensure the product icon and the product name are aligned on the same line, with the entire card taking up the full width of the container.”

Third prompt:

“Update the hover background color to provide better contrast with the page background, ensuring the product icon remains visible.”

Fourth prompt:

“Remove the underline from the links when hovered and ensure the text color on hover remains black.”

Fifth prompt:

“Make sure the selected product card has a white background when not selected and improve the contrast for the hover effect.”

Sixth prompt:

“Reduce the spacing on the left and right sides of the product card to prevent the text from moving to another line, ensuring the product name stays on one line.”

Results

HTML

<div class="product-card-wrapper">
    <a class="product-card selected" href="link-to-page">
        <img src="icon-url" alt="Icon">
        <div>
            <h3>Product Name 1</h3>
            <p>Product Description 1</p>
        </div>
    </a>
</div>
<div class="product-card-wrapper">
    <a class="product-card" href="link-to-page">
        <img src="icon-url" alt="Icon">
        <div>
            <h3>Product Name 2</h3>
            <p>Product Description 2</p>
        </div>
    </a>
</div>
<div class="product-card-wrapper">
    <a class="product-card" href="link-to-page">
        <img src="icon-url" alt="Icon">
        <div>
            <h3>Product Name 3</h3>
            <p>Product Description 3</p>
        </div>
    </a>
</div>        

CSS

 .product-card-wrapper {
    display: flex;
    justify-content: center;
    margin: 10px 0;
    width: 100%; /* Ensure the wrapper takes the full width of the container */
}

.product-card {
    display: flex;
    align-items: center; /* Align items to the center */
    width: 100%; /* Ensure the card takes the full width of the wrapper */
    padding: 10px 15px; /* Adjust the padding */
    border-radius: 15px;
    text-decoration: none;
    color: #000;
    background-color: #fff; /* Set the default background color to white */
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

.product-card:hover {
    background-color: #d4b3ff; /* Set a lighter and more contrasting hover color */
    color: #000; /* Ensure text color remains black on hover */
    text-decoration: none; /* Remove underline */
}

.product-card.selected {
    background-color: #3c096c; /* Set selected color */
    color: #fff; /* Ensure text color is white for selected state */
}

.product-card img {
    width: 40px; /* Adjust the size of the image */
    margin-right: 15px; /* Add some space between the image and the text */
}

.product-card h3, .product-card p {
    margin: 0;
    padding: 0;
    color: inherit; /* Ensure color is inherited from the parent */
    text-decoration: none; /* Remove underline */
}

.product-card h3 {
    font-size: 1.2em; /* Adjust the font size */
    font-weight: bold;
    line-height: 1.2; /* Ensure the title is in one line */
}

.product-card p {
    font-size: 1em;
    margin-top: 5px;
}        

Conclusion

This experience highlighted the value of leveraging AI to enhance and expedite web development tasks. By providing clear and precise prompts, the AI assistant was able to understand my requirements and iterate on the initial suggestions efficiently. The collaboration was seamless and productive, turning what would have been a multi-day project into a quick and enjoyable development process.

If you’re working on web design or any other task that could benefit from quick, iterative improvements, I highly recommend exploring AI assistance. It can be a game-changer, especially when you have enough foundational knowledge to communicate your needs effectively.