Reweb : Construire rapidement des sites web CSS Next.js et Tailwind avec l'IA et des éditeurs visuels

Introduction générale

Reweb est un constructeur de sites web pour les développeurs qui aide les utilisateurs à créer rapidement des sites web modernes basés sur Next.js et Tailwind CSS avec une interface générée par l'IA et un éditeur visuel intuitif. Les utilisateurs peuvent générer des composants d'interface utilisateur à l'aide d'invites textuelles ou concevoir à partir de modèles, prendre en charge l'édition par glisser-déposer et la prévisualisation en direct, et enfin exporter un code de haute qualité prêt pour la production. Reweb combine la rapidité de la conception sans code et la flexibilité du développement de code, ce qui en fait un outil idéal pour les développeurs frontaux, les concepteurs et les équipes.

Liste des fonctions

• Interface de génération d'IALe système de gestion de l'interface utilisateur : génère rapidement des composants d'interface utilisateur à partir d'invites textuelles ou d'images, avec une prise en charge de l'optimisation itérative.
• Éditeur visuelLes effets sur le bureau et sur le mobile sont visibles en temps réel grâce à la fonction "glisser-déposer" qui permet d'ajuster la présentation, le style et le contenu.
• Exportation du codeLes fonctionnalités : Générer du code de qualité basé sur Next.js, Tailwind CSS, et shadcn/ui.
• Importation FigmaImportation de dessins Figma, conversion en composants modifiables et exportation du code.
• Modèles et thèmesLe site Web de l'entreprise : il fournit des modèles de pages d'atterrissage, de tableaux de bord, de commerce électronique et autres, ainsi qu'une bibliothèque de thèmes personnalisables.
• contrôle sans codeLes non-développeurs peuvent ajuster les styles à l'aide de commandes simples sans avoir à écrire les CSS de Tailwind.
• Composants personnalisés: Créer des outils réutilisables Réagir qui prend en charge l'édition approfondie des styles.
• Travail d'équipeLe système de gestion de projet : Il permet l'édition en temps réel par plusieurs personnes, ce qui convient à la gestion de projet en équipe.
• Intégration CMSSupport pour les CMS sans tête tels que Strapi pour simplifier la gestion de contenu dynamique.
• conception réactiveLes écrans : s'adaptent automatiquement aux écrans de plusieurs appareils.

Utiliser l'aide

Comment démarrer avec Reweb

Reweb est un outil en ligne qui ne nécessite pas d'installation, les utilisateurs peuvent simplement visiter le site web de Reweb. https://www.reweb.so/Reweb est conçu pour être utilisé sur Chrome ou Firefox, avec un compte Google ou GitHub. Reweb est recommandé pour les navigateurs Chrome ou Firefox, et est plus efficace sur un écran de bureau avec une haute résolution. Safari peut avoir quelques limitations, et l'édition complète n'est pas prise en charge sur les appareils à petit écran (tels que les téléphones portables) pour le moment.

1. création de nouveaux projets

Après vous être connecté, cliquez sur le bouton "Démarrer" ou "Nouveau projet" sur la page d'accueil pour accéder à l'interface de création de projet :

• Sélectionner un modèleLes modèles peuvent être édités directement après le chargement : choisissez des pages préconçues dans une bibliothèque de modèles, tels que des pages d'atterrissage, des tableaux de bord SaaS, des sites de commerce électronique ou des interfaces de chatbot. Les modèles peuvent être édités directement après leur chargement.
• Interface utilisateur générée par l'IAL'IA génère le composant en 5 à 10 secondes et l'utilisateur peut ajuster les détails à l'aide du bouton "Affiner". L'IA générera le composant en 5 à 10 secondes et l'utilisateur pourra ajuster les détails en utilisant le bouton "Affiner".
• Importation de dessins FigmaReweb analyse la conception et génère les composants et les styles correspondants.

2. l'utilisation d'éditeurs visuels

L'éditeur de Reweb dispose d'une interface claire, divisée en trois sections :

