Screenshot-to-Code: Die Zukunft des Rapid Prototyping

Stell dir vor, du zeichnest eine Website auf eine Serviette, machst ein Foto und 10 Sekunden später hast du eine funktionierende, responsive React-Komponente. Was vor zwei Jahren noch Magie war, ist heute dank multimodaler LLMs wie Gemini 2.5 Pro ein Nachmittagsprojekt.

In diesem Tutorial bauen wir einen Proof of Concept (POC), der genau das macht.

Der Use-Case: Warum das ein Gamechanger ist

Designer und Entwickler verbringen Stunden damit, Figma-Designs mühsam in CSS-Klassen zu übersetzen. Ein "Screenshot-to-Code"-Tool automatisiert diesen Schritt zu 80-90%. Du musst nur noch den Feinschliff machen.

Was wir bauen:

Ein Node.js Script, das:

Ein lokales Bild einliest.
Es an das Vision-Modell von Google (Gemini) sendet.
Einen fertigen HTML-Code mit Tailwind CSS zurückgibt.

Das Setup: Schnell & Schlank

Wir halten es einfach. Keine komplexen Frameworks, nur reines JavaScript und die Gemini API.

Schritt 1: Workspace isolieren

# Erstelle einen dedizierten Ordner für den POC
mkdir ai-screenshot-poc && cd ai-screenshot-poc

Schritt 2: Abhängigkeiten installieren

npm init -y
npm install @google/generative-ai dotenv

Der Proof of Concept (POC)

Hier ist der Kern deines neuen Tools. Wir nutzen die Fähigkeit von Gemini, visuelle Kontexte tiefgreifend zu verstehen.

ai-screenshot-poc/convert.js:

const { GoogleGenerativeAI } = require("@google/generative-ai");
const fs = require("fs");
require("dotenv").config();

// Initialisiere die AI
const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);

async function run() {
  const model = genAI.getGenerativeModel({ model: "gemini-2.5-pro-latest" });

  const prompt = `
    Analysiere diesen Screenshot und wandle ihn in eine moderne, responsive Website um.
    Nutze ausschließlich HTML5 und Tailwind CSS. 
    Achte auf:
    1. Genaue Farbwiedergabe.
    2. Korrekte Abstände (Padding/Margin).
    3. Moderne Typografie.
    Gib NUR den reinen HTML-Code zurück, ohne Markdowns.
  `;

  const imageParts = [
    {
      inlineData: {
        data: Buffer.from(fs.readFileSync("sketch.png")).toString("base64"),
        mimeType: "image/png"
      },
    },
  ];

  const result = await model.generateContent([prompt, ...imageParts]);
  const response = await result.response;
  const text = response.text();
  
  fs.writeFileSync("index.html", text);
  console.log("🚀 Erfolg! Dein Code liegt in index.html");
}

run();

Verifikation: Der Testlauf

Lege ein Bild (deine Skizze) unter dem Namen sketch.png in den Ordner.
Setze deinen GEMINI_API_KEY in der .env Datei.
Starte das Script:

node convert.js

Öffne die neu erstellte index.html in deinem Browser.

Das Ergebnis:

Du wirst sehen, wie die KI Schriften, Buttons und Layout-Strukturen fast perfekt aus deinem Bild extrahiert. Das ist die Basis für ein mächtiges Micro-SaaS-Tool!

Fazit & Ausblick

Dieser POC zeigt, wie einfach es 2025 ist, komplexe Probleme mit KI zu lösen. Um daraus ein fertiges Produkt zu machen, müsstest du lediglich eine Drag-and-Drop-Fläche im Frontend hinzufügen und vielleicht eine Integration in dein Git-Repository bauen.

Antigravity-Tipp: Nutze im Prompt "Interactive Elements", damit Gemini auch direkt kleine JavaScript-Schnipsel für Hover-Effekte oder mobile Menüs mitschreibt!

Viel Erfolg beim Prototyping!

User Dashboard