Ai Prototyping

4 posts

figma2 min readCurated summary

7 Tips for Using Figma Make Credits More Efficiently | Figma Blog

Figma argues that efficient AI prototyping is less about writing longer prompts and more about setting up projects carefully, limiting changes, and knowing when to edit manually. The first prompt should establish a strong foundation, while follow-ups should describe precise deltas. For minor visual or code changes, direct editing is often faster and cheaper than another AI request. ## Build a Strong First Prompt - Treat the initial prompt as a complete project brief. - Include: - The project goal and context - Key elements and behaviors - Constraints and exclusions - A clear definition of what “done” means - Use follow-up prompts as deltas that explain: - What should change - How it should change - What should remain unchanged - For larger projects, work in stages: - Establish the structure first - Add logic and behaviors - Refine content and visual polish afterward - Keep follow-ups tightly scoped. Combine requests only when they affect the same component or logic. - Specific instructions such as “Update the calendar component” or “Edit `tokens.ts`” are more efficient than vague requests like “Redo it.” ## Prefer Manual Edits for Small Changes - Use Figma Make’s **Edit tool** for minor adjustments such as: - Changing spacing - Removing an element - Adjusting text - Direct edits avoid spending credits on changes that do not require a new design solution. - Use **Go to source** when the relevant value is dynamic or unavailable in the preview. - Press **⌘F** to search the code for a specific tag or data source. - Start with `App.tsx`, then inspect other `.tsx` files in the component folder if necessary. - Direct source editing is particularly useful for repeated components or content populated from lists.

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

Show Don’t Tell: Embed Make Prototypes Everywhere You Work in Figma | Figma Blog

Figma is introducing live Figma Make prototype embeds for Figma Design, FigJam, and Figma Slides. The goal is to replace static screenshots and abstract explanations with interactive experiences that support alignment, feedback, and faster iteration. New editing controls also let users refine text, styling, and individual elements directly in prototypes. ## Embed Prototypes Across the Workflow - **FigJam:** Teams can use interactive prototypes as the focus of early discussions, making it easier to prioritize features and identify gaps in user journeys. - **Figma Design:** Designers and collaborators can review UI, copy, and interactions in context, compare iterations side by side, and turn feedback into concrete Make updates. - **Figma Slides:** Presenters can let stakeholders experience concepts directly and use Slides’ voting tool to gather input before refining the prototype. ## Refine Prototypes with Direct Editing - Users can edit text directly in a prototype to explore content variations and respond quickly to feedback. - The point-and-edit tool supports precise changes to color, spacing, and text styling. - Specific prototype nodes can be deleted without disrupting the rest of the structure. - `Command+Z` can undo deletions, supporting rapid experimentation. ## Greater Visibility Into AI-Generated Work - As prototypes become more complex, Figma Make is adding visibility into how the model builds them. - This allows users to review the model’s approach and course-correct while ideas evolve. Figma’s update positions Make prototypes as interactive, continuously refined artifacts that can travel from brainstorming through design review and stakeholder presentation. Teams can embed prototypes where decisions happen, gather more realistic feedback, and make targeted changes without leaving the workflow.

Read original(opens in new tab)
kakaoOriginal article

What the AI TOP 1 (opens in new tab)

