做一个图片画廊,完整 Prompt 模板直接用

图片画廊看着就是一堆图排列在一起,但它的网格布局、灯箱预览、懒加载和键盘导航组合在一起,是练习前端交互的经典项目。这篇文章从第一性原理出发,拆解画廊的本质,附完整 Prompt 模板,复制就能用。

图片画廊的本质是什么

回到第一性原理。图片画廊解决的核心问题只有一个——把一组图片有组织地展示给人看,同时让人能方便地查看细节。

把这个需求拆到最底层,你需要回答三个问题。图片放在哪里?图片怎么排列?用户想看大图怎么办?

图片放在哪里,答案是网格——CSS Grid 自适应排列,不同屏幕宽度自动调整列数。图片怎么排列,答案是按类别分组——用户可以通过标签筛选只看感兴趣的内容。用户想看大图怎么办,答案是灯箱——点击图片后全屏放大,带遮罩层和左右切换。

再加上两个增强体验的细节,滚动到视口才加载图片的懒加载,以及用键盘左右键切换的键盘导航,就构成了一个完整的图片画廊。

图里五个零件各司其职。网格布局解决排列问题,灯箱预览解决看大图问题,筛选分类解决找图片问题,懒加载解决加载慢问题,键盘导航解决操作效率问题。每个零件都对应一个具体的用户需求,不是凭空加的功能。

数据先于界面,一张图片就是一个对象

很多人让 AI 做图片画廊时,直接说"帮我做个图片画廊",AI 就开始写 HTML 和 CSS,图片地址硬编码在标签里。结果要加图片、改分类、换顺序,都得翻 HTML 代码改,维护很痛苦。

从第一性原理出发,数据应该先于界面。先定义清楚"一张图片"长什么样,界面只是数据的展示层。