Matias Vaara’s Post

Honest dev moment: I prototyped a project with Magic Patterns last week.I had a full layout, components, and data flow ready within minutes. Then, I jumped into Windsurf and let AI help me "vibe code" the rest.It was tremendous at first, ideas turned into code effortlessly. I barely stopped to think since AI did most of it for me. But now that I'm back on the project… cracks are showing.The design doesn't quite feel right.Naming conventions are all over the board.Some of the logic is correct, but I'm not sure why because I didn't actually write it, I just signed off on it. That's when it struck me, speed without comprehension is not progress. AI tools such as Magic Patterns and Windsurf are amazing for prototyping, but they can silently disconnect you from your own work. If we don't give ourselves time to glance back, correct, and truly comprehend the code, we risk creating something that runs but isn't ours. I'm going through the codebase again myself cleaning it up, rebuilding parts of it, and relearning what I did miss. It takes longer, but this time it's by design. AI should enable us to code quicker not think less. Have you ever had that feeling when an AI-generated project felt foreign when you opened it up again?

How to vibe code a Design Tokens dashboard? And how to turn a concept into a working tool with AI? We’ve invited Samar M Ascari, Design System Lead at Canon Europe to teach us exactly that. Vibe coding offers huge potential for Design Systems 🏆 We want our community to be among the first to learn this essential new skill Join us for a deep dive into vibe coding Design Systems: 🗓️ Wednesday, Oct 22 📍 Online 📖 What you will learn: - How vibe-coding with AI turns a concept into a working tool in a fraction of the time - How structured prompts and context produce consistent, reliable code - How a Figma plugin generated variable JSON that Sam used as the data source Over 190 Design System Friends have already signed up 👉 Secure one of the last spots, sign up here: https://lnkd.in/d4MXFjVb #designsystems #ai #vibecoding

10k+ lines of code generated by AI and shipped for review in a single day. And then you’re the one who has to review it (or someone from your team). You can use tools like CodeRabbit or similar to go through surface-level, linting, and code-style issues. They help, but they don’t understand the project’s architecture, design conventions, or all the small decisions the team has made over time. You end up spending a full working day reviewing something that the AI generated in an hour. AI in development is here to stay, and that’s fine. But the critical question is: how do we adapt our review process to it? Do you set hard limits on PR size? Do you split them forcefully? Do you start upgrading your code base to satisfy LLM requirements for code generation? (comments, instructions, architecture description) Or do you just accept that this is the price of speed?

In-House Designers: How AI Can and Will Impact the Full Lifecycle of Your Work (Video Recc 📽️) This video helped me understand the way AI is helping close the gap between design and engineering. Two months ago, my team watched this together-- product, design and eng. all in one room-- and talked about it afterwards. Then I set up Claude Code, started editing the code base directly, and even pushed my own commits. Grab some folks from your engineering department and set a date for a watch party. Then start experimenting together! Thanks Meaghan Choi at Anthropic for sharing your process with us! Video linked in comments 👇

Design Intent Is the New API For years, we’ve documented what we built. Now, we need to document why. Imagine if every design token carried its intent: - color-primary → “drives attention in interactive states.” - spacing-md → “maintains rhythm between sibling components.” When AI reads that, it doesn’t just see variables it sees meaning. That’s the real unlock. Because once intent becomes structured, AI can refactor design decisions intelligently, not blindly. We’ve already connected Figma to code. The next bridge is meaning to machine. That’s how design systems evolve from static libraries to living logic systems that not only look right, but understand why they look right.

I’ve noticed an interesting shift in how we build products. In the past, our workflow looked like this: Design → Code → Deploy We’d wait for polished mockups before a single line of code was written. But with AI tools accelerating how engineers code and iterate, it often looks more like: Code → Deploy → (Optional) Redesign → Code → Deploy again The initial design isn’t perfect, but that’s the point. By the time the designer steps in, there’s already usage data, feedback, and context.

🎯 “Vibe AI as a substitute for coding = disaster.” Let me unpack this from how I approach it: ✅ Code = Syntax, but ✅ Systems = Thinking, knowing when to design, not just generate. 🔧 Vibe tools (e.g., text-to-code, UI copilot, prototyping agents) are powerful for ideation, short-term velocity, and low-risk experiments. But... ❌When you replace engineering rigor with prompting confidence, you get: 💡 Poorly scoped architectures 💡 Security and scaling blind spots 💡 Logic that breaks under change 💡 No ownership of tech debt 🚫 VibeCode ≠ Engineering. ✅ VibeCode = Experimental Lever. 👉 Use it for what it is: a value multiplier, not a substitute for deep thinking or sustainable systems. #VibeCodeReality #BuildWithSystemsThinking #CodeIsNotJustSyntax #GenAIEngineeringLimits #ResponsibleAIAdoption #ExperimentationNotExecution #FromPromptToProduct #DesignBeforeDemo #AIIsNotAnEngineer

One small quirk with vibe coding — it usually appends new code to the bottom unless you explicitly tell it to change something in place. It sounds minor, but it has both pros and cons. Pros: You rarely lose existing work. It’s safer for experimentation — the AI adds instead of overwriting. You can trace how your code evolved, almost like a running changelog. Cons: Your file can become cluttered fast. Without precise instructions, fixes turn into duplicates. Refactoring becomes harder since you need to manually merge sections. It’s a small design choice that changes the whole workflow dynamic — from direct editing to incremental layering. Useful for prototyping, but tricky when building production-level code. Understanding this behavior makes a big difference in how you prompt and structure your iterations.

Here’s some principles for product folks or whomever to check out if you’re vibe coding 1. Modular design; model view controller. Routes, services and repositories. 2. DRY, reusable components for your front ends and back ends too. 3. API first; get your data right! Then build APIs to expose them. This is a good place to start. Happy coding. #worksmarter #gettingstuffdone #ai #claude

🪄 Morph UI - The Infinite UI Library An AI-driven design system that transforms natural language prompts into cohesive, theme-based UIs. The core idea: users describe a visual direction (“design a vibrant interface with bright colors and rounded shapes.”), and the system generates a complete, consistent theme across all components. I’ve included a demonstrative example of how the Morph interaction would work. While this version simulates the AI behavior visually, it represents how real integration could bring truly intelligent, adaptive design to life. Explore the link below to see the Morph UI concept in action. https://lnkd.in/dejJeMam