Bolt.new es una plataforma de desarrollo impulsada por inteligencia artificial que permite a los usuarios generar sitios web completos directamente a partir de descripciones en lenguaje natural sin necesidad de escribir código. Como herramienta de "vibe coding", entiende y materializa la intención creativa del usuario, incluida la estructura, funcionalidad, estilo y atmósfera del sitio web. En este artículo, explicaremos en detalle cómo utilizar Bolt.new para crear rápidamente sitios web profesionales.

Bolt.new y sus principales funciones

Bolt.new es una plataforma de "vibe coding" que genera sitios web a partir de descripciones en lenguaje natural sin necesidad de escribir código. Su función principal es convertir las ideas de los usuarios para sitios web descritos en lenguaje natural en sitios web reales y utilizables.

Es como una combinación de v0 y Cursor, permitiendo a los usuarios editar programas full-stack de manera eficiente y efectiva.Bolt ejecuta el backend directamente en el navegador y soporta el despliegue en Netlify, además puedes generar apps con los últimos lenguajes/frameworks de programación como React, Next.js, Remix, SvelteKit, y Vite.

Una de las grandes ventajas de Bolt.new es la capacidad de instalar paquetes dinámicamente. Por ejemplo, si quieres instalar paquetes como el de la API de OpenAI o Tailwind, también puede hacerlo. Así que básicamente, es capaz de crear una aplicación completa, mientras que v0 no puede hacer eso.

Otras características destacables son:

• No es necesario configurar el entorno de desarrollo, la página web se abrirá y estará lista para su uso
• Soporte de múltiples rondas de diálogo para la optimización continua del código.
• Posibilidad de cargar bocetos dibujados a mano para convertirlos en un sitio web.
• Generación y previsualización de código en tiempo real
• Capacidad de despliegue con un solo clic

¡Empiece a crear sitios web con Bolt.new!

El proceso de utilización de Bolt.new es muy intuitivo:

1. Visite el sitio web oficial: abra su navegador y escribahttps://bolt.newy regístrese para obtener una cuenta (se admiten cuentas gratuitas)
2. Describa lo que quiere: introduzca los requisitos de su sitio web en el cuadro de entrada situado en el centro de la página de inicio, ¡como si fuera un chat!
3. La IA empieza a generar sitios web: en cuestión de segundos o minutos, Bolt.new genera automáticamente un borrador de sitio web funcional, incluyendo la estructura de la página y el HTML/CSS/JavaScript correspondiente.
4. Explora y optimiza: puedes modificar el prompt para regenerarlo, utilizar herramientas de interfaz para afinarlo aún más o modificar directamente el código.

Para la generación de código, no necesita instalar ningún software, puede utilizarlo abriendo la URL, y no hay problema de que la región de China esté restringida. Durante el proceso de generación de código, puede optimizar su sitio web a través de múltiples rondas de diálogo con Bolt. Haga clic en los botones de código y vista previa respectivamente para ver el código correspondiente y previsualizar el efecto.

Cuando el diseño del sitio web se ha completado, puede descargar directamente el código generado a través de la esquina superior derecha de la descarga, también puede hacer clic directamente en el despliegue de un solo clic.

Escritura eficaz Bolt.new Prompt Words

Crear palabras clave eficaces es la clave para utilizar Bolt.new. He aquí algunos principios importantes:

1. Cuanto más específica sea la descripción, mejor: la IA es fuerte, pero no es un gusano en tu estómago. Cuanto más específico seas, más podrá restablecer la estructura, la combinación de colores, la funcionalidad y el estilo que desees.
2. Centrarse en la expresión de "atmósfera y estilo": Bolt pertenece a la herramienta "vibe coding", que entiende no sólo "qué hacer", sino también "cómo presentar".
3. Repetir y optimizar constantemente las propuestas: las propuestas iniciales suelen ser sólo borradores, y las realmente buenas requieren varias rondas de experimentación, refinamiento y pulido.
4. Empieza por el panorama general y ve bajando: pedir demasiado al principio puede resultar "confuso" para la IA. Es más eficaz dar primero el marco y luego añadir detalles.
5. Combinado con la edición del código: a veces los resultados generados por la IA no son lo suficientemente precisos, y ajustando manualmente el código se puede lograr un control de mayor precisión.

Fórmula de la plantilla Cue word

Las palabras de aviso de alta calidad pueden seguir esta estructura básica: "Crea un [tipo de sitio web] para [público objetivo], con páginas que contengan [estructura específica], un esquema de color de [colores], un estilo [palabras de ambiente] y una sensación general [adjetivos descriptivos]. Por favor, asegúrese de que se admite la adaptación móvil".

Ejemplo:

Pila tecnológica: hacerlo con HTML puro + TailwindCSS

Función principal: Quiero hacer un sitio web de plan de formación de maratón, el usuario para rellenar su edad, altura, peso, el último maratón y los últimos resultados de la carrera de media maratón, su objetivo esperado para mejorar el rendimiento (PB), haga clic en el botón, puede generar el plan de formación. Plan de algoritmo de generación no me importa, que me ayude a completar, pero para planificar a generar a cabo para que los usuarios se sientan profesionales, justificado, dispuesto a pagar. Planes generados deben incluir al menos el nivel actual del atleta, el plan para alcanzar el objetivo de rendimiento del tiempo requerido, así como el período de tiempo del plan de formación y la razón y así sucesivamente.

