Napkins.dev : téléchargement de wireframes pour générer du code frontal basé sur Llama4

Introduction générale

Napkins.dev est un projet open source gratuit dont la fonction principale est de permettre aux utilisateurs de télécharger des captures d'écran d'interface ou des wireframes afin de générer automatiquement du code frontal exécutable. Les utilisateurs n'ont qu'à fournir un design, l'outil passera par le modèle Llama 4 ( par l'équipe de Napkins.dev). Ensemble Napkins.dev analyse les images et génère un code d'application basé sur le framework Next.js. Napkins.dev est idéal pour le prototypage rapide et est particulièrement efficace pour travailler avec des interfaces simples telles que des pages de connexion ou des barres de navigation. Le code généré peut être prévisualisé et modifié en temps réel, et les utilisateurs peuvent l'exécuter directement ou l'optimiser davantage, ce qui réduit considérablement le temps entre la conception et le développement.

Liste des fonctions

• Téléchargement de captures d'écran : prise en charge du téléchargement de captures d'écran d'interface ou de schémas dessinés à la main aux formats PNG et JPG.
• Génération de code AI : génération de code HTML, CSS et JavaScript pour le framework Next.js en utilisant les captures d'écran d'analyse de modèles de Llama 4.
• Aperçu en temps réel : après avoir généré le code, un bac à sable en ligne (basé sur Sandpack) permet de montrer l'effet de l'application.
• Édition du code : possibilité d'ajuster le code généré à l'aide de mots-guides, par exemple en modifiant la couleur ou la mise en page.
• Sélection de thèmes : permet aux utilisateurs de sélectionner différents thèmes d'interface pour personnaliser la sortie du code.
• Collaboration open source : les utilisateurs peuvent cloner des dépôts, livrer du code ou optimiser des fonctionnalités via GitHub.
• Support mobile : le code généré est adapté aux ordinateurs de bureau, l'affichage mobile est optimisé.

Utiliser l'aide

Processus d'installation

