在日常的业务开发中，我们习惯了处理表单、列表和状态管理。但前端的边界远不止于此。以下五个项目提示词跳出了常规的商业应用框架，聚焦于浏览器底层能力、无障碍访问、创意编码及复杂交互逻辑。它们不追求快速的商业变现，而是旨在探索 Web 平台的技术极限与表现力。这些项目适合作为技术深度的证明，展示你对性能优化、图形渲染及人机交互的深刻理解。
提示词一：无限缩放艺术画廊（The Infinite Zoom Gallery）
构建一个单页应用，模拟分形艺术中的“无限缩放”效果。用户垂直滚动时，画面应无缝过渡到图像的下一层细节，全程无可见的加载状态或切割感。利用 WebGL（通过 Three.js 或 Pixi.js）高效处理纹理流式传输和 mipmapping。核心挑战在于在后台预加载相邻的缩放层级，同时在滚动交互中保持 60fps 的流畅度。包含一个极简的 UI 覆盖层，显示当前的“深度层级”，并允许用户跳转到特定层。视觉风格应超现实且梦幻，层间采用平滑的交叉淡入淡出过渡。不使用重型状态管理框架，仅用原生 JS 或极简的 React Hooks 保持轻量。
提示词二：具备光标存在感的实时协同编辑器（Real-Time Collaborative Code Editor with Cursor Presence）
创建一个支持实时多用户协作的浏览器代码编辑器界面，类似 VS Code Live Share 的简化版。核心功能是“光标存在感”：当其他用户移动光标时，其头像和名称标签应通过 WebSocket 实时平滑动画到新位置。使用 Prism.js 或 Highlight.js 实现语法高亮，并同步行号。布局需完全响应式，在移动设备上折叠侧边栏。重点在于远程光标动画的流畅性——使用插值算法防止抖动。默认采用深色模式，并为不同用户提供可自定义的主题色。无需后端逻辑；通过本地存储或模拟 WebSocket 事件来演示多用户状态。
提示词三：生成式排版海报制作器（Generative Typography Poster Maker）
开发一个交互工具，允许用户通过操纵可变字体（Variable Fonts）创建排版海报。中央画布显示一个大标题，用户可通过滑块调整字重、宽度、倾斜度和光学尺寸等轴变量。随着参数变化，背景应生成抽象形状或噪点图案，这些图案需对字体的度量指标做出反应（例如，较粗的字重产生更深、更密集的背景）。使用 Canvas API 渲染动态背景，CSS Variable Fonts 处理文本。包含一个“随机化”按钮，生成意外但美观的组合。允许用户将作品导出为高分辨率 PNG 或 SVG。界面应采用粗野主义风格，控件巨大，留白充足。确保排版在不同浏览器中正确渲染。
提示词四：音频反应粒子可视化仪表盘（Audio-Reactive Particle Visualizer Dashboard）
设计一个仪表盘，实时可视化来自麦克风或文件上传的音频输入。摒弃标准的条形图，使用粒子系统，其中每个粒子的大小、颜色和速度由 Web Audio API 分析的特定频段（低音、中音、高音）驱动。用户可以切换不同的可视化模式：“爆炸”、“波浪”和“漩涡”。提供灵敏度、粒子数量和调色板的控制选项。性能必须优化，以处理数千个粒子而不卡顿，这可能需要通过 WebGL 着色器进行 GPU 加速。UI 应半透明且悬浮，让可视化效果占据中心舞台。添加录制功能，将 Canvas 动画捕获为 WebM 视频。不使用第三方库进行音频分析，仅使用原生 AnalyserNode。
提示词五：无障碍数据叙事滚动页面（Accessible Data Storytelling Scroll Narrative）
构建一个滚动驱动的叙事页面，通过交互式图表和文本来解释复杂数据集（如气候变化趋势）。随着用户滚动，图表（使用 D3.js 或 Chart.js 构建）应动态更新以突出特定数据点，并伴随淡入淡出的文本注释。关键要求是严格的无障碍性：所有图表必须有相应的 ARIA 标签和对屏幕阅读器友好的数据表，这些数据表在视觉上隐藏但对辅助技术可用。键盘导航应允许用户在不使用鼠标的情况下逐步浏览每个故事片段。设计应具有编辑感且干净，注重可读性和清晰的数据层次。使用 Intersection Observer 实现滚动交互以提升性能，避免沉重的滚动事件监听器。确保所有文本元素的高对比度比率。
这五个提示词分别触及了图形渲染优化、实时状态同步、可变字体应用、音频信号处理以及无障碍访问等前端深水区。它们没有复杂的业务逻辑纠缠，却对技术实现的精细度提出了极高要求。例如，无限缩放画廊考验的是资源预加载与内存管理；协同编辑器关注的是网络延迟下的动画插值；而无障碍叙事页面则提醒我们，前端不仅是视觉的呈现，更是信息的平等传递。
在实际开发中，尝试用原生技术或轻量级库去实现这些需求，往往比套用现成的 UI 组件库更能暴露出知识盲区。这些项目适合作为个人作品集的核心亮点，因为它们展示了开发者在性能、交互与包容性设计上的综合思考能力，而非仅仅是 CRUD 的熟练工。
