Prompt-Driven UI

Generate website designs directly from plain English—no Figma needed. Explore 100 website designs (50 in English, 50 in Vietnamese).

Learn to Prompt View 100 Designs

How to Use the Prompts

A short guide on using AI to generate new website designs based on our 100 existing examples.

1 Generate the Exact Website

You can copy the provided markdown prompts and paste them into AI code generators (like Claude, ChatGPT, v0 by Vercel, or GitHub Copilot) to generate fully functional HTML/CSS/JS without any modifications.

2 a) Create a Similar Website

To create a unique website based on these examples, simply modify the variables in the prompt text:

  • Content: Swap out titles, descriptions, and placeholder text with your own.
  • Color Scheme: Update the color names (e.g., change "dark mode with neon accents" to "light mode with earth tones").
  • Layout Structure: Adjust layout instructions (e.g., "3-column grid" to "single column list").

3 b) Create a Multi-Language Website

Our prompts are available in both English and Vietnamese. To adapt a site for multiple languages or a completely new language:

  • Provide the layout and technical instructions in English to the AI for the best structural results.
  • Provide the localized copy (e.g., Japanese, Spanish) within the content section of the prompt.
  • Instruct the AI to add a "Language Switcher" toggle in the navigation bar.

Using the Website Designer Skill

Set up and use the Website Designer skill to instantly create new website designs via natural language prompts.

1 Setup the Skill

Ensure the skill is available in your agent setup. See the How-To Guide for detailed setup instructions.

2 Generate a Design

Trigger the skill using prompts. Sample prompts you can try:

Create a website Based on existing website design, create a new ticket booking website

Designs & Prompts

About

💡 Why I created this

To help someone like me, who is not good at UI/UX design, to create a beautiful web design easily.

🎯 Who is this for

For me, a lazy backend engineer, and for non-IT people who want a good design in a short time.

🧠 The Main Idea

We create web designs based on existing curated and good web designs.

🚀 How It Works

Pick a layout, copy the prompt, and let AI generate your clean, responsive HTML and Tailwind code.

⚡ The Benefit

Ship faster. Save hours of tweaking CSS and skip Figma entirely—go straight from idea to code.

🤝 Open Source

Free and MIT licensed. Anyone can use, modify, and contribute new designs to the collection.

Author: Vu Hung Nguyen

LinkedIn GitHub Project