Vibe Coding

9 posts

figma3 min readCurated summary

How To Move Fast Toward the Right Thing | Figma Blog

AI has made software execution dramatically faster, but it has not made judgment easier. The article argues that teams must deliberately decide what is worth building, provide agents with strong context and constraints, and preserve a distinct human point of view. Otherwise, polished prototypes can create hidden tech debt and increasingly average products. ## AI Accelerates Execution, Not Clarity - AI can quickly produce polished, production-like outputs, but apparent polish may hide weak decisions and fragile implementation. - Large language models often fill in missing requirements themselves, causing prototypes to fail under real-world constraints. - **Cognitive surrender** describes accepting AI-generated decisions without scrutiny or independent deliberation. - Teams should follow a “consideration imperative”: pause to understand the problem and define the right outcome before accepting the first plausible solution. ## Context Has to Come First - Agentic engineering shifts developers from manually writing every line of code to expressing intent clearly and directing AI. - Effective intent requires: - **Deterministic layers**, such as tests, type checks, and validation, to catch model errors consistently. - **High-signal context**, including specifications and documented components. - **Clear interfaces**, so agents understand how systems and components connect. - Tools such as Figma MCP’s Code Connect can provide agents with real production components, including props and variants, rather than forcing them to infer implementation from pixels. - Investing in design systems and documented decisions gives agents a precise vocabulary and guardrails, producing more consistent output, leaner code, and less technical debt. ## Good Can Still Be Average - AI tends to generate work that resembles common patterns in its training data, or work that is “in distribution.” - Typical AI-generated results—geometric gradient logos, familiar presentation fonts, or rounded-corner cards—are competent but interchangeable. - When teams repeatedly accept adequate results, their judgment can narrow from asking “What should this be?” to choosing “Which option is least wrong?” - As AI raises the baseline of acceptable work, products can become unremarkable unless people deliberately define what makes them distinctive. ## The Point of View Needs to Be Yours - AI can improve execution, but it cannot replace a team’s responsibility to establish intent, standards, and a meaningful perspective. - Without a clear point of view, the model’s default assumptions determine both what gets built and how it looks. - Moving quickly is valuable only when speed is paired with careful consideration, strong context, and deliberate choices. Teams should treat AI as an execution partner—not as the source of product judgment. Define the problem, encode decisions in systems and safeguards, and challenge generic outputs before shipping.

Read original(opens in new tab)
google3 min readCurated summary

Vibe Coding XR: Accelerating AI + XR prototyping with XR Blocks and Gemini

Vibe Coding XR combines Gemini’s natural-language coding capabilities with the open-source XR Blocks framework to rapidly create interactive, physics-aware WebXR applications. Users can describe an experience—such as a dandelion, physics lab, or educational visualization—and receive a working Android XR prototype in under 60 seconds. The workflow supports both desktop simulation and deployment to Android XR headsets, making spatial prototyping faster and more accessible. ## Bridging AI Prototyping and XR - Traditional XR development requires fragmented perception systems, game engines, and low-level sensor integrations. - Vibe-coded prototypes let developers quickly evaluate 3D interfaces, spatial interactions, and visualizations before investing in full production. - The workflow is designed for both experienced developers and creators without prior XR expertise. - Gemini translates natural-language prompts into functional XR applications with scene setup, perception, interaction, and physics logic. ## The Vibe Coding XR Workflow - Users open the XR Blocks Gem in Chrome on an Android XR headset or desktop. - They provide a prompt by typing or using voice, such as “Create a beautiful dandelion.” - Gemini plans and implements the experience using XR Blocks examples and templates. - On Android XR, users can enter the experience with a pinch gesture and interact naturally—for example, pinching to blow away an animated dandelion. - Applications can be published through a shareable public link. - Desktop Chrome provides a simulated-reality environment for testing before deployment, while Android XR enables advanced features such as hand tracking, depth sensing, and physics. ## Technical Foundation - XR Blocks is built on WebXR, three.js, and LiteRT.js. - Its engine coordinates: - Environmental perception - XR interaction - Spatial computing - AI integration - Gemini receives a specialized system prompt containing: - XR design guidelines for room-scale environments, spatial layout, scale, and interaction distances - Package-management rules and recommended styles - Curated source code, templates, and working samples - Grounding Gemini in valid XR Blocks APIs reduces hallucinated code and encourages consistent implementation patterns. ## Educational and Interactive Applications - **Math tutor:** Visualizes Euler’s theorem using tetrahedra, cubes, and octahedra, with pinch-based highlighting of vertices, edges, and faces. - **Physics lab:** Lets users pick up and place labeled weights on a balance scale to learn about equilibrium. - **Immersive chemistry:** Simulates methane, ethylene, and acetylene combustion with educational cards and volumetric effects, offering a safer mixed-reality alternative to physical experiments. - **Schrödinger’s cat:** Uses pinch and proximity interactions to demonstrate superposition, revealing alive and dead versions of a cat before collapsing the state into one outcome. - **XR sports:** Generates interactive experiences such as hand-based volleyball, including textured balls, environmental collision, and adjustable launch behavior. ## Practical Value - Creators can test spatial ideas in minutes rather than building complete XR pipelines first. - The same prototype can be evaluated on desktop and then experienced with body and hand interactions on Android XR. - The approach is especially useful for education, interaction design, scientific visualization, and early-stage product exploration. Vibe Coding XR is best viewed as a rapid experimentation layer rather than a replacement for production XR engineering. By combining Gemini’s reasoning with XR Blocks’ specialized runtime and templates, it significantly lowers the barrier to creating and validating intelligent spatial experiences.

