Hands On: New VS Code Insiders Build Creates Web Page from Image in Seconds
New Vision support with GitHub Copilot in the latest Visual Studio Code Insiders build takes a user-supplied mockup image and creates a web page from it in seconds, handling all the HTML and CSS.
Microsoft the new Vision support, along with Agent mode and a preview of next-edit suggestions (NES), last week, providing a peek into the future of coding. Here’s a summary of the three new features:
- Next Edit Suggestions (NES): This feature enhances AI-powered code completions by predicting and suggesting the next edits a developer might want to make in existing code. As code is modified, NES anticipates subsequent changes, allowing devs to navigate and accept suggestions using the Tab key. An arrow in the gutter indicates available edit suggestions, streamlining the editing process.
- Agent Mode for Copilot Edits: Agent Mode offers an autonomous editing experience where Copilot plans and executes tasks to fulfill requests. It determines relevant files, applies code changes, suggests terminal commands, and iterates to resolve issues, all while keeping users in control to review and confirm actions.
- Vision: This enables Copilot to generate code based on visual inputs like screenshots or markup. By analyzing visual data, Copilot can create corresponding user interfaces or provide descriptive alt text for images, bridging the gap between visual design and code implementation.
The latter, this reporter found, works great.
In a proof-of-concept that only took a few minutes overall, I had ChatGPT generate a mockup image of a web page, which I then fed to VS Code Insiders. The Insiders Copilot created a web page from the image, handling all the HTML and CSS in seconds.
ChatGPT 4o still has some image-generation issues, especially when it tries to incorporate text, but it did generate this mockup:
Even that degraded image worked fine.
I clicked on the Copilot icon in the Activity Bar to open Chat, then dragged the image into the Chat window, with instructions to generate a web page, which I saved as an HTML file.
Webpage Design
Home
Some introductory text about the website.
Main content description goes here.
It also generated the CSS:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #fff;
padding: 10px 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
padding: 0;
margin: 0;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
text-decoration: none;
color: #333;
font-weight: bold;
}
.hero {
text-align: center;
padding: 50px 20px;
background-color: #fff;
}
.hero h1 {
font-size: 3em;
margin: 0;
}
.hero p {
font-size: 1.2em;
color: #666;
}
.content {
display: flex;
justify-content: center;
padding: 20px;
}
.main-content {
flex: 2;
margin-right: 20px;
}
.main-content img {
width: 100%;
height: auto;
border-radius: 10px;
}
.sidebar {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.sidebar-item {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.sidebar-item h2 {
margin-top: 0;
}
footer {
text-align: center;
padding: 20px;
background-color: #fff;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
I only needed to place an “image1” for the web page in the same directory as the HTML file along with a styles.css file. That gave me this:
That’s obviously not a recreation of the supplied mockup image, but it provides a great head start.
I asked my in-house Copilot how long it would take a user to code all that up by hand and it estimated 30-45 minutes, noting, “This estimate assumes the developer is familiar with HTML and CSS and does not include time for additional features or extensive testing.”
As far as the other two previews, check out “” and “.”
About the Author
is an editor and writer at Converge 360.