xy-intro-card:一张能发走的名片,和一次"克制"的练习
这是四个项目里最小的一个,也是我最喜欢的一个。因为它回答了一个我一直在想的问题:工具做到多小,才算够?
起因:官网搭好了,成员的名片怎么办
做完 xy-club(俱乐部官网模板)之后,自然的下一步是:俱乐部官网有了,里面的成员自己要不要一张个人介绍卡?
需求很具体——填内容就出卡,不用注册、不用联网、发给别人就能打开。而且风格要和官网对得上。
它有多小
- 单个 HTML 文件,字体、图标、头像全部内嵌
- 零第三方依赖 — 没有 npm 包,没有 CDN 外链,没有在线字体托管
- 不联网、不上传 — 所有计算都在你的浏览器里完成,头像和填写的内容不会离开本机
- 双击就能用 — 不需要服务器,不需要安装任何东西
功能上:两种模式可切换——「人设卡」(名字·年龄·星座·技能·签名)和「通用名片」(姓名·头衔·简介·联系方式);8 套主题色,与 xy-club 同名同色;头像上传后用 Canvas 自动压到 512px,大图不会卡死;左侧填、右侧实时预览,满意了点一下导出。
最关键的一个决定:导出的是 HTML,不是图片
大部分名片工具导出 PNG 或 PDF。xy-intro-card 导出的是一份独立的 HTML 文件。
理由很实际:图片发过去,对方只能看;独立 HTML 发过去,对方双击就能打开,而且还是能交互、能看清、能缩放的。又因为所有资源都内嵌了,这份文件断网也能正常显示。
代价是:它不是一张能直接发朋友圈的图。这是取舍,不是缺陷——但我会把它明说出来,免得有人下载后才发现不是自己想要的。
和 xy-club 是同一家族
两个项目视觉同源:液态玻璃风格一致,四套主题色(落日金 / 深海蓝 / 极光紫 / 晨雾白)同名同色。典型用法是——用 xy-club 搭好俱乐部官网,再用这个工具为每位成员生成统一风格的名片,挂到官网的「团队成员」板块。
顺便说一句:默认演示里的「XY俱乐部」只是示例,并非专属品牌。把演示内容换成任意俱乐部或团队,工具逻辑完全不变。
"克制"体现在哪儿
这个项目最有意思的地方,是我决定不做什么:
- 不做后端存储 — 没有账号、没有云端、数据不出本机
- 不做多人协作编辑 — 它是个人工具
- 不做复杂动画和 3D — 刻意保持轻量优先
- 不做服务端鉴权 — 因为压根没有服务端
每一条"不做"都让工具更小、更稳、更不容易坏。对四个项目做下来,我最大的体会是:加功能容易,克制难。尤其当 AI 能在几分钟内给你变出一个新功能的时候,克制就更难了。
还有几处小用心
移动端优先的多断点适配;帧率不足时自动降级;尊重系统的「减弱动态」无障碍设置(系统里开了就会自动关掉动画);手机端精简毛玻璃层数以保证流畅。这些都是很小的事,但加起来决定了"拿出去给别人用"时别人的第一印象。
做不到什么
- 需要后端存储 / 多人在线协作编辑 — 不做
- 需要复杂动画 / 3D — 刻意保持轻量
- 需要服务端鉴权 — 没有后端
写在最后
四个项目写完,回头看,最小的一个反而最贴近我一开始想证明的事:不会写代码的人,也可以做出一个别人真的能用的东西。
当然,这四个项目没有一个是"我手写代码"做出来的。但它们每一个,都是我做的决定。