Read original(opens in new tab)
figma2 min readCurated summary

5 Design Skills To Sharpen in the AI Era | Figma Blog

AI is changing product creation by accelerating experimentation and expanding who can participate in design. Figma argues that designers should strengthen adaptable, technology-oriented skills rather than rely only on traditional craft. The first priority is becoming fluent with AI tools and learning to prompt them effectively, while maintaining human judgment and design fundamentals. ## AI Fluency and Prompting - AI skills are becoming essential for designers and increasingly important in non-design roles such as product management, development, and marketing. - More than half of designers and hiring managers consider AI design capabilities—such as rapid prototyping and “vibe coding”—important hiring skills. - Among designers who adopted AI during the past year: - 91% say it helps them create better designs. - 89% say it helps them work faster. - AI can support many activities, including: - Editing images directly within a workflow. - Building prototypes instead of writing traditional product requirements documents. - Testing assumptions and creating tangible artifacts for team alignment. ## Writing Better Prompts - Clear, structured prompts produce more reliable AI-generated results. - Figma recommends organizing prompts around: - The task - Context - Required elements - Behavior - Constraints - Prompting is presented as a repeatable design practice, not merely a way to get a one-off output. - Strong prompts help turn AI into a consistent design partner rather than an unpredictable experimentation tool. ## Broader Changes to Design Work - AI is lowering barriers to participation and blurring boundaries between product roles. - Designers are increasingly expected to work across disciplines and use AI to extend their capabilities. - Prototyping is becoming a faster way to communicate ideas, validate assumptions, and build momentum than relying solely on written documentation. Designers should build practical fluency with AI tools, practice structured prompting, and use prototypes to make ideas concrete—while applying their own judgment to guide and evaluate the results.

Read original(opens in new tab)
line4 min readCurated summary

Sharing the journey of LINE DEV

