1. 项目定位与用途
UI-Prompt 是一个 Web 应用，定位为 UI 风格提示模板库。它提供多种设计风格（如极简主义、拟物化、复古风格）的完整提示模板，以及可复用组件（导航、模态框等）和拖放式布局构建器。核心用途是帮助开发者将精心设计的提示粘贴到 AI 工具中，快速生成高质量、设计驱动且一致的 Web 界面代码，减少从零开始设计的成本。
项目档案应用项目
UI-Prompt：AI 生成 Web 界面的提示模板库 | 安装使用指南与在线演示
UI-Prompt 提供精心设计的 UI 风格提示模板，帮助开发者通过 AI 工具生成高质量、一致的 Web 界面。本页介绍项目定位、解决的问题、适用场景、安装步骤（npm install）、使用方法（复制提示到 AI）及核心功能特点。
AI 总结
UI-Prompt 是一个精心设计的 UI 风格提示模板库，帮助开发者通过 AI 工具生成高质量、设计一致且专业的 Web 界面，有效减少 AI 生成的“AI 感”。
中文项目介绍
UI-Prompt 是一个 Web 应用，提供结构化的 UI 设计风格提示模板，旨在解决 AI 生成界面同质化、缺乏设计语言的问题。它通过预定义的风格卡片、双语提示模板、一键复制和即时预览，驱动稳定且设计一致的 AI 输出，使生成的界面更干净、可用性更高。
项目适用于使用 AI 编码助手（如 Claude Code、Codex）快速生成 Web 界面原型的开发者，尤其适合希望保持 UI 设计一致性、专业性，或学习不同 UI 设计风格实现方式的场景。
技术实现上，项目基于 React + Vite 构建，采用组件化架构，模块包括布局、预览、提示、代码编辑、过滤、数据加载和通用 UI 组件库。数据层使用加载器模式管理样式清单与内容，构建系统优化了代码分割与懒加载，并支持预渲染、SEO 验证及多语言翻译等开发者工具脚本。
详细信息与使用说明
2. 解决的问题
项目直接针对 AI 生成 UI 的痛点：输出结果往往相似、缺乏独特设计语言、具有强“AI 风格”。通过提供 battle-tested 的提示模板、双语支持、即时预览和一键复制，它确保了 AI 输出的稳定性和设计可控性，使生成的界面更干净、可用性更高，同时保持风格一致性。
3. 适用场景
主要场景包括：开发者使用 AI 编码助手（如 Claude Code、Codex）快速生成 Web 界面原型；团队希望维护 UI 设计规范，避免 AI 生成的随意性；设计师或开发者学习不同 UI 设计风格的实现细节与最佳实践。项目在线演示（https://www.uiprompt.site）提供了实际效果参考。
4. 安装方式
项目基于 Node.js 和 npm。安装步骤明确：首先在项目根目录运行 `npm install` 安装所有依赖项；随后运行 `npm run dev` 启动本地开发服务器。开发服务器默认监听 http://localhost:1000/，可在浏览器中访问。仓库中未提供其他包管理器（如 yarn）的安装命令。
5. 使用方式
启动开发服务器后，在浏览器访问 localhost:1000。用户可以浏览可用的 UI 风格模板、组件模板或使用布局设计器。点击任意模板可查看即时预览和对应的 AI 提示文本，通过一键复制功能将提示粘贴至 AI 工具（如 Claude Code）生成代码。项目还提供代码编辑器（集成 Monaco）查看生成代码片段。仓库中未明确提供生产环境部署的详细步骤，但包含 Dockerfile 和 nginx 配置暗示支持容器化部署。
6. 补充说明与实现特点
项目架构清晰：前端使用 React 和 Preact，构建工具为 Vite；UI 库基于 Framer Motion、@dnd-kit 等；代码编辑使用 Monaco Editor。数据层通过多个加载器（FamilyLoader、ManifestLoader 等）统一管理，支持 5 级预览回退和 ID 解析。构建系统高度优化，手动分块懒加载大型依赖（如 Monaco），并包含预编译 JSX、SEO 验证、提示验证与翻译等脚本。README 的 Todo 列表指出组件页面存在较多问题且 i18n 未完善，表明项目仍在活跃开发中。
思维导图
UI-Prompt
样式模板系统
Flat Design
Minimalism
Skeuomorphism
Retro 系列
Visual 系列
组件提示库
Navigation
Modal Dialog
Loading Skeleton
交互式布局设计器
拖放组件
布局组合
提示生成
预览与代码系统
实时预览
Monaco 编辑器
代码片段展示
数据与工具层
数据加载器
提示验证脚本
翻译工具
模板创建脚本
常见问题
如何安装和运行 UI-Prompt？
在项目根目录执行 `npm install` 安装依赖，然后运行 `npm run dev` 启动开发服务器，最后在浏览器访问 http://localhost:1000/ 即可使用。仓库中未提供其他安装方式。
如何使用提示模板生成 UI？
在应用中浏览或搜索所需的 UI 风格或组件模板，点击进入详情页查看即时预览和对应的 AI 提示文本，使用一键复制功能将提示粘贴到 AI 工具（如 Claude Code）中，即可生成相应的界面代码。
项目支持哪些 UI 设计风格？
项目提供多种风格，包括 Flat Design、Minimalism、Skeuomorphism 以及 Retro 系列（如 Film Noir、Mid-Century Modern、Synthwave）和 Visual 系列（如 3D Elements、Biophilic、Blueprint）等。具体列表可在应用的样式页面查看。
组件模板是否完整可用？
README 中明确指出组件页面存在较多问题（Too much issue in Component page）且提示不完整，同时 Todo 列表包含 i18n 问题和更多 UI 样式预览需求。因此组件模板可能不稳定，使用前建议验证提示。