简历构建器,把写简历从「对着白纸发呆」变成一步一步填空
「简历构建器」,一个跑在浏览器里的分步简历填写工具。写简历最难受的往往不是不会写字,是不知道从哪下笔、写出来像不像回事:教育背景要不要写课程,工作经历该来几条,每条是不是都得带数字,越想越多,越想越不敢动笔。这个工具把一份简历拆成个人信息、教育背景、工作经历、技能特长、项目经验、证书荣誉、预览导出七步,一次只面对一件事,填完点下一步就进到下一块。左边一列步骤导航,走到哪亮到哪,前面填过的随时点回去改,填到一半关掉页面,下次打开原样接着填,进度一个字都不丢。 个人信息这一步可以传证件照,工具自动压尺寸、按一寸比例裁切,不管原图是横是竖都不会拉变形。填到最后一页是一张 A4 纸的实时预览,版式、配色、字号当场调,调满意了直接导出一张高清 PNG,拿去投递或者发人审阅都行。数据全部存在浏览器本地,不注册账号、不联网也能用,对简历这种敏感信息来说,数据不离开自己的浏览器反而是最让人踏实的一点。 注: 当前展示的是随机生成的示例信息,人物与数据均为虚构,仅供填写格式参考。 为什么要做这个 最近正处在换工作的档口,简历改到第 N 版的时候特别挫败。网上模板一大堆,下载下来是 Word,满页的空格子…
魔改 AI Passport:一枚大赛勋章的固件重写,变身随身网络音乐盒
FoloToy AI Passport 是 TRAE AI 创造力大赛线下活动发放的纪念勋章,硬件配置:ESP32‑C3 主控、240×320 彩屏、ES8311 音频芯片、自带扬声器与锂电池。官方固件主打「AI 伙伴」,我将其重制固件,改造为桌面网络音乐盒项目:TY MUSIC。 项目功能 开机自动连接 WiFi,拉取云公开歌单曲目循环播放。整机仅三颗按键完成全部交互:上/下键切歌,OK 单击暂停播放,长按唤起菜单。 屏幕顶栏展示:TY MUSIC 标识、实时时钟、WiFi 信号、电池电量。 播放界面:频道号 CH 01/21、大号歌名,一排曲目进度格子,当前播放曲目格子高亮红色。 无需手机 App:设备启动后会广播热点 TYMusic‑XXXX,手机连接该热点,访问网页 192.168.4.1。 在配置网页搜索家庭 WiFi、填写密码、填入云歌单 ID,保存后设备自动重启,直接开始播放。 技术路线 基于开源项目 FoloToy/ai‑passport,ESP‑IDF 5.5 工程,硬件驱动直接复用官方资料,工程分为两层: 板级层(BSP):LVGL9 屏幕驱…
前端设计风格 Skill 技能|整合 58 家大厂设计规范,让 AI 一键生成高颜值标准化网页
Skill 简介 做网站的时候选配色、选字体这些事挺耗时间的。我做了个叫 ColorSpace 的 Skill,里面放了 Stripe、Notion、Vercel、Apple 等 58 个品牌的设计规范数据。你告诉它要做什么类型的网页,它会推荐几个合适的品牌风格,选一个之后它会按那个品牌的配色、字体、组件规范来生成页面。 使用场景 平时让 AI 帮忙写页面,功能上一般没问题,但视觉效果经常不太行。配色、间距、字体这些没个标准,出来的页面总感觉差点意思。 后来想到一个办法:与其让 AI 自己"发挥",不如直接给它一套现成的设计规范照着做。比如告诉它"按 Notion 的设计规范来",Notion 用什么蓝、标题多大、按钮什么样式,这些数据都是现成的。AI 有了明确的参照,生成的页面质量确实好不少。 这个 Skill 就是把这个过程自动化了 创作过程 大概分了三步。 第一步是整理数据。 原始design.md数据来自 GitHub 上的 awesome-design-md 项目,60 多个品牌的设计系统,每个品牌一份 DESIGN.md,包…
网页博客至小程序的跨越:个人内容管理生态开发实践
前言: 一直用的 WordPress 博客,主要是平时记录一些开发经验。俗话说 “好记性不如烂笔头”,可能有时候生活中发现一些新鲜的东西,或者开发时遇到了什么问题,都能记录起来。为了防止以后忘了、需要用时能找到,我搭建了这个博客。 时间久了,感觉每次都要打开网页挺麻烦的,尤其有时候用手机,打开网页操作起来更不方便。之前我有过一些开发小程序的经验,于是就结合现有的 WordPress 博客,开发了一个微信小程序,现在可以方便地用微信打开,并且管理博客里的一些内容。 一、项目筹备:定位与技术选型 产品定位思考 参考 "技术博客 + 工具属性" 的混合模式,我们明确了 "漫川能量站" 的核心价值:将 WordPress 的专业内容通过小程序轻量化呈现,同时保留社交互动功能(如实现的评论、分享功能)。这种定位既区别于纯资讯类小程序的信息堆砌,也不同于复杂社区产品的功能冗余,形成 "内容 + 工具 + 社交" 的三角支撑结构,让用户能便捷获取 "能量" 的同时,也能参与互动分享。 技术栈决策 后端:沿用 WordPress 原生架构,核心原因有三:一是成熟的内容管理生态,能快速编辑、分类文章,降…
Apple 27 系统:能升级和值得升级是两回事
Apple 27 系统发布之后,我花了一些时间研究这次更新的实际情况。说实话,比起新壁纸、新图标这些表面变化,我更在意的是升级之后的真实体验——尤其是国行设备和海外设备之间的功能差异,以及哪些老设备还能继续跟上这波更新。 这次更新号称是全平台覆盖,但实际情况比版本号复杂得多。你看到的可能都是 Apple 27 系统,但用起来是不是同一套东西,取决于很多因素。 国行和海外版,差距在功能不在系统 基础系统本身差别不大,真正的区别在 Apple Intelligence 和 Siri AI 这些功能上。国行设备的限制主要来自国内审核政策,这个没什么好说的,苹果也得按规矩办事。但很多人不知道的是,即使你拿的是海外版设备,只要人在中国大陆,Apple ID 地区也设在中国大陆,这些 AI 功能照样用不上。 所以能不能用完整功能,不光看设备型号,还得看一堆条件:设备硬件支不支持 Apple Intelligence、设备是不是国行、Apple ID 注册地在哪、你当前人在哪、系统语言设了什么,以及苹果有没有在这个地区正式开放这个功能。缺一不可。 基础系统确实大体是一套,但功能开放完全是另一回事。 …
测试文稿结构与排版规范示范文本
测试文稿是用于校验文本排版样式、标题层级结构、段落渲染效果与行文逻辑规范的专用示范内容,不追求文学性与深度观点,核心作用是标准化展示图文排版、层级递进、段落适配、语句衔接等基础效果,为系统调试、格式校验、页面渲染测试、文案样式优化等工作提供标准参照样本,合格的测试文稿必须做到层级清晰、内容规整、段落饱满、逻辑通顺,整体风格平实规范,无多余修饰、无杂乱格式、无逻辑断层,能够真实还原正式文稿的展示状态,有效检测各类排版异常、层级错乱、段落折叠、语句适配偏差等常见问题,适配各类平台、终端的内容测试场景。 规范的测试文稿采用简洁统一的总分结构,以全文主标题统领整体内容,全文仅使用二级标题划分独立内容板块,每个二级标题对应一个完整的核心内容模块,每个模块下仅设置单个长段落完成内容阐释,保证板块边界清晰、整体结构均衡、排版视觉统一,各标题之间相互独立又彼此呼应,共同服务于文稿整体测试示范的核心主题,开篇简要概述文稿用途与核心规范,中间分板块逐一展示标题样式、段落长度、行文节奏与内容填充效果,结尾汇总整体规范要点,形成完整闭环的文本结构,充分满足层级测试、排版测试、段落适配测试的核心需求。 Stan…
实现iOS26 Liquid Glass 液态玻璃效果
苹果在 WWDC25 发布了全新的液态玻璃(Liquid Glass)设计风格。 根据苹果官方介绍: Liquid Glass 统一了 Apple 平台的设计语言,同时提供更生动、更富表达力的用户体验。 Liquid Glass 是一种半透明材质,采用「反射+折射+动态变形」的复合渲染机制,营造出类似真实玻璃的视觉质感。它能自动适应环境中的光线变化,具备「可弯曲、轻盈、流动」的特性,像玻璃般浮于 APP 之上。 Liquid Glass 不是通过淡入淡出来显形和消失,而是通过逐渐改变光线折射和透射,确保形成一种保留材质光学完整性的优雅过渡。 效果分析 正如苹果介绍,Liquid Glass 采用「反射+折射+动态变形」的复合渲染机制。想要通过 HTML + CSS 实现这种效果,不是简单的加一个高斯模糊就行了。 以下是根据苹果目前发布的效果图和已经发布 iOS 26 开发版分析想要实现「液态玻璃」的必要效果: 边缘折射变形: 外轮廓带有液态的「膨胀」效果,这是「液态玻璃」的主要特征。而且强调一下:折射变形仅限于边缘部分,中间部分是没有变形的。 边缘高光 + 浮动阴影: 通过边缘处的高光…
新手使用Skills技巧及避坑小技巧
TRAE 全新上线 Skills 功能且仅支持 Solo 模式,新手使用核心是从简单场景入手、复用优先、精准触发,轻松让重复工作一键搞定。 先搞懂:哪些场景适合用 Skills 重复流程类任务:比如固定步骤的数据分析、统一格式的文档撰写、标准化的代码编写。 规范要求类需求:比如团队代码注释规则、文档排版标准、输出格式约束。 多步骤组合类工作:比如 “数据清洗→统计→制图→总结”“草图→代码→优化” 这类连贯操作。 不适合临时一次性任务或无规则的创意类工作。 3 个必会使用技巧 创建技能:从 “最简单模板” 起步 优先用自然语言生成:直接跟 TRAE 说 “帮我做一个 XX 技能,步骤是 1…2…3…”,比如 “帮我做一个 Excel 数据整理技能,第一步去重,第二步按日期排序,第三步生成汇总表”,AI 会自动生成完整 Skill。 手动创建抓核心:名称要直观(比如 “Python 中文注释规范”),描述写清触发场景,指令分点列步骤,不用复杂表述。 避免过度设计:初期技能只保留核心步骤,后续用着再补充细节。 复用技能:省时间的关键操作 导入现成技能:网上找到的 Skill 文件(或 zi…
2025.12.31 年度总结
回望这一年,“不断学习,无限进步” 这话不是喊口号,是真真切切陪着我熬了无数个夜晚。博客里攒下的 27 篇记,每一篇都是我踩过的坑、摸过的鱼、搞定的小项目,现在翻出来看看,还挺有成就感。借着这机会,跟大家唠唠这一年的日子。 一、技术实践:想到就做,在折腾中练本事 我这人没啥别的爱好,就是对新鲜技术好奇,总想着 “这东西我能不能做出来”。这一年没少瞎琢磨,把不少想法变成了实实在在的作品。 两周前刚搞定的 “点阵世界 / 中国地图实现与说明”,可把我折腾惨了。一开始想做点阵可视化,琢磨着还原中国地图,结果点阵规则设计得不对,地图歪歪扭扭的,改了无数版,熬夜调试到凌晨是常事,最后终于调出既好看又精准的效果,那种成就感,比上班拿奖金还开心。还有一个月前弄的 “TraeSolo 网页贪吃蛇”,纯粹是小时候玩得上瘾,想着自己写一个试试。边写边回忆经典玩法,还顺便优化了游戏逻辑,界面也弄得简单干净,没想到上线后自己玩得还挺上头,也算巩固了一把前端基础。 除了自己做项目,我还爱琢磨别人的好设计。一个月前写的 “微软 Office 新版图标解析”,就是看新版图标顺眼,就忍不住拆开来研究 —— 颜色怎么搭…
点阵世界/中国地图实现与说明
用 HTML + SVG + D3.js 生成点阵风格的世界与中国地图,并给出使用与调整方法。当前仓库已包含两种页面:dots.html(世界点阵)与 china-dots.html(中国点阵)。 设计目标 还原参考图的点阵视觉:整齐网格、居中布局、白底浅灰点 响应式自适应:不同屏幕尺寸下自动调节点密度与半径 纯前端实现:无需后端,直接浏览器预览 数据源与投影 地理数据:world-atlas@2(基于 Natural Earth) 投影方式:Mercator(d3.geoMercator()) 中国页面将中国(id=156)与台湾(id=158)组合为一个要素集合,以确保显示完整 组合逻辑在 china-dots.html:54-56 点阵生成算法 将画布按固定“步长”采样,计算每个网格中心点的经纬度,判断是否落在目标地理范围内 命中即绘制一个圆点 关键实现:china-dots.html:34-49 样式与参数 点颜色:#E3E3E3(浅灰),位置在 china-dots.html:12 点间距(密度):spacing,越大越稀疏,位置在 china-dots.html:34 点半…