Bundle · Save $49

Both kits · $249 →

Stripe sent the same purchase webhook 4 times. Idempotency saved us 4 emails.Expo SDK 54's precompiled XCFrameworks cut our iOS build from 14 min to 4 Your CLAUDE.md is too long. The 200-line ceiling that actually works.shadcn cli v4 just turned every component library into a payload Cursor 3's parallel agents change what a template ships with Claude Code doubled its limits. Your codebase context is the new bottleneck.Open Cowork: What the Open-Source Claude Desktop Reveals About AI Agent Tooling Lovable can spin up your MVP. It can't ship to production with you.Vercel's Agent Browser is 15× cheaper than Playwright MCP — and that's not the most interesting part Supabase Server is here — our next kit ships with it built in How to build cross-platform templates AI coding tools actually respect Same component, web + mobile — the architecture behind @otfdashkit/ui Anthropic Academy: Claude Code in Action How I Use Design Systems with AI Frontend Builders at SalesKick The Reality of AI-Assisted Software Engineering Productivity Using Claude + Knapsack MCP to Build with Your Components Using Voice for AI Dictation & Documentation Prompt: Split PRDs Into Smaller Tasks Cracking the Code of Vibe Coding Specialized AI Agents for Claude Code Luke W's Articles About AI Design Six Tips on Using Claude Code Six Tips for Coding with GPT-5 Using FloatPrompt Across AI Models Claude Code and Codex (GPT-5 High) with Vibecode 8 Essential Tips for Using Figma Make Vibe Prototyping & Cursor Webflow CPO: "I Run My Whole Day in Claude Code + Cursor"Claude Code Templates AI + Design Systems (New York State)AI Coding Workflow for Solo Founders Design System Architecture Decisions Record with Claude Desktop Friction, Feedback and the Future of Creative Work with Designer Pablo How I Use LLMs to Help Me Write Code Getting AI to Write TSL That Works Shipping Designs with AI at Anthropic Cursor's Internal Guide for Building with Cursor 3D Interactive Scenes with Gemini 3 + Three.js Nano Banana Pro: Complete Developer Tutorial AGENTS.md: The Universal Agent Configuration File Claude Skills Collection Improve Code Generation with Figma's Code Connect UI The AI Design Map: A Practical Guide for Designers into 2026 A Guide to Claude Code 2.0 and Getting Better at Coding Agents I've Never Felt This Much Behind as a Programmer Shipping at Inference-Speed Jevons Paradox for Knowledge Work Party of One for Code Review!Boris Cherny, Claude Code Creator, Shares His Setup The Designer's Playbook for AI Products 2026: The Great Engineering Divergence Claude Code On-The-Go Quick Crash Course on Adopting Cursor / Claude Code in Your Design Org Ralph Wiggum Explanation, Example Code, and Demo Step-By-Step Guide to Get Ralph Working and Shipping Code GitFig | Figma Plugin That Versions Design Like Code The Complete Guide to Building Agents with the Claude Agent SDK Portable Design Systems Across Any AI Best Practices for Cursor My AGENTS.md File for Building Plans You Actually Read Ramp: Why We Built Our Own Background Agent Morphing Icons with Claude Improve Your AI Code Output with AGENTS.md Introducing: React Best Practices How I Built an Apple Watch Workout App Using Cursor and Xcode Rams, a Design Engineer for Your Coding Agent UI Skills: Opinionated Constraints for Your Coding Agent On Coding Agents and the Future of Design The Ultimate Guide to Vibe-Coding for Designers Run Claude Code + Replit on Your Phone Inside the AI Workflows of Every's Six Engineers Skills, the Open Agent Skills Ecosystem Best Practices for Claude Code Better Icons: 200,000+ Icons via MCP How to Run Claude Code Locally Claude Code on Desktop Teach Your AI to Think Like a Senior Engineer How to Make Your Agent Learn and Ship While You Sleep Vibe Coding for Marketers Boris Cherny: Tips for Using Claude Code

Figma Variables + MCP Definitive Tutorial Apple Watch Workout App Built with Cursor & Xcode Successful Coding w/AI in Large Enterprises Chrome DevTools (MCP) for Your AI Agent Design to Code with Figma MCP and Cursor Using Claude Code for Web to Build a Share Terminal Sessions Tool Vibe Coding at Google: Prototyping the all-new AI Studio AWS Kiro Complete Guide How One Designer Led an AI Revolution at Pendo Zapier CEO Personal AI Stack | Wade Foster Designer at Ramp: Advanced AI Design Process How We Built Claudie, Our AI Project Manager OpenClaw Clearly Explained in 30 Minutes

Docs Templates Pricing Compare Tools Blog

Docs Templates Pricing Compare Tools Blog

Blog

AI coding guides & resources

Engineering decisions, tutorials, and video guides from the OTF team.

All Blog TutorialsClaude Code Cursor Figma Make Gemini General Kiro

Figma Variables + MCP Definitive Tutorial

Figma MakeJan 14, 2026 · 18 min

Figma Variables + MCP Definitive Tutorial

The definitive guide to connecting Figma Variables with MCP. Give your AI coding tools direct access to your design tokens for pixel-perfect, token-compliant code.