ARTICLE · 1027553
Ai小白,把二十八星宿做了成科普网站
Ai小白,把二十八星宿做了成科普网站我把28尊二十八星宿彩塑，做成了一个可以在线浏览的数字图鉴。 成品地址： https://clinquant-marshmallow-d39b7f.netlify.app/ 打开网站后，你可以在东方青龙、北方玄武、西方白虎、南方朱雀之间切换，再进入每一方的七宿。 页面中央是单尊彩塑，左右分别展示编号、简介和竖排宿名。点击“观看原作细节”，还可以同时查看彩塑全貌和局部细节。 这是我第一次真正把一个科普网站从概念、视觉、素材处理、前端开发，一路做到公开上线。 它当然不是一个复杂的大型网站。 但对第一次做网页的我来说，真正困难的从来不是“让页面显示出来”，而是下面这些问题： 28个对象应该怎样组织，才不会变成一面密密麻麻的图片墙？ 传统文化题材怎样做出当代感，又不落入“满屏祥云和古风纹样”？ 28张透明彩塑图放进网页后，为什么电脑能跑，手机却开始吃力？ AI可以帮我抠图、写代码，但哪些地方必须由我自己做判断？ 这篇文章不讲玄学，也不假装自己一开始就知道答案。 我想完整复盘一下，一个没有成熟建站经验的数字艺术学生，怎样把第一版做出来，又怎样把它改到真正可以分享。 这个项目最早的方向，其实不是数字图鉴，而是“输入出生日期，查询个人对应的二十八星宿”。 听起来很适合做成一个互动网站： 输入信息，点击查询，得到结果，再生成一张可以分享的卡片。 但在继续做之前，我发现了一个不能绕过的问题。 二十八星宿存在不同的传统排法和现代简化算法。公历还是农历、要不要计算出生时刻、时区怎样处理、使用固定日期表还是天文算法，都会影响最后的结果。 如果这些计算口径没有被验证，我做得越精美，用户越容易把一个没有讲清依据的结果当成确定答案。 所以我做了第一次重要删减： 先不做“个人命运查询”，改成“传统星宿文化的数字化浏览”。 第一版的最小目标因此变得非常明确： 28个星宿都能被找到。 四象和七宿的关系能被看懂。 每一宿都有彩塑主图、基础简介和原作细节。 网站能在电脑和手机上打开，并拥有一个公开链接。 这个决定看起来像退了一步，实际上救了整个项目。 对第一次做网站的人来说，最危险的并不是能力不够，而是首版同时想做查询、算法、角色设定、分享卡、账号系统和三维互动。 最后每一个功能都做了一点，却没有一个能完整跑通。 我后来给自己定下的原则是： 先把一个可以验证的核心体验做完整，再谈功能扩张。 科普网站最容易被忽略的部分，是内容结构。 如果把每一宿都临时写进页面，后面修改名字、图片或描述时，很快就会乱掉。 所以我先把28宿整理成统一的数据对象，至少包含： 编号 宿名 所属四象 关键词 一段简短说明 主图 细节图 透明背景彩塑图 页面本身只负责读取和展示数据。 这样做的好处是，当我从“卡片画廊”改成“单尊彩塑展厅”时，不需要重新整理28遍内容，只需要更换展示方式。 我也给每段文字设置了一个很实际的限制： 首屏说明只讲一件事。 例如“斗木獬”的说明是： “斗宿因六星排列如斗而得名，又称南斗。它体现古人以器物理解星空、辨认方向并建立天象秩序的方式。” 这段文字没有把历史、神话、天文学和人物寓意全部塞进去，而是先让第一次接触二十八星宿的人知道“它为什么叫斗”。 更完整的内容，可以以后再放进专题页。 科普不是信息越多越好。 首屏的任务，是让用户愿意继续点下一宿。 项目过程记录了这个网站怎样从普通图集，逐渐变成现在的数字展厅。 相比强调修改次数，我更在意每个阶段到底解决了什么问题。 最初的页面很像常见的作品展示网站： 顶部是星空主视觉，中间介绍四象，下面铺开28张彩塑卡片。 用户可以按青龙、玄武、白虎、朱雀筛选，再点开卡片查看双图详情。 这个版本功能完整，却有一个明显问题： 28张卡片同时出现时，所有图片都在争夺注意力。 用户看到的是“很多图”，却不一定能记住其中任何一尊。 页面也更像图片资料库，而不是我想要的文化展览。 接下来，我开始尝试把彩塑从照片背景里分离出来，让单尊塑像成为画面主角。 我还加入了鼠标倾斜、滚轮缩放和左右拖动切换，希望用户不是简单地“看一张图片”，而是在观察一个展品。 但效果变多以后，新的问题也出现了。 滚轮本来承担页面滚动，拿它控制缩放很容易产生操作冲突。 一张二维照片无论怎样倾斜，也不能真的展示背面。 手机端没有鼠标悬停，桌面端的互动也不能原样照搬过去。 这个阶段最大的变化，不是继续叠加功能，而是做减法。 我把页面重构成一个展览式主界面： 左上角是四象入口 中央只保留当前彩塑 右侧用竖排大字显示宿名 左侧放编号和简短介绍 底部七个星点对应当前一方的七宿 原始照片收进“观看原作细节”弹窗 背景中的星轨、圆环和微弱光点只负责建立天象感，不再抢过彩塑本身。 这时我才意识到，所谓“高级感”并不是加入更多特效，而是让每一种元素只承担一个清楚的任务。 完成可以发布的静态网站后，我又专门处理了图片加载，并为手机端关闭部分高成本视觉效果。 最终，桌面端保留指针响应、粒子宿名和动态背景。 手机端则直接显示清晰标题，关闭跟随鼠标的背景和三维倾斜，让浏览、切换和阅读优先。 这不是“手机版缩水”，而是承认不同设备的输入方式和性能条件不同。 原始资料中有28宿、共56张照片，每一宿包含全貌和细节两个视角。 为了让彩塑真正融入网页，我先用主体识别模型批量生成28张透明PNG，再重点检查发丝、手指、飘带、底座等容易出错的位置。 这里有一个非常具体的翻车点： AI抠出来，不等于网页就能直接使用。 透明PNG的总大小达到了23.52MB。 电脑本地打开时感觉不明显，但放到网上以后，手机需要一次下载大量图片，首屏和切换速度都会受到影响。 最后我做了三层优化： 将透明PNG转换成保留透明通道的WebP。 把单张图片限制在1200×1400像素以内，质量参数设置为82。 首屏只优先加载当前的“亢金龙”，当前图片解码完成后，再以低优先级预加载前后两宿；如果用户开启省流量模式，就不进行邻图预加载。 优化以后，28张透明彩塑从23.52MB降到了2.23MB，体积减少约90.5%。 单张文件控制在约47—117KB。 这次经历让我第一次真正理解： 网页视觉不是把大图塞进去就结束了。 文件格式、图片尺寸和加载顺序，本身就是设计的一部分。 这个网站最终选了深黛青作为底色，月白和低饱和金色作为正文与线条颜色。 切换四象时，只用轻微的色彩差异提示当前区域，不让青、白、红、黑四种颜色同时占满屏幕。 我把彩塑放在中央，是因为它是最有证据、也最不可替代的视觉内容。 星轨和圆环只是把塑像与“天象”联系起来，竖排大字则强化中国文字本身的节奏。 做这类题材时，我给自己留下了三个判断。 第一，先确定主角。 如果主角是文物或彩塑，装饰图形只能辅助它，不能把它压成背景。 第二，传统感来自秩序，不只来自纹样。 留白、比例、文字方向、色彩克制和信息层级，都比随手贴一圈云纹更重要。 第三，科普信息必须随时可读。 再漂亮的标题，如果字号太小、对比度太低、手机上被裁切，都不算完成。 这个项目里，AI确实帮了我很多： 辅助拆解网站结构 批量处理彩塑主体 协助生成和修改React组件 根据错误信息排查页面 帮我比较不同方案的视觉问题 但真正决定成品方向的，仍然是一些无法外包的判断： 要不要放弃出生查询，先做文化图鉴？ 28张卡片和一尊主展品，哪一种更符合项目目标？ 哪些动效在电脑上成立，在手机上应该关闭？ 图片可以压到多小，才不会破坏彩塑边缘？ 哪些文字属于可以核验的文化说明，哪些只是创作性表达？ AI可以快速给出十种方案，但如果我自己没有判断标准，十种方案只会让我改得更乱。 我现在更愿意把它理解成一个速度很快的制作搭档： 它能帮我搭架子、完成重复工作、检查问题；而我必须负责选题、信息来源、视觉取舍和最终验收。 如果把这次过程压缩成一条最短路线，我会这样做。 第一步：先确定一个“最小成功画面” 不要一开始就想完整网站。 先让一个对象能够被完整展示：标题、主图、说明、切换和详情。 成功标准： 陌生人打开页面后，10秒内知道这是什么、可以点哪里。 第二步：先统一数据，再复制页面 把所有条目整理成相同字段，不要手工制作28个互相独立的页面。 成功标准： 修改一条数据后，对应页面会自动更新。 第三步：先跑通一张原图，再做批量处理 先选一张最复杂的图片，测试抠图、透明边缘、压缩和网页显示。 确认流程可用后，再处理全部素材。 成功标准： 放大检查关键边缘，背景干净，文件大小可以接受。 第四步：先完成交互闭环，再增加动效 四象切换、七宿切换、上一宿、下一宿、打开详情、关闭详情，这些基础动作必须全部可用。 成功标准： 不用刷新页面，就能完整浏览28宿。 第五步：最后才做“氛围” 等信息结构和交互稳定后，再加入星轨、粒子、指针响应和过渡动画。 成功标准： 关闭所有动效以后，网站仍然可以正常阅读和操作。 我的复用公式是： 一个明确对象 × 一套统一数据 × 一条浏览路径 × 一种主视觉语言 × 一轮真实设备测试 前端部分使用React 19和Vite 7，动效使用Motion，图标使用Lucide React。 图片处理使用Python、Pillow和rembg的U2Net主体识别模型。 最终把网站构建成静态文件，并部署到Netlify。 网站还处理了两类容易被忽略的体验： 当系统开启“减少动态效果”时，页面会停用动画 当屏幕小于800像素或使用触摸设备时，切换为手机轻量模式 从项目记录来看，这个原型集中完成了内容整理、视觉重构、性能优化和公开部署。 真正占时间的不是敲代码，而是反复检查图片、信息层级、加载速度和不同设备上的表现。 它已经可以作为一个数字图鉴浏览，但距离完整的科普产品还有明显差距： 每一宿目前只有简短说明，后续还需要补充可以追溯的学术来源 图片资料来自“泽州府城玉皇庙二十八宿彩塑”相关图集，扩大传播或用于商业项目前，仍需进一步核验授权与标注要求 当前没有站内搜索、单宿独立链接和完整的无障碍焦点管理 原本计划的个人星宿查询功能，必须先确定并验证计算口径，不能为了好玩直接给出确定性结论 二维照片的指针倾斜只是一种观看效果，不能替代真正的三维扫描 把这些边界写清楚，不会削弱作品。 它反而能让我知道，下一步应该把时间花在哪里。 第一次做网站以前，我以为“上线”是最后一步。 做完以后才发现，上线只是第一次让真实设备、真实网络和真实用户进入项目。 很多在本地看不出来的问题，只有公开地址出现以后才会暴露。 但也正因为它真的被放到了网上，这个项目不再只是一张效果图，而是一个别人可以打开、点击、理解和反馈的作品。 如果你也想第一次做一个科普网站，不必从最复杂的功能开始。 先选择一个你真正在意的对象，把一条最小浏览路径做完整，再让每一次修改都有明确理由。 现在请打开网站，把四象和二十八宿点一遍，然后告诉我： 你最想让我继续补充哪一宿？ https://clinquant-marshmallow-d39b7f.netlify.app/