陶 瓷 首 饰 品 牌 官 网
与同学联合创立的独立品牌。我主导全部 UI 设计与前端 MVP 落地——从品牌视觉语言到像素级交互实现。
Terrin 是一个以"陶瓷与自然"为核心的独立首饰品牌。在几乎没有启动资金的情况下，我和一位同学联合创立了这个品牌——她负责陶瓷制作与产品摄影，我负责品牌官网的 UI 设计与前端开发。
项目的核心挑战是：如何在低成本前提下，用设计和代码营造出品牌质感？ 答案是一套精心设计的灰度交互系统。
品牌主色调取陶瓷本身的"素胚暖灰"——不是纯白，而是微微泛黄的象牙白。字体选用有手工感的衬线体，配合大面积的留白和细腻的间距，营造手工品牌应有的安静气质。
商品展示区所有图片默认以 filter: grayscale(100%) 渲染为黑白。用户 hover 时，图片通过 CSS transition 在 0.4s 内平滑过渡至原始彩色——这种"用手拂去灰尘"的交互隐喻，恰好呼应了陶瓷从泥土到成品的转化过程。
这个交互设计不是炫技——它解决了两个实际问题：① 保持页面整体统一的色调氛围 ② 让用户在浏览时产生"探索感"，每次 hover 都是一次小惊喜。
与合伙人定义品牌调性、目标用户、差异化策略
色彩 Token · 字体层级 · 组件库 · 交互规范
独立完成 HTML/CSS/JS，AI 辅助加速开发
真实 URL 上线，可被用户访问
HTML · CSS · JavaScript · 响应式适配 · CSS filter 动画 · 静态部署
通过 Vibe Coding + AI 辅助，从设计定稿到可访问的线上官网仅用约 1 周。灰度到彩色的交互设计成为品牌独特的记忆点——多位访客反馈"第一次见到这种效果，很有手工品牌的温度感"。项目证明了设计师掌握前端能力可以在 零开发预算 的情况下独立将品牌落地。