拒绝模板化：极具挑战性的英文前端页面需求
在日常开发中，我们习惯了接取“后台管理系统”或“企业官网”这类标准需求。但真正能拉开工程师差距的，往往是那些对交互细节、性能极限或视觉创意有极端要求的非典型页面。以下整理了五条源自独立开发者社区或设计实验的前端页面开发提示词（Prompt），全部保留英文原文，以还原最真实的需求语境。这些项目不依赖后端，纯粹考验前端对 DOM、Canvas、WebGL 及浏览器 API 的深度驾驭能力。
Prompt 1: The Infinite Zoom Art Gallery
Build a single-page application that mimics the "infinite zoom" effect seen in fractal art. The user scrolls vertically to zoom into a high-resolution image, which seamlessly transitions into the next layer of detail without any visible loading states or cuts. Use WebGL (via Three.js or Pixi.js) to handle texture streaming and mipmapping efficiently. The challenge is to preload adjacent zoom levels in the background while maintaining 60fps during the scroll interaction. Include a minimal UI overlay that displays the current "depth level" and allows users to jump to specific layers. The visual style should be surreal and dreamlike, with smooth cross-fade transitions between layers. No external frameworks for state management; keep it lightweight using vanilla JS or minimal React hooks.
Prompt 2: Real-Time Collaborative Code Editor with Cursor Presence
Create a browser-based code editor interface that supports real-time multi-user collaboration, similar to VS Code Live Share but simplified. The core feature is "cursor presence": when another user moves their cursor, their avatar and name tag should smoothly animate to the new position in real-time using WebSockets. Implement syntax highlighting using Prism.js or Highlight.js, and line-number synchronization. The layout must be fully responsive, collapsing the sidebar on mobile devices. Focus on the smoothness of remote cursor animations—use interpolation to prevent jittery movements. The theme should be dark mode by default, with customizable accent colors for different users. No backend logic required; simulate multiple users using local storage or mock WebSocket events for demonstration purposes.
Prompt 3: Generative Typography Poster Maker
Develop an interactive tool that allows users to create typographic posters by manipulating variable fonts. The central canvas displays a large headline where users can adjust axes like Weight, Width, Slant, and Optical Size via sliders. As parameters change, the background should generate abstract shapes or noise patterns that react to the font’s metrics (e.g., heavier weights produce darker, denser backgrounds). Use the Canvas API to render the dynamic background and CSS Variable Fonts for the text. Include a "randomize" button that generates unexpected but aesthetically pleasing combinations. Allow users to export their creation as a high-resolution PNG or SVG. The interface should be clean and brutalist, with large controls and ample whitespace. Ensure the typography renders correctly across different browsers supporting Variable Fonts.
Prompt 4: Audio-Reactive Particle Visualizer Dashboard
Design a dashboard that visualizes audio input from the microphone or a file upload in real-time. Instead of standard bar charts, use a particle system where each particle’s size, color, and velocity are driven by specific frequency bands (bass, mid, treble) analyzed via the Web Audio API. The user can switch between different visualization modes: "Explosion," "Wave," and "Vortex." Include controls for sensitivity, particle count, and color palettes. The performance must be optimized to handle thousands of particles without lagging, likely requiring GPU acceleration through WebGL shaders. The UI should be semi-transparent and floating, allowing the visualizer to take center stage. Add a recording feature that captures the canvas animation as a WebM video. No external libraries for audio analysis; use native AnalyserNode.
Prompt 5: Accessible Data Storytelling Scroll Narrative
Build a scroll-driven narrative page that explains a complex dataset (e.g., climate change trends) through interactive charts and text. As the user scrolls, the charts (built with D3.js or Chart.js) should update dynamically to highlight specific data points, accompanied by fading text annotations. The key requirement is strict accessibility: all charts must have corresponding ARIA labels and screen-reader-friendly data tables hidden visually but available to assistive technologies. Keyboard navigation should allow users to step through each story segment without using a mouse. The design should be editorial and clean, with a focus on readability and clear data hierarchy. Implement a "skip to content" link and ensure high contrast ratios for all text elements. The scroll interactions should use Intersection Observer for performance, avoiding heavy scroll event listeners.
这五个提示词分别触及了图形渲染优化、实时状态同步、可变字体应用、音频信号处理以及无障碍访问（Accessibility）等前端深水区。它们没有复杂的业务逻辑纠缠，却对技术实现的精细度提出了极高要求。例如，无限缩放画廊考验的是资源预加载与内存管理；协同编辑器关注的是网络延迟下的动画插值；而无障碍叙事页面则提醒我们，前端不仅是视觉的呈现，更是信息的平等传递。
在实际开发中，尝试用原生技术或轻量级库去实现这些英文需求，往往比套用现成的 UI 组件库更能暴露出知识盲区。这些项目适合作为个人作品集的核心亮点，因为它们展示了开发者在性能、交互与包容性设计上的综合思考能力，而非仅仅是 CRUD 的熟练工。