AI adoption at LY Corporation has moved beyond experimentation toward learning how to use these tools effectively in real work. The LINE DEV AI Reporters program connects scattered individual and team experiences through internal sharing sessions, helping practical lessons spread across the organization. Its central conclusion is that AI productivity depends not only on tools, but also on clear specifications, sound engineering practices, and a culture of continuous sharing. ## Turning Individual Experiments into Organizational Knowledge - AI enthusiasts across LY Corporation were independently experimenting with tools such as ChatGPT and Claude Code. - These experiences often remained limited to individuals or small teams. - AI Reporters brought together members of different roles and seniority who had experience sharing AI-related work. - Their goal was to turn personal trial and error into reusable organizational knowledge. ## Starting with Informal Personal Experiments - Early AI sharing sessions emphasized accessibility rather than polished success stories. - Multimedia Platform Dev’s Choi Jeong-min shared a “one service a day” vibe-coding experiment using Claude Code and Antigravity. - The experiment demonstrated that rapid implementation increases the importance of clearly defining what to build. - Sharing failures and unfinished experiments reduced the pressure to perform and encouraged more employees to try AI themselves. ## Applying AI to Real Development Work - As interest grew, discussions shifted from fun experiments to practical workplace applications. - Data Dev4’s Lee Yun-seong shared more than a month of project experience using Claude Code, project templates, and Vibe Kanban. - Developers spent more time on planning, design, review, and coordination while agents handled implementation. - Because the current codebase becomes the context for future agent work, poor architecture and coding styles can quickly be reproduced and amplified. - Continuous testing, refactoring, documentation, interface management, and architectural cleanup are therefore essential. - Skipping automated tests before commits led to increasing numbers of broken changes during later merges. - Humans remain responsible for ensuring that AI-generated code actually contributes to the project. - The most valuable skills increasingly involve task design, project management, system context, and meta-programming rather than implementation alone. - Developers can work in parallel with agents by planning the next task, researching requirements, and reviewing completed code while agents execute current work. ## Expanding from Teams to Organization-Wide Programs - Fintech Engineering organized a hands-on workshop covering the full path from idea to deployment. - Participants connected ChatGPT, Claude Code, and Stitch AI to plan, design, build, and complete a working service. - The integrated workflow helped participants understand how AI tools can support an entire product-development process, not just prototyping. - The GAI Study Group in the advertising organization broadened discussions to AI strategy, trends, agent behavior, developer workflows, and business applications. - Topics included: - AI agent reliability - Implementing interactions between PyTorch-based LLMs and MCP servers - Senior and junior developers’ vibe-coding workflows - NotebookLM-based RAG using wiki pages and Slack conversations - One session examined MCP internals by implementing JSON-RPC messaging and session-state management directly, revealing complexities hidden by libraries such as FastMCP. - Sessions were opened to participants and presenters from other teams, with some content published online for wider access. ## Building a Culture of Continuous Sharing - The most useful AI knowledge came from real workplace attempts, failures, and revisions—not only from polished documentation or external trends. - AI Reporters made existing but scattered experiences visible and connected them through presentations, Slack discussions, and monthly meetings. - Informal conversations such as “I tried this—how did it work for you?” helped normalize experimentation and learning from mistakes. - AI adoption is treated as an ongoing practice because tools and workflows continue to change. LY Corporation’s experience suggests that organizations should create lightweight, recurring forums where employees can share practical AI experiments. The combination of rapid experimentation, disciplined engineering, and open knowledge exchange allows individual discoveries to become lasting organizational capability.

Read original(opens in new tab)
lineOriginal article

A month-long project in (opens in new tab)

This blog post explores how LY Corporation reduced a month-long development task to just five days by leveraging "vibe coding" with Generative AI tools like ChatGPT and Cursor. By shifting from traditional, rigid documentation to an iterative, demo-first approach, developers can rapidly validate multiple UI/UX solutions for complex problems like restaurant menu registration. The author concludes that AI's ability to handle frequent re-work makes it more efficient to "build fast and iterate" than to aim for perfection through long-form specifications. ### Strategic Shift to Rapid Prototyping * Traditional development cycles (spec → design → dev → fix) are often too slow to keep up with market trends due to heavy documentation and impact analysis. * The "vibe coding" approach prioritizes creating "working demos" over perfect specifications to find "good enough" answers through rapid feedback loops. * AI reduces the psychological and logistical burden of "starting over," allowing developers to refine the context and quality of outputs through repeated interaction without the friction of manual re-documentation. ### Defining Requirements and Solution Ideation * Initial requirements are kept minimal, focusing only on the core mission, top priorities, and essential data structures (e.g., product name, image, description) to avoid limiting AI creativity. * ChatGPT is used to generate a wide range of solution candidates, which are then filtered into five distinct approaches: Stepper Wizards, Live Previews with Quick Add, Template/Cloning, Chat Input, and OCR-based photo scanning. * This stage emphasizes volume and variety, using AI-generated pros and cons to establish selection criteria and identify potential UX bottlenecks early in the process. ### Detailed Design and Multi-Solution Wireframing * Each of the five chosen solutions is expanded into detailed screen flows and UI elements, such as progress bars, bottom sheets, and validation logic. * Prompt engineering is used iteratively; if an AI-generated result lacks a specific feature like "temporary storage" or "mandatory field validation," the prompt is adjusted to regenerate the design instantly. * The focus remains on defining the "what" (UI elements) and "how" (user flow) through textual descriptions before moving to actual coding. ### Implementation with Cursor and Flutter * Cursor is utilized to generate functional code based on the refined wireframes, using Flutter as the framework to ensure rapid cross-platform development for both iOS and Android. * The development follows a "skeleton-first" approach: first creating a main navigation hub with five entry points, then populating each individual solution module one by one. * Technical architecture decisions, such as using Riverpod for state management or SQLite for data storage, are layered onto the demo post-hoc, reversing the traditional "stack-first" development order to prioritize functional validation. ### Recommendation To maximize efficiency, developers should treat AI as a partner for high-speed iteration rather than a one-shot tool. By focusing on creating functional demos quickly and refining them through direct feedback, teams can bypass the bottlenecks of traditional software requirements and deliver user-centric products in a fraction of the time.

