Skip to content
3 min read

AI × Design Weekly — Happy 2026 🥳

This year, my focus is shifting from purely observing the AI evolution to actively mastering it through "vibecoding" and hands-on tinkering. I’m dedicated to building personal apps and websites that leverage AI, while ensuring that I stay at the forefront of this new era of design and development.

This week’s curated resources explore the synergy between intelligent AI workflows and the meticulous technical craft of high-performance digital design.

Learn AI Design - AI UX Design Patterns & Best Practices | 141+ Production-Ready Patterns
Learn AI Design with 141+ production-ready AI UX design patterns and best practices. Discover interactive demos and examples from ChatGPT, Claude, Perplexity, and other leading AI products. Master AI interface design, AI UX patterns, and AI design systems.

Interactive AI User Experience Research Tools

This platform offers a suite of interactive experiments and tools designed to explore the intersection of artificial intelligence and user experience design.

Discover how AI is reshaping the way we interact with digital interfaces through these hands-on playgrounds. The future of design lies in understanding how to blend machine intelligence with human-centric usability principles.


Optimizing Productivity with Coding Agents

This article details practical strategies and personal experiences for maximizing the efficiency of Claude Code and similar AI coding assistants. Mastering the nuances of agentic workflows is the secret to transforming from a manual coder into a high-level architect. Coding agents are not just tools but teammates that require a specific mental model to unlock their full potential.


Principles of High Quality Product Design

Karri Saarinen shares fundamental insights on maintaining craft and quality while scaling design teams and products. Check out these timeless lessons on design excellence from one of the industry's most respected product leaders.

True quality in design is often found in the invisible details that make a product feel cohesive and intentional.


Techniques — Fragments
Learn and experiment with creative coding techniques. Foundational shader programming techniques with deep-dives, implementation guides, and related examples.

Advanced Web Development and UI Techniques

This resource provides a collection of specialized technical methods for building high-performance and visually polished web interfaces.

Elevate your front-end development skills by diving into these professional-grade UI construction techniques.

The difference between a good interface and a great one often comes down to mastering obscure technical implementation details.


Concentric Border Radius
Concentric offset is a technique used to create a balanced visual look when nesting elements inside one another.

Mathematics of Concentric Border Radii

This technical guide explains the geometric logic required to create perfectly nested border radii for harmonious UI components.

Stop guessing your inner border values and learn the exact formula for achieving visual symmetry in your designs.

Visual harmony in layout design is fundamentally a mathematical problem that requires a precise structural approach to solve.


Effective Documentation for AI Agents

GitHub analyzed thousands of repositories to identify the best practices for writing instructions that help AI agents understand codebase context.

Learn how to write the perfect documentation to ensure your AI coding tools work exactly the way you want them to. The most valuable skill in the age of AI is the ability to provide clear and structured context to automated systems.