• Barre d'outils gaucheLe canevas : comprend des composants tels que des boutons, des zones de texte, des images, des barres de navigation, etc.
• Centre CanvasLe site Web de la Commission européenne est un outil d'aide à la décision : il affiche les effets de la page en temps réel et permet aux utilisateurs de cliquer sur les éléments pour en modifier la position, la taille ou le contenu.
• Panneau de propriétés de droiteModifier les propriétés de style telles que la couleur, la police, l'espacement. Prise en charge de la saisie directe du nom de la classe CSS Tailwind (par ex. bg-blue-500), les non-développeurs peuvent ajuster le style à l'aide de contrôles sans code.

L'éditeur prend en charge la prévisualisation en temps réel, et vous pouvez basculer entre les vues pour ordinateur de bureau, tablette ou mobile en cliquant sur le bouton "Prévisualisation" dans le coin supérieur droit. Toutes les modifications sont automatiquement enregistrées, les membres de l'équipe peuvent collaborer en temps réel via des liens partagés, et l'éditeur affiche le curseur et le journal des modifications pour éviter les conflits.

3) Composants et thèmes personnalisés

Reweb permet une personnalisation approfondie des composants. Après avoir sélectionné un élément sur le canevas, le panneau de droite affiche des propriétés éditables telles que le texte du bouton, les coins arrondis, les effets d'animation, etc. Vous pouvez saisir directement le nom de la classe CSS Tailwind ou ajouter des CSS personnalisés. Les utilisateurs peuvent saisir directement les noms de classe CSS de Tailwind ou ajouter des CSS personnalisés. Reweb s'intègre à la bibliothèque de composants shadcn/ui et prend en charge l'importation de composants avancés tels que les boîtes de dialogue et les menus déroulants. Les non-développeurs peuvent ajuster les styles avec des contrôles sans code, sans avoir à comprendre le code.

Reweb propose une bibliothèque de thèmes parmi lesquels les utilisateurs peuvent choisir, qu'ils soient prédéfinis ou créés par l'IA. Par exemple, si vous tapez "Créer un thème technique avec une teinte rouge", l'IA générera un schéma de couleurs et de polices correspondant. Les thèmes peuvent être appliqués à l'ensemble d'un projet en un seul clic, ce qui simplifie la création d'une image de marque.

4. processus d'importation de Figma

Sélectionnez "Importer à partir de Figma" sur la page de création du projet, téléchargez le fichier Figma ou entrez l'URL du fichier, et Reweb analysera la conception et générera les composants et les styles correspondants. Une fois le fichier importé, les utilisateurs peuvent ajuster la mise en page dans l'éditeur ou exporter le code. L'importation à partir de Figma est idéale pour les équipes qui disposent déjà d'un design, et permet de réduire de manière significative le temps entre la conception et le développement.

5. code d'exportation

Une fois la conception terminée, cliquez sur le bouton "Exporter" dans le coin supérieur droit et Reweb générera un fichier ZIP contenant la structure complète du projet Next.js, y compris :

• pages/Fichier de page Next.js.
• components/: Composants réutilisables basés sur shadcn/ui.
• styles/Fichier de configuration CSS de Tailwind.
• package.jsonListe des dépendances du projet.

Les utilisateurs exécutent la commande suivante pour lancer le projet après avoir décompressé le fichier localement :

npm install
npm run dev

Le code exporté est optimisé pour être déployé sur des plateformes telles que Vercel, Netlify, etc. Les utilisateurs du plan Pro peuvent également exporter du code via le CLI, ce qui convient aux flux de travail automatisés.

6. intégration et déploiement

Reweb prend en charge l'intégration de CMS sans tête tels que Strapi. Les utilisateurs peuvent lier des composants à des sources de données dynamiques, telles que des articles de blog ou des listes de produits, en se connectant à l'API du CMS dans l'éditeur. Une fois le projet terminé, nous recommandons de le déployer sur Vercel ou Netlify. La documentation officielle et la communauté Discord fournissent des instructions de déploiement détaillées.

7. fonctionnement des caractéristiques spéciales