figma3 min readCurated summary

6 Skills Every Engineer Needs for the AI Era | Figma Blog

AI should not merely automate engineering work; it should expand how developers explore problems, collaborate, and create better products. Figma argues that engineers who thrive in the AI era will combine technical judgment with user empathy, experimentation, and the ability to direct AI effectively. The goal is to automate repetitive work while preserving—and strengthening—the meaningful parts of product development. ## Use AI for More Than Automation - AI should maximize engineers’ capabilities rather than simply reduce costs. - Developers still need to identify the right problems, understand users, and apply care and craft to their solutions. - Automating tedious tasks frees teams to focus on product meaning, collaboration, and user value. - Employers increasingly value engineers who understand why they are building something, not just how. ## Use Vibe Coding to Explore Possibilities - Vibe coding is presented as a way to explore the problem space, not just generate production code. - Conversational development lets teams test more possible solutions in parallel and quickly produce visual artifacts. - Tools such as Figma Make support rapid prototyping, iteration, and refinement across design and code. - AI-assisted exploration can improve user experience by helping teams consider user needs earlier rather than automating away that consideration. ## Harness Agentic Capabilities - The Model Context Protocol (MCP) enables AI tools such as Cursor and Copilot to communicate with other software. - Figma’s MCP server supplies design context to language models, improving design-informed code generation. - Better context can increase visual fidelity and help developers follow established component libraries and accessibility practices. - Agentic tools are most effective when they have access to the conventions and information that guide the product. ## Audit Your Own Pull Requests - Engineers can use LLMs as a pre-review sounding board before submitting a pull request. - Models familiar with the codebase can identify duplicated implementations, unnecessary rewrites, and other issues. - This self-review improves code quality while reducing the burden on human reviewers. - AI-assisted review can increase engineering throughput without replacing team review. ## Coordinate Teams of AI Agents - Developers are learning to divide complex problems into smaller tasks for multiple AI agents. - They must then evaluate and integrate the agents’ separate solutions. - A key emerging skill is writing detailed Markdown instructions and providing context, much like guiding an intern. - The supplied article ends mid-section, so the sixth skill and the remainder of this discussion are not included. Engineers should treat AI as a partner for exploration, feedback, and coordination—not simply as a code generator. Strong results depend on clear problem framing, relevant context, human judgment, and continued attention to users.

Read original(opens in new tab)
figma2 min readCurated summary

The Long and Short of It: Issue no.10 | Figma Blog

“Skill share,” Figma’s April 2025 issue, gathers practical lessons for designers, developers, and product builders ahead of Config 2025. Its central argument is that strong products depend not only on speed or technical execution, but also on craft, communication, storytelling, experimentation, and long-term thinking. The issue encourages readers to keep learning across disciplines and apply these skills collaboratively. ## Craft as a Competitive Advantage - Linear CEO Karri Saarinen shares ten principles for creating products that stand out. - The advice reflects a shift away from “move fast and break things” toward deliberate quality and attention to detail. - Craft is presented as an organizational value that should influence every level of product development. ## Better Designer–Developer Handoff - Successful handoff depends on collaboration rather than simply transferring designs to engineering. - Figma’s guide focuses on three principles: - Encourage curiosity between designers and developers. - Keep communication open throughout the build process. - Establish a shared understanding of what “good” means. - The goal is to reduce friction, clarify expectations, and preserve design intent during implementation. ## Writing and Storytelling for Product Builders - Clear writing helps teams explain technical architecture, new features, product roadmaps, and broader visions. - Storytelling is not limited to writers or marketers; people in every product role benefit from articulating ideas effectively. - Strong communication can make complex concepts easier to understand and build support for new directions. ## Building for the Long Term - In a period of rapidly advancing AI tools, product teams must focus on making things work well—not merely making them work. - Dylan Field and Garry Tan discuss experimentation, play, and exploring an “idea maze” as essential parts of product development. - They also address vibe coding, AI-assisted creation, and the importance of preserving human craft even as AI models become more capable. - Founders are encouraged to remain deeply focused on quality and to develop products with lasting value. ## Broader Exploration - The issue also includes a “Rabbit hole” section featuring additional visual and editorial explorations. - Together, the featured topics present skill development as an ongoing process spanning design, engineering, communication, and strategy. The practical takeaway is to treat craft and collaboration as core product skills. Teams can improve their work by communicating clearly, aligning early, experimenting freely, and maintaining high standards even when new tools make development faster.

