We have tested the work of the neural network https://v0.dev/ that helps generate interfaces, landing pages, and white pages in the mode of text commands or using the ready-made reference.
v0 is a service based on artificial intelligence – it generates easy-to-use React code based on shadcn/ui and Tailwind CSS. As a result, users get high-quality interfaces, web elements, or entire web pages without coding.
Examples
Examples of work are available here: https://v0.dev/explore There you can also see all stages of generation and prompts (text commands) that were used.
Our test white page generation:
- https://v0.dev/t/YhU7kBlU3kx – by text description
- https://v0.dev/t/vHwH1g8n1Aw – based on a screenshot found on the Internet
- https://v0.dev/t/rINhEShaTmZ – by our reference
All created works are publicly available by default – you can hide them only if you have a paid tariff plan:
Tariff plans
The service is in the Beta stage now and can be used for free. You can sign up via email or authorize via Github. Credits are immediately credited to the internal balance.
Landing page generation
There are 2 variants of generation:
- Using prompt (text description). The service understands Russian.
- Using a reference, such as a screenshot of the desired landing page.
To try it out, let’s load our simple reference:
Several variants are generated first:
You can select a suitable one and continue to refine it with prompts until you get the desired result.
You can also select the elements that need to be corrected
Save as landing page
To download and use the generated interface as a landing page, click the “Code</>” button
This will open a tab with the final code with React and HTML versions available:
On your computer, create an index.php file and copy the PHP code from the HTML tab into it.
Important: the generator uses the TailwindCSS framework, and to make the styles work on the landing page, you need to connect this framework, for example via CDN, adding <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> to the code.
Unfortunately, this service is not able to generate images, you will have to upload them to the index.php file, using the names from the resulting code. You can use the Midjourney neural network to generate images.
Since we have a PHP file, to view it, we need to upload it to the server or use a service like https://codepen.io/pen/.
Comments