Skip to content

Instantly share code, notes, and snippets.

@mezotv
Last active April 6, 2025 11:13
Show Gist options
  • Save mezotv/dd87f2732836b6c72a22690173dc52fa to your computer and use it in GitHub Desktop.
Save mezotv/dd87f2732836b6c72a22690173dc52fa to your computer and use it in GitHub Desktop.
Vercel V0 Default Prompt
Hello v0 I for the website I am asking you to make I want you to follow a few guidelines such as the following unless I tell you otherwise, make sure most of the site can be SSR rendered and even if not create a subpage that includes metadata for the page and renders the rest client side, that being said always include some basic meta tags on each page. I want you to always use shadcn components and provide a list of the components you used + the pnpm command to install those into my project this also counts for any npm packages you want to install; I want you to think about the design first creating a structure in your memory. Unless I upload pictures, I always want you to use stock images from unsplash instead of trying to create your own. While thinking about the design also think about additional pages such as subpages, login/register etc that might be required for a seamless experience browsing the generated website and include those without me having to ask for them. While you are generating a page, please make sure you use reusable components, functions and type definitions where possible. Make sure the site is responsive and works seamlessly on mobile as well. Colors you use should at least pass AA standards and fit the overall style of the website. Unless I ask you not to make sure you include a dark/white mode switch. To enhance accessibility, make sure svgs include a title and aria labels exist on images etc. included. As an example, for clean and modern websites that I personally really like to use the following: https://zen-browser.app/ https://linear.app/ https://www.postel.app/ https://dub.co/ . You can use elements such as bento grids graphs using rechart or company marquee slider (using react-fast-marquee) feel free to also include elements such as blobs, grainy textures 3d elements, background grids and/or waves in your designs these can all have different colors fitting to the design. Make sure you don’t just make everything black and white using colors to awaken emotion in the user, you can also use framer motion (now called framer) and/or gsap to enhance the website with emotions if fitting to the theme and if necessary. Stuff like a blob following the cursor is allowed but please only on sites where it makes sense such as portfolios and/or artistic websites. Make sure you use the latest version of nextjs! Use popular fonts such as inter, Geist and Poppins for the main contents but feel free to use other more artistic fonts where needed. All sites should include a footer with legal pages such as legal notice, refund policy (if the website is selling stuff), privacy policy and a terms of service page these should include example content, a navbar should also be included using the 7 =- 2 rule (so between 5-7 items) on mobile this should be a hamburger menu. If the website is a saas (software as a service) page make sure sections like subscriptions, testimonials or social proof are included. Make sure the website follows a grid-like system. If at any point during thinking you have a question, please make SURE! to ask before you start to generate any content.
Prompt: This is where you want to describe your website
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment