{"id":"0bb998cb-1b95-4473-bc23-6b89caa350cd","slug":"prompt-driven-ui","kind":"skill","name":"prompt-driven-ui","summary":"A showcase of 100+ website designs (concepts and variations) generated entirely from text prompts. Explore the possibilities of AI-driven UI generation and see how natural language translates into mod","owner":"vuhung16au","repoUrl":"https://github.com/vuhung16au/prompt-driven-ui","license":"MIT","licenseTier":"permissive","trust":"community","stars":2,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-09-28T06:33:49.000Z","addedAt":"2026-10-21T23:57:06.162Z","logoUrl":"https://avatars.githubusercontent.com/u/153976259?u=0d84c662a0beaf11c5cf32a8643278ed7b8f5eb6&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media"],"tags":[],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-26T18:56:33.468Z","sample":false,"url":"https://conduits.dev/tools/prompt-driven-ui","language":"HTML","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# Prompt-Driven UI\n\nRead this in other languages: [English](README.md) | [Tiếng Việt](README.vi.md) | [简体中文](README.zh-CN.md)\n\nA showcase of 100+ website designs (concepts and variations) generated entirely from text prompts. Explore the possibilities of AI-driven UI generation and see how natural language translates into modern web design.\n\n## 🚀 Project Overview\n\nThe goal of this project is to demonstrate the capability of Large Language Models (LLMs) and Generative AI in creating structured, aesthetic, and functional web interfaces directly from text instructions. By providing specific prompts, we can rapidly prototype and iterate on various UI layouts, components, and styles.\n\n## 📁 Project Structure\n\n- `index.html`: The main gallery web page to browse and explore all the generated designs.\n- `prompts/` & `prompts-en/`: The natural language text prompts used to generate the corresponding web interfaces.\n- `websites/` & `websites-en/`: The actual generated UI source code (HTML, CSS, JS) based on the prompts.\n- `thumbs/`: Thumbnail images of the generated websites used for the gallery preview.\n- `scripts/`: Utility scripts used for building or organizing the repository.\n\n## ✨ Features\n\n- **100+ AI-Generated Designs:** A rich collection of diverse web interface concepts.\n- **Prompt-to-Code Mapping:** Easily compare the input natural language prompt with the resulting output code.\n- **Multilingual Prompts:** Prompts and generations categorized in English and other locales.\n- **Fully Open Source:** Feel free to explore the code, modify the prompts, and experiment with your own generations.\n\n## 🛠️ How to Use\n\nTo view the showcase, you don't need any complex setup:\n\n1. Clone the repository to your local machine.\n2. Open the `index.html` file directly in your web browser.\n3. Alternatively, for the best experience, run a local development server:\n   ```bash\n   npx http-server\n   # or\n   python3 -m http.server\n   ```\n\n### 🤖 Using as an AI Agent Skill\n\nThe easiest way to generate your own designs is to use this repository as a reference \"Skill\" for your AI coding assistant (like Antigravity, GitHub Copilot, or Cursor).\n\n1. **Checkout the repository:** Clone this repo to your local workspace.\n2. **Instruct your AI Agent:** Ask your coding agent to create a new web design by referencing the existing examples. For example:\n   > *\"Look at the 50x2 samples in the `prompts/` and `websites/` directories. Based on these examples, create a new landing page for a coffee shop.\"*\n3. **Set up a Permanent Skill:** You can formalize this workflow by creating a custom skill file (e.g., `SKILL.md` or `.cursorrules`) in your workspace that instructs your agent:\n   - *\"Always use the `prompt-driven-ui` repository as your primary reference for UI generation.\"*\n   - *\"Analyze the mapping between `prompts/` and `websites/` to understand the preferred HTML/CSS structure before generating new designs.\"*\n\n## 📄 License\n\nThis project is licensed under the terms of the project's [LICENSE](LICENSE) file.\n"}