产品广告shmidt @shmidtqq2026-11-060:16

三维查找界面概念

播放: 5,956
点赞: 133
评论: 23
收藏: 72

创作者把 Apple“查找”的粗略草图交给 Claude，让它制作了一个可交互的三维找钥匙体验。

完整提示词5,001 字符

ROLE
You are a principal frontend engineer, 3D creative developer, and senior product designer specializing in premium interactive experiences.

MISSION
Transform my attached hand-drawn sketch into a polished, functional, interactive 3D application prototype.

The sketch is the source of truth for the interface and product concept. Preserve its core layout, elements, and interactions, but elevate the execution to the quality of a premium consumer app.

Do not simply recreate the drawing as an image. Build a real browser-based prototype that users can interact with.

PROJECT
Build a Find My-inspired 3D experience that helps a user locate a lost set of keys.

01. VISUAL DIRECTION

Create a sophisticated, mobile-first interface with:

- A detailed 3D city environment
- An angled, cinematic map camera
- Procedurally generated buildings, streets, sidewalks, trees, and crosswalks
- Realistic lighting, ambient shadows, and depth
- Smooth camera movement and transitions
- Beautifully designed floating interface cards
- Refined typography and consistent spacing
- Subtle microinteractions and responsive animations

Use a restrained visual language with neutral surfaces, natural greens, and carefully chosen accent colors.

Prioritize visual hierarchy, realism within the chosen art style, and coherent interaction design.

02. CORE USER EXPERIENCE

Implement four connected stages.

STAGE A: MAP VIEW

Show a 3D neighborhood from an elevated perspective.

Display a tracked item marker with a visible location radius.

Add a floating card containing:

Item: Keys
Location: Avenue Marceau
Distance: 14 m
Actions: Play Sound / Find

Make the map interactive with camera rotation, zoom, and smooth transitions.

STAGE B: FINDING MODE

When the user selects Find:

- Animate the camera toward the tracked item
- Highlight a navigational path
- Display directional indicators
- Transition into a closer perspective
- Show an updating distance indicator
- Maintain spatial consistency throughout the animation

STAGE C: NEARBY SEARCH

Create an AR-inspired close-up search experience.

Show a realistic 3D environment with a set of keys resting on a small round table.

Display:

Finding Keys
Distance: 1 m
Animated directional arrow

Make the experience feel like the user is approaching the actual object.

STAGE D: FOUND

Let the user select the keys to complete the search.

Play a subtle success animation, update the interface, and provide an option to restart.

03. INTERACTION REQUIREMENTS

Every visible control must have meaningful behavior.

Implement:

- Interactive camera controls
- Animated item selection
- Functional navigation between stages
- A browser-generated sound preview
- Simulated distance updates
- Interactive object selection
- Back and restart actions
- Loading and transition states

Use deterministic simulated tracking data. Do not claim to access real AirTags, GPS, or Apple Find My services.

04. TECHNICAL STACK

Use:

- React
- TypeScript
- Vite
- Three.js
- React Three Fiber
- Drei
- Motion for UI animations
- Lucide icons
- Modern CSS

Build the environment procedurally.

Avoid paid APIs, API keys, backend dependencies, and external assets that could break the demo.

Keep the code modular, readable, and maintainable.

05. RESPONSIVENESS AND PERFORMANCE

Optimize primarily for a 9:16 mobile viewport while preserving desktop compatibility.

Target smooth animation performance.

Use efficient geometry, instancing where appropriate, controlled pixel ratios, and careful scene cleanup.

Provide accessible controls and respect reduced-motion preferences.

06. DESIGN QUALITY RULES

Avoid:

- Generic dashboard layouts
- Excessive gradients
- Random decorative elements
- Unnecessary floating panels
- Inconsistent component styling
- Abrupt camera transitions
- Fake interactions
- Static screenshots disguised as apps
- Unimplemented buttons

Every visual element should contribute to usability, spatial understanding, or atmosphere.

07. DELIVERY REQUIREMENTS

Deliver a complete runnable project.

Include:

- The full project file structure
- All implementation files
- Complete dependency configuration
- Setup and execution commands
- A short explanation of the architecture
- Clear disclosure of simulated functionality

Do not use pseudocode, unfinished components, or placeholder implementations.

Before finishing, review the code for TypeScript errors, broken imports, missing dependencies, invalid state transitions, and obvious performance issues.

If your environment supports execution, run the application and fix errors.

SUCCESS CRITERIA

The result must allow a user to open a browser, explore a 3D neighborhood, select lost keys, follow an animated navigation experience, locate the keys, and complete the interaction.

It should feel like a cohesive, thoughtfully designed product prototype rather than an isolated visual demonstration.

Start implementing immediately. Make reasonable decisions without asking clarifying questions.

出处：作者在原帖下的回复。提示词保留原文语言，未做改写。

需自备参考素材：原作除了文字提示词，还用了图片、视频、音频、文档或代码库作为输入，本站未收录这些素材。只复制提示词得不到同样的结果。