PPT as Code:用网页技术重塑演示文稿
文章探讨了“PPT as Code”的理念,主张利用现代网页技术替代传统PPT,以实现演示文稿的可复用性与迭代能力。内容涵盖了底层模型构建、基础分页与动画实现、进阶框架(如Scroll-snap、WAAPI、reveal.js)的选择,以及如何通过建立视觉系统与AI辅助提升设计美观度。作者强调将演示从一次性文件转变为可持续维护的内容资产。
文章探讨了“PPT as Code”的理念,主张利用现代网页技术替代传统PPT,以实现演示文稿的可复用性与迭代能力。内容涵盖了底层模型构建、基础分页与动画实现、进阶框架(如Scroll-snap、WAAPI、reveal.js)的选择,以及如何通过建立视觉系统与AI辅助提升设计美观度。作者强调将演示从一次性文件转变为可持续维护的内容资产。
文章提供了一套极具操作性的 PPT as Code 落地方法论与 AI 提示词,深入探讨了前端技术与设计审美的结合,结构清晰,针对当下的 AI+前端工作流具有很强的时效性和可读性。
文章介绍了 Vibe Coding 视觉词典的下篇,详细讲解了滚动与动作、提示与加载、视觉风格三大模块的设计概念与 AI 提示词,涵盖 Scroll Reveal、Parallax、Skeleton Screen 等前端开发技巧。
文章以社群小程序开发为背景,通过分析快递100、国家博物馆、优衣库、小宇宙、星巴克、影视飓风等真实案例,拆解了8种常见小程序类型的页面设计重点。每类小程序用户目标不同,页面布局与交互重点也不同:工具服务型要突出办事入口,预约服务型要说明日期、时段与名额的依赖关系,零售电商型需支持找货与比较,内容消费型要平衡发现与播放控制,餐饮点单型要确认门店与履约方式,教育学习型需区分找课与继续学习。文章还结合功能宫格、空状态、SKU、迷你播放器等概念,总结了视觉顺序、布局方式、状态区分与操作反馈等前端设计要点。
文章分析 Claude 桌面端改版引发老用户不满的原因。作者认为设计团队追求工整规范,却抹掉了产品的独特质感。作者总结品牌升级三大禁忌:一是动了用户已习惯的感官直觉,把有辨识度的个性误当不规范,导致产品同质化;二是用内部生产效率代替用户实际收益,只强调3周快速上线却未说明对用户的具体好处;三是把'做出来了'当成'证明有效了',缺乏真实任务中的行为数据验证。作者提出改版前应自问:用户心中的感官词是否被磨平、新收益能否覆盖学习成本、哪些特色必须保留。真正的升级是修掉硬伤、留住特色。
本文是 Codex-OpenPencil 插件的快速上手教程,以设计一个服装购物 APP 为例,完整演示从安装、打开画布、确认风格、扩展页面、选中元素口喷修改,到图片生成与搜索、保存设计资产,再到设计稿转代码的全流程。插件免费开源,提供支持平移缩放的无限画布,Codex 负责理解需求并调用工具,OpenPencil 负责设计展示与编辑,可 100% 还原生成 HTML、Vue、React、SwiftUI 等框架代码。文章还介绍了看板、教程图、对比图、PPT 等其他应用场景及常见问题处理方法。
设计师妍妍分享10个私藏设计灵感网站,包括收录真实产品界面的Mobbin、前沿创意的Godly、极简美学的Minimal Gallery、B端设计参考Refero、暗黑美学的Dark design、交互动效Design spells、Landing Page灵感的Lapa Ninja、字体排版的Typewolf、实验性网页Load more以及X平台精选设计的Best Designs on X。作者强调审美不是靠收藏,而是靠长期浸泡和观察培养的判断力,并预告下期将分享普通人系统提升审美的方法。
作者程序员小灰第三次更新WorkBuddy技能市场推荐清单,精选15个全新实用技能,分为内容创作、视觉设计、职场与个人成长、开发者工具、信息获取五个方向。包括:Humanizer-zh去AI写作痕迹工具、写作蒸馏器复刻作者文风、AI中文长篇小说创作、仓颉技能将书籍播客蒸馏为可调用技能包、UI UX Pro Max一句话生成设计系统、归藏社交媒体卡片一键生成小红书图组、面试准备助手、产品经理工作流技能集、AI共读拆书等。文章附带安装命令和实测效果截图,帮助读者快速提升WorkBuddy使用体验。
本文介绍了用AI开发小程序时如何补齐设计规范,解决多个页面字体、按钮、圆角不统一的问题。文章分7步讲解:确定规范适用范围与存放位置、统一字体与文字层级、按用途分配语义色、统一形状间距与图形元素、把规则封装为可复用组件与变体、统一状态与交互反馈,以及通过Design Token落实到代码并用验收标准逐页检查。最后给出常见坑(规范与代码各改各的)的解决方法、维护流程和一段可直接使用的提示词,帮助AI持续按同一套规则产出页面。
文章以模拟的Punk咖啡馆点单小程序为例,图文讲解15个常见交互名词:导航栏、TabBar、页内Tabs、卡片、单元格、按钮、点击热区、表单校验、选择器、轻提示、对话框、操作面板、骨架屏、空状态与错误状态、无障碍。沿“选咖啡→选规格→加入购物袋→确认订单”的完整点单路径,说明每一步页面应有的回应,如选中状态、数量与总价更新、加载与失败提示等。最后强调提交后要区分等待、失败和结果不明三种情况,结合服务端幂等防止重复下单,并给出用AI按业务补齐交互的模板。
文章由 Ink & Switch 研究实验室撰写,探讨了传统批量生产软件的僵硬性问题:中心化开发模式让用户无法按自身需求改造工具,导致主动权丧失。作者提出「可塑软件」概念,设想一个任何人都能以最小摩擦改造软件工具的生态。文章分析了设置项、插件、改机、开源、AI 辅助编程等现有方案的局限,并提出三个关键设计模式:为用户提供从使用者到创造者的「缓坡」渐进路径、以通用可组合的「工具」替代僵化的「应用」形态、以及工具间的数据共享与界面组合。作者认为物理世界的可塑性经验值得借鉴到软件世界中。
作者以《清明上河图》为题材,用 Codex 辅助开发了一个可横向行走的交互插画项目。文章详细记录了从最初需求定义、视觉规则制定到技术选型的全过程:放弃 Three.js 改用 Canvas 2D 分层绘制,将鸟瞰式原画重构为适合人物行走的宋代街道,包含三个街区、141 位动态人物、虹桥过船和清明时雨等互动事件。开发中通过迭代修复遮挡、坐标、卡顿等问题,将帧率从 25 FPS 优化到 55 FPS,并配套 48 项自动测试,最终实现了用户可参与宋代街市生活的沉浸式体验。