我把苹果这个UI揭秘了,看看苹果设计师到底在想什么?
作者从图形学视角拆解苹果折叠屏UI图标的设计原理。通过负空间、视觉重量平衡、邻近原则、黄金比例、斐波那契圆和黄金角等工具,分析了信号点大小与位置的设计巧思,指出苹果'主路径极致、兼容路径补偿'的设计哲学。文章还探讨了马赫带、侧抑制、视觉校正等人眼视觉原理,说明美感本质是图形适配大脑视觉算法,优秀的几何设计往往会自然收敛到黄金比例等规律,而AI难以取代的是对极端细节的视觉直觉。
作者从图形学视角拆解苹果折叠屏UI图标的设计原理。通过负空间、视觉重量平衡、邻近原则、黄金比例、斐波那契圆和黄金角等工具,分析了信号点大小与位置的设计巧思,指出苹果'主路径极致、兼容路径补偿'的设计哲学。文章还探讨了马赫带、侧抑制、视觉校正等人眼视觉原理,说明美感本质是图形适配大脑视觉算法,优秀的几何设计往往会自然收敛到黄金比例等规律,而AI难以取代的是对极端细节的视觉直觉。
从图形学角度深入拆解苹果折叠屏UI的设计原理,信息密度高且观点独到(负空间、视觉权重、马赫带、过拟合反思),发布于昨日极具时效性,但行文稍显松散,实操落地性有限。
作者基于 10 年 UI/UX 设计经验,结合 AI 工具实践,总结出一套设计审美方法论。文章实测了 5 个 GitHub 上星数最多的 AI 设计 Skill:UI UX Pro Max(自动匹配行业风格)、Taste Skill(原创设计方向)、Impeccable(逐块打磨去 AI 味)、Emil Kowalski Skills(动效细节)、Hallmark(上线前检查),并配以场景演示。作者还分享了 8 条可复用的设计原则,包括先定义再动手、拆解好设计不照搬、先出全貌再逐块改、统一视觉规则等,强调工具在变但好的设计判断力依然无法被 AI 替代。
作者参考 ElevenLabs 官网安全模块,分享了一组让卡片设计显得高级的线条动效方案,并提供完整提示词可直接复刻。设计关键在于:只用黑色细线,实线画本体、圆点虚线画辅助线营造手作感;三个图形不按同一框绘制,通过大小调整达到视觉平衡;每个图标有各自的结构演示动画(球体旋转、薄板错开归齐、螺旋重长)。文中详细说明了入场画线、悬停交互、防打断处理等细节,并给出单文件 HTML 的完整实现提示词,可交由 Claude 或 ChatGPT 生成,适用于官网功能介绍、定价页、课程流程等场景。
文章分析 Claude 桌面端改版引发老用户不满的原因。作者认为设计团队追求工整规范,却抹掉了产品的独特质感。作者总结品牌升级三大禁忌:一是动了用户已习惯的感官直觉,把有辨识度的个性误当不规范,导致产品同质化;二是用内部生产效率代替用户实际收益,只强调3周快速上线却未说明对用户的具体好处;三是把'做出来了'当成'证明有效了',缺乏真实任务中的行为数据验证。作者提出改版前应自问:用户心中的感官词是否被磨平、新收益能否覆盖学习成本、哪些特色必须保留。真正的升级是修掉硬伤、留住特色。
作者分享了使用 Opus 5.5 一次性生成 UI 空状态 SVG 插图的完整提示词模板。提示词详细规定了画布尺寸、底板斜纹、卡片样式、占位条、Remix icon 图标、强调色使用规则、深色模式配色(CSS 变量 + data-theme 自动切换)、构图约束(缩小版真实产品界面而非插画)及技术细节(阴影用滤镜拼装、id 加随机前缀防冲突、可选弹出动画)。只需将【场景】替换即可复用,大幅节省设计精力。
作者分享使用 DeepSeek-V4.1-Flash 1017 模型配合开源 AI 原生设计工具 OpenPencil 和生图模型 Qwen-Image-2.1 Turbo 制作电商落地页与模特图的实战体验。文章包含完整的落地页设计提示词和模特生成提示词,展示了生成结果的高审美水准,并提到 OpenPencil 是一款开源免费的 AI Native 设计工具,核心能力是通过 Agent 输出高质量 UI 设计稿、卡片、轮播图、PPT 等,适用于电商页面和海报制作,评论区多人交作业复刻效果。
文章盘点了近期爆火的 5 个 Agent Skills 开源项目:Google Android 官方的安卓开发技能包 android/skills、K-Dense 的 177 项覆盖多学科的 AI 科学家技能库、rehan-remade 的万能游戏 Mod 工具、QingYunA 的一页式 HTML 回答方案,以及 oil-oil 的 UI 设计师技能。这些项目展示了 Skills 生态的爆发:官方下场教 AI 写安卓、Agent 变身科研专家、一句话改游戏、答案自带排版、AI 具备审美能力,标志着 Agent Skills 正成为下一代 AI 能力扩展标准。
作者分享了 10 条可直接发送给 Codex 或 Claude Code 的 UI 优化提示词,用于提升界面视觉设计。内容涵盖:移除中点分隔符与冗余解释文本、优化文案表达、采用 Radix UI Colors 颜色规范、光学对齐与同心圆圆角、使用 0.5px 边框、精简动画(ease-out 250ms)、限制字号不超过 4 种(最小 12px)、减少用户判断类交互、谨慎使用圆角阴影等。作者还补充回复网友:0.5px 边框在老旧或低分屏设备上可能不适用,提示偏个人经验;另有网友补充了减少冗余 Eyebrow/Overline 眉题的第 11 条建议。
本文是「AI 设计词典」系列的上篇,旨在帮助普通用户用准确的专业视觉词汇与 AI 沟通设计需求,解决「知道哪里不对却描述不出来」的问题。文章系统梳理了五大维度:画幅与区域(宽高比、安全区域、边距)、构图(居中/非对称构图、三分法、网格系统)、位置与对齐(对齐方式、前景/中景/背景)、空间与密度(负空间、留白、视觉密度、间距)以及层级与视觉重心(视觉层级、焦点、视觉重量、平衡)。每个词条均附中英文对照和实用示例 Prompt,并给出组合应用的完整案例,让描述从模糊的「感觉」变为可量化的准确需求。
本文是 Codex-OpenPencil 插件的快速上手教程,以设计一个服装购物 APP 为例,完整演示从安装、打开画布、确认风格、扩展页面、选中元素口喷修改,到图片生成与搜索、保存设计资产,再到设计稿转代码的全流程。插件免费开源,提供支持平移缩放的无限画布,Codex 负责理解需求并调用工具,OpenPencil 负责设计展示与编辑,可 100% 还原生成 HTML、Vue、React、SwiftUI 等框架代码。文章还介绍了看板、教程图、对比图、PPT 等其他应用场景及常见问题处理方法。