做 Icon 和做 Logo，思路不完全一样。 Icon 更看重吸引力和鲜明度，要能快速、准确地传递信息或感受，所以拟人化的主体非常有优势 👇 1. 主体细节不要太多，最好和 Icon 的画布形成联动：主体负责拟人，背景负责展示产品功能，也可以用主体的配饰来做到这一点。这样既能传递功能，又有足够的吸引力。 2. 颜色的对比度尽量拉大。如果主体不够鲜明，就加描边和投影。 3. 用倾斜裁剪，让主体只探出一点头。这样视线更聚焦，很多瑕疵也能被遮住

有一个低成本的让 AI 生成的图标变得更好的办法，这是我让网页 Gemini 简单改造的结果，大有改观 ⬇️ 核心法则——降低非必要的体积表现 AI 容易把简单符号或者卡通化的设计置入严谨的空间和物理结构中理解，因此，可以用以下几个原则来改造你的图标: 1. For 主体：非必要不使用过多高光、阴影笔触，尽量使用简单的线性或者径向渐变来构建主体； 2. For 主体：非必要尽量让环境光影响主体； 3. For 背景：考虑不同圆角下的裁切适配，避免添加多余的弥散光和材质；用纯粹的线性渐变，渐变色值取同色相不同亮度，或者不同色相但鲜亮的颜色； 4. For 全局：尽量不要使用内发光、内阴影来体现质感，除非我要求 5. For 全局：高光不要只加亮，那样会变灰；阴影用相近色相更深一点的颜色，不要直接掺黑。 最后，让 AI 导出分层 PNG，以及背景参数，导入 Icon Composer 一键适配液态玻璃。 感谢 @H_Stepania_ 的案例

新栏目《999 个小技巧，让你 Vibe 的产品更有质感》 ✨ 007 让你的文字排版更顺眼（以中英文为例） 不论是英文，还是中文，都需要解决对齐、长度不均，避头尾问题。你可以通过一些简单的 CSS 来进行处理—— 更重要的是，在做 i18n 的时候，让 Agent 结合网页布局选择合适的文本。避免一个词居于两行，也避免过多的空隙。 001–007 都在主页，关注我，每天一个让产品更有质感的小技巧 参考 Prompt 随附，可以直接抄 ⬇️

日更栏目-《999 个小技巧，让你 Vibe 的产品更有质感》 ✨ 008 如何设计 Wiki 的框架和布局，兼顾 PC 和移动端体验？ 当产品开始变复杂，或者官网需要写大量 SEO 文章时，一套可靠的 Wiki 页面既能快速解答用户疑问，也能带来 SEO 流量。 那么： Q1：移动端怎么优雅地切换章节？ Q2：章节导航太多，超出一屏怎么办？ Q3：文末引导有什么意义？ Q4：Footer 为什么应该超过半屏高？ Q5：导航栏的信息结构怎么安排？ A1：移动端以直板机为主，屏幕大多较窄。可以在底部常驻一个菜单栏，点开后用满屏菜单展示章节。一行一个，方便点击。 A2：导航用独立高度，和正文分开，超出部分上下截断。截断的边缘务必加渐变遮罩，让用户知道上下还有内容；再配一个居中的箭头按钮，便于点击。 A3：不管是人还是 AI 来读，在一篇解答问题的文章下面附上社群、社媒账号按钮，都能快速带来转化。卡片样式记得贴近正文组件，看起来更原生。这相当于为你的转化目标免费投了一则“上下文广告”。 A4：用好看的背景图撑高页脚，吸引用户滑到底并停留。再放上足够有用的信息，真正帮用户解决问题，才不会招人反感。 A5：LOGO（返回官网）+ 关键页面下拉菜单 + 核心 CTA 按钮，滚动时保持吸顶。注意 Safari 等浏览器会根据导航栏颜色给地址栏着色，导航栏背景色要和品牌协调。 001–008 都在主页，关注我，每天一个让产品更有质感的小技巧。 🎉 下一期你想看什么？欢迎友好讨论。 参考 Prompt 随附，可以直接抄 ⬇️

App Icon 设计 - Rove 基于“五角星”和“字母 R”的意象做了很多有趣的尝试 Rove 是一款给情侣、好友用的地图 App，能共享位置、接收到达提醒，关心彼此的出行。 和喜欢的人，地图上见