🤝 Design Meets Code #6

A weekly newsletter about designing, building and selling products online

Hi! Welcome to the sixth issue of the Design Meets Code newsletter!

Here's what caught my attention this week:

⭐ The Story of the Week

Emerging AI Video Niches

Mnquind - AI generated series

The landscape of video content creation is on the brink of transformation. While established players like Netflix remain cautious, innovative platforms are emerging that leverage AI to generate and monetize video content at scale. This shift isn't just about technology – it's about new business models that could reshape how we create and consume video content.

A recent example is qwick.tv that enables creators to generate, monetize, and distribute AI-created video series. This represents a growing trend where early movers are establishing themselves in the AI-generated content space while traditional media companies watch from the sidelines.

The implications are significant:

  • Lower barriers to entry for content creators

  • Rapid content iteration and personalization

  • New monetization models for AI-generated content

  • First-mover advantage in an emerging market

As AI video generation technology matures, we're likely to see more platforms and tools emerge that bridge the gap between creative vision and technical execution.

My top picks of the week:

🥇 Design and Build iOS app with AI: Build and design an AI image generator app for iOS without ANY design or coding experience, as shown in this Twitter article.

Design and Build iOS app with AI

🥈 Figma to AI Code Plugin: Transform Figma designs into code with AI, powered by Claude AI and GPT-4, converting your designs into production-ready code across multiple frameworks (React, SwiftUI, Flutter, and more), complete with responsive layouts and best practices.

🥉 Anthropic's Model Context Protocol: Model Context Protocol (MCP) is a new open-source tool from Anthropic (makers of Claude) that helps AI assistants talk directly to your data sources and tools like Google Drive and Slack. Think of it as a universal translator between AI and your data, making it much simpler to build AI-powered apps that can access real-world information.

The gems of the week

💠 Chrome's AI evolution: Google is bringing experimental AI tools directly into the Chrome browser, signaling a shift towards more integrated AI assistance in our daily browsing experience.

💠 Cursor Code Editor's AI Agent: Cursor code editor got a new AI agent that smartly handles context selection, terminal commands, and git commit messages - making development more seamless.

💠 Lee Robinson's AI Fundamentals: Lee Robinson's comprehensive guide breaks down complex AI concepts like neural networks, deep learning, and transformers into digestible explanations for engineers. It covers the journey from raw data to functioning AI models, including key processes like tokenization, pretraining, and fine-tuning.

Neural Network

💠 Understanding AT Protocol: While ActivityPub (used by Mastodon) connects servers to servers, AT Protocol (used by BlueSky) takes a different approach by separating identity from data. Key advantages:

  • Use your domain as your universal handle

  • Own your data through Personal Data Server (PDS)

  • Future-proof identity across platforms

  • Better scalability through efficient indexing

💠 Frontend Landscape 2024: The State of Frontend 2024 survey reveals interesting trends:

  • 90% TypeScript adoption

  • 70% React usage (and well-liked)

  • 36% Vercel adoption (surpassing AWS at 32%)

  • Traditional CSS tools still dominate despite new alternatives

  • Svelte and HTMX are the most "wanted to learn" technologies

💠 Jupyter for JavaScript: Happend in September, but still relevant - Deno brings Jupyter notebooks to JavaScript, opening new possibilities for interactive development and data visualization in the JavaScript ecosystem.

JavaScript Jupyter Notebook in VSCode

💠 Web Design Inspiration: Tympanus Codrops remains one of the most active sources of interactive web inspiration in 2024, consistently publishing high-quality demos spanning WebGL, 3D, animations and creative UI - their latest additions showcase cutting-edge techniques with React Three Fiber, Motion and WebGPU, all freely available under MIT license.

Codrops interactive demos

💠 Photo Gradient Tool: A new Photo Gradient tool is available as a Figma Plugin and web app.

Photo gradient tool

💠 Meshy AI for 3D Models: Meshy AI lets creators turn 2D images into textured, animated 3D models through a simple upload-and-generate process, predicted to be revolutionizing technology for 3D in 2025.

Meshy AI 3D models

💠 Auini.ai for Moving 3D Characters: Auini.ai - another interesting tool, turns videos into moving 3D characters.

💠 Trio Design's Lean Approach: Trio.design - An interesting approach to app design services - they focus on designing just 3 core screens with components and style guides. They target developers get the design direction they need while keeping the project lean. They deliver editable Figma files within 72 hours.

3 screen designs from Trio.Design

💠 The Second-Hand Story Effect: A powerful insight about idea communication: "Optimize for the re-telling of your idea – chances are you get one shot to say it how you want to say it, and then you're dependent on that person to rearticulate your idea in your absence."

For your design ideas to spread, make them:

  • Concise: Strip to the essential concept

  • Memorable: Give it a sticky name

  • Sharable: Easy for others to explain in your absence

That's it for this week!

Found something useful? Got cool stuff to share? I'd love to hear about it. Drop me a line – your finds might make it into next week's issue.

If you know someone who'd like this too, feel free to pass it along!

Stay curious,

Edgaras