The Kakao AI Native Strategy team successfully developed a complex competition system for the "AI TOP 100" event in just two weeks by replacing traditional waterfall methodologies with an AI-centric approach. By utilizing tools like Cursor and Claude Code, the team shifted the developer’s role from manual coding to high-level orchestration and validation. This experiment demonstrates that AI does not replace developers but rather redefines the "standard" of productivity, moving the focus from execution speed to strategic decision-making. ### Rapid Prototyping as the New Specification * The team eliminated traditional, lengthy planning documents and functional specifications. * Every team member was tasked with creating a working prototype using AI based on their own interpretation of the project goals. * One developer produced six different versions of the system independently, allowing the team to "see" ideas rather than read about them. * Final requirements were established by reviewing and merging the best features of these functional prototypes, significantly reducing communication overhead. ### AI-Native Development and 99% Delegation * The majority of the codebase (over 99%) was generated by AI tools like Claude Code and Cursor, with developers focusing on intent and review. * One developer recorded an extreme usage of 200 million tokens in a single day to accelerate system completion. * The high productivity of AI allowed a single frontend developer to manage the entire UI for both the preliminary and main rounds, a task that typically requires a much larger team. * The development flow moved away from linear "think-code-test" patterns to a "dialogue-based" implementation where ideas were instantly turned into code. ### PoC-Driven Development (PDD) * The team adopted a "Proof of Concept (PoC) Driven Development" model to handle high uncertainty and tight deadlines. * Abstract concepts were immediately fed into AI to generate functional PoC code and architectural drafts. * The human role shifted from "writing from scratch" to "judging and selecting" the most viable outputs generated by the AI. * This approach allowed the team to bypass resource limitations by prioritizing speed and functional verification over perfectionist documentation. ### Human Governance and the Role of Experience * Internal conflicts occasionally arose when different AI models suggested equally "logical" but conflicting architectural solutions. * Senior developers played a critical role in breaking these deadlocks by applying real-world experience regarding long-term maintainability and system constraints. * While AI provided the "engine" for speed, human intuition remained the "steering wheel" to ensure the system met specific organizational standards. * The project highlighted that as AI handles more of the implementation, a developer’s ability to judge code quality and architectural fit becomes their most valuable asset. This project serves as a blueprint for the future of software engineering, where AI is treated as a peer programmer rather than a simple tool. To stay competitive, development teams should move away from rigid waterfall processes and embrace a PoC-centric workflow that leverages AI to collapse the distance between ideation and deployment.

figma2 min readCurated summary

How To Build A Resilient Design Team | Figma Blog

Design teams must build resilience by creating psychological safety, encouraging experimentation, and preserving high standards of craft. The article argues that leaders should prepare teams to adapt to changing technologies, roles, and constraints rather than rely on a fixed playbook. Resilience comes from trust, flexibility, thoughtful capacity planning, and a willingness to question established assumptions. ## Start with Team Health - Stress, burnout, overwork, and fear prevent people from doing their best creative work. - Leaders should build trust and a shared mission while encouraging candid, non-personal critique. - Provide both synchronous and asynchronous ways for people to contribute so the loudest voices do not dominate. - Make it safe to share work at every stage, from rough sketches to polished designs. - Use regular 1:1s, career conversations, and feedback surveys to identify problems early. - Plan realistically around team bandwidth instead of overcommitting. - Model vulnerability by openly acknowledging uncertainty and personal challenges. ## Encourage Experimentation and Shifting Roles - Designers have different strengths, so teams should combine complementary skills and create opportunities for mutual learning. - Boundaries between design, research, product, and engineering are becoming more fluid. - Encourage designers to work closer to production through AI prototyping and code experimentation. - Sharing unfinished work and lessons learned—such as through Figma’s `#design-wip` channel—helps normalize experimentation. - Invite cross-functional partners into design critiques to bring broader perspectives into the process. - Balance shipping current work with inventing and testing new approaches as technology changes. ## Treat Craft as a Differentiator - High-quality, carefully executed products can distinguish a company in crowded markets, strengthen user loyalty, and drive growth. - Craft is especially valuable in enterprise software, where design quality is often neglected. - Strong execution requires attention to detail and may involve trade-offs, such as refining the user experience instead of adding more features. - Fast-moving teams must deliberately protect time for visual consistency, clarity, and overall product quality. ## Practical Recommendation Build resilience as an ongoing operating practice: protect team health, make experimentation routine, support fluid collaboration across roles, and treat quality as a strategic advantage rather than an optional extra.

Read original(opens in new tab)