Figma- oder KI-Layout umsetzen: Was ein Entwurf mitbringen muss

Die kurze Antwort: Ja, zum selben Fixpreis für das Paket; nur der Aufschlag für das Design entfällt. Ihre Agentur liefert den Entwurf, wir bauen daraus eine Website auf WordPress mit Bricks oder auf Statamic, white-label und unter Ihrem Namen. Das gilt für klassische Entwürfe aus Figma genauso wie für Layouts, die mit KI-Werkzeugen wie Figma Make, v0, Lovable oder Claude entstanden sind.

Am liebsten gestalten wir selbst, weil dann keine Übergabe nötig ist; warum, steht in Gestaltet für den Code. Wenn der Entwurf aber schon existiert und Ihr Kunde ihn freigegeben hat, ist es sinnlos, ihn neu zu erfinden. Dann geht es nur darum, dass er alles enthält, was der Bau braucht. Fehlt etwas, schließen wir die Lücke, und zwar im Stil Ihres Entwurfs. Wir sagen Ihnen aber vorher, wo wir entscheiden mussten, damit Ihr Kunde in der Vorschau nichts Unerwartetes sieht.

Bei Figma-Dateien hilft uns alles, was ohnehin gute Praxis ist: Komponenten statt kopierter Elemente, Farben und Textstile als Variablen oder Stile, Auto Layout statt frei platzierter Ebenen und sprechende Namen für Seiten und Rahmen. Das spart uns keine Gestaltungsarbeit, aber Rätselraten. Je klarer eine Datei aufgebaut ist, desto weniger Fragen schicken wir zurück, und desto näher ist die fertige Website am Entwurf. Perfekt muss die Datei nicht sein. Was wir unterwegs entscheiden, dokumentieren wir in einer kurzen Liste, die Sie vor der Freigabe sehen.

KI-Werkzeuge liefern in Minuten ein überzeugendes Layout, oft schon mit Code dahinter. Das ist ein guter Entwurf, aber selten eine gute Website. Typisch fehlen eine Redaktion, die Inhalte pflegen kann, eine saubere Überschriftenstruktur, Zustände für Tastatur und Fehler, Mehrsprachigkeit und jemand, der die Seite nach dem Livegang betreibt.

Wir behandeln ein KI-Layout deshalb wie einen Figma-Entwurf: als Vorlage für Gestaltung und Aufbau. Den erzeugten Code übernehmen wir nicht, sondern bauen die Website neu in WordPress mit Bricks oder Statamic, mit pflegbaren Abschnitten statt fest verdrahteter Seiten. Farben, Abstände und Schriften lesen wir aus und machen daraus Tokens; seit Oktober 2025 gibt es dafür ein stabiles gemeinsames Format, das laut der W3C-Community-Group auch Werkzeuge wie Figma unterstützen oder einführen ^[5].

Beim Auslesen prüfen wir, was KI-Layouts gerne übersehen: Text braucht 4,5:1 Kontrast zum Hintergrund, große Schrift 3:1 ^[3]. Klickflächen sollen mindestens 24 mal 24 CSS-Pixel groß sein ^[2]. Bei 320 CSS-Pixeln Breite darf nichts seitlich herausragen ^[1]. Und jedes Formularfeld braucht eine klar zugeordnete Beschriftung ^[4]. Was davon fehlt, ergänzen wir und zeigen es Ihnen vor der Vorschau für den Kunden. Ihr Kunde merkt davon nur, dass die Seite auch auf dem Telefon, mit Tastatur und mit langen Texten so aussieht wie der Entwurf.

Manchmal ist ein Entwurf so weit von einer baubaren Website entfernt, dass das Nachbessern länger dauert als eine neue Gestaltung im CD Ihres Kunden. Das sagen wir Ihnen nach der Durchsicht offen, bevor Kosten entstehen. Typische Fälle sind Entwürfe, die nur den Desktop zeigen und viele Sonderformen haben, oder KI-Layouts, die an jeder Stelle andere Abstände und Schriftgrößen verwenden. Dann schlagen wir vor, den Entwurf als Stimmungsvorlage zu nehmen und daraus ein Design-System im CD Ihres Kunden zu gestalten. Der Kunde erkennt seinen freigegebenen Look wieder, und die Website bleibt über Jahre pflegbar.

In allen anderen Fällen gilt auch für Ihren Entwurf: Corporate Design, Inhalte und Entwurf rein, der Rest klappt. Wie aus einem CD ohne Entwurf ein Design-System wird, steht in Corporate Design rein, Website raus; worauf es bei Barrierefreiheit in der Umsetzung ankommt, im Bereich Barrierefreiheit.