Napkins.dev: Hochladen von Wireframes zur Erzeugung von Front-End-Code auf der Grundlage von Llama4

Allgemeine Einführung

Napkins.dev ist ein kostenloses Open-Source-Projekt, dessen Kernfunktion darin besteht, dass Benutzer Screenshots oder Wireframes von Benutzeroberflächen hochladen können, um automatisch lauffähigen Front-End-Code zu generieren. Benutzer müssen nur ein Design zur Verfügung stellen, das Tool wird durch das Llama 4 Modell ( durch die Gemeinsam Napkins.dev analysiert Bilder und generiert Anwendungscode auf der Grundlage des Next.js-Frameworks. Napkins.dev ist ideal für Rapid Prototyping und eignet sich besonders gut für die Arbeit mit einfachen Oberflächendesigns wie Anmeldeseiten oder Navigationsleisten. Der generierte Code kann in Echtzeit in der Vorschau angezeigt und bearbeitet werden, und die Benutzer können ihn direkt ausführen oder weiter optimieren, wodurch sich die Zeit vom Entwurf bis zur Entwicklung drastisch verkürzt.

Funktionsliste

• Hochladen von Screenshots: Unterstützung des Hochladens von Screenshots der Benutzeroberfläche oder von handgezeichneten Wireframes in den Formaten PNG und JPG.
• KI-Code-Generierung: Generierung von HTML-, CSS- und JavaScript-Code für das Next.js-Framework unter Verwendung von Llama 4-Modellanalyse-Screenshots.
• Echtzeit-Vorschau: Nach der Generierung des Codes wird eine Online-Sandbox (basierend auf Sandpack) bereitgestellt, um die Auswirkungen der Anwendung zu zeigen.
• Codebearbeitung: Unterstützung bei der Anpassung des generierten Codes durch Eingabeaufforderungen, z. B. Änderung der Farbe oder des Layouts.
• Themenauswahl: Ermöglicht die Auswahl verschiedener Oberflächenthemen, um die Codeausgabe zu personalisieren.
• Open-Source-Zusammenarbeit: Benutzer können über GitHub Repositories klonen, Code übertragen oder Funktionen optimieren.
• Mobile Unterstützung: Der generierte Code ist an den Desktop angepasst, die mobile Darstellung wird optimiert.

Hilfe verwenden

Einbauverfahren

napkins.dev bietet zwei Möglichkeiten der Nutzung: direkter Zugriff auf die offizielle Bereitstellung (über die https://napkins.dev) oder führen Sie das Projekt lokal aus. Im Folgenden finden Sie die detaillierten Schritte für die lokale Bereitstellung für Entwickler oder Benutzer, die ihre Funktionen anpassen müssen:

1. Code-Repository klonen
   Öffnen Sie ein Terminal und geben Sie den folgenden Befehl ein, um das GitHub-Repository für napkins.dev zu klonen:

   git clone https://github.com/Nutlope/napkins

Dadurch wird die Projektdatei lokal heruntergeladen.

2. Umgebungsvariablen konfigurieren
   Kopieren Sie in das Stammverzeichnis des Projekts die Datei .env.example Datei und benennen Sie sie um .envund geben Sie dann die erforderlichen Informationen ein:

   TOGETHER_API_KEY=你的Together AI密钥
   AWS_ACCESS_KEY_ID=你的AWS S3访问密钥
   AWS_SECRET_ACCESS_KEY=你的AWS S3秘密密钥
   AWS_S3_BUCKET=你的S3存储桶名称
   AWS_S3_REGION=你的S3区域
   

   • Gemeinsam AI-SchlüsselBesuchen Sie die Together AI-Website, um ein Konto einzurichten und einen kostenlosen oder kostenpflichtigen API-Schlüssel für den Aufruf von Llama 4-Modellen zu erhalten. Der kostenlose Betrag reicht in der Regel für Tests aus.
   • AWS S3-KonfigurationMelden Sie sich bei der AWS-Konsole an und erstellen Sie ein S3-Speicher-Bucket zum Speichern der hochgeladenen Screenshots. Siehe Next.js S3 Upload Anleitung Konfigurieren Sie die Berechtigungen für den Speicherbereich, um sicherzustellen, dass öffentliche Lesezugriffe erlaubt sind. Der Name des Speicherbereichs und die Region müssen mit dem .env Die Dokumentation ist konsistent.
3. Installation von Abhängigkeiten
   Stellen Sie sicher, dass Node.js lokal installiert ist (empfohlene Version 18 oder höher). Führen Sie es im Projektverzeichnis aus:

   npm install
   

   Dadurch werden alle für das Projekt benötigten Abhängigkeiten installiert, darunter Next.js, Tailwind CSS, Sandpack und das SDK von Together AI.

4. Aufnahme lokaler Dienste
   Führen Sie den folgenden Befehl aus, um den Entwicklungsserver zu starten:

   npm run dev
   

   Öffnen Sie Ihren Browser und besuchen Sie http://localhost:3000um auf die lokale Schnittstelle von napkins.dev zuzugreifen.

5. Überprüfen der Installation
   Laden Sie einen einfachen Screenshot der Schnittstelle hoch (z. B. ein Design mit Schaltflächen und Eingabefeldern), klicken Sie auf die Schaltfläche Generieren und prüfen Sie, ob der Code ausgegeben werden kann. Wenn Sie auf einen Fehler stoßen, überprüfen Sie die .env Der Schlüssel in der Datei ist korrekt, oder überprüfen Sie, ob das Netzwerk mit Together AI und dem AWS S3-Service verbunden ist.

Verwendung

Die Hauptfunktion von napkins.dev ist die Umwandlung von Screenshots der Benutzeroberfläche in lauffähigen Code. Hier sind die detaillierten Schritte, um es zu verwenden:

1. Zugriffswerkzeug
   Wenn der offizielle Einsatz live ist, besuchen Sie https://napkins.dev(Derzeit müssen wir noch auf die offizielle Version warten, wir empfehlen, sie zunächst lokal auszuführen). Um es lokal auszuführen, öffnen Sie die http://localhost:3000.
2. Bildschirmfoto hochladen
   Klicken Sie auf die Schaltfläche "Hochladen" auf der Homepage und wählen Sie einen Screenshot der Benutzeroberfläche im PNG- oder JPG-Format aus. Es wird empfohlen, ein klares Design mit einfachen Elementen (z. B. Schaltflächen, Eingabefelder, Navigationsleiste) zu verwenden.
   • Anforderungen an die DokumentationEs wird empfohlen, dass die Bilder weniger als 5 MB groß sind und keine Unschärfe oder zu komplexe dynamische Effekte (z. B. Animationen) aufweisen.
   • Unterstützung der HandmalereiHandgezeichnete Wireframes können hochgeladen werden, aber achten Sie darauf, dass die Linien klar sind und die Elemente deutlich voneinander abgegrenzt sind.
   • auf etw. aufmerksam machenVersuchen Sie zum ersten Mal einen einfachen Screenshot der Anmeldeseite, um den Generierungseffekt zu testen.
3. Code generieren
   Nachdem Sie den Screenshot hochgeladen haben, klicken Sie auf die Schaltfläche "Generieren". Das Bild wird vom Llama 4-Modell analysiert und der auf Next.js basierende Front-End-Code wird generiert. Der Generierungsprozess dauert in der Regel 5-30 Sekunden, abhängig von der Komplexität des Screenshots und der Geschwindigkeit des Netzwerks.
   • Inhalt der AusgabeDer Code besteht aus HTML (React-Komponenten), CSS (Tailwind-Styles) und JavaScript und ist für eine schnelle Entwicklung klar strukturiert.
   • FehlerbehandlungWenn die Generierung fehlschlägt, prüfen Sie, ob der Screenshot zu komplex ist, oder laden Sie einen einfacheren Entwurf erneut hoch.
4. Vorschau und Bearbeitung
   Sobald der Code generiert wurde, zeigt die Seite eine Live-Vorschau durch die Sandpack-Sandbox, die das Aussehen und die grundlegende Interaktion der Anwendung zeigt. Die Codedateien sind auf der rechten Seite aufgelistet und können vom Benutzer angesehen, kopiert oder heruntergeladen werden.
   • Code bearbeitenKlicken Sie auf die Schaltfläche "Bearbeiten", geben Sie eine Aufforderung ein (z. B. "Hintergrund auf dunkel ändern" oder "Größe der Schaltflächen ändern"), und die KI ändert den Code und aktualisiert die Vorschau entsprechend den Aufforderungen.
   • ThemenauswahlDurch die Auswahl eines anderen Themas in den Einstellungen (z.B. heller oder dunkler Modus) wird das generierte CSS automatisch angepasst.
   • Code speichernKlicken Sie auf die Schaltfläche "Download", um den Code in eine ZIP-Datei zu packen, die die komplette Next.js-Projektstruktur enthält.
5. Betrieb und Einsatz
   Der heruntergeladene Code kann lokal ausgeführt werden. Wechseln Sie in das Code-Verzeichnis und führen Sie npm install im Gesang antworten npm run devZugang http://localhost:3000 App ansehen.
   • Methodik des EinsatzesEs wird empfohlen, Next.js-Apps mit Vercel oder Netlify bereitzustellen. Vercel bietet eine Ein-Klick-Bereitstellung und erzeugt öffentliche Links nach dem Hochladen des Codes.
   • ProduktionsumgebungGenerierter Code eignet sich für Prototypen, in Produktionsumgebungen muss die Logik manuell überprüft, Back-End-Schnittstellen hinzugefügt oder die Leistung optimiert werden.

Featured Function Bedienung

• AI-gesteuerte Screenshot-Analyse
  napkins.dev verwendet das Llama 4-Modell (über Together AI Inference), um Elemente in einem Screenshot zu erkennen, z. B. Schaltflächen, Textfelder oder Navigationsleisten, und generiert die entsprechenden Reagieren Sie Komponenten. Wenn Sie zum Beispiel einen Entwurf mit einer Schaltfläche "Registrieren" und einem Eingabefeld hochladen, generiert das Tool Code mit der Formularstruktur und den Tailwind-Stilen.
  • BetriebsanleitungDie Elemente des Screenshots müssen klar sein, und komplexe Designs können zu einer Fehlinterpretation führen. Es wird empfohlen, mit einem einfachen Layout zu beginnen und nach und nach komplexe Schnittstellen zu testen.
  • Beschreibung der EinschränkungenDie aktuelle Version bietet eine bessere Unterstützung für statische Schnittstellen. Dynamische Effekte (z. B. rotierende Bilder) erfordern möglicherweise manuelle Codeanpassungen.
• Code-Sandboxing in Echtzeit
  Das Tool ist mit Sandpack (powered by CodeSandbox) integriert, das Code generiert, der direkt im Browser läuft und echte Ergebnisse anzeigt. Benutzer können interaktiv Schaltflächenklicks oder Formulareingaben testen, um die Funktionalität des Codes zu überprüfen.
  • Beispiel für den BetriebNachdem Sie eine Anmeldeseite erstellt haben, klicken Sie auf die Schaltfläche in der Vorschau, um zu prüfen, ob die Interaktion ausgelöst wird. Wenn sie angepasst werden muss, geben Sie eine Aufforderung ein (z. B. "Add button click event"), um den Code zu ändern.
• Offene Quellen und Erweiterungen
  napkins.dev ist vollständig quelloffen und Entwickler können sich über GitHub an der Entwicklung beteiligen. Nachdem Sie das Repository geklont haben, führen Sie npm run dev Testen Sie Änderungen und reichen Sie Pull Requests ein, um Funktionen beizutragen. Zu den üblichen Verbesserungen gehören die Optimierung der mobilen Anzeige, das Hinzufügen eines neuen Themas oder die Verbesserung der Warnwortfunktion.
  • Beispiel für den Betrieb: in src/components Verzeichnis zu finden, um die Editor.tsxUm ein Protokoll mit den Ergebnissen der Analyse von Llama 4 hinzuzufügen, führen Sie aus npm run dev Testen Sie den Code und übermitteln Sie ihn dann.
• Mobile Optimierung (in Entwicklung)
  Derzeit ist der generierte Code für Desktop-Computer geeignet, und die Anzeige auf mobilen Geräten kann überfüllt sein. Die Beamten planen, das responsive Layout zu optimieren, und die Nutzer können über die Eingabeaufforderung auch die "Generierung von mobilfreundlichem Code" anfordern.
  • Beispiel für den BetriebNach dem Hochladen des Screenshots geben Sie die Eingabeaufforderung "Optimize for mobile screen layout" ein, und die KI passt das CSS an (z. B. mit der Funktion flex vielleicht grid (Layout).

Technische Einzelheiten

Das napkins.dev-Technologiepaket umfasst:

• Lama 4Meta stellt das visuelle Sprachmodell bereit, das für die Analyse von Screenshots und die Generierung von Code-Logik verantwortlich ist.
• Gemeinsam AILlama 4: Bietet Argumentationsdienste für Llama 4, um eine effiziente Verarbeitung von Bildern und Text zu gewährleisten.
• SandpäckchenEchtzeit-Codevorschau zur Simulation einer realen Laufzeitumgebung.
• AWS S3Speichern Sie hochgeladene Screenshots, um einen schnellen Zugriff zu gewährleisten.
• Next.js und Tailwind CSSErstellt die Front-End-Oberfläche und die Stile, und der generierte Code basiert auf diesem Framework.
• HelikonÜberwachung der Modellleistung und der API-Aufrufe.
• PlausibelAnalyse der Zugriffsdaten auf die Website, um die Benutzerfreundlichkeit zu optimieren.

Anwendungsszenario

1. Schnelles Prototyping
   Produktmanager laden Oberflächenskizzen hoch, um Demo-Apps zu erstellen, die sie ihren Teams oder Kunden zeigen können, und sparen so Entwicklungszeit.
2. Front-End-Lernwerkzeuge
   Anfänger laden einfache Entwürfe hoch, generieren Code und analysieren dann React-Komponenten und Tailwind-Stile, um die moderne Frontend-Entwicklung schnell zu erlernen.
3. Hackathon Entwicklung
   Das Programmiermarathon-Team verwendet Tools, um Entwürfe in Code umzuwandeln, und konzentriert sich dabei auf Backend-Logik oder Funktionserweiterungen zur Verbesserung der Effizienz.
4. Personal Project Building
   Die Entwickler laden ein Blog- oder Portfoliodesign hoch, generieren den Code und stellen ihn mit ein paar Änderungen bereit.
5. Überprüfung des Designs
   UI-Designer laden Screenshots hoch, erstellen interaktive Prototypen, testen das Oberflächenlayout und die Benutzererfahrung und optimieren Designlösungen.

QA

1. Welche Bedingungen muss ich für einen Screenshot erfüllen?
   Die Screenshots sollten im PNG- oder JPG-Format vorliegen, weniger als 5 MB groß sein, übersichtlich sein und klare Elemente enthalten (z. B. Schaltflächen, Eingabefelder). Komplexe Designs können zu einer ungenauen Generierung führen, und es wird empfohlen, mit einer einfachen Schnittstelle zu beginnen.
2. Ist der generierte Code für eine Produktionsumgebung geeignet?
   Der generierte Code ist für das Prototyping geeignet und enthält grundlegende React-Komponenten und Tailwind-Stile. Produktionsumgebungen müssen die Logik des Codes und die Sicherheit überprüfen und Backend-Funktionen hinzufügen.
3. Muss ich für die Nutzung von napkins.dev bezahlen?
   Das Projekt ist völlig kostenlos und quelloffen. Für den lokalen Betrieb sind ein Together AI-Schlüssel (kostenloses Guthaben verfügbar) und der AWS S3-Dienst (es können geringe Speichergebühren anfallen) erforderlich.
4. Wie lässt sich die Qualität des generierten Codes verbessern?
   Verwenden Sie klare, einfache Screenshots und vermeiden Sie dynamische Effekte. Nach der Erstellung können Sie den Code mit Stichwörtern optimieren oder sich an der Entwicklung auf GitHub beteiligen, um das Modell zu optimieren.
5. Welche Frameworks werden unterstützt?
   Zurzeit wird Code auf der Basis von Next.js und Tailwind CSS generiert. In Zukunft können auch andere Frameworks (wie Vue oder Svelte) unterstützt werden, abhängig von den Beiträgen der Community.