• Interface utilisateur générée par l'IALes plans Hobby limitent le nombre de fois où l'IA peut être utilisée, et les plans Pro offrent une utilisation 10x. Les utilisateurs peuvent ajuster les couleurs, la mise en page ou ajouter de nouveaux éléments à l'aide du bouton "Affiner". L'offre Hobby limite le nombre d'utilisations de l'IA, tandis que l'offre Pro permet une utilisation 10x.
• Travail d'équipeLes membres sont invités via des liens partagés et l'éditeur permet une collaboration en temps réel, en affichant le curseur et l'historique des modifications de chaque membre. Le plan d'équipe (bientôt disponible) offrira davantage de fonctionnalités de collaboration.
• Personnalisation des modèlesAprès avoir sélectionné un modèle, utilisez la fonction "Magic UI" pour modifier rapidement les couleurs, les polices de caractères ou les mises en page afin de créer un design propre à votre marque.

8. tarification et planification

Reweb propose trois plans :

• Hobby (gratuit): Convient pour des tests personnels, comprend 2 projets, 5 exportations de code, utilisation limitée de l'IA, liens partagés avec l'image de marque de Reweb.
• Pro ($12/mois): Convient aux développeurs indépendants, comprend un nombre illimité de projets, une exportation de code illimitée, une utilisation de l'IA multipliée par 10, une exportation CLI, pas d'image de marque.
• Équipe (à venir)Le travail d'équipe est favorisé par des limites d'IA plus élevées, une assistance hiérarchisée et une facturation centralisée.

Pour les prix spécifiques, veuillez consulter https://www.reweb.so/pricing.

9. mises en garde

• Compatibilité avec les navigateursChrome ou Firefox sont recommandés, Safari peut avoir des limitations de fonctionnalités.
• Sauvegarde du projetReweb sauvegarde automatiquement et il est recommandé d'exporter régulièrement des sauvegardes de code.
• Soutien communautaireLe texte suivant est un exemple de la manière dont la discorde peut être utilisée avec la fonction Discord().https://discord.gg/WFqTxsQCTX) ou par courrier (mattia@reweb.so) Contactez l'équipe d'assistance.

scénario d'application

1. Mise en ligne rapide des pages marketing
   Les startups doivent mettre en ligne la page d'accueil de leur produit en quelques jours. Les modèles de Reweb et les capacités de génération d'IA permettent de concevoir rapidement des pages avec navigation, zones de héros et boutons CTA, dont le code est exporté et déployé directement dans Vercel.
2. Prototypage frontal
   L'éditeur visuel de Reweb permet d'ajuster rapidement la mise en page et d'exporter du code directement utilisable pour le développement ou la démonstration.
3. Collaboration de la conception au développement
   Les équipes de conception importent des modèles à partir de Figma et les équipes de développement peaufinent les composants et exportent le code dans Reweb, ce qui raccourcit le cycle de conception jusqu'au lancement.
4. Apprendre le développement frontal
   Les débutants apprennent la structure du projet et le processus de développement de Next.js et Tailwind CSS à travers les modèles et les exportations de code de Reweb.

QA

1. En quoi Reweb est-il différent de Framer et de Webflow ?
   Conçu pour les développeurs, Reweb est basé sur les piles Next.js, Tailwind CSS et shadcn/ui, et exporte du code qui s'intègre parfaitement au processus de développement React ; Framer et Webflow sont mieux adaptés aux sites marketing, et exportent du code moins flexible.
2. Différence entre Reweb et les outils d'IA comme v0 ?
   Reweb combine la génération d'IA et l'édition visuelle, avec un support pour l'importation de Figma et une personnalisation profonde, et exporte du code plus adapté aux environnements de production, alors que des outils comme v0 sont plus axés sur la génération rapide d'une interface utilisateur statique.
3. Combien de temps faut-il pour apprendre Reweb ?
   Les développeurs familiarisés avec Tailwind CSS peuvent commencer en quelques heures. Les non-développeurs peuvent s'y mettre en 1 à 2 jours grâce à des contrôles sans code.
4. Quelle est la qualité du code exporté ?
   Le code exporté par Reweb est basé sur Next.js et shadcn/ui, et est optimisé et structuré pour un déploiement en production.
5. D'autres modèles sont-ils pris en charge ?
   Reweb met régulièrement à jour sa bibliothèque de modèles afin de couvrir davantage de scénarios, et des plans spécifiques peuvent être consultés à l'adresse suivante https://reweb.featurebase.app/.