◯ Gratis: 5 keer/dag • Reset over 9h 10m

Screenshot naar Code

Upload een schermafbeelding van een gebruikersinterface en ontvang direct gebruiksklare HTML + inline CSS die dezelfde lay-out weergeeft. Werkt op Figma-exporten, webpagina’s, appmockups en wireframes. Aangedreven door Google Gemini Vision. Uitstekend om ontwerpen om te zetten naar werkende code, UI van concurrenten te analyseren of verouderde interfaces te herbouwen.

Meer leren

Screenshot to Code analyseert een UI-screenshot en levert schone HTML met inline CSS die dezelfde lay-out weergeeft. Upload een Figma-export, webpagina, app-mockup of wireframe en krijg een startpunt in code dat je kunt plakken en verfijnen. Het is gebouwd voor ontwikkelaars en designers die de saaie eerste stap van het omzetten van een visual naar markup willen overslaan.

Sleep hier je UI-screenshot
of klik om te bladeren — PNG, JPG, WebP tot 10 MB. We leveren kant‑klaar HTML + CSS.

✓ Gratis te gebruiken — geen registratie, geen creditcard.

Ontwikkelaars

Landingshero naar code

Geef je front-endcoderen een vliegende start vanaf een ontwerpscreenshot.

Voorbeeld van invoer en uitvoer bekijken

Invoer

Content
A screenshot of a SaaS landing-page hero section with a headline, subtext, an email signup field, and a blue call-to-action button on a light background that needs to be turned into responsive HTML and CSS.

Uitvoer (fragment)

Genereert een responsieve HTML-structuur met een gecentreerde herocontainer: een h1-kop, een gedempte subkopalinea, een inline e-mailinvoerveld en een gestylede blauwe CTA-knop, plus bijpassende CSS met flexbox, witruimte en een hover-state. De markup spiegelt de lay-out en is klaar om in een project te plakken en te verfijnen.
Freelancers

Markup voor een prijstabel

Bouw een prijstabelontwerp opnieuw op als bewerkbare front-endcode.

Voorbeeld van invoer en uitvoer bekijken

Invoer

Content
A screenshot of a three-column pricing table with tier names, monthly prices, feature lists, and a highlighted middle plan that needs to be converted into clean HTML and CSS.

Uitvoer (fragment)

Produceert een grid van drie kolommen met prijskaarten, elk met een niveaukop, een grote prijs, een opsommingslijst met functies en een CTA-knop, waarbij de middelste kaart een gemarkeerde rand en badge krijgt. De bijbehorende CSS regelt het grid, kaartschaduwen en een responsieve stapeling op mobiel, wat een werkend startpunt geeft om aan te passen.
Studenten

Inlogformulier naar code

Leer front-endstructuur door code te genereren vanaf een UI-screenshot.

Voorbeeld van invoer en uitvoer bekijken

Invoer

Content
A screenshot of a simple centered login form with email and password fields, a remember-me checkbox, and a sign-in button that needs to be turned into HTML and CSS.

Uitvoer (fragment)

Levert een gecentreerde kaart met een formulier met gelabelde e-mail- en wachtwoordvelden, een onthoud-mij-aanvinkrij en een inlogknop op volle breedte, gestyled met nette witruimte, afgeronde invoervelden en een focus-state. De semantische markup en CSS leveren een uitvoerbare inloglay-out om te bestuderen en uit te breiden.

Je Screenshot naar Code-resultaten verschijnen hier

Je krijgt een gedetailleerde beschrijving van tekst, objecten, mensen, omgeving en opvallende details.

Hoe te gebruiken Screenshot naar Code

  1. Upload een duidelijke screenshot van de UI die je wilt nabootsen.
  2. Laat het vision-model de lay-out en elementen analyseren.
  3. Kopieer de gegenereerde HTML + inline CSS uit het resultaat.
  4. Plak het in je project en verfijn lettertypen, kleuren en gedrag.

Gebruikscases

1