Área funcional: debe tener la cabecera completa, testinoials, faq, características, precios, cómo funciona ,área de pie de página. El propietario de los derechos de autor del sitio web es AI Nuggets Society, 联系方式jiangzziv@gmail.com. El resto del contenido debe estar escrito con profesionalidad y autenticidad.

Redacción del sitio web: Para todo el contenido de la redacción del sitio web, necesito que utilices el chino. En cuanto al sitio web del plan de entrenamiento para maratones, hay que destacar que es profesional y que ha sido proyectado por big data.

Estilo del sitio web: El esquema de colores y el estilo del sitio web tienen que ser modernos y avanzados, similares al estilo del sitio web oficial de Apple. El sitio web debe adaptarse a distintos tamaños de pantalla.

Casos prácticos y ejemplos

He aquí algunos ejemplos de palabras clave para distintos tipos de sitios web:

1. Página web de portafolio personal: Creación de una página web minimalista de portafolio personal para un diseñador gráfico autónomo. La página contiene una barra de navegación superior, un perfil, una imagen grande que muestra el área de trabajo y un formulario de contacto. El esquema de color es negro, blanco y gris, con fuentes grandes sans serif, diseño sencillo, mucho espacio en blanco y un estilo moderno y artístico. Es adecuado para móviles.
2. Página de aterrizaje de producto: diseño de una página de aterrizaje de producto para una marca de botellas de agua ecológicas con un estilo general natural y fresco. Logotipo y navegación sencilla en la parte superior, imagen de alta resolución del producto en el centro, con combinación de colores verde y marrón claro. Incluye un bloque de características del producto, un control deslizante de opiniones de usuarios y un botón de "pre-pedido". La parte inferior de la página contiene enlaces a redes sociales y un formulario de suscripción. Adecuado para navegación móvil.
3. Página de inicio corporativa SaaS: Crear una página de inicio de producto SaaS B2B con descripción del producto, tabla comparativa de características, testimonios de clientes, tabla de precios y botón CTA. El esquema de colores utiliza azul oscuro + gris y blanco para enfatizar la tecnología y la profesionalidad. La fuente del titular es negrita, el cuerpo del texto es claro y el diseño se basa en una cuadrícula adaptable para ordenadores de sobremesa y dispositivos móviles. El estilo es moderno, creíble y profesional.
4. Página de plataforma educativa: Diseño de página de inicio para una plataforma de cursos de programación en línea. Contiene navegación de búsqueda superior, tarjeta de categoría de curso, banner de curso caliente, perfil de tutor y botón "Regístrese ahora". El color es azul claro + naranja, el estilo general es moderno y enérgico. El uso de botones redondeados, encabezados grandes y un diseño claro de las tarjetas hace que sea compatible con la navegación desde móviles y tabletas.

Consejos avanzados y buenas prácticas

Iteración y optimización

Una característica especialmente potente de Bolt.new es que, si se produce un error durante la interacción con la aplicación a la derecha, aparece una respuesta similar a la izquierda. Esta función no estaba disponible en otras herramientas originales de IA automatizada.

Otra característica útil es que en múltiples iteraciones, cuando se plantea un nuevo requisito, Bolt modifica el código original del proyecto y es capaz de ver el archivo de cambios correspondiente al código que está saltando, lo que ayuda a entender dónde está impactando el requisito en el proyecto global.

Combinación práctica de funciones

Para el proceso de desarrollo, se puede utilizar esta combinación de estrategias: al principio del desarrollo, se utiliza Bolt Design para generar el diseño inicial y el código del front-end. A continuación, se importa Cursor y se sigue utilizando Cursor para realizar modificaciones finas y acceder al back-end. De este modo se combinan los puntos fuertes de ambas herramientas para lograr una mejor experiencia de desarrollo.

Consideraciones sobre precios y recursos

Si necesitas más tokens AI o quieres un proyecto privado, puedes comprar una suscripción en los ajustes de Bolt.new. La más barata es de 20$ por 1 mes y 10M de tokens, lo que debería ser suficiente para el usuario medio. Vale la pena señalar que la cantidad gratuita puede llegar a ser limitada a medida que la plataforma se hace popular. Actualmente es esencialmente gratis usarla varias veces, pero las cosas pueden cambiar en el futuro, de forma similar a la trayectoria de V0.

Con Bolt.new, incluso los usuarios sin conocimientos de programación pueden crear rápidamente sitios web profesionales y funcionales. Combina el poder de comprensión del lenguaje natural de la IA con la tecnología de generación de código para ofrecer un nuevo enfoque del desarrollo de sitios web. Tanto si eres un emprendedor, un creador de contenidos o un profesional que quiere crear prototipos rápidamente, Bolt.new puede ayudarte a hacer realidad tus ideas de sitios web de forma eficiente.

Cabe destacar que Bolt.new no es sólo una herramienta de generación de código, sino también una plataforma de "vibe coding" que entiende y realiza el estilo y la atmósfera del sitio web que desea expresar. Estructurando sabiamente sus claves, podrá crear sitios web que sean a la vez bellos y funcionales.

Si desea utilizar GPT Plus, Claude Pro, Grok Super cuenta exclusiva oficial de pago, puede ponerse en contacto con nuestro equipo profesional (wx: abch891) si no sabe cómo recargar su cuenta.