一个强大的前端工具，旨在帮助设计师和开发者快速生成高质量、结构化的 UI 设计提示词
在大佬的基础上新增了一些功能，接入了openai接口的大模型 原仓库：https://github.com/fenzaiway/ui-html
[在线体验 Demo ] https://aiuihtml.pages.dev
- 引导式生成流程: 通过四个简单步骤（设计目的 -> 风格选择 -> 颜色与组件 -> 生成提示词）引导用户创建详细的提示词。
- 丰富的预设选项:
- 多种设计目的（网站、App、仪表盘等）。
- 多种行业领域。
- 多种设计风格（简约、现代、复古、科技感等）并配有预览图。
- 预设调色板及自定义颜色选择。
- 大量常用 UI 组件分类选择（导航、内容、交互、数据等）。
- AI 增强 (可选):
- 集成 OpenAI API (需要用户配置自己的 API Key)。
- 可将基础的用户选择智能优化和扩展为更具体、富有创意的 AI 绘图提示词。
- 支持选择不同的 OpenAI 模型 (如 GPT-4o, GPT-4 Turbo 等)，并可获取可用模型列表。
- 提示词定制化:
- 支持选择提示词语言（英文/中文）。
- 支持选择提示词详细程度（简洁/标准/非常详细）。
- 可添加额外的细节描述。
- 可输入反向提示词 (Negative Prompts)。
- 可选择图片比例/屏幕尺寸预设。
- 提示词编辑与微调: 生成的提示词可以直接编辑和保存。
- 提示词变体生成:
- 基于主提示词，利用 AI 生成多个略有不同的变体。
- 可控制生成变体的数量和差异度。
- 变体提示词可独立编辑和复制。
- 实用辅助功能:
- 设计模板: 提供多种预设的 UI 设计模板作为快速起点。
- 常用关键词片段: 一键添加常用修饰词（如深色模式、玻璃拟态等）。
- 自定义关键词: 用户可以添加和管理自己的常用关键词。
- 历史记录: 自动保存生成的提示词，支持加载和搜索。
- 当前选择预览: 实时显示用户当前的选择摘要。
- 组件预览: 简单展示已选组件列表。
- 随机灵感: 一键随机生成一套设计参数，激发创意。
- 用户体验:
- 国际化 (i18n): 支持简体中文和英文界面。
- 主题切换: 支持亮色和暗色主题。
- 响应式设计: 适应不同屏幕尺寸。
- 配置导入/导出: 方便保存和分享用户的完整配置。
- 新手教程: 首次访问时提供引导教程。
- 提示与技巧: 提供使用建议。
- 美观的 UI 和交互: 使用 Tailwind CSS 和 Font Awesome 图标，注重视觉和交互细节。
- 纯前端实现: 所有核心功能（除 AI 增强外）均在浏览器端运行，无需后端服务器。用户数据（如 API Key、历史记录、自定义关键词）存储在本地 localStorage。
- 直接使用:
下载
index.html文件并在你的浏览器中直接打开。 - 配置 OpenAI (可选但推荐):
- 点击页面右上角的齿轮图标⚙️打开设置面板。
- 输入你的 OpenAI API Key。
- (可选) 修改 Base URL (如果使用代理或兼容的第三方服务)。
- (可选) 选择或自定义使用的 AI 模型。
- 点击“保存”。API Key 会安全地存储在你的浏览器本地。
- 开始生成提示词:
- 步骤 1: 选择你的设计目的和行业领域。
- 步骤 2: 选择一个设计模板（可选）或直接选择你喜欢的设计风格。
- 步骤 3: 选择主题颜色和需要的 UI 组件。
- 步骤 4:
- 选择提示词语言和详细程度。
- 选择图片比例。
- 填写更多细节、反向提示词（可选）。
- 点击常用关键词快速添加。
- 点击“生成提示词”按钮。
- 如果配置了 OpenAI API Key，AI 会对提示词进行增强。
- 你可以编辑生成的提示词，或基于它生成更多变体。
- HTML5
- CSS3 (Tailwind CSS v2.2.19)
- JavaScript (ES6+) (原生 JS，无框架依赖)
- Font Awesome 6 (图标)
- Unsplash (风格预览图来源)
本项目采用 MIT 许可证。