【转载】分享AI编程提示词

绿色老鼠

发表:3周前｜更新:3周前 | {{user.city}}

闲聊 |

113

| 2

来源：https://aiwarts101.feishu.cn/wiki/T72JwSryQi3tRLkNKUrcaNIDnec

公众号文章：https://mp.weixin.qq.com/s/sWY7nAokzYEtvpsZHurc9w

天气组件

Create a single HTML file containing CSS and JavaScript to generate an animated weather card. The card should visually represent the following weather conditions with distinct animations: Wind: (e.g., moving clouds, swaying trees, or wind lines) Rain: (e.g., falling raindrops, puddles forming) Sun: (e.g., shining rays, bright background) Snow: (e.g., falling snowflakes, snow accumulating) Show all the weather card side by side The card should have a dark background. Provide all the HTML, CSS, and JavaScript code within this single file. The JavaScript should include a way to switch between the different weather conditions (e.g., a function or a set of buttons) to demonstrate the animations for each.

3D生成

作为一名专精于Three.js的创意技术总监和可视化专家，你擅长将复杂信息转化为引人入胜的交互式3D体验。请为我提供的任何主题或内容创建一个令人惊艳的单页面HTML展示，融合高级视觉设计和沉浸式3D效果。

## 关键技术要素

使用以下技术栈构建沉浸式体验：
- Three.js (https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js)
- 内嵌自定义控件代码，避免外部依赖问题
- Tailwind CSS (https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css)
- Font Awesome (https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css)
- 中文排版使用 Noto Serif SC 和 Noto Sans SC
- GSAP动画库 (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js)

## 3D场景设计

根据内容主题，设计一个完整的Three.js场景，可能包括：
- 适合主题的3D几何体、模型或粒子系统
- 动态相机和光照设置
- 基于滚动或用户交互的动画效果
- 在3D环境与2D内容之间建立有意义的联系
- 环境氛围(雾效、阴影、反射等)增强视觉深度

## UI与内容布局最佳实践

遵循以下布局原则，确保3D内容成为焦点：
- 3D场景应占据主要视觉空间，内容不应遮挡3D体验
- 使用可折叠侧边栏或模态框展示详细文字内容
- 鼠标放到侧边栏，自动展开，移开后缩回去。
- 为3D元素添加标签系统，允许用户了解各部分功能和意义
- 使用半透明UI元素，在提供信息的同时不阻断3D场景的可见性

## 交互提示系统

设计直观的交互引导体验：
- 添加简洁的初始操作提示，几秒后自动降低透明度
- 在用户执行操作时提供即时反馈，更新提示内容
- 为关键3D元素添加标签或高亮效果，帮助用户理解场景
- 设计清晰的控制按钮，具有明确的视觉状态变化
- 在复杂操作前提供简短教程或演示
- 3D模型自动循环，但速度要慢。

## 设计原则

遵循以下设计原则创建引人入胜的体验：
- 整合而非装饰：3D元素应直接服务于内容表达，而非仅作装饰
- 性能优先：确保复杂视觉效果不影响页面加载和运行速度
- 沉浸式叙事：利用3D效果构建内容的视觉叙事层次
- 交互深度：添加多层次交互，让用户通过探索发现内容
- 响应式适配：确保在所有设备上提供最佳体验，智能降级复杂效果

## 额外加分

可选择以下一种或多种创意方向拓展体验：
- 物理引擎模拟：使用cannon.js等物理引擎创建具有真实感的交互

## 输出成果

提供包含以下内容的完整解决方案：
1. 单一HTML文件，包含所有必要CSS和JavaScript（避免外部依赖）
2. 只输出HTML，不要其他任何引导语和介绍。

无论我提供什么主题，都请发挥你的创意想象力和技术专长，创造一个超越传统网页的沉浸式体验，确保3D内容成为核心焦点，而辅助信息以不干扰的方式呈现。

待处理主题：巧克力制作

全部评论

倒序显示↓

绿色老鼠

发表 :3周前 | Loading

1 楼

提示词学习网站：https://www.promptingguide.ai/zh

绿色老鼠

发表 :3周前 | Loading

2 楼

现在需要输出适用于网页开发和小程序开发的高保真原型，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：

1. **用户体验分析**：  
   - 分析网页或小程序的主要功能和目标用户需求，明确核心交互逻辑和用户流程。  
   - 提供简要的用户体验分析说明，突出关键功能和交互设计的目标。

2. **高保真 UI 设计**：  
   - 作为 UI 设计师，设计符合现代网页或小程序设计规范的界面（例如，响应式设计适配桌面和移动端，或微信小程序的界面规范）。  
   - 使用现代化的 UI 元素（如扁平化设计、卡片布局、微交互等），确保视觉体验简洁、直观且专业。

3. **HTML 原型实现**：  
   - 使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面的代码，确保代码可直接用于前端开发。  
   - 集成 FontAwesome 或其他开源 UI 组件（如 Material Icons），提升界面的美观度和真实感。  
   - 保持代码结构清晰，遵循模块化原则，便于后续开发维护。

4. **文件结构与组织**：  
   - 每个界面设计为独立的 HTML 文件，例如 `home.html`、`profile.html`、`settings.html` 等。  
   - 创建 `index.html` 作为主入口，不直接包含所有界面的完整代码，而是使用 `<iframe>` 或其他前端技术（例如 JavaScript 动态加载）嵌入这些独立页面。  
   - 在 `index.html` 中平铺展示所有页面原型（而非通过跳转链接导航），方便开发者和设计师快速预览。

5. **开发适配性**：  
   - 确保生成的代码支持响应式设计，能够适配不同屏幕尺寸（桌面、平板、手机）。  
   - 如果是小程序开发，代码需贴近小程序框架（如微信小程序的 WXML + WXSS），并提供必要的注释说明差异。  
   - 提供简要的 CSS 和 JavaScript 文件（如 `styles.css` 和 `script.js`），用于支持交互效果和样式复用。

请按照以上要求生成完整的 HTML 代码及相关文件，确保其可直接用于网页或小程序的实际开发，并附上简要说明以便开发者快速上手。

自用但是其实这个提示词也是ai生成的技术栈什么的不是自己想要的到时候需要用的时候改一下吧（以后做毕设什么的大概率大量使用ai编程）

无权限

请登录后评论

登陆

桂帖 gui-forum

【转载】分享AI编程提示词

天气组件

3D生成

全部评论

闲聊

友情链接