AI Design Prompts - Web UI/UX Design Learning Platform


Web UI Design Prompts - An interactive learning platform for UI/UX design vocabulary, CSS components, and AI-generated design prompts.

English | 中文

🇬🇧 English

Web UI Design Prompts (formerly AI Design Prompts) is an interactive learning platform designed specifically for web developers, non-frontend programmers, product managers, and design beginners to learn UI/UX concepts.

🎯 Mission

In the modern software development process, the gap between "backend logic" and "frontend presentation" often leads to communication costs. My goal is to bridge this gap by providing:

• Visualized Design Terms: Understand abstract concepts like "Flexbox" or "Grid" through interactive demos.
• Ready-to-use Code: Copy-paste production-ready HTML/CSS snippets.
• Design Inspiration: Explore curated UI styles like "Cyberpunk" or "Neumorphism".

🚀 Key Features

📚 Interactive Vocabulary

A comprehensive dictionary of UI/UX terms. Each term comes with:

• Interactive Playground: Tweak parameters and see changes in real-time.
• Code Snippets: Clean, semantic HTML and CSS.
• Best Practices: When to use it and when to avoid it.

🎨 Style Gallery

A collection of trending and classic design styles.

• Full Page Previews: See how a style applies to a real landing page.
• Theme Configuration: Colors, typography, and spacing variables.
• Magic Prompts: AI prompts to generate similar designs.

🛠 Tech Stack

This project is built with modern web technologies:

• Next.js 16: For server-side rendering and static generation.
• Tailwind CSS 4: For utility-first styling.
• MDX: For writing content mixed with React components.
• TypeScript: For type safety.
• Next-Intl: For internationalization (i18n).

🏁 Getting Started

First, install dependencies:

npm install
# or
yarn install
# or
pnpm install

Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

---

🇨🇳 中文

Web UI Design Prompts (原 AI Design Prompts) 是一个专为 Web 开发者、非前端程序员、产品经理和设计初学者打造的交互式 UI/UX 学习平台。

🎯 使命

在现代软件开发过程中，“后端逻辑”与“前端展现”之间的鸿沟往往导致沟通成本增加。我的目标是通过以下方式弥合这一差距：

• 可视化设计术语: 通过交互式演示理解“Flexbox”或“Grid”等抽象概念。
• 即用型代码: 一键复制生产就绪的 HTML/CSS 代码片段。
• 设计灵感: 探索“赛博朋克”或“新拟物化”等精选 UI 风格。

🚀 核心功能

📚 交互式词汇表

UI/UX 术语的综合词典。每个词汇都包含：

• 交互演示: 调整参数并实时查看变化。
• 代码片段: 干净、语义化的 HTML 和 CSS。
• 最佳实践: 了解何时使用以及何时避免。

🎨 风格画廊

流行和经典设计风格的集合。

• 全页预览: 查看风格如何应用于实际落地页。
• 主题配置: 颜色、排版和间距变量。
• Magic Prompts: 用于生成类似设计的 AI 提示词。

🛠 技术栈

本项目使用现代 Web 技术构建：

• Next.js 16: 用于服务端渲染和静态生成。
• Tailwind CSS 4: 用于原子化样式开发。
• MDX: 用于编写混合 React 组件的内容。
• TypeScript: 提供类型安全。
• Next-Intl: 用于国际化 (i18n)。

🏁 快速开始

首先，安装依赖：

npm install
# or
yarn install
# or
pnpm install

然后，运行开发服务器：

npm run dev
# or
yarn dev
# or
pnpm dev

在浏览器中打开 http://localhost:3000 查看结果。