🟣 TOOOLS #18: Ladybug, Canvas UI, Origin Kit, UI SFX, Datatype

<!-- ============ TOOOL OF THE WEEK ============ --> <table cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="Margin:0;padding-top:0px;padding-right:0;padding-bottom:20px;padding-left:0"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;letter-spacing:0;color:#333333;font-size:14px"><img width="24" align="left" src="https://ik.imagekit.io/gua3dld9n/newsletter/ic-toooloftheweek.png" alt="Section Icon" title="Section Icon" style="display:block;font-size:14px;border:0;outline:none;text-decoration:none;margin:0"><span style="color:#7b788c;line-height:24.7px;font-family:Inter, sans-serif;font-size:13px">&nbsp; &nbsp;TOOOL OF THE WEEK</span></p> </td> </tr> </tbody> </table> <table cellspacing="0" cellpadding="0" align="center" bgcolor="#fafafe" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;border-radius:28px 28px 0 0;background-color:#fafafe;width:100%" role="none"> <tbody> <tr> <td align="left" style="padding:20px 20px 0 20px;Margin:0"> <a target="_blank" href="https://theladybug.app/?ref=toools" style="mso-line-height-rule:exactly;text-decoration:underline;color:#1376C8;font-size:14px"><img src="https://ik.imagekit.io/gua3dld9n/newsletter/issue-18/ladybug-browser-video-effects-studio.jpg" alt="Ladybug effects studio in the browser layering glitch and halftone effects on footage" width="100%" title="Tool image" style="display:block;font-size:14px;border:0;outline:none;text-decoration:none;margin:0;border-radius:12px;max-width:544px"></a> </td> </tr> </tbody> </table> <table cellspacing="0" cellpadding="0" align="center" bgcolor="#fafafe" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;background-color:#fafafe;width:100%" role="none"> <tbody> <tr> <td align="left" style="padding:24px 22px 0 22px;Margin:0"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:21.6px;letter-spacing:0;color:#0a0523;font-size:18px;padding-bottom:6px"><strong style="font-weight:700 !important"><a target="_blank" href="https://theladybug.app/?ref=toools" style="mso-line-height-rule:exactly;text-decoration:underline;color:#0a0523;font-size:18px;line-height:21.6px;font-family:Inter, sans-serif">Ladybug</a></strong></p> </td> </tr> </tbody> </table> <table cellspacing="0" cellpadding="0" align="center" bgcolor="#fafafe" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;background-color:#fafafe;border-radius:0 0 28px 28px;width:100%" role="none"> <tbody> <tr> <td align="left" style="padding:0 22px 24px 22px;Margin:0"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:18.2px;letter-spacing:0;color:#59566d;font-size:14px">Ladybug is for the moment a landing page hero, poster, album cover, or reel needs a look nobody else has. Layer halftone, ASCII, dither, glass, and glitch effects over any footage, image, or webcam feed, keyframe them over time, or wave a hand and steer the effect live. It runs free in the browser, no account, nothing you load ever leaves your computer, and exports span 4K video, 8K stills, and transparent clips that drop straight into product pages, social posts, or print and title work.</p> </td> </tr> </tbody> </table> <!-- ============ ALSO ON THE RADAR ============ --> <table cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="Margin:0;padding-top:80px;padding-bottom:40px;padding-right:0;padding-left:0"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;letter-spacing:0;color:#333333;font-size:14px"><img align="left" src="https://ik.imagekit.io/gua3dld9n/newsletter/ic-ontheradar.png" width="24" alt="Section Icon" title="Section Icon" style="display:block;font-size:14px;border:0;outline:none;text-decoration:none;margin:0"><span style="line-height:24.7px;font-family:Inter, sans-serif;font-size:13px;color:#6f6d7f">&nbsp; &nbsp;ALSO ON THE RADAR</span></p> </td> </tr> </tbody> </table> <!-- Radar Tool 1 --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td valign="top" style="padding:0;Margin:0;width:104px"> <a target="_blank" href="https://canvasui.dev/?ref=toools" style="mso-line-height-rule:exactly;text-decoration:underline;color:#1376C8;font-size:14px"><img src="https://ik.imagekit.io/gua3dld9n/newsletter/issue-18/canvas-ui-webgl-component-library.gif" width="80" alt="Canvas UI icon" title="Tool icon" style="display:block;font-size:14px;border:0;outline:none;text-decoration:none;margin:0;border-radius:14px"></a> </td> <td valign="top" style="padding:0;Margin:0"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:27px;letter-spacing:0;color:#0a0523;font-size:18px;padding-bottom:6px"><strong style="font-weight:700 !important"><a target="_blank" href="https://canvasui.dev/?ref=toools" style="mso-line-height-rule:exactly;text-decoration:underline;color:#0a0523;font-size:18px;font-family:Inter, sans-serif"><u>Canvas UI</u></a></strong></p> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:18.2px;letter-spacing:0;color:#59566d;font-size:14px">An open source library of interface components that layer real-time shader effects over fully working UI.</p> </td> </tr> </tbody> </table> <!-- Spacer between radar tools --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"><tbody><tr><td style="padding:0;Margin:0;height:40px;font-size:0;line-height:0">&nbsp;</td></tr></tbody></table> <!-- Radar Tool 2 --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td valign="top" style="padding:0;Margin:0;width:104px"> <a target="_blank" href="https://www.originkit.dev/?ref=toools" style="mso-line-height-rule:exactly;text-decoration:underline;color:#1376C8;font-size:14px"><img src="https://ik.imagekit.io/gua3dld9n/newsletter/issue-18/origin-kit-animated-component-library.gif" width="80" alt="Origin Kit icon" title="Tool icon" style="display:block;font-size:14px;border:0;outline:none;text-decoration:none;margin:0;border-radius:14px"></a> </td> <td valign="top" style="padding:0;Margin:0"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:27px;letter-spacing:0;color:#0a0523;font-size:18px;padding-bottom:6px"><strong style="font-weight:700 !important"><a target="_blank" href="https://www.originkit.dev/?ref=toools" style="mso-line-height-rule:exactly;text-decoration:underline;color:#0a0523;font-size:18px;font-family:Inter, sans-serif"><u>Origin Kit</u></a></strong></p> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:18.2px;letter-spacing:0;color:#59566d;font-size:14px">A free library of animated website components, ready to copy as code into a project or drop straight into Framer.</p> </td> </tr> </tbody> </table> <!-- Spacer between radar tools --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"><tbody><tr><td style="padding:0;Margin:0;height:40px;font-size:0;line-height:0">&nbsp;</td></tr></tbody></table> <!-- Radar Tool 3 --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td valign="top" style="padding:0;Margin:0;width:104px"> <a target="_blank" href="https://uisfx.com/?ref=toools" style="mso-line-height-rule:exactly;text-decoration:underline;color:#1376C8;font-size:14px"><img src="https://ik.imagekit.io/gua3dld9n/newsletter/issue-18/ui-sfx-interface-sound-effects-library.gif" width="80" alt="UI SFX icon" title="Tool icon" style="display:block;font-size:14px;border:0;outline:none;text-decoration:none;margin:0;border-radius:14px"></a> </td> <td valign="top" style="padding:0;Margin:0"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:27px;letter-spacing:0;color:#0a0523;font-size:18px;padding-bottom:6px"><strong style="font-weight:700 !important"><a target="_blank" href="https://uisfx.com/?ref=toools" style="mso-line-height-rule:exactly;text-decoration:underline;color:#0a0523;font-size:18px;font-family:Inter, sans-serif"><u>UI SFX</u></a></strong></p> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:18.2px;letter-spacing:0;color:#59566d;font-size:14px">A tiny sound design library covering every cue an interface needs, in 12 distinct sonic personalities from Minimal to Arcade.</p> </td> </tr> </tbody> </table> <!-- Spacer between radar tools --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"><tbody><tr><td style="padding:0;Margin:0;height:40px;font-size:0;line-height:0">&nbsp;</td></tr></tbody></table> <!-- Radar Tool 4 --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td valign="top" style="padding:0;Margin:0;width:104px"> <a target="_blank" href="https://franktisellano.github.io/datatype/?ref=toools" style="mso-line-height-rule:exactly;text-decoration:underline;color:#1376C8;font-size:14px"><img src="https://ik.imagekit.io/gua3dld9n/newsletter/issue-18/datatype-variable-font-inline-charts.gif" width="80" alt="Datatype icon" title="Tool icon" style="display:block;font-size:14px;border:0;outline:none;text-decoration:none;margin:0;border-radius:14px"></a> </td> <td valign="top" style="padding:0;Margin:0"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:27px;letter-spacing:0;color:#0a0523;font-size:18px;padding-bottom:6px"><strong style="font-weight:700 !important"><a target="_blank" href="https://franktisellano.github.io/datatype/?ref=toools" style="mso-line-height-rule:exactly;text-decoration:underline;color:#0a0523;font-size:18px;font-family:Inter, sans-serif"><u>Datatype</u></a></strong></p> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:18.2px;letter-spacing:0;color:#59566d;font-size:14px">A variable font that turns text into inline bar charts, sparklines, and pie charts that sit naturally in running text.</p> </td> </tr> </tbody> </table> <!-- ============ FROM THIS WEEK'S SPONSOR ============ --> <table cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="Margin:0;padding-top:80px;padding-bottom:20px;padding-right:0;padding-left:0"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;letter-spacing:0;color:#333333;font-size:14px"><img align="left" src="https://ik.imagekit.io/gua3dld9n/newsletter/ic-spotlight.png" width="24" alt="Section Icon" title="Section Icon" style="display:block;font-size:14px;border:0;outline:none;text-decoration:none;margin:0"><span style="color:#7b788c;line-height:24.7px;font-family:Inter, sans-serif;font-size:13px">&nbsp; &nbsp;FROM THIS WEEK'S SPONSOR</span></p> </td> </tr> </tbody> </table> <table bgcolor="#fafafe" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;border-radius:28px;background-color:#fafafe;width:100%" role="none"> <tbody> <tr> <td align="left" style="padding:20px;Margin:0"> <!--[if mso]><table style="width:100%" cellpadding="0" cellspacing="0"><tr><td style="width:320px" valign="top"><![endif]--> <table cellpadding="0" cellspacing="0" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;float:left" role="none"> <tbody> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:252px"> <a target="_blank" href="https://www.articos.com/" style="mso-line-height-rule:exactly;text-decoration:underline;color:#1376C8;font-size:14px"><img src="https://ik.imagekit.io/gua3dld9n/newsletter/issue-16/articos-ai-user-research.jpg?updatedAt=1784028280752" width="100%" alt="Articos" title="Articos" style="display:block;font-size:14px;border:0;outline:none;text-decoration:none;margin:0;border-radius:12px;max-width:100%"></a> </td> </tr> </tbody> </table> <!--[if mso]></td><td style="width:20px"></td><td style="width:204px" valign="top"><![endif]--> <!-- Mobile-only spacer --> <table class="es-desk-hidden" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;display:none;width:100%" role="none"><tbody><tr><td style="padding:0;Margin:0;height:24px;font-size:0;line-height:0">&nbsp;</td></tr></tbody></table> <table cellpadding="0" cellspacing="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;float:right" role="none"> <tbody> <tr> <td align="left" style="padding:0;Margin:0;width:232px"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:27px;letter-spacing:0;color:#0a0523;font-size:18px;padding-bottom:6px"><strong style="font-weight:700 !important"><a href="https://www.articos.com/" target="_blank" style="mso-line-height-rule:exactly;text-decoration:underline;color:#0a0523;font-size:18px;font-family:Inter, sans-serif"><u>Articos</u></a></strong></p> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:18.2px;letter-spacing:0;color:#59566d;font-size:14px">AI user research platform. Test ideas, positioning, and messaging with synthetic audiences in under 30 minutes.</p> </td> </tr> </tbody> </table> <!--[if mso]></td></tr></table><![endif]--> </td> </tr> </tbody> </table> <!-- ============ A FEW READS & LISTENS ============ --> <table cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="Margin:0;padding-top:80px;padding-bottom:40px;padding-right:0;padding-left:0"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;letter-spacing:0;color:#333333;font-size:14px"><img src="https://ik.imagekit.io/gua3dld9n/newsletter/ic-readslistens.png" width="24" align="left" alt="Section Icon" title="Section Icon" style="display:block;font-size:14px;border:0;outline:none;text-decoration:none;margin:0"><span style="color:#7b788c;line-height:24.7px;font-family:Inter, sans-serif;font-size:13px">&nbsp; &nbsp;A FEW READS &amp; LISTENS</span></p> </td> </tr> </tbody> </table> <!-- Read 1: Article --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="padding:0;Margin:0"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:16.9px;letter-spacing:0;color:#59566d;font-size:13px;padding-bottom:4px"><strong style="font-weight:700 !important">UX COLLECTIVE &nbsp;<span style="font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif">&#x1F4D6;</span> <span style="color:#759ee3">ARTICLE</span></strong></p> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:27px;letter-spacing:0;color:#0a0523;font-size:18px;padding-bottom:6px"><strong style="font-weight:700 !important"><a target="_blank" href="https://uxdesign.cc/ai-personality-is-a-design-problem-58fbc7926a3d?ref=toools" style="mso-line-height-rule:exactly;text-decoration:underline;color:#0a0523;font-size:18px;font-family:Inter, sans-serif"><u>AI personality is a design problem</u></a></strong></p> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:18.2px;letter-spacing:0;color:#59566d;font-size:14px">Slava Polonski makes the case that the way an AI product talks and behaves is not a model property but a design decision, and one designers should own. Timely, now that every product is quietly getting a personality.</p> </td> </tr> </tbody> </table> <!-- Spacer --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"><tbody><tr><td style="padding:0;Margin:0;height:40px;font-size:0;line-height:0">&nbsp;</td></tr></tbody></table> <!-- Read 2: Podcast --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="padding:0;Margin:0"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:16.9px;letter-spacing:0;color:#59566d;font-size:13px;padding-bottom:4px"><strong style="font-weight:700 !important">DIVE CLUB &nbsp;<span style="font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif">&#x1F3A7;</span> <span style="color:#a87cd8">PODCAST</span></strong></p> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:27px;letter-spacing:0;color:#0a0523;font-size:18px;padding-bottom:6px"><strong style="font-weight:700 !important"><a target="_blank" href="https://www.youtube.com/watch?v=dJ0nj1ajShc&amp;ref=toools" style="mso-line-height-rule:exactly;text-decoration:underline;color:#0a0523;font-size:18px;font-family:Inter, sans-serif"><u>Protecting your creativity in an AI world</u></a></strong></p> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:18.2px;letter-spacing:0;color:#59566d;font-size:14px">Pablo Stanley, staff product designer at Vercel, goes behind the scenes of his creative tool experiments, including how v0's new design mode was prototyped. A grounded look at keeping your own taste in charge while building with AI.</p> </td> </tr> </tbody> </table> <!-- Spacer --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"><tbody><tr><td style="padding:0;Margin:0;height:40px;font-size:0;line-height:0">&nbsp;</td></tr></tbody></table> <!-- Read 3: Article --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="padding:0;Margin:0"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:16.9px;letter-spacing:0;color:#59566d;font-size:13px;padding-bottom:4px"><strong style="font-weight:700 !important">PHIL MORTON &nbsp;<span style="font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif">&#x1F4D6;</span> <span style="color:#759ee3">ARTICLE</span></strong></p> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:27px;letter-spacing:0;color:#0a0523;font-size:18px;padding-bottom:6px"><strong style="font-weight:700 !important"><a target="_blank" href="https://www.philmorton.co/a-side-project-is-the-fastest-way-to-upskill-in-the-age-of-ai/?ref=toools" style="mso-line-height-rule:exactly;text-decoration:underline;color:#0a0523;font-size:18px;font-family:Inter, sans-serif"><u>A side project is the fastest way to upskill in the age of AI</u></a></strong></p> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:18.2px;letter-spacing:0;color:#59566d;font-size:14px">Phil Morton argues that building a small side project beats any course for learning AI-era skills, now that the barrier to shipping real software has collapsed. His advice cuts against the grain: skip Lovable and co, since one-prompt builders automate away exactly the part that teaches you; pick AI tools that keep you in every step.</p> </td> </tr> </tbody> </table> <!-- ============ UPDATES & NEWS ============ --> <table cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="Margin:0;padding-top:80px;padding-bottom:20px;padding-right:0;padding-left:0"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;letter-spacing:0;color:#333333;font-size:14px"><img align="left" src="https://ik.imagekit.io/gua3dld9n/newsletter/ic-updatesnews.png" width="24" alt="Section Icon" title="Section Icon" style="display:block;font-size:14px;border:0;outline:none;text-decoration:none;margin:0"><span style="color:#7b788c;line-height:24.7px;font-family:Inter, sans-serif;font-size:13px">&nbsp; &nbsp;UPDATES &amp; NEWS</span></p> </td> </tr> </tbody> </table> <!-- News Item 1 --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="padding:0;Margin:0;padding-top:20px"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:27px;letter-spacing:0;color:#0a0523;font-size:18px"><a href="https://openai.com/supply/co-lab/work-louder/?ref=toools" target="_blank" style="mso-line-height-rule:exactly;text-decoration:underline;color:#0a0523;font-size:18px;font-family:Inter, sans-serif"><u>OpenAI's first hardware, a $230 macro pad for commanding AI agents with a joystick, a dial for how hard the AI thinks, and lights that show agent status</u></a></p> </td> </tr> </tbody> </table> <!-- News Item 2 --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="padding:0;Margin:0;padding-top:20px"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:27px;letter-spacing:0;color:#0a0523;font-size:18px"><a href="https://x.com/v0/status/2080706902837891309?ref=toools" target="_blank" style="mso-line-height-rule:exactly;text-decoration:underline;color:#0a0523;font-size:18px;font-family:Inter, sans-serif"><u>v0 now turns a full Figma file into a working app from a single link, exploring every page and frame and building the screens as one project</u></a></p> </td> </tr> </tbody> </table> <!-- News Item 3 --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="padding:0;Margin:0;padding-top:20px"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:27px;letter-spacing:0;color:#0a0523;font-size:18px"><a href="https://x.com/paper/status/2081811056201211967?ref=toools" target="_blank" style="mso-line-height-rule:exactly;text-decoration:underline;color:#0a0523;font-size:18px;font-family:Inter, sans-serif"><u>Paper now brings existing work onto its canvas three ways: start from a live website, a Figma design, or the product's existing code</u></a></p> </td> </tr> </tbody> </table> <!-- News Item 4 --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="padding:0;Margin:0;padding-top:20px"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:27px;letter-spacing:0;color:#0a0523;font-size:18px"><a href="https://help.figma.com/hc/en-us/articles/42031586813719-Use-auto-layout-with-CSS-Flexbox-in-mind?ref=toools" target="_blank" style="mso-line-height-rule:exactly;text-decoration:underline;color:#0a0523;font-size:18px;font-family:Inter, sans-serif"><u>Figma's updated auto layout now behaves like CSS, so the built version finally matches the canvas: new frames get it automatically, existing files keep the old behavior until January 2027</u></a></p> </td> </tr> </tbody> </table> <!-- News Item 5 --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="padding:0;Margin:0;padding-top:20px"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:27px;letter-spacing:0;color:#0a0523;font-size:18px"><a href="https://try.webflow.com/mcp-2?ref=toools" target="_blank" style="mso-line-height-rule:exactly;text-decoration:underline;color:#0a0523;font-size:18px;font-family:Inter, sans-serif"><u>Webflow expands what AI agents can do on a site: version 2 lets them build components, use your design variables, follow rules you set, and answer questions about your traffic</u></a></p> </td> </tr> </tbody> </table> <!-- News Item 6 --> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="padding:0;Margin:0;padding-top:20px"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:27px;letter-spacing:0;color:#0a0523;font-size:18px"><a href="https://www.digitaltrends.com/phones/adobes-project-indigo-camera-app-can-now-edit-and-critique-your-photos-with-ai/?ref=toools" target="_blank" style="mso-line-height-rule:exactly;text-decoration:underline;color:#0a0523;font-size:18px;font-family:Inter, sans-serif"><u>Adobe is testing AI in its Project Indigo camera app that edits photos when you describe the change and critiques your shots, with tips to retake or improve them</u></a></p> </td> </tr> </tbody> </table> <!-- ============ ONE MORE THING ============ --> <table cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="Margin:0;padding-top:80px;padding-bottom:40px;padding-right:0;padding-left:0"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;letter-spacing:0;color:#333333;font-size:14px"><img align="left" src="https://ik.imagekit.io/gua3dld9n/newsletter/ic-onemorething.png" width="24" alt="Section Icon" title="Section Icon" style="display:block;font-size:14px;border:0;outline:none;text-decoration:none;margin:0"><span style="color:#7b788c;line-height:24.7px;font-family:Inter, sans-serif;font-size:13px">&nbsp; &nbsp;ONE MORE THING ...</span></p> </td> </tr> </tbody> </table> <table cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;width:100%" role="none"> <tbody> <tr> <td align="left" style="padding:0;Margin:0;padding-bottom:0px"> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:16.9px;letter-spacing:0;color:#59566d;font-size:13px;padding-bottom:12px"><strong style="font-weight:700 !important">A QUOTE WORTH KEEPING</strong></p> <p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:27px;letter-spacing:0;color:#0a0523;font-size:18px"><strong style="font-weight:700 !important">"If you can write or speak, you can build."</strong></p> </td> </tr> <tr> <td align="left" class="es-text-7610" style="padding:0;Margin:0;padding-top:16px"><p style="Margin:0;mso-line-height-rule:exactly;font-family:Inter, sans-serif;line-height:18.2px;letter-spacing:0;color:#59566d;font-size:14px"><a target="_blank" href="https://x.com/rauchg/status/2079629095428669450?ref=toools" style="mso-line-height-rule:exactly;text-decoration:underline;color:#59566d;font-family:Inter, sans-serif">Guillermo Rauch</a>, arguing that everyone is now a programmer because the present and future programming language is your natural language. He calls it the most important evolution in the field since its creation, and a tsunami that has just started.</p></td> </tr> </tbody> </table>