Zet een Figma- of ontwerpmockup om in een HTML-startpunt

2

Maak de lay-out van een bestaande webpagina opnieuw als referentie of om hem te herbouwen

3

Zet een met de hand getekende wireframe snel om in werkende markup.

4

Maak een prototype van een landingspagina op basis van een screenshot voordat je de logica koppelt

5

Help ontwerpers zonder diepgaande codeervaardigheden een eerste HTML-concept te maken

Tips voor de beste resultaten

  • Upload op volledige resolutie zodat kleine tekst en spatiëring leesbaar zijn.
  • Snijd bij tot het ene component of scherm dat je wilt, om rommel te voorkomen.
  • Gebruik schone schermafbeeldingen met hoog contrast in plaats van wazige telefoonfoto's.
  • Behandel de uitvoer als steigerwerk — reken erop dat je de styling nog moet bijwerken en interactiviteit moet toevoegen.

Veelgestelde vragen

Wat doet Screenshot to Code?

Je uploadt een afbeelding van een gebruikersinterface en het geeft HTML met inline CSS terug die de lay-out, witruimte, kleuren en tekst zo nauwkeurig mogelijk reproduceert als de screenshot toelaat.

Welke beeldformaten kan ik uploaden?

Upload PNG- of JPG-screenshots — Figma-exports, live webpagina's, app-mockups of met de hand getekende wireframes werken allemaal. Een scherpe schermafbeelding op volle resolutie levert de meest accurate code op.

Hoe nauwkeurig is de gegenereerde code?

Het levert een sterk structureel startpunt — lay-out, kleuren en typografie komen meestal aardig in de buurt. Het is niet pixel-perfect en bootst geen interactiviteit of backend-logica na, dus verwacht dat je de markup nog moet verfijnen.

Genereert het JavaScript of alleen HTML/CSS?

Het geeft statische HTML met inline CSS terug die de visuele lay-out weergeeft. Dynamisch gedrag, frameworks en event handling worden niet gegenereerd — die voeg je zelf toe.

Kan ik de gegenereerde code commercieel gebruiken?

Ja. De output is van jou om te gebruiken en aan te passen in je projecten. Het gratis abonnement biedt 5 keer per dag zonder aanmelding; Pro kost $19/maand voor meer.

Wordt mijn schermafbeelding na verwerking bewaard?

Nee. De geüploade afbeelding wordt verwerkt om de code te genereren en daarna verwijderd — hij wordt niet opgeslagen of gebruikt voor training.

Komt het exact overeen met de lettertypes en merkkleuren?

Het benadert kleuren en typografie op basis van wat zichtbaar is. Exacte merklettertypen en precieze hexwaarden moeten mogelijk handmatig worden aangepast nadat je de code hebt geplakt.

🔒
Je privacy is beschermd

We slaan je tekst niet op. De verwerking gebeurt in realtime en je invoer wordt onmiddellijk na het genereren van het resultaat weggegooid.

Ontgrendel Onbeperkte Toegang

Gratis gebruikers: 5 gebruik per dag | Pro gebruikers: Onbeperkt

Pro halen — $19/maand Blader door AI Tools

Gerelateerde tools

Visie-intelligentieAfbeeldingsbeschrijverUpload een foto, screenshot, grafiek of diagram en krijg binnen seconden een gedetailleerde beschrijving.…Visie-intelligentieGrafiek naar CSVUpload een grafiek, diagram of data-visualisatie en ontvang de onderliggende data als CSV. Werkt…Visie-intelligentieReceipt ParserUpload een foto van een bonnetje of factuur en ontvang gestructureerde JSON-gegevens: verkoper, datum,…

Deze agent proberen

Blog Sprint AgentGenereer een compleet, SEO-geoptimaliseerd blogartikel van 3000+ woorden in 5 stappen: idee → titel → schema…Deze agent proberen →

Gerelateerde workflow

Developer DocsCode to documentationWorkflow uitvoeren →

Lees meer