Export Pro

Kopieren Sie jeden Abschnitt einer Website als JSX + Tailwind

Smart Design Inspector macht aus dem Abschnitt einer Website, den Sie auswählen, eine JSX-Komponente mit Tailwind-Klassen oder HTML und CSS – bereit zum Einfügen in Ihr Projekt.

Auf die Warteliste So funktioniert’s

Pro-Funktion, im Vorabzugang kostenlos bis zum Start der Pro (Datum folgt)

Abschnitt · tucliente.example

Reservierungen

Ein Tisch für heute Abend

Dienstag bis Sonntag, 13–23 Uhr
Hauptstraße 12

Reservieren

div.card · zum Kopieren klicken

<div className="rounded-lg border border-gray-200 p-8">
  <p className="text-xs uppercase tracking-widest">Reservierungen</p>
  <p className="mt-2 text-2xl font-semibold">Ein Tisch für heute Abend</p>
  <ul className="mt-4 space-y-2 text-sm">…</ul>
  <a className="mt-6 block bg-blue-600 px-4 py-2 text-white">
    Reservieren
  </a>
</div>

<div class="card">…</div>

.card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 32px;
}
.card .title { font-size: 24px; font-weight: 600; }

Beispiel zur Veranschaulichung · Pro · Vorabzugang

So funktioniert’s

3 Schritte

01
Öffnen Sie die Website und wählen Sie Abschnitt kopieren.
02
Fahren Sie mit der Maus darüber und klicken Sie auf den gewünschten Block: einen Hero, eine Preiskarte, einen Footer.
03 Pro
Wählen Sie das Format, JSX + Tailwind oder HTML/CSS – und es landet in der Zwischenablage.

Was herauskommt

2 Formate

JSX + Tailwind

Eine Komponente mit den Tailwind-Klassen, die die berechneten Styles nachbilden.

HTML/CSS

Das Markup mit seinem Stylesheet, für Projekte ohne Tailwind oder für WordPress.

Lassen Sie sich inspirieren, kopieren Sie nicht

Geistiges Eigentum

Texte, Bilder und Logos einer fremden Website gehören jemandem. Übernehmen Sie Struktur und Stil und setzen Sie Ihre eigenen Inhalte ein. Mit der ersten Pro kommt der Inspirationsmodus, kostenlos für alle: Er ersetzt Texte und Bilder beim Kopieren durch Platzhalter.

Kostenlos und Pro

Preise ansehen →

	Kostenlos0 €für immer	Pro49 €Einmalzahlung
CSS jedes Elements kopieren
Abschnitt als JSX + Tailwind oder HTML/CSS kopieren	—	Im Vorabzugang kostenlos
Inspirationsmodus: ersetzt Texte und Bilder beim Kopieren durch Platzhalter	Mit der ersten Pro	Mit der ersten Pro

Das ist eine Pro-Funktion. Bis zum Start der Pro (Datum folgt) ist sie im kostenlosen Vorabzugang für alle verfügbar. Danach ist sie in der Pro für 49 € als Einmalzahlung enthalten.

Auf die Warteliste

Häufige Fragen

Weitere Fragen →

Ist das kostenlos?

Das ist eine Pro-Funktion. Bis zum Start der Pro (Datum folgt) ist sie im kostenlosen Vorabzugang für alle verfügbar. Danach ist sie in der Pro für 49 € als Einmalzahlung enthalten.

Ist der Code perfekt?

Er funktioniert und ist nah am Original. Animationen in JavaScript und manche Effekte lassen sich nicht in Klassen übersetzen – ein kurzer Blick darüber lohnt sich.

Verwendet es die Farben meines Projekts?

Es verwendet die der Original-Website. Um die Tokens als Variablen zu bekommen, kombinieren Sie es mit dem Extrahieren des Designsystems.

Kann ich es für React, Vue oder Elementor kopieren?

Das JSX funktioniert direkt in React. Vue und Elementor sind für spätere Versionen geplant.

In welchen Browsern und auf welchen Systemen läuft sie?

In Chrome, Edge, Brave, Arc, Opera und Vivaldi, unter Windows, Mac und Linux, ab Version 1.0. Sie läuft überall gleich, weil der Browser die Erweiterung ausführt, nicht das Betriebssystem. Der Code ist so vorbereitet, dass sie ohne Neuschreiben auf Firefox und Safari kommen kann. Während der Entwicklung kann sich noch etwas ändern.

Weiter mit

Verwandte Funktionen

Pro · Vorabzugang

Designsystem

Farben, Abstände und Typografie als Tailwind v4 @theme, CSS-Variablen oder DESIGN_SPECS.md.

Designsystem extrahieren →

Kostenlos

CSS-Inspektor

Mit der Maus darüberfahren und das berechnete CSS, die Box, die Margins und die Abstände sehen.

CSS-Inspektor →

Preise

Für immer kostenlos. Pro: 49 €, einmalig.