# Griffin Wooldridge > Product designer at Mashgin and YouTube educator teaching designers how to build with AI. Writing covers AI design tools (Claude Code, Cursor, Codex, Framer, Miro), MCP workflows, and honest hands-on reviews. Site: https://griffinwooldridge.com Author: Griffin Wooldridge (https://www.youtube.com/@griffinwdesigns, https://x.com/G_Wooldridge) Full article text: https://griffinwooldridge.com/llms-full.txt ## Blog posts - [I Tested Claude Fable 5.1 as a UI Designer](https://griffinwooldridge.com/blog/claude-fable-5-1-ui-design-test): I tested Claude Fable 5.1 on a finance dashboard, portfolio redesign, and video editor to see how good its UI design judgment really is. - [How to Turn a Figma Design into Code with AI](https://griffinwooldridge.com/blog/figma-to-code-with-ai): How to turn a Figma design into clean, on-system code with AI: connect real Figma context, reuse your components, describe intent, and review in small passes. - [The Best MCP Servers for Designers (2026)](https://griffinwooldridge.com/blog/mcp-servers-for-designers): The MCP servers worth connecting as a designer: Mobbin for references, Relume for components, Figma and Miro for your own context, and how to set them up. - [How to Write an AGENTS.md File for Design Projects](https://griffinwooldridge.com/blog/agents-md-for-design-projects): How to write an AGENTS.md file that keeps AI coding agents on-brand: what goes in the design-system, stack, and conventions sections, with a starter template. - [How to Prompt AI for Better UI Design](https://griffinwooldridge.com/blog/ai-prompts-for-ui-design): How to prompt AI for good UI: give references not adjectives, describe the job, constrain the visual system, and iterate in small, specific passes. - [AI Design Tools for Designers (2026): The Complete Guide](https://griffinwooldridge.com/blog/ai-design-tools): A product designer's guide to the AI design tools worth using in 2026, grouped by job: UI generation, design references, design-to-code, and app builders. - [GPT-5.6 vs Fable 5: The Ultimate UI Design Test](https://griffinwooldridge.com/blog/gpt-5-6-vs-fable-5): GPT-5.6 and Fable 5 given the same UI brief: first pass, attention to detail, and iteration, judged like a designer. Which model to trust with real design work. - [Claude Design Tutorial for Beginners (Full Walkthrough)](https://griffinwooldridge.com/blog/claude-design-tutorial): A beginner's walkthrough of Claude Design, Anthropic's AI-native way to design interfaces: what it is, how to start, and how to get output that looks good. - [Relume Library MCP: Give Claude 1,000+ Real Web Components](https://griffinwooldridge.com/blog/relume-mcp): The Relume Library MCP gives Claude 1,000+ real web components to build pages from proven sections. How it works and why it pairs with the Mobbin MCP. - [Brilliant: The Free, AI-Native Figma Alternative (2026)](https://griffinwooldridge.com/blog/brilliant-figma-alternative): Brilliant is a free, AI-native Figma alternative. A head-to-head on where it wins (free, AI-on-canvas, git-friendly, MCP) and where Figma still leads. - [How to Use Codex as a Designer](https://griffinwooldridge.com/blog/codex-for-designers): How to use OpenAI's Codex as a designer to turn plain-English ideas into real, working UI, plus where it fits alongside Claude Code and Cursor. - [How to Use Cursor as a Designer](https://griffinwooldridge.com/blog/cursor-for-designers): How to use Cursor, the AI-first code editor, as a designer to build real interfaces without hand-coding, and when to reach for it over Claude Code. - [How to Become an AI-Native Designer: A 2026 Roadmap](https://griffinwooldridge.com/blog/ai-native-designer-roadmap): A 2026 roadmap to becoming an AI-native designer: the mindset, the core skills, and the tool stack, in the order that matters. - [Framer 3.0 AI Agents: A Hands-On Tutorial and Review](https://griffinwooldridge.com/blog/framer-3-ai-agents-tutorial-review): A hands-on Framer 3.0 AI Agents tutorial and review covering responsive redesigns, Branching, CMS, SEO, and Claude Code External Agents. - [AI Design Workflows in Miro: Flows, Sidekick and Claude MCP](https://griffinwooldridge.com/blog/miro-ai-design-workflows-claude-mcp): How to run collaborative AI design workflows in Miro using Flows, Sidekick, Prototypes, and the Claude MCP server, and why it beats single-player AI. - [Mobbin MCP: 600,000+ Real References Inside Claude Code](https://griffinwooldridge.com/blog/mobbin-mcp-claude-code-design-references): Connect the Mobbin MCP to Claude Code and design from 600,000+ real, shipped app screens instead of vague prompts. Setup, a real workflow, and if it's worth it. - [Anything AI App Builder Review (2026): Pricing, Limits & What I Built](https://griffinwooldridge.com/blog/anything-ai-app-builder-review): Anything AI app builder review after shipping a real client portal with auth, database and Stripe: pricing, limits, what worked and where it broke. - [Stop Letting AI Design From Scratch: 5 UI Reference Sites](https://griffinwooldridge.com/blog/ai-ui-design-reference-sites): Five AI UI design reference sites that help coding agents produce better interfaces: Mobbin, Refero, 21st.dev, Transitions.dev, and Beautiful UI. - [Best Responsive Website Builders (2026): 6 Tested & Ranked](https://griffinwooldridge.com/blog/best-responsive-website-builders-ranked): Six responsive website builders tested on desktop, tablet and mobile by a UI designer, with clear picks for designers, agencies and small businesses. - [Claude Fable 5 for UI Design: Beautiful Output Every Time](https://griffinwooldridge.com/blog/claude-fable-5-for-ui-design-how-to-get-beautiful-output-every-time): How to get better UI out of Claude Fable 5: prompt structure, the effort dial, the 1M context window, cost per design, and when to use it over Opus 4.8. - [Claude Skills for Designers](https://griffinwooldridge.com/blog/claude-skills-for-designers): The Claude Skills most designers miss: Frontend Design, Figma-to-code, Theme Factory and Brand Guidelines, and what each one is good for. - [Full-Stack Freelancer Portal in One Afternoon with Anything](https://griffinwooldridge.com/blog/full-stack-freelancer-portal-anything-ai-app-builder): Building a freelance client portal in one afternoon: role-based access, a real PostgreSQL database, backend functions, Resend email and working file uploads. - [The AI Notepad Changing How I Work: Granola](https://griffinwooldridge.com/blog/granola): Why Granola replaced my manual meeting notes: how recipes, chat and integrations turn back-to-back calls into notes you can act on afterwards. - [Product Demos: The Missing Piece of Your Marketing Strategy](https://griffinwooldridge.com/blog/product-demos): Most product demos fail for a UX reason nobody names. What a good demo does, and why designers who can also make video are unusually good at them. - [How to Create End-to-End UI Designs with UX Pilot](https://griffinwooldridge.com/blog/ux-pilot): An end-to-end walkthrough of UX Pilot: writing the prompt, wiring in your own design system, theming, editing screens, prototyping and exporting into Figma. - [Web Hosting for AI Agents (Instant + Free)](https://griffinwooldridge.com/blog/web-hosting-for-ai-agents): Your AI agent builds the page in minutes, then hosting eats the afternoon. A free setup that takes under two minutes and fits how you already work with agents. ## Design case studies - [Cashier UI](https://griffinwooldridge.com/design/cashier-ui): Redesigning Mashgin's cashier POS: competitive analysis, field research and team workshops that cut transaction times by 28%. A 2025 product design case study. - [Database Dashboard Redesign](https://griffinwooldridge.com/design/db-dashboard): Redesigning MarkLogic's admin database dashboard: user research, a new design system, front-end implementation and 508 accessibility compliance. - [DeliverSmart](https://griffinwooldridge.com/design/deliversmart): A mobile app helping DoorDash and Uber Eats gig workers see real earnings after costs: user research, wireframes, hi-fi mockups and a tested prototype. - [MyAryaka Design System](https://griffinwooldridge.com/design/design-system): Building the MyAryaka design system: the problem it solved, the process from 2023 to 2025, its impact on the product team, and where it goes next. - [MarkLogic Logistics App](https://griffinwooldridge.com/design/logistics-app): A MarkLogic military logistics app: dashboard and map views, a React component hierarchy, component-based design changes, and integrating live JSON data. ## Pages - [About](https://griffinwooldridge.com/about): Who Griffin is and what he does - [Tools](https://griffinwooldridge.com/tools): The AI design tools he actually uses, with guides - [Videos](https://griffinwooldridge.com/videos): YouTube tutorials on AI-native design