作者参考 ElevenLabs 官网安全模块，分享了一组让卡片设计显得高级的线条动效方案，并提供完整提示词可直接复刻。设计关键在于：只用黑色细线，实线画本体、圆点虚线画辅助线营造手作感；三个图形不按同一框绘制，通过大小调整达到视觉平衡；每个图标有各自的结构演示动画（球体旋转、薄板错开归齐、螺旋重长）。文中详细说明了入场画线、悬停交互、防打断处理等细节，并给出单文件 HTML 的完整实现提示词，可交由 Claude 或 ChatGPT 生成，适用于官网功能介绍、定价页、课程流程等场景。
作者开发了一个免费开源的雅思背单词网站「词光」，收录 7298 个雅思词汇，每个词配有原创插画、英音美音发音和例句真人配音（使用 ElevenLabs 生成）。网站无需注册即可使用，通过词汇星图点亮星星的互动方式增加学习趣味。文章发布后获得大量好评，网友建议包括做成 App、支持自定义每日单词量、优化字体、改善配图记忆技巧等，作者均积极回应并表示会跟进改进，还计划支持初高中词库和扩展到其他学习领域。
作者介绍了开源项目 AI Design Skills，目前提供 landing-page-design 技能，适用于 Claude Code、Cursor、Codex 等可读取规则文件的 AI 编程工具。它不是现成模板，而是一套从内容到视觉的制作规则：先明确产品定位与用户目标，再组织页面结构；统一字体、间距、配色和动效等视觉系统；并补齐按钮悬停、加载、空页面、报错、表单校验、移动端适配和无障碍等交付细节，避免 AI 生成千篇一律的默认样式。评论区还交流了表单校验保留已填内容等实用经验。
OpenPencil 是号称全球首款 AI 原生的开源矢量设计工具，GitHub 已获 6400+ Stars，90.6% 代码由 Rust 编写。它实现了 Design-as-Code：通过提示词在实时画布上生成和修改 UI。核心亮点包括：并发智能体团队将页面拆解为多个子任务并行流式渲染；多模型智能适配（Claude、GPT-4o、Gemini、MiniMax 等）；可通过 MCP Server 集成到 Claude Code、Cursor 等终端工具；.op 设计文件为纯 JSON 格式、Git 友好，可一键导出 React + Tailwind 或 HTML + CSS 代码；支持 P2P 实时协作与冲突回放。适合前端开发者和独立创作者提升生产力。
文章介绍了中文网站 font-family 的最佳实践：遵循“先西后中、兼顾主流操作系统、最后以通用无衬线字体兜底”的原则。作者给出了 --font-sans 和 --font-mono 两个 CSS 变量配置示例，解释了 Apple 生态、Windows、Android 等系统字体入口的作用，并总结了三条避坑指南：西文字体须写在中文字体之前、中文字体尽量使用英文名称避免编码问题、带空格的字体名必须用双引号包裹。此外还提醒不声明字体时浏览器渲染的是默认字体而非系统字体。
作者分享了 10 条可直接发送给 Codex 或 Claude Code 的 UI 优化提示词，用于提升界面视觉设计。内容涵盖：移除中点分隔符与冗余解释文本、优化文案表达、采用 Radix UI Colors 颜色规范、光学对齐与同心圆圆角、使用 0.5px 边框、精简动画（ease-out 250ms）、限制字号不超过 4 种（最小 12px）、减少用户判断类交互、谨慎使用圆角阴影等。作者还补充回复网友：0.5px 边框在老旧或低分屏设备上可能不适用，提示偏个人经验；另有网友补充了减少冗余 Eyebrow/Overline 眉题的第 11 条建议。
作者精选10个设计师宝藏资源，覆盖配色（Coolors）、字体、图标、插画、动效、3D设计、图片、CTA按钮、品牌视觉管理和AI交互模式等领域。文章强调审美提升靠日复一日的浸泡，每个资源都附推荐理由与使用建议，帮助读者建立自己的资源库与判断标准，逐步将好设计运用到作品中。
作者 Tw93 分享用 Mac 开发 Windows 软件时对客户端技术选型的思考。文章梳理了三种主要路线：Web 壳方案（PhoneGap/Cordova）、跨端方案（React Native、Flutter、Electron、Tauri、Wails 等）以及原生开发（SwiftUI、Compose、WinUI 3）。作者提出研发效率、体验与性能的'不可能三角'，并指出在 AI Coding 大幅降低开发成本的当下，原生开发变得更具吸引力，因为双平台代码成本被 AI 补齐，而人更应专注于多端调试与验收。最终强调技术为业务服务，先解决用户真实需求，再优化体验。
本文介绍用AI搭建个人网站的最佳实践：先整理个人内容到飞书文档，再参考优质网站让AI抓取代码与风格。作者系统整理了8大类60多个网页设计资源，涵盖组件库（shadcn/ui、Aceternity UI、Magic UI等）、动效与3D工具（Motion、GSAP、Three.js、Spline等）、整站灵感网站（Awwwards、Land-book等）、产品界面参考（Mobbin、Page Flows等）以及配色素材、AI建站和Claude Skills等类别。每个资源均附特色说明与具体用法，可让AI直接复用代码和Prompt，适合从零搭建或迭代优化个人网站时收藏使用。
这是一篇面向新手小白的 Chrome 浏览器超详细教程，分为上下两篇。上篇讲解如何把浏览器用快，涵盖安装方式、账号同步、地址栏搜索运算符（t/b/h/@等）、标签页快捷键与分组、书签历史下载面板、开发者工具及 chrome:// 隐藏页面等实用操作技巧。下篇讲解如何用 Vibe Coding（借助 AI 编写代码）从零开发一个 Chrome 扩展，包括扩展的目录结构、Manifest V3 的清单、Service Worker、Content Script、Popup 等核心概念，以及调试方法、上架 Chrome 应用商店的流程，并介绍了上架后通过扩展赚钱的四条路径，引用 Superpower ChatGPT 等月入数万美元的真实案例。
设计师妍妍分享10个私藏设计灵感网站，包括收录真实产品界面的Mobbin、前沿创意的Godly、极简美学的Minimal Gallery、B端设计参考Refero、暗黑美学的Dark design、交互动效Design spells、Landing Page灵感的Lapa Ninja、字体排版的Typewolf、实验性网页Load more以及X平台精选设计的Best Designs on X。作者强调审美不是靠收藏，而是靠长期浸泡和观察培养的判断力，并预告下期将分享普通人系统提升审美的方法。
文章激烈批评 Vercel 的商业行为与开发者关系。作者指出 Vercel 一边高喊反厂商锁定，一边通过 Next.js 的私有构建产物（.next 黑盒）对竞争对手如 Netlify、Cloudflare、AWS 造成事实锁定，迫使行业推出 OpenNext 等逆向工程项目适配。文章还批评 Vercel 发布会夸大宣传（如 Turbopack 号称快 700 倍却内存泄漏严重）、缓存决策反复折腾社区，以及通过挖走 React 核心团队控制生态、弃养 Hyper 等开源项目、无视社区 PR 的做派，认为 Vercel 是道貌岸然的开源收割者。
作者 Kobin 分享用 AI 逐步开发个人 3D 网站「观星台」的完整过程。文章从让 GPT 生成视觉效果图讲起，逐步拆解实现路径：先区分网页内容（HTML/CSS）与 Three.js 场景，再依次实现粒子签名、作品星座、由星点组成的粒子人物侧影，接着通过统一色板、亮暗关系和轻量 Bloom 提升画面质感，然后将滚动与章节状态绑定实现场景过渡，最后接入音乐让星空随节奏变化。每个阶段都给出可直接交给 AI 编码工具的练习指令与检查方法，适合想用 AI 入门 3D 网页创作的读者按序实践。
作者分享了从零构建个人网站的完整教程：先理解网站由信息架构与视觉表达两部分组成，思考希望访客如何认识自己；提出“视觉母题”概念，让设计从内容和个人特点自然延伸；推荐通过Awwwards学习优秀网站的五步分析法；讲解内容形式选择、排版层级、留白对比、视觉节奏与动画克制等设计要点；最后介绍如何用AI工具（Skill）迭代建站并部署上线。作者认为制作个人网站也是一次重新认识自己的过程，网站可随个人成长不断迭代。
作者尖沙咀小霸王精选了九篇关于网页动效的中文 X 长文进行推荐。内容涵盖 Punk 的动效词典（上中下三篇），系统讲解缓动、滚动叙事、鼠标交互、按钮反馈等动效术语与制作方法；爻火基于 Omarchy 拆解的 21 种像素 Logo 动效；Punk 的前端设计工作流与视觉词典，覆盖页面布局、结构与整体风格描述；Russell 的 PPT as Code 演示文稿方案；以及万象 AI 实验室用 HyperFrames、GSAP 将长文转化为手绘动画的方法。文章旨在帮助读者用准确的语言描述动效需求，提升网页设计的表现力。
本文介绍了用AI开发小程序时如何补齐设计规范，解决多个页面字体、按钮、圆角不统一的问题。文章分7步讲解：确定规范适用范围与存放位置、统一字体与文字层级、按用途分配语义色、统一形状间距与图形元素、把规则封装为可复用组件与变体、统一状态与交互反馈，以及通过Design Token落实到代码并用验收标准逐页检查。最后给出常见坑（规范与代码各改各的）的解决方法、维护流程和一段可直接使用的提示词，帮助AI持续按同一套规则产出页面。
作者基于 OpenArt Arena 的匿名排名，从各创意设计榜单中选出前三名 AI 模型，并用虚构咖啡品牌 Luka 的品牌手册作为统一视觉基准，在产品图、平面海报和动态设计三类任务上进行实测对比。评估标准包括品牌还原度、设计质量和生成价格。作者通过 After Effects 对齐原始 SVG 检查 logo 还原精度，给出各模型的优劣分析与评分表格。结果显示 Seedream 5.0 Pro 在产品图上表现最佳且成本最低，Grok Imagine 2.0 在平面设计中胜出。文章还提供了完整的方法论和可复用的 Design_Judgment_Skill.md。
文章以模拟的Punk咖啡馆点单小程序为例，图文讲解15个常见交互名词：导航栏、TabBar、页内Tabs、卡片、单元格、按钮、点击热区、表单校验、选择器、轻提示、对话框、操作面板、骨架屏、空状态与错误状态、无障碍。沿“选咖啡→选规格→加入购物袋→确认订单”的完整点单路径，说明每一步页面应有的回应，如选中状态、数量与总价更新、加载与失败提示等。最后强调提交后要区分等待、失败和结果不明三种情况，结合服务端幂等防止重复下单，并给出用AI按业务补齐交互的模板。
作者介绍其开发的调色板生成器 Iris 正式上线为应用（irisreads.app）。作者认为色彩理论中最被忽视的是色彩之间的比例与平衡关系：多数调色工具只能提取图片中的颜色，而 Iris 能进一步读取每种颜色的比例、平衡与角色，解释配色方案为何有效。应用还提供存档功能，可将生成的调色板保存为工作档案，方便未来项目使用。
文章以Punk咖啡馆点单小程序为例，沿着菜单、规格、购物袋、确认订单四个页面，图文讲解15个布局与视觉设计名词，包括信息架构、用户流程、线框图、首屏、视觉层级、栅格、对齐、留白、响应式布局、安全区域、设计变量、语义色、字阶、行高及Padding/Margin。作者还指出固定底栏遮挡内容的常见坑，并给出从定入口、画线框、定边距对齐到小程序内验证的完整排版流程，帮助读者用具体语言描述布局需求，让AI能精准修改页面。
文章探讨了字体与音效之间的跨模态对应关系：大脑会自然地将声音、形状等不同感官体验联系起来，高细音对应轻盈锐利的形态，低沉音对应厚重圆润的形态。作者指出音效设计不能机械匹配字体特征，而要结合字体在屏幕上的动画方式（速度、方向、节奏）来选择声音。文中提出一个简单框架：先解读字体特性，再观察动画运动，最后选择同时支持二者的音效。好的音效设计能赋予视觉重量感与真实感，提升整体沉浸感，让观众感受到动画而非仅仅看到动画。
文章以模拟做一个咖啡馆点单小程序为例，系统讲解微信原生小程序开发的12个核心前端概念。作者从WXML（页面结构）、WXSS（样式布局）、JavaScript/TypeScript（交互逻辑）、JSON（配置文件）四个分工入手，逐一解释Page页面注册、生命周期回调（onLoad/onShow/onHide等）、Component自定义组件、数据绑定（双花括号与wx:for/wx:if）以及事件绑定（bindtap与data-*传参）等名词。通过菜单、饮品规格、购物袋、确认订单四个页面的完整点单流程，让不熟悉前端的读者理解AI生成的小程序代码各自的作用，并提供了常见问题的避坑排查指南。
文章基于《Refactoring UI》一书，精选出 20 条实用的 UI 设计黄金军规，配合前后对比图讲解。作者指出在 AI 编码工具（Claude Code、Cursor 等）抹平写代码门槛后，UI 设计美感成为区分玩具与商业产品的关键壁垒。内容涵盖：为设计定好风格基调、先灰度后上色、用字重和颜色而非字号建立视觉层级、通过弱化凸显重点、按钮按主次分级、从过度留白开始做减法、间距的亲疏之别、动态调整行长与行高、以基线而非居中对齐等可工程化落地的设计原则，帮助开发者补齐 UI 设计这块最后拼图。
文章介绍如何利用蚂蚁百灵开源的 Ming-Image-0.1-Design 系列模型实现 AI 海报的分层编辑。Design 模型负责生成文字渲染稳定的设计图，Design-Layer 模型将设计图拆分为透明图层。作者还用 React 构建了 Ming Studio 工作台，串起生成、拆层、局部替换、保存导出的完整流程。通过提示词预先规划元素布局、按编辑需求分层，实现只替换海报中某一元素（如猫）而保持其他部分不变，并解决了背景残留等细节问题，让 AI 生成图从一次性图片变成可继续编辑的设计稿。
作者以一张 AI 生成的概念图为起点，完整记录了制作一个网页 3D 狐狸电台的全过程，证明不会建模、不用最强模型也能做出 3D 作品。文章分四步：想法生成静态图、图生 3D 模型（用混元 3D）、模型瘦身上网页（66MB 压到 1.9MB）、让模型在 shader 中动起来。文中穿插 7 个 3D 概念知识（网格面数、材质贴图、PBR、GLB 格式等），并给出挑图标准、模型体检打分方法、瘦身命令和成本账单，是一份可复现的 AI 3D 创作实践教程。
文章以社群小程序开发为背景，通过分析快递100、国家博物馆、优衣库、小宇宙、星巴克、影视飓风等真实案例，拆解了8种常见小程序类型的页面设计重点。每类小程序用户目标不同，页面布局与交互重点也不同：工具服务型要突出办事入口，预约服务型要说明日期、时段与名额的依赖关系，零售电商型需支持找货与比较，内容消费型要平衡发现与播放控制，餐饮点单型要确认门店与履约方式，教育学习型需区分找课与继续学习。文章还结合功能宫格、空状态、SKU、迷你播放器等概念，总结了视觉顺序、布局方式、状态区分与操作反馈等前端设计要点。
文章针对 AI 编程生成的网页千篇一律（紫色渐变、圆角卡片、Inter 字体等）的问题，推荐四个工具：getdesign.md 提供现成网站的 DESIGN.md 设计参考，让 AI 按指定风格编写；libraries.dev 提供 UI 效果库，可直接复制 prompt 添加视觉组件；Impeccable 是项目完成后的设计审查 Skill，可对页面做 polish、audit、critique 等操作；OpenDesign 是本地优先的设计 Agent 工作空间，强调设计系统和资产复用。作者强调 vibe coding 不等于把审美外包给 AI，颜色、留白和取舍仍需人做决定。
作者将《红楼梦》中的大观园重建为可在浏览器中漫游的三维世界，把文本与空间放进同一窗口。项目整理了二十处景致，涵盖五十九回原文、三十三首诗词和一百五十八位人物。读者可点选景致查看对应原文与诗笺，跟随第十七回贾政游园路线导览，或在漫步模式中自由行走，并可切换四季、昼夜与天气共三十六种环境状态。整个项目依据原著游园路线与北京大观园复建格局推定，最终打包为约 2.7 MB 的 HTML 文件，离线也能体验，成为一份可交互、可行走的阅读批注。
作者分享了一套 Landing Page 高效工作流：先用 saaslandingpage.com 灵感库浏览数百个顶级 SaaS 产品的真实落地页，学习 Hero Section 和价值主张的设计；再借助 website-rebuild-skill（基于 Claude Code / AI Agent 的网站复刻工具）以像素级精度抓取结构、样式并重构干净代码。工作流为：选定对标案例，用 Skill 自动化重构基础骨架，替换自己的文案与品牌资产，可节省约 90% 前端排版时间，将原本一天的页面打磨工作大幅压缩，同时保证高质量还原。
文章介绍 Design Engineer Emil Kowalski，他现就职于 Linear Web 团队，曾任职于 Vercel 设计团队，代表作包括 toast 组件 Sonner、抽屉组件 Vaul 以及动效课程 animations.dev。文章重点分析了 Sonner 的诸多细节设计：多条提示叠放展开、悬停范围覆盖卡片间隙等。作者认为 Emil 的核心贡献在于把'界面手感'这种玄学拆解为可学习、可复用的原则——动画速度、曲线、时机等，并通过组件、文章和课程传递给他人，启发开发者重视交互细节。