napkins.dev propose deux façons de l'utiliser : l'accès direct au déploiement officiel (via le fichier https://napkins.dev) ou exécuter le projet localement. Vous trouverez ci-dessous les étapes détaillées du déploiement local pour les développeurs ou les utilisateurs qui ont besoin de personnaliser leur fonctionnalité :

1. Cloner le dépôt de code
   Ouvrez un terminal et entrez la commande suivante pour cloner le dépôt GitHub de napkins.dev :

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

Cette opération permet de télécharger le fichier du projet localement.

2. Configuration des variables d'environnement
   Dans le répertoire racine du projet, copiez le fichier .env.example et le renommer .env, puis remplissez les informations nécessaires ci-dessous :

   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区域
   

   • Ensemble AI cléPour plus d'informations, consultez le site Web de Together AI pour créer un compte et obtenir une clé API gratuite ou payante pour appeler les modèles du Llama 4. La quantité gratuite est généralement suffisante pour les tests.
   • Configuration AWS S3Pour ce faire, vous devez vous connecter à la console AWS et créer un espace de stockage S3 pour stocker les captures d'écran téléchargées. Se référer à Next.js S3 Upload Guide Configurez les autorisations de l'unité de stockage pour vous assurer que les lectures publiques sont autorisées. Le nom de l'unité de stockage et la région doivent correspondre à l'élément .env La documentation est cohérente.
3. Installation des dépendances
   Assurez-vous que Node.js est installé localement (version 18 ou supérieure recommandée). Exécutez-le dans le répertoire du projet :

   npm install
   

   Cela installera toutes les dépendances nécessaires au projet, notamment Next.js, Tailwind CSS, Sandpack et le SDK de Together AI.

4. Démarrage des services locaux
   Exécutez la commande suivante pour démarrer le serveur de développement :

   npm run dev
   

   Ouvrez votre navigateur et visitez http://localhost:3000pour accéder à l'interface locale de napkins.dev.

5. Vérifier l'installation
   Téléchargez une simple capture d'écran de l'interface (par exemple, un dessin contenant des boutons et des boîtes de saisie), cliquez sur le bouton Générer et vérifiez si le code peut être produit. Si vous rencontrez une erreur, vérifiez le champ .env La clé du fichier est correcte, ou vérifiez que le réseau est connecté à Together AI et au service AWS S3.

Utilisation

La fonction principale de napkins.dev est de convertir des captures d'écran de l'interface en code exécutable. Voici les étapes détaillées de son utilisation :

1. outil d'accès
   Si le déploiement officiel est en cours, visitez le site https://napkins.dev(Pour l'instant, nous devons attendre la version officielle, c'est pourquoi nous suggérons de l'exécuter d'abord localement). Pour l'exécuter localement, ouvrez le fichier http://localhost:3000.
2. Télécharger une capture d'écran
   Cliquez sur le bouton "Télécharger" de la page d'accueil et sélectionnez une capture d'écran de l'interface au format PNG ou JPG. Il est recommandé d'utiliser un design clair avec des éléments simples (par exemple des boutons, des boîtes de saisie, une barre de navigation).
   • Exigences en matière de documentationIl est recommandé que les images aient une taille inférieure à 5 Mo et qu'elles ne soient pas floues ou ne comportent pas d'effets dynamiques trop complexes (par exemple, des animations).
   • Soutenir la peinture à la mainLes dessins à la main peuvent être téléchargés, mais veillez à ce que les lignes soient claires et que les éléments soient clairement différenciés.
   • attirer l'attention sur qqch.Pour la première fois, essayez une simple capture d'écran de la page de connexion pour tester l'effet de génération.
3. Générer le code
   Après avoir téléchargé la capture d'écran, cliquez sur le bouton "Generate". L'image sera analysée par le modèle Llama 4 et le code frontal basé sur Next.js sera généré. Le processus de génération prend généralement de 5 à 30 secondes, en fonction de la complexité de la capture d'écran et de la vitesse du réseau.
   • Contenu de la sortieLe code est constitué de HTML (composants React), de CSS (styles Tailwind) et de JavaScript, et est clairement structuré pour un développement rapide.
   • traitement des erreursSi la génération échoue, vérifiez si la capture d'écran est trop complexe ou téléchargez à nouveau un modèle plus simple.
4. Prévisualisation et édition
   Une fois le code généré, la page affiche un aperçu en direct à travers le bac à sable Sandpack, montrant l'apparence et l'interaction de base de l'application. Les fichiers de code sont listés sur le côté droit et peuvent être visualisés, copiés ou téléchargés par l'utilisateur.
   • Modifier le codeL'IA modifiera le code et mettra à jour l'aperçu en fonction des invites.
   • Sélection des sujetsEn sélectionnant un thème différent dans les paramètres (par exemple, mode clair ou foncé), le CSS généré sera adapté automatiquement.
   • Code d'économieCliquez sur le bouton "Télécharger" pour compiler le code dans un fichier ZIP contenant la structure complète du projet Next.js.
5. Fonctionnement et déploiement
   Le code téléchargé peut être exécuté localement. Allez dans le répertoire du code et exécutez npm install répondre en chantant npm run devAccès http://localhost:3000 Voir l'application.
   • Méthodologie de déploiementIl est recommandé de déployer les applications Next.js à l'aide de Vercel ou de Netlify. Vercel permet un déploiement en un clic et génère un lien public après avoir téléchargé le code.
   • environnement de productionLe code généré est adapté au prototypage, les environnements de production doivent vérifier manuellement la logique, ajouter des interfaces back-end ou optimiser les performances.

Fonction en vedette Fonctionnement

• Analyse des captures d'écran pilotée par l'IA
  napkins.dev utilise le modèle Llama 4 (via l'inférence Together AI) pour reconnaître les éléments d'une capture d'écran, tels que les boutons, les zones de texte ou les barres de navigation, et génère l'image correspondante. Réagir Composants. Par exemple, si vous téléchargez un design avec un bouton "S'inscrire" et une zone de saisie, l'outil générera un code avec la structure du formulaire et les styles Tailwind.
  • Mode d'emploiLes tests d'interface : Assurez-vous que les éléments de la capture d'écran sont clairs et que les conceptions complexes peuvent conduire à des erreurs de reconnaissance. Il est recommandé de commencer par une présentation simple et de tester progressivement les interfaces complexes.
  • Description des restrictionsLa version actuelle prend mieux en charge les interfaces statiques, et les effets dynamiques (tels que la rotation des images) peuvent nécessiter des ajustements manuels du code.
• Sandboxing de code en temps réel
  L'outil s'intègre à Sandpack (powered by CodeSandbox), qui génère du code s'exécutant directement dans le navigateur et montrant des résultats réels. Les utilisateurs peuvent tester de manière interactive les clics de bouton ou les entrées de formulaire pour vérifier la fonctionnalité du code.
  • Exemple de fonctionnementAprès avoir généré une page de connexion, cliquez sur le bouton dans l'aperçu pour vérifier si l'interaction est déclenchée. S'il est nécessaire de l'ajuster, entrez une invite (par exemple "Add button click event") pour modifier le code.
• Open source et extensions
  napkins.dev est entièrement open source et les développeurs peuvent participer au développement via GitHub. Après avoir cloné le dépôt, exécutez npm run dev Testez les modifications et soumettez des demandes d'ajout de fonctionnalités (Pull Requests). Les améliorations les plus courantes sont l'optimisation de l'affichage mobile, l'ajout d'un nouveau thème ou l'amélioration de la fonction de mot d'alerte.
  • Exemple de fonctionnement: en src/components pour trouver le fichier Editor.tsxPour ajouter un journal montrant les résultats de l'analyse du lama 4, exécutez npm run dev Testez et soumettez le code.
• Optimisation mobile (en cours de développement)
  Actuellement, le code généré est adapté aux ordinateurs de bureau, et l'affichage mobile peut être encombré. Les responsables prévoient d'optimiser la mise en page réactive, et les utilisateurs peuvent également demander à "générer un code adapté aux mobiles" par l'intermédiaire de l'invite.
  • Exemple de fonctionnementAprès avoir téléchargé la capture d'écran, entrez l'invite "Optimiser pour les écrans mobiles" et l'IA ajustera la feuille de style CSS (par exemple, en utilisant la balise flex peut-être grid (Mise en page).

Détails techniques

La pile technologique de napkins.dev comprend :

• Lama 4Meta fournit le modèle de langage visuel responsable de l'analyse des captures d'écran et de la génération du code logique.
• Ensemble AILlama 4 : fournit des services de raisonnement pour Llama 4 afin d'assurer un traitement efficace des images et du texte.
• Sac à sable: Utilisé pour la prévisualisation du code en temps réel afin de simuler un environnement d'exécution réel.
• AWS S3Les captures d'écran téléchargées sont stockées pour permettre un accès rapide.
• Next.js et Tailwind CSSLe cadre de travail : Il construit l'interface et les styles du front-end, et le code généré est basé sur ce cadre de travail.
• HeliconeLes services d'aide à la décision : surveiller les performances du modèle et les appels à l'interface de programmation (API).
• PlausibleLes services d'information et d'orientation : Analyser les données d'accès au site web afin d'optimiser l'expérience de l'utilisateur.

scénario d'application

1. Prototypage rapide
   Les chefs de produit téléchargent des croquis d'interface pour générer des applications prêtes à être présentées aux équipes ou aux clients, ce qui permet d'économiser du temps de développement.
2. Outils d'apprentissage frontaux
   Les débutants téléchargent des designs simples, génèrent du code puis analysent les composants React et les styles Tailwind pour apprendre rapidement le développement front-end moderne.
3. Développement d'un hackathon
   L'équipe du marathon de programmation utilise des outils pour transformer les conceptions en code, en se concentrant sur la logique du back-end ou sur les extensions de fonctionnalités pour améliorer l'efficacité.
4. Construction d'un projet personnel
   Les développeurs téléchargent un blog ou un portfolio, génèrent le code et le déploient avec quelques ajustements, ce qui convient aux sites web personnels en ligne rapides.
5. Vérification de la conception
   Les concepteurs d'interface utilisateur téléchargent des captures d'écran, génèrent des prototypes interactifs, testent la présentation de l'interface et l'expérience de l'utilisateur, et optimisent les solutions de conception.

QA

1. Quelles sont les conditions à remplir pour obtenir une capture d'écran ?
   Les captures d'écran doivent être au format PNG ou JPG, leur taille doit être inférieure à 5 Mo, elles doivent être claires et contenir des éléments clairs (par exemple, des boutons, des boîtes de saisie). Les conceptions complexes peuvent entraîner une génération imprécise, et il est recommandé de commencer par une interface simple.
2. Le code généré est-il adapté à un environnement de production ?
   Le code généré est adapté au prototypage et contient des composants React de base et des styles Tailwind. Les environnements de production doivent vérifier la logique du code, la sécurité et ajouter des fonctionnalités back-end.
3. Dois-je payer pour utiliser napkins.dev ?
   Le projet est entièrement gratuit et open source. Le fonctionnement local nécessite une clé Together AI (crédit gratuit disponible) et le service AWS S3 (peut entraîner de faibles frais de stockage).
4. Comment améliorer la qualité du code généré ?
   Utilisez des captures d'écran claires et simples et évitez les effets dynamiques. Une fois le modèle généré, vous pouvez modifier le code à l'aide de mots-clés ou participer au développement sur GitHub afin d'optimiser le modèle.
5. Quels sont les cadres pris en charge ?
   Génère actuellement du code basé sur Next.js et Tailwind CSS, et peut supporter d'autres frameworks (tels que Vue ou Svelte) à l'avenir, en fonction des contributions de la communauté.