Read original(opens in new tab)
figma3 min readCurated summary

Dylan Field and Garry Tan on design, AI, and the power of “locking in” | Figma Blog

AI is expanding what designers and product builders can explore, but it has not eliminated the need for human judgment, context, or craft. Dylan Field argues that design will become even more important as teams use AI to generate ideas and prototypes faster, while still needing expertise to turn them into thoughtful, polished products. The central challenge is closing the gap between making something work and making it work well. ## AI Expands the Design “Idea Maze” - Current AI systems primarily function as tools that augment people in specific tasks, rather than as general intelligence. - They lower the barrier to participating in design while also raising the ceiling on what experienced creators can accomplish. - AI allows teams to explore more branches of an “idea maze,” generating greater breadth during ideation. - However, meaningful progress still requires depth: teams must investigate, refine, and evaluate promising directions. ## The Value of Rapid Feedback and “Vibe Coding” - Terms such as “getting locked in,” “I’m cooking,” and “vibe coding” describe the flow state created by rapid experimentation. - Faster feedback loops help people move ideas from their heads onto the screen more fluidly. - Figma’s emphasis on play reflects the goal of making creative expression accessible and enjoyable, even for non-experts. - AI tools are increasingly effective at helping users start and prototype quickly. - The unresolved problem is helping users move from an exciting prototype to a finished, reliable product—an issue shared by both design and code-generation tools. ## Design Is More Than Functionality - Founders and teams increasingly recognize design as a source of product value. - The important question is no longer only whether software works, but how it works. - User experience, clarity, quality, and the overall interaction determine whether a product feels successful. ## Why Human Designers Still Matter - AI has developed along partly separate tracks: diffusion models address visual creation, while language models focus on reasoning and code generation. - It remains unclear how effectively these approaches can be combined into systems capable of true design. - Field describes design as “art as it applies to problem solving,” requiring more than producing an image or implementing a short specification. - Designers contribute context involving culture, brand, product experience, and the broader problem being addressed. - As software creation becomes more automated, the ability to supply judgment and context may make design an even more critical role. AI is best understood as a force multiplier for exploration and iteration, not a replacement for design expertise. Teams should use it to accelerate experimentation while preserving the human work required to select, shape, and finish products well.

Read original(opens in new tab)
figma2 min readCurated summary

Double Click: When Coding Becomes Conversation | Figma Blog

Vibe coding replaces much of traditional programming with an ongoing conversation with AI: users describe an idea, review the result, and iterate through prompts. It lowers the barrier to creating software and makes experimentation faster, especially for prototypes and side projects. However, the approach can become unreliable as projects grow, producing tangled code and weak internal architecture. ## From Code to Conversation - Andrej Karpathy coined “vibe coding” to describe building software by talking to AI tools such as Cursor Composer and using voice input. - The process emphasizes seeing results, describing changes, running the project, and copying or pasting outputs rather than understanding every line of code. - The idea reflects a broader history of abstraction, from punch cards to assembly, C, Python, and now AI-assisted development. ## Faster, More Accessible Prototyping - Vibe coding lets people express interactive ideas without mastering syntax or a programming language. - Charmaine Lee of Val Town compares it to casually writing in a document or creating a spreadsheet. - Figma designer Nikolas Klein argues that the main benefit is shortening the gap between imagining an interaction and seeing it work. - Replit CEO Amjad Masad reported that 75% of Replit customers never write a line of code. - Figma engineer Vincent van der Meulen used AI to create projects, including a running coach and a loading animation, despite lacking SwiftUI expertise. ## The Complexity Ceiling - Vibe coding is most effective at the beginning of a project, when requirements are simple and experimentation matters more than structure. - As complexity increases, AI-generated solutions may stop fitting together coherently. - Developers can reach a “valley of despair”: an initial burst of progress gives way to difficult debugging and maintenance. - Vincent described ending up with “spaghetti code” and no consistent internal data model after reaching roughly 80% of his goal. Vibe coding is best treated as a powerful prototyping and exploration technique, not a replacement for engineering judgment. Teams should still inspect, test, refactor, and architect AI-generated code when projects become complex or production-critical.

Read original(opens in new tab)