闫文洁PORTFOLIO

项目 04 / 04 · 主题网站

小时候 · little days

一个面向女孩的个人网站,核心是让每个女孩都能重返自己的童年。 三个房间:写日记、给洋娃娃换装、做一只自己的手机壳。

时间
2026
角色
产品概念 · 界面与插画设计 · 与 Claude Code 协作开发
技术
纯静态 HTML / CSS / JavaScript,零依赖,双击即可打开
规模
4 个页面 · 3 个可玩房间 · 全站约 152 KB
在哪
本页下方可直接试玩
可以直接玩 · 不用注册,你写的东西只有你自己看得见 三个房间
DEMO

正在准备演示……
如果没有自动出现,在新标签页打开完整版 →

三个房间长什么样

手机壳编辑页:九种底色、六种花纹、二十二张贴纸
做手机壳9 种底色 × 6 种花纹 × 22 张贴纸,选中的贴纸能拖、能缩放、能转。
换装娃娃页:发型、发色、裙子、鞋子和配饰
换装娃娃4 种发型 × 4 种发色 × 5 套裙子 × 4 双鞋 × 5 种配饰,都能存档、存成图片。
日记本页:写、搜索、按心情筛选
日记本能写、能撕、能搜、能按心情筛,还能导出一份 txt 或者打印成纸。
封面页:一张可以撕下来拖走的标题贴纸
封面标题是一张贴纸,可以撕下来拖到任何地方 —— 双击贴回原位。

项目说明 · 四段

一、三个房间

整个网站是一个可以推门进去的地方,不是一堆功能。三个房间各自成立:

  • 日记本写、改、撕、搜索、按心情筛选。可以导出一份 txt 备份,也可以直接打印成纸。
  • 换装娃娃4 种发型 × 4 种发色 × 5 套裙子 × 4 双鞋 × 5 种配饰 × 5 个背景,可以存档、存成图片。
  • 手机壳9 种底色 × 6 种花纹 × 22 张贴纸,还能自己写字。拖拽、缩放、旋转,导出 PNG。

封面上的标题是一张贴纸,可以撕下来拖到任何地方 —— 双击贴回原位。 这个细节比任何一段介绍都更快地说明这是个什么地方。

二、最关键的一个产品决定

你写的日记、你给娃娃搭的打扮、你做的手机壳, 全部只存在你自己的浏览器里 —— 换一台电脑、换一个浏览器就看不到了, 清除浏览器数据也会一起清掉。

这不是技术做不到,是刻意的

如果加一个账号系统,就要有服务器、要存别人的私人日记、要处理登录和隐私。 一个写着「今天和朋友吵架了」的地方,一旦有了后台, 写的人就会开始想「谁看得见」。那个念头一旦出现,这个房间就不成立了。

所以现在的状态是:别人访问你的网站时,看到的是他们自己的空白本子; 他们写的东西你也看不到。代价是这些内容没法在多设备之间同步 —— 这是明码标价的交换,不是疏忽。

三、视觉:全站都是贴纸

所有的卡片、按钮、照片框,用的都是同一种处理 —— 模切贴纸:一圈厚白边、一道细裁切线、一点软投影, 鼠标移上去会像被撕起来一样微微翘起。

这个效果只写在一条 CSS 规则里,然后全站复用。 配色也是一样,所有颜色都在样式表最上面, 底色是藕荷信纸,文字用梅子墨而不是纯黑,标题用楷体。

四、可访问性是设计的一部分

这个网站的受众是普通女孩,不是技术用户,所以「用不了」的成本更高。 键盘能操作全部功能,焦点有清晰可见的描边; 如果系统开了「减弱动态效果」,所有动画会自动关掉。

日记页可以直接打印成纸,打印时会自动隐藏界面元素,只留正文 —— 因为「把日记打出来收进抽屉」本来就是这件事的一部分。

结果

它证明了什么

「不做某件事」也可以是一个设计决定。 这个项目里最花心思的地方不是三个可玩的小工具, 而是想清楚什么东西不该有 —— 不该有账号、不该有服务器、不该有分享按钮。

如果继续做,会加「把这一页做成一张图发给朋友」的导出功能 —— 因为分享的冲动是真实的,只是不该由平台来承接。