# Griffin Wooldridge - full article text > Product designer and YouTube educator. Every blog post on https://griffinwooldridge.com, in full, for AI ingestion. Canonical URLs included; please cite them. --- # Julius Portfolio Website: The Prompts I Used URL: https://griffinwooldridge.com/blog/julius-portfolio-prompts Published: 2026-10-02 Author: Griffin Wooldridge Reusable versions of the three prompts from my Julius portfolio video: build a first version, refine the visual direction, and fix the mobile layout. ### The portfolio I built Watch the video above for the complete portfolio-building workflow, then copy the three customizable prompts below. Use the prompts in order in the same Julius project. Replace the bracketed placeholders with your name, role, project filenames, and preferred colors. Attach your portfolio content and project images for the first prompt, your hero image for the redesign, and screenshots of any mobile issues for the final pass. ### 1. Copy the portfolio build prompt In the video: 2:08. Start with the page structure, supplied content, and project images. PROMPT|Create a responsive one-page portfolio for [YOUR NAME], a [YOUR ROLE OR SPECIALTY], using the attached content and project images. Include a hero, selected work, services, about, and contact, with navigation between sections. Use an off-white background, dark text, [ACCENT COLOR] accents, large typography, generous whitespace, and subtle borders. Make the project imagery prominent. Match each project's images by their exact filenames: - [PROJECT 1 NAME]: [PROJECT 1 IMAGE FILENAMES] - [PROJECT 2 NAME]: [PROJECT 2 IMAGE FILENAMES] - [PROJECT 3 NAME]: [PROJECT 3 IMAGE FILENAMES] Add or remove entries to match the supplied projects. Do not assume every project has the same number of images. Make the hero “Let’s talk” button and Contact navigation scroll to the Contact section using #contact. Use only the contact details or contact links I supply. If none are supplied, ask me for them rather than inventing any. Do not add a submission form. Use only the supplied portfolio facts. Do not invent testimonials, clients, awards, or project results. Portfolio type: [REAL PORTFOLIO OR FICTIONAL SAMPLE]. If this is a fictional sample, add a discreet footer note identifying it as such. Do not label a real portfolio as fictional. ### 2. Copy the visual refinement prompt In the video: 5:02. Continue in the same project to change the art direction while keeping the existing content and images. PROMPT|Redesign my portfolio with a warm off-white background, tightly spaced black sans-serif headlines, a centered hero, understated navigation, and compact black buttons. Add soft, grainy [PRIMARY ACCENT COLOR] and [SECONDARY ACCENT COLOR] color clouds behind large floating project images, paired with playful black hand-drawn illustrations related to [YOUR ROLE OR SPECIALTY]. Carry this style throughout the page with layered image compositions, generous spacing, subtle depth, and gentle reveal animations. Keep all my existing project images and content, maintain readable images and screenshots, and preserve mobile usability and #contact navigation. Also include the attached [HERO IMAGE FILENAME] in the hero. Preserve the image's proportions and keep its main subject visible. ### 3. Copy the mobile layout prompt In the video: 6:48. Use this after reviewing the page at mobile widths and attaching examples of the problems. PROMPT|I'm seeing some issues at mobile width, such as the examples I attached. Do a responsiveness pass and address the issues you find while maintaining a good desktop layout as well. --- # Build an AI Creative Studio: Copy the Prompt URL: https://griffinwooldridge.com/blog/ai-creative-studio-prompt Published: 2026-09-30 Author: Griffin Wooldridge A ready-to-use prompt for building your own image and video creation workspace with Next.js, TypeScript, and Tailwind CSS. ### The studio I built Here is the creative studio UI I generated. Watch the video above for the walkthrough, then copy the customizable starter prompt below. ### Copy the prompt Paste this prompt into your AI coding tool to build the first version with mock generations. PROMPT|Build a polished web app, an AI creative studio for generating images and videos from multiple AI models. The goal is to create a professional creative tool that feels like a real product, not a demo or generic AI-generated dashboard. Use Next.js, TypeScript, and Tailwind CSS. Make it fully responsive. CORE EXPERIENCE Create one unified workspace with two primary modes: 1. Image 2. Video The user should be able to switch between image and video generation without leaving the main workspace. LAYOUT Use a dark, premium creative-tool aesthetic. Create: - A compact left sidebar for navigation - A large central generation workspace - A right-side or bottom results area where appropriate - Generous spacing and a strong visual hierarchy - Subtle borders, layered surfaces, and restrained use of gradients - Avoid excessive rounded cards, unnecessary containers, and generic SaaS dashboard styling On mobile, collapse the sidebar into accessible navigation and place results below the generation form. Keep the main controls easy to reach and avoid horizontal scrolling. SIDEBAR Include: - A configurable studio name and simple original logo - Create - Generations - Favorites - Settings The Create page should be selected by default. Keep the studio name and branding in a centralized configuration so anyone can customize them. IMAGE GENERATION Create an Image mode containing: - Large prompt input - Model selector - Aspect ratio selector - Resolution selector - Number of outputs - Generate button Treat all model names, capabilities, and prices in this prompt as illustrative mock configuration, not verified availability or pricing. Clearly label displayed estimates as mock costs. Use these example models for now: - Higgsfield Soul 2 - Qwen Image 3 - Recraft V4.1 When a model is selected, show: - Model name - Short description - Estimated generation cost For example: Higgsfield Soul 2 1080p Estimated cost: $0.0057 VIDEO GENERATION Create a Video mode containing: - Prompt input - Model selector - Optional image upload/reference area - Duration - Resolution - Aspect ratio - Generate button Use these example models: - Kling 3.0 - Seedance 2.5 - MiniMax H3 Show the estimated cost near the Generate button based on the selected model and duration. For example: Kling 3.0 5 seconds · 1080p Estimated cost: $0.71 RESULTS Create a polished generation area. Before anything has been generated, show an intentional empty state. After generation, results should appear in a visual gallery. Each result should display: - Generated asset - Model - Prompt - Generation cost - Timestamp Include useful actions such as: - Download - Favorite - Copy prompt - Generate again Download should save the actual displayed mock asset. Generate again should restore the original prompt and generation settings before starting another generation. Copy prompt should copy the full prompt and show a success confirmation. For videos, include native playback controls and use playable local video assets. GENERATION HISTORY Create a Generations page that displays previous image and video generations in a visual grid. Add filters for: - All - Images - Videos Use realistic mock generations and metadata for now. Persist history, favorites, and settings across refreshes using local storage or IndexedDB. Use IndexedDB for uploaded files or binary assets, and handle storage failures gracefully. INTERACTIONS Make the entire interface functional using mock data. Model switching, Image/Video tabs, settings, filters, favorites, and generation states should all work. When Generate is clicked: 1. Show queued and generating states 2. Show simulated progress clearly labeled as a simulation; structure the UI so real provider status can replace it later 3. Return a mock result 4. Add it to generation history Validate required prompts and supported settings before generation. Include clear failed-generation states, retry, and cancellation. Provide a deterministic way to test mock failures. A canceled or failed generation must not appear as a completed result. Do not connect to any external AI APIs yet. ACCESSIBILITY Support keyboard navigation, visible focus states, properly labeled controls, sufficient color contrast, and reduced-motion preferences. Announce generation status changes to assistive technology without announcing every progress update. ARCHITECTURE Structure the application so we can connect a real image/video generation API afterward without rebuilding the UI. Keep model definitions and pricing in a centralized configuration so additional models can easily be added. Create a clean abstraction for generation providers so that mock generation can later be replaced by real API requests. IMPORTANT Do not expose or hard-code any API credentials. Do not use third-party brand logos or copyrighted imagery in the mock generations. Use original abstract/product/landscape imagery for placeholders. Prioritize making the actual creation workflow feel excellent. This should look like a product a designer or creative team would genuinely use every day. Build the complete first version and run it locally. Before finishing, test the complete creation flow in both modes, including generation, failure and retry, cancellation, playback, downloads, favorites, history filters, persistence after refresh, keyboard navigation, and mobile layouts. Fix any broken interactions. --- # Mobbin Affiliate Case Study: 913 Tracked Conversions URL: https://griffinwooldridge.com/blog/mobbin-affiliate-case-study Published: 2026-09-27 Author: Griffin Wooldridge A practical design-software partnership, measured through 9,133 tracked visitors and 913 affiliate-attributed paying-customer conversions. ### The results METRIC|9,133|Tracked visitors METRIC|913|Paying-customer conversions METRIC|10.0%|Conversions-to-visitors ratio My Mobbin affiliate dashboard recorded 9,133 visitors and 913 conversions from April 1 through September 27, 2026. That is a 10.0% aggregate conversions-to-visitors ratio. These are cumulative results attributed to my affiliate link across the partnership. They are not the results of a single video or a 24-hour launch window. ### Why Mobbin fits my audience I’m Griffin Wooldridge, a product designer and the creator behind Griffin’s AI design tutorials on YouTube. My videos explore how designers can use AI tools in practical workflows, from finding references to building and refining interfaces. Mobbin fits naturally into that work. A designer using AI still needs to make decisions about layout, navigation, hierarchy and interaction. Real product references give those decisions a more useful starting point. For a sponsor, that creates a clear opportunity: demonstrate the product while solving a problem the viewer already has. ### The content approach: show the product in a real workflow In my Mobbin MCP walkthrough, I show how design references can become part of a Claude Code workflow. The product has a concrete role in the process: helping a designer bring reference material into the work instead of relying on a vague prompt. The accompanying tutorial explains the workflow and gives viewers another way to explore it: https://griffinwooldridge.com/blog/mobbin-mcp-claude-code-design-references LIST|Start with a design problem the audience recognises. LIST|Demonstrate where the tool fits and how I use it. LIST|Show enough of the workflow for viewers to judge whether it is useful to them. LIST|Give interested viewers a clear next step through a disclosed affiliate link. My interpretation is that this close match between audience, problem and product makes the partnership compelling. The affiliate dashboard alone cannot establish which creative choices caused a conversion. ### How the tracked results developed The monthly report provides a more useful picture than one cumulative number. September is a partial month, ending at the date of this snapshot. LIST|April 2026: 186 visitors and 10 conversions. LIST|May 2026: 117 visitors and 6 conversions. LIST|June 2026: 1,136 visitors and 55 conversions. LIST|July 2026: 3,785 visitors and 403 conversions. LIST|August 2026: 904 visitors and 109 conversions. LIST|September 1–27, 2026: 3,005 visitors and 330 conversions. These monthly totals add up to 9,133 visitors and 913 conversions. Conversions reported in a month may follow visits in an earlier month, so I do not treat each monthly pair as a cohort conversion rate. ### What the numbers mean Source: my Mobbin Rewardful dashboard and monthly summary, checked September 27, 2026, Pacific time. Rewardful defines a visitor as someone tracked through a valid affiliate link, and a conversion as a lead who completes a successful payment. Its definitions are available here: https://help.rewardful.com/en/articles/4202371-visitors-leads-conversions The 10.0% figure is calculated as 913 conversions divided by 9,133 tracked visitors, rounded to one decimal place. It is an aggregate ratio, not a controlled experiment or a matched visitor-cohort analysis. These results show affiliate-attributed customer activity. They do not establish incremental sales, isolate YouTube from other placements of the same link, or separate the contribution of individual sponsored and organic videos. They also do not establish Mobbin’s revenue or return on sponsorship spend. The figures are a dated snapshot, not a live counter or a promise of results for another brand. ### For AI and design software brands This partnership is a concrete example of what I aim to offer sponsors: a relevant audience, a practical product demonstration and a measurable path from interest to action. I’m interested in partnerships with AI software, design tools and products that help designers research, create, prototype or ship better work. The strongest fit is a product I can use meaningfully in a tutorial. If that sounds like your product, send me a brief description, your campaign goals, timing and budget range. We can discuss a video concept and the right way to measure it. --- # Claude Design Pricing and Limits (September 2026) URL: https://griffinwooldridge.com/blog/claude-design-pricing-limits Published: 2026-09-13 Author: Griffin Wooldridge Claude Design has no price of its own. It is included with Pro, Max, Team and Enterprise, it is not on the free plan, and since August it draws from the same usage pool as chat, Claude Code and Cowork. Here is what each plan costs, how the limits work, and how to get more designs out of the plan you already pay for. Every week someone asks me what Claude Design costs, and the answer surprises them: nothing on top of a Claude subscription, and nothing at all without one. There is no Claude Design SKU, no per-design fee and no free tier. You pay for a Claude plan and Design comes with it, sharing the plan's usage limits with everything else you do in Claude. This post is the answer-engine version. Plans and prices first, then how the shared limits actually behave, then the habits that make a Pro plan go further. If you have not used the tool yet, the beginner walkthrough is here: https://griffinwooldridge.com/blog/claude-design-tutorial ### Is Claude Design free? No. The Free plan on claude.com/pricing does not list Claude Design, Claude Code or Cowork; those three start at Pro. Anthropic's help center says the same: Claude Design is available to Pro, Max, Team and Enterprise subscribers, in beta. There is also no trial that unlocks Design on its own. The cheapest way in is the Pro plan, and because Pro is billed monthly you can run it for one month, decide, and cancel. ### Which plans include it, and what does each cost? All four paid plans include Claude Design at no extra charge. Prices from claude.com/pricing, September 2026: LIST|Pro: $20 a month, or $17 a month billed annually. Includes Claude Design, Claude Code, Cowork, projects and research. At least 5x the usage per session of the free plan. LIST|Max 5x: $100 a month. Everything in Pro with five times Pro's usage per session, higher output limits and early access to new features. LIST|Max 20x: $200 a month. Same as Max 5x with twenty times Pro's usage per session. LIST|Team Standard seat: $20 per seat a month billed annually, $25 monthly. Team Premium seat: $100 annually, $125 monthly, with five times the usage of a Standard seat. Both list Claude Design, plus central billing, SSO and admin controls. LIST|Enterprise: $20 per seat plus usage billed at API rates, annual contract. Claude Design is included but off by default; an admin has to enable it in organization settings. The pattern is the one Anthropic uses everywhere now: the plan buys a usage allowance, and every product (chat, Code, Cowork, Design) spends from it. Picking a plan for Design is the same decision as picking a plan for Claude Code. ### How do the shared usage limits work? Anthropic's Claude Design article says it plainly: design activity draws from the shared pool you use for chat, Claude Code and Cowork. There is no separate Design allowance. When you hit the limit, Design stops along with everything else until the window resets. The pool has two clocks. A session limit resets every five hours, and a weekly limit resets at a fixed time each week assigned to your account. Both apply on Pro and Max; Team and Enterprise seats have per-member limits, not a shared team pot. What you spend per turn depends on the model, the length and complexity of the conversation, and the tools and connectors involved, which Anthropic describes as token-intensive. Claude Design is heavy on all three. Every generation carries the artboard state, every imported design system adds context, and every screenshot or upload is tokens. That is why a Design session can eat a Pro session limit faster than a chat of the same length. It is not a bug; it is what rendering a multi-screen prototype costs. One more moving part: at launch in April 2026 Anthropic said Claude Design was powered by Claude Opus 4.7. Anthropic's current pages do not name the model or offer a model picker inside Design, so unlike Claude Code you cannot drop to a cheaper model to stretch the plan. If that changes, this section will. ### How many designs does a Pro plan actually get you? Anthropic does not publish a number, and I am not going to invent one. The honest framing is in sessions, not designs: Pro gives you a five-hour window that comfortably covers one focused Design session with a few screens and a handful of revision rounds, and the weekly cap is what you will feel if you also run Claude Code every day. What moves the needle is not the count of prompts, it is what each prompt carries. A prompt that says "make the header bolder" is cheap. A prompt that re-renders five artboards after a design-system import is not. The tips section below is about spending on the second kind only when it matters. If you want a feel for how model and plan choice change the burn in Claude Code, where I have measured it, the usage delta is in this post: https://griffinwooldridge.com/blog/claude-fable-5-for-ui-design-how-to-get-beautiful-output-every-time ### What happens when you hit the limit? Three options, per Anthropic's pricing page: wait for the reset, move to a higher plan, or turn on usage credits. Usage credits are available on Pro and Max (Settings, Usage, Enable), billed at standard API rates as a separate line item, prepaid with an amount you choose, and capped at $2,000 of redemption a day. The Claude Design help article confirms that when you reach your limit you can purchase credits to keep working in Design. For most designers the right answer is the middle one. If you hit the Pro weekly cap twice in a month, Max 5x at $100 is cheaper than the credits you would otherwise buy, and it comes with priority access during busy hours. ### What is included once you are in? The full feature set, on every paid plan. Imports from a GitHub repo, design files, raw uploads, web captures and DOCX, PPTX and XLSX files. Design-system import so new screens use your tokens and components. Exports to ZIP, PDF, PPTX and standalone HTML, org-scoped share links with view, comment or edit access, direct sends to Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel and Wix, and a handoff bundle for Claude Code. There is no Figma export. What differs by plan is administration, not capability. Enterprise gets the on/off switch and a Claude Design Admin role that can approve one standard design system and lock edits. Team gets central billing and SSO. Pro and Max get the same tool without the controls. Two limits apply everywhere: Design is web and desktop only, no mobile, and Anthropic says multi-person editing is still unreliable in the beta. ### Tips to stretch the limit LIST|Do the thinking in chat first. Brief, content and structure cost far less in a plain conversation than inside Design. Arrive with a written spec and paste it. LIST|One change per turn. Specific edits ("tighten the card padding") re-render less than vague ones ("make it feel more premium"), and they regress less. LIST|Import the design system once, then leave it. Re-importing a large repo re-indexes it; sync only after a token or component change. LIST|Keep the artboard count down while exploring. Explore one screen, lock the direction, then generate the rest of the flow. LIST|Start a new project for a new brief. A long-running project carries its whole history into every turn. LIST|Use Claude Skills for the parts that repeat. A skill turns a page of instructions into a short trigger, which is cheaper every time it fires: https://griffinwooldridge.com/blog/claude-skills-for-designers PICK|Trying it once|Pro, monthly|$20, cancel after a month if it does not stick. PICK|Designing most days, plus Claude Code|Max 5x|Five times Pro's session usage for $100; cheaper than buying credits twice a month. PICK|Small team, one bill|Team Standard seats|$20 to $25 per seat, Design included, per-member limits. PICK|Brand control across a company|Enterprise|Admin role that locks the approved design system. ### FAQ Is Claude Design free? No. It is included with Pro ($20 a month), Max ($100 or $200), Team ($20 to $125 per seat) and Enterprise, and it is not on the Free plan. There is no separate Design subscription. Can I buy Claude Design on its own? No. Anthropic sells Claude plans, and Design is a feature of the paid ones. The only add-on spend is usage credits at API rates once you hit your plan's limit. Do Team plans get more Claude Design usage? Team limits are per member. A Standard seat gets more usage per session than Pro; a Premium seat gets five times a Standard seat. There is no team-wide shared pool. Does Claude Design use API credits? Not by default. It uses your subscription's usage limits. On Pro and Max you can enable usage credits, billed at API rates, to keep working after you hit the limit. Does Claude Design have its own usage limit? No. Since the August 2026 update it shares one pool with chat, Claude Code and Cowork, on a five-hour session clock plus a weekly cap. Is there a Claude Design student or education price? Anthropic lists an Education plan with contact pricing, but its public page does not state whether Claude Design is included, so check with Anthropic before assuming. ### Where this fits Claude Design's price is the price of Claude. Pick the plan for the total amount of Claude you use, treat Design as the heaviest thing in that pool, and spend the expensive turns on the screens that matter. If you are still deciding whether it belongs in your stack at all, the comparison is here: https://griffinwooldridge.com/blog/ai-design-tools --- # Figma MCP + Claude Code Setup for Designers (2026) URL: https://griffinwooldridge.com/blog/figma-mcp-claude-code-setup Published: 2026-09-13 Author: Griffin Wooldridge The official Figma MCP server lets Claude Code read your variables, components and Code Connect mappings from a frame link, and write screens back to the canvas. Setup is one plugin install. This is the install for Claude Code, Cursor and Codex, which of the 32 tools a designer actually uses, and the rate limits that decide whether it works on your seat. The setup step is where people get stuck on Figma-to-code. There are two official Figma MCP servers, a handful of community ones, and half the tutorials online describe a version Figma has since replaced. This post is only the setup, verified against Figma's own help articles this month, plus the short list of tools worth knowing. Short version: install Figma's plugin in Claude Code (`claude plugin install figma@claude-plugins-official`), authorize once, paste a frame link. Use the remote server unless your organization requires the desktop one. Check your seat before you start, because View and Collab seats get six tool calls a month. The conceptual post, on what to put in the prompt once it is connected, is here: https://griffinwooldridge.com/blog/figma-to-code-with-ai ### Which Figma MCP is which? Figma ships two official servers. The remote server is hosted by Figma at `https://mcp.figma.com/mcp`, needs no desktop app, works on every plan and seat (with limits), and has the broadest feature set, including the write-to-canvas tools. The desktop server runs inside the Figma desktop app at `http://127.0.0.1:3845/mcp`, requires Dev Mode and a Dev or Full seat on a paid plan, and Figma now positions it for specific organization and enterprise cases only. Use the remote one. The only reason to pick desktop is a policy that keeps traffic local or an admin who has not enabled the remote server. Then there are community servers, mostly older Node packages that wrap Figma's REST API with a personal access token. They read only. If you are on one, switch; the official server reads more (variables, Code Connect, FigJam, Make files) and can write. ### How do I connect Figma MCP to Claude Code in five steps? Figma's recommended path is its Claude Code plugin, which bundles the MCP server config with Agent Skills. LIST|Step 1: In the terminal, run `claude plugin install figma@claude-plugins-official`. Restart Claude Code if it was already running. LIST|Step 2: Type `/plugin` and press Enter. Use the right arrow to reach the Installed tab, arrow down to `figma`, and press Enter to start authorization. LIST|Step 3: A browser page opens. Click Allow access to let Claude Code use your Figma account. LIST|Step 4: Back in the terminal, run `/plugin` again and confirm `figma` shows as connected. LIST|Step 5: In Figma, right-click a frame and choose Copy link to selection. Paste it into a Claude Code prompt: "Read this frame and implement it with our existing components." Desktop alternative: in the Figma desktop app, open a Design file, switch to Dev Mode with nothing selected, enable the MCP server in the right sidebar, then run `claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp` and restart Claude Code. If the plugin install fails with a message about your organization, an admin has blocked plugin installs; the remote server can still be added by hand as an HTTP MCP server at `https://mcp.figma.com/mcp` if your Claude admin allows it. ### What about Cursor and Codex? Cursor: open the chat, enter `/add-plugin figma` and submit, then click Add Plugin. Open the command palette, search Cursor Settings, choose Tools & MCP, and under Installed MCP Servers click Connect to run the Figma sign-in. For the desktop server, add a custom MCP with `{"mcpServers": {"figma-desktop": {"url": "http://127.0.0.1:3845/mcp"}}}`. Codex: in the Codex app, click Plugins in the upper left, click the plus next to Figma, choose Install Figma, and click Allow access when the auth page opens. Nothing else to configure. For the desktop server, go to Settings, MCP servers, Add server, switch the type from STDIO to Streamable HTTP, and enter the local URL. The rest of the Codex and Cursor setup for designers, beyond Figma, is in these two: https://griffinwooldridge.com/blog/codex-for-designers and https://griffinwooldridge.com/blog/cursor-for-designers ### Which of the 32 tools matter to a designer? Figma's tools reference lists 32 tools across reading, writing, design systems, Code Connect, generative plugins, shaders and Weave. Six do most of the work in a design-to-code session. LIST|`get_design_context`: the main one. Returns the structure, styles and layout of the selected frame in a form the agent can build from. LIST|`get_screenshot`: a visual of the selection so the agent can compare its build to the design. LIST|`get_variable_defs`: the variables and styles used in the selection, which is how tokens survive the trip. LIST|`get_code_connect_map`: the mapping between Figma components and your code components, so the agent reuses `Button` instead of inventing one. LIST|`search_design_system` and `get_libraries`: find components, variables and styles in your connected libraries before building. LIST|`get_metadata`: a sparse outline of layer IDs, names and sizes, useful for big frames where full context is too much. Then two you will grow into. `use_figma` creates, edits and inspects objects on the canvas from code, and `generate_figma_design` turns a live web UI into editable Figma layers. The rest (FigJam, Mermaid diagrams, generative plugins, shaders, Weave) are real but not day-one. ### Does it work on the free Figma plan? It connects, and then it stops. Figma's rate-limit page, September 2026: View and Collab seats get 20 tool calls a month on Starter and 6 a month on Professional, Organization and Enterprise. Dev and Full seats get 200 calls a day (10 a minute) on Starter, 200 a day (15 a minute) on Professional, and 600 a day (20 a minute) on Organization and Enterprise. Education plans match Professional. One design-to-code pass calls several tools, so a View seat's monthly allowance is gone in the first session. The practical rule: you need a Dev or Full seat. Three tools are exempt from the limits (`add_code_connect_map`, `create_new_file`, `whoami`), and `whoami` is how you check which seat the server thinks you have; run it first if calls start failing. PICK|Free Starter plan, Full seat|Works|200 calls a day is plenty for a designer. PICK|View or Collab seat, any plan|Not usable|6 to 20 calls a month; ask for a Dev seat. PICK|Professional, Dev or Full seat|Works|200 a day, 15 a minute. PICK|Organization or Enterprise|Works|600 a day, and the desktop server if policy requires it. ### Design to code: reusing my components, not reinventing them The tools give the agent the data; the prompt and the project context decide whether it uses it. Two habits. First, state the reuse rule in the prompt: "Use `get_code_connect_map` and our existing components in `src/components`; do not create new primitives." Second, keep the same rule in your project's `AGENTS.md` or `CLAUDE.md` so it applies to every session: https://griffinwooldridge.com/blog/agents-md-for-design-projects If your team has not set up Code Connect, the agent has nothing to map to and will translate pixels into fresh components. Setting it up is the biggest quality improvement available for Figma-to-code, and the MCP has tools to help write the mappings. ### Code to design: pushing a built screen back into Figma This is new enough that most people do not know it exists. With the remote server, `generate_figma_design` captures a running web UI and sends it into Figma as editable layers, and `use_figma` can create and edit frames, components, variables and auto layout directly. The loop that follows: build in Claude Code, push the built state back to Figma so the design file matches what shipped, then iterate in whichever tool suits the next change. Figma marks write-to-canvas as beta and currently free of extra charge. Expect rough edges on complex layouts and check the auto layout it produces. ### Common errors LIST|The server connects but every call fails: check the seat with `whoami`. View and Collab seats hit the monthly cap immediately. LIST|Claude Code says the plugin is blocked: an admin has disabled plugin installs. Ask, or add the remote server by hand. LIST|Desktop server not found: Dev Mode is off, the file is not a Design file, or the toggle was never enabled in the right sidebar. LIST|The agent ignores my components: Code Connect is not set up, or the prompt did not tell it to look. LIST|Frame link returns nothing: you need at least view access to the file, and the link must be a selection link, not a prototype or embed link. ### FAQ Is the Figma MCP free? The server is available on all plans and seats, but usage is capped by seat. Dev and Full seats get 200 tool calls a day on Starter and Professional and 600 on Organization and Enterprise; View and Collab seats get 6 to 20 calls a month, which is not enough to use it. Desktop vs remote Figma MCP server: which one? Remote, at mcp.figma.com/mcp. It has the broadest features, including writing to the canvas, and needs no desktop app. The desktop server is for organizations with a policy reason to keep traffic local, and it requires Dev Mode and a Dev or Full seat. Does the Figma MCP work in Cursor and Codex too? Yes. Both have a one-click plugin install (`/add-plugin figma` in Cursor; Plugins, Install Figma in the Codex app) followed by a Figma sign-in. The same remote server serves all three clients. Can Claude write to Figma? Yes, through the remote server. `use_figma` creates and edits objects on the canvas and `generate_figma_design` turns a live web UI into editable layers. Figma marks these as beta. How many tools does the Figma MCP have? Figma's reference lists 32. A designer uses about six regularly: design context, screenshot, variables, Code Connect map, design system search and metadata. Do I need Dev Mode? Only for the desktop server. The remote server works from a frame link with view access to the file. ### Where this fits The Figma MCP is the connection that lets an agent build from your actual design rather than a screenshot of it. Install it once, get a Dev or Full seat, set up Code Connect, and the rest of the Figma-to-code process gets easier. It sits alongside Mobbin for references and Relume for sections in the list of servers I run: https://griffinwooldridge.com/blog/mcp-servers-for-designers --- # Miro MCP Server: Connect Claude to Your Boards (2026) URL: https://griffinwooldridge.com/blog/miro-mcp-server-claude Published: 2026-09-13 Author: Griffin Wooldridge Miro's MCP server turns a board into something Claude can read and write: sticky notes, frames, tables, diagrams, docs and prototypes. Setup is one connector in Claude or one command in Claude Code, and it works on the free plan. This is the setup, what Claude can do on a board, the daily limits, and where Sidekick is the better tool. The video above is my Canvas 26 walkthrough: the MCP server, AI prototypes and the agentic Sidekick. The question that kept coming back was the practical one: how do I connect this to Claude, and what does Claude do once it is connected? This is that post. Short version: add Miro as a connector in Claude, or run one command in Claude Code, sign in once, and Claude can search your boards, summarize what is on them, and write structured content back. It is available on every Miro plan, including Free, with a daily call limit that scales with the plan. The best use I have found is turning a messy research board into a synthesis Claude can act on. If you want the wider workflow, where Flows and Sidekick sit alongside the MCP, that is a separate post and video: https://griffinwooldridge.com/blog/miro-ai-design-workflows-claude-mcp ### What is the Miro MCP server? It is a remote MCP server hosted by Miro at `https://mcp.miro.com`. Any client that supports remote MCP with OAuth 2.1 can connect: Claude, Claude Code, Cursor, Codex and ChatGPT, Gemini CLI, VS Code with Copilot, Windsurf, Replit, Lovable, Kiro and Amazon Q are all documented. You authenticate with your own Miro account, pick one team, and the agent gets the same board access you have. Nothing more, nothing less. The MCP does not give Claude a special view of Miro. It gives Claude your view. If you cannot open a board, neither can Claude. If a board is editable for you, Claude can edit it too, so treat prompts that write to shared boards with the care you would give a teammate using your login. ### How do I connect it to Claude and Claude Code? In Claude (web or desktop app): LIST|Step 1: In a chat, open the plus menu and choose Add connectors, then search for Miro. LIST|Step 2: Click Connect. A browser window opens for Miro's OAuth flow; sign in and approve access. LIST|Step 3: Select the Miro team whose boards you want Claude to reach. The connection is scoped to that one team. LIST|Step 4: Back in the chat, paste a full board URL into your prompt. Miro's docs say to include the whole URL rather than the board name. In Claude Code, from the terminal: LIST|Step 1: Run `claude mcp add --transport http miro https://mcp.miro.com` (or install Miro's plugin with `claude plugin install miro@claude-plugins-official`). LIST|Step 2: Start a session and approve the OAuth sign-in when the browser opens. Pick the team. LIST|Step 3: Run `/mcp` and confirm miro shows as connected, then prompt with a board URL. Two gotchas from Miro's FAQ. Each user is authenticated into one team at a time, even across multiple clients, so switching teams means re-authenticating. And on Enterprise, the MCP server is off by default until an admin turns it on under Admin settings, Apps & Integrations, MCP. ### What can Claude read and write on a board? Reading is broad. Claude can search the boards you have access to, list the items on a board with filters by type, read comments, and pull images. Miro's board summary uses Miro AI, so it needs Miro AI enabled and it consumes AI credits; the rest of the read tools do not. Writing goes through what Miro calls Canvas tools: the agent describes board content as SVG and Miro turns it into native items. Through that route Claude can create frames, sticky notes, shapes, text, cards, docs, tables (including timeline and kanban views), Mermaid diagrams, code widgets, embeds and images from public URLs. It can reply to and resolve comments, and it can create and read prototypes from HTML screens. Miro's FAQ notes custom shapes are not supported yet. The older dedicated tools (`diagram_create_mermaid`, `doc_create`, `table_create`, `layout_create`) are deprecated and stop working on September 14, 2026. If a tutorial tells Claude to call one of those by name, it is out of date; ask for the diagram or table in plain language and let the Canvas tools handle it. ### Research synthesis from sticky notes: the workflow that pays off This is the use I would start with, because it turns Miro's weakness (a hundred sticky notes nobody rereads) into an input Claude is good at. The prompt shape: give Claude the board URL, tell it which frame holds the raw notes, and ask for a specific structure back. "Read the sticky notes in the frame called Interview Notes on this board. Group them into themes, name each theme, count the notes behind it, and quote the two clearest notes per theme. Then write the result to a new frame to the right called Synthesis, one card per theme." Naming the frame and asking for counts and quotes keeps Claude honest; a summary without the underlying notes is where hallucinated themes creep in. From there the board stays the source of truth. The synthesis sits next to the raw notes, teammates comment on the cards, and Claude reads those comments on the next pass. The video shows this on a real board. ### Board to prototype: does the Prototypes feature hold up? Miro Prototypes, announced at Canvas 26 on May 19, 2026, let you generate prototype variants on the canvas, apply brand styling, and export the finished one to a coding agent or to Figma. Through the MCP there are two matching tools: one creates a prototype from HTML screens, one reads the screens and metadata back. This is a canvas for comparing directions, not a replacement for building. The loop that works: synthesize research on the board, have Claude draft two or three directions as HTML, drop them in as prototypes so the team can react side by side, then hand the winner to Claude Code. Prototypes are a Business and Enterprise feature on Miro's pricing page. For the build step itself, where the agent needs your design system rather than a Miro board, start here: https://griffinwooldridge.com/blog/claude-design-tutorial ### Sidekick vs Claude via MCP: when to use which? They overlap less than the marketing suggests. Sidekick lives inside Miro. Since Canvas 26 it behaves like an agent: it reads intent, pulls context through Miro's connectors, breaks work into steps, asks clarifying questions, and generates board content from one prompt. It costs Miro AI credits (two per prompt) and is fully included on Business and Enterprise. Use it when the task starts and ends on the canvas. Claude via MCP lives outside Miro, in the tool where the rest of your work already is. It can hold a long conversation, reference files and repos, chain the board with other MCP servers, and write results back. Use it when Miro is one input among several: research on the board, components in a repo, references from Mobbin, a build at the end. PICK|Facilitating a live session|Sidekick|On-canvas, fast, credits included on Business. PICK|Synthesis that feeds a build|Claude via MCP|Board becomes an input to Claude Code and your other servers. PICK|Comparing prototype directions|Both|Claude drafts, Prototypes displays, the team decides. PICK|Free plan|Claude via MCP|Works on Free with 100 calls a day; Sidekick is a limited trial. ### Limits and gotchas LIST|Daily MCP calls per plan, from Miro's pricing page: 100 on Free, 500 on Starter, 2,000 on Business, 10,000 on Enterprise. A synthesis pass on a big board can take a few dozen calls, so Free is enough to try it and not enough to live in. LIST|One team per connection. Agencies with boards across client teams will be re-authenticating a lot. LIST|Board summaries and Sidekick prompts spend Miro AI credits: 10 a month on Free, 25 per member on Starter, 50 on Business. LIST|Complex layouts often need a second pass. Ask for a frame, check it, then ask for adjustments rather than expecting a finished board from one prompt. LIST|Enterprise admins can restrict the MCP to selected teams, and audit tooling for MCP activity is still, in Miro's words, evolving. Plans are $8 per member per month on Starter and $20 on Business, billed yearly, as of September 2026. ### FAQ Is the Miro MCP free? Yes. Miro says the MCP server works on all plans, including free teams. The limit is calls per day: 100 on Free, 500 on Starter, 2,000 on Business and 10,000 on Enterprise. Board summaries additionally use Miro AI credits. Does the Miro MCP work with Claude Code? Yes. Run `claude mcp add --transport http miro https://mcp.miro.com`, approve the OAuth sign-in, choose a team, and confirm the server shows as connected with `/mcp`. Miro also ships a Claude Code plugin. Miro Sidekick vs Claude MCP: which should I use? Sidekick for work that starts and ends on the canvas, especially live sessions; Claude via MCP when the board is one input alongside code, files and other MCP servers. Sidekick spends Miro AI credits; the MCP spends daily calls. Can Claude create a Miro prototype? Yes. The MCP has a tool that creates a prototype from HTML screens and one that reads prototype screens back. Prototypes as a feature are included on Business and Enterprise plans. Why can Claude only see one team's boards? Miro authenticates each user into one team per connection. To switch teams, disconnect and re-authenticate, choosing the other team. Which tools are going away? `diagram_create_mermaid`, `doc_create`, `table_create` and `layout_create` are deprecated and stop working on September 14, 2026. The Canvas tools replace them. ### Where this fits The Miro MCP is the piece that makes a board an input rather than a dead end. Connect it, start with research synthesis, and graduate to prototypes when the team is ready to compare directions. It is one of a handful of MCP servers I think every designer should run: https://griffinwooldridge.com/blog/mcp-servers-for-designers --- # 10 Checks Before You Launch an AI-Built Website URL: https://griffinwooldridge.com/blog/ai-built-website-launch-checklist Published: 2026-09-12 Author: Griffin Wooldridge Claude Code, Codex and the app builders will get you to a site that looks finished in an afternoon. The failures show up after launch: a phone layout that stacks wrong, placeholder copy in the footer, no meta tags, a contact form that posts to nowhere. These are the ten checks I run before any AI-built site goes live, in the order I run them. The video above is the checklist as a walkthrough. This is the written version, with the specific thing to look for in each check and the prompt to give the agent when it fails. The premise: an AI agent optimizes for the thing you asked for, which is usually the desktop screenshot. Everything you did not ask for (the phone view, the metadata, the empty states, the error path on the form) is where it improvises. The checklist is a list of the things nobody asks for. Run it on the deployed URL, not the local preview. Half of these only show up once the site is on a real host with a real domain. ### Why AI-built sites fail after launch Three reasons, and they compound. The agent builds against the viewport it was shown, so responsive behavior is a guess. The agent fills gaps with plausible content, so lorem-adjacent copy and stock-looking imagery survive into production. And the agent treats infrastructure (forms, analytics, redirects, legal pages) as out of scope unless you put it in scope. None of that is a reason not to build this way. It is a reason to review the way you would review a contractor's work: walk the site on the devices your visitors use, click every link, submit every form, read every line of copy once. ### Step 1: Restack every page on a phone Open the live site on an actual phone, not a resized browser window. Scroll every page top to bottom. What you are looking for: horizontal scroll (a section is wider than the screen), text that wraps into one word per line, hero type that takes three screens, image grids that stack into a single tall column with no rhythm, and navigation that either disappears or overlaps the content. When it fails, the prompt is specific: "On viewports under 768px the pricing grid stacks to one column with 64px gaps. Make it two columns under 768px and one under 480px, cap card padding at 20px, and keep the section under two screen heights." Give the breakpoint and the target, not "fix mobile." If you built on a website builder instead of an agent, this check is where the builders separate; my breakpoint-by-breakpoint comparison is here: https://griffinwooldridge.com/blog/best-responsive-website-builders-ranked ### Step 2: Replace every piece of generated content Search the codebase for the tells: "Lorem", "John Doe", "Acme", "example.com", "123 Main St", "+1 (555)", "Your Company", "Coming soon", and any testimonial with a first name and a last initial. Agents write filler that reads like real copy, so grep rather than skim. Then the images. Every hero, team photo and product shot: is it yours, licensed, or generated with a model whose terms allow commercial use? Swap anything you cannot answer for. If you generate imagery, do it with a consistent art direction rather than accepting whatever the agent pulled in; the process I use is in the Astra test: https://griffinwooldridge.com/blog/gpt-6-astra-web-design-test ### Step 3: Title, description, canonical, Open Graph View source on every page and check four things in the head. A unique ``. A unique `<meta name="description">` (Google says identical descriptions across pages are not helpful, and it will rewrite ones it does not trust). A self-referencing `<link rel="canonical">` with an absolute URL. Open Graph and Twitter card tags with a real image so the link unfurls when someone shares it. Then the site-level pieces: a `sitemap.xml`, a `robots.txt` that does not block the whole site (agents sometimes leave a staging `Disallow: /` in place), and a favicon. If you have a physical business or publish articles, add the matching schema.org JSON-LD; it is a five-minute prompt. Ask the agent for all of it in one pass: "Add unique title and meta description to every page, a self-referencing canonical, OG and Twitter tags using /og.png, a sitemap, and a robots.txt that allows everything. List what you changed per page." ### Step 4: Accessibility basics Four checks cover most of the damage. Contrast: body text needs at least 4.5:1 against its background under WCAG 2.2 AA, large text 3:1; agents love light grey on white. Keyboard: tab through the page and confirm you can reach and see focus on every link, button and field. Alt text: every meaningful image has it, decorative images have `alt=""`. Structure: one `h1` per page, headings in order, buttons that are `<button>` and links that are `<a>`. Run Lighthouse's accessibility audit in Chrome DevTools for the rest. It will not catch everything, but it catches the mechanical failures an agent makes at scale. ### Step 5: Performance and Core Web Vitals Google's thresholds are public: Largest Contentful Paint within 2.5 seconds, Interaction to Next Paint at or under 200 milliseconds, Cumulative Layout Shift at or under 0.1, measured at the 75th percentile of visits on mobile and desktop. Run PageSpeed Insights on the live URL and read the mobile numbers, not the desktop ones. The usual AI-built culprits: uncompressed hero images (ask for WebP at the rendered size with explicit width and height), a font loaded from three places, an animation library shipped for one effect, and images without dimensions causing layout shift. Fixing the first one alone often gets LCP under the line. ### Step 6: Forms, links and analytics Submit every form on the live site and confirm the submission arrives somewhere you will see it. Agents build beautiful forms that post to a placeholder endpoint or to nothing. Check the success state, the error state (submit it empty), and spam protection. Click every link in the nav and footer. Look for `#`, `href=""`, and links to pages that were planned and never built. Then confirm analytics is installed on every page, not only the home page, and that your own visits are excluded. ### Step 7: Hosting, domain and HTTPS A privacy policy that reflects what the site collects (analytics, form submissions, cookies), terms if you sell anything, and a cookie notice where your visitors' jurisdiction requires one. Agents will draft a privacy policy on request; read it, because it will describe data you do not collect and miss data you do. If you take payments, the payment provider's requirements come first. Set up the 404 page while you are here; the default one from the host is rarely on-brand. For what hosting looks like when an agent is doing the building, and the fastest free path I know to a shareable URL, see: https://griffinwooldridge.com/blog/web-hosting-for-ai-agents ### Step 8: Legal pages A privacy policy that reflects what the site actually collects (analytics, form submissions, cookies), terms if you sell anything, and a cookie notice where your visitors' jurisdiction requires one. Agents will generate a privacy policy on request; treat it as a draft and read it, because it will describe data you do not collect and miss data you do. If you take payments, the payment provider's requirements come first. Add a real contact route (email or form) and a business address if you sell to consumers. Footer links to all of this on every page. ### Step 9: A quiet mode for effects Do it as a stranger. Open the site in a private window on a phone, arrive at the home page, and try to do the one thing the site exists for: book, buy, sign up, read, contact. Time it. The Astra landing page in my test needed exactly this; the quiet view I had it build is a good template for what "off" should look like: same content, same imagery, no motion: https://griffinwooldridge.com/blog/gpt-6-astra-web-design-test ### Step 10: The final walkthrough Do it as a stranger. Open the site in a private window on a phone, arrive at the home page, and try to do the one thing the site exists for: book, buy, sign up, read, contact. Time it. Then do it again on desktop from a Google search for your brand name once the site is indexed. Anything that made you pause is the next fix. Then ship; a site that passes these ten is in better shape than most human-built launches I have reviewed. ### FAQ Do AI-built websites rank on Google? They can. Google indexes the HTML it is given; what matters is whether the pages have unique titles and descriptions, a canonical URL, real content and acceptable Core Web Vitals. The checks above are the ones that decide it. How do I check an AI-built website for mobile bugs? On a real phone, on the deployed URL, every page top to bottom. Look for horizontal scroll, stacked grids with no rhythm, oversized hero type and overlapping navigation, then give the agent the breakpoint and the target when you prompt the fix. What is the fastest accessibility check? Contrast (4.5:1 for body text), keyboard tabbing with visible focus, alt text on every image, and one h1 with ordered headings. Then Lighthouse's accessibility audit for the rest. What are the Core Web Vitals thresholds? LCP within 2.5 seconds, INP at or under 200 milliseconds, CLS at or under 0.1, at the 75th percentile of page loads on mobile and desktop. Should I add a privacy policy to a small AI-built site? Yes, if it has analytics or a form, because both collect data. Have the agent draft one, then edit it to match what the site actually collects. Can I make the agent run this checklist itself? Partly. Paste the ten steps into a prompt and it will fix the mechanical ones (metadata, alt text, redirects, reduced motion). The phone walkthrough, the content read and the form submission are yours. ### Where this fits The build is the easy half now. This list is the other half, and it is the same list whether Claude Code, Codex or an app builder did the building. For the tools I use to get to the build in the first place, start with the pillar: https://griffinwooldridge.com/blog/ai-design-tools --- # OpenAI Images 2.5 for Web Design: What Changed and How I Use It URL: https://griffinwooldridge.com/blog/openai-images-2-5-for-web-design Published: 2026-09-12 Author: Griffin Wooldridge ChatGPT Images 2.5 shipped on September 8 with faster generation, better fidelity to reference images, edits that hold across turns, comment-based editing and a Sketch tool. The video above is my hands-on for web design. This is the written version: what changed, how I use it for hero images, icons and mockups, and where it still breaks. Images 2.0 was the release that made generated imagery usable in real web design work; it is the model behind the Astra landing page test. Images 2.5 is not a rethink. It is the same model made faster, more obedient in editing, and better at keeping a subject consistent from one edit to the next, which for design work matters more than another jump in raw prettiness. Short version: use it for hero and section imagery, illustration sets, and quick visual explorations. Use it with care for icons, and do not use it as your UI design tool, because typography and dense small text are still where it falls over. The full Astra plus Images 2.0 build, which is the workflow this update improves, is here: https://griffinwooldridge.com/blog/gpt-6-astra-web-design-test ### What changed in ChatGPT Images 2.5? From OpenAI's announcement, in order of how much each one matters for design work: LIST|Consistency across edits. Details hold from one turn to the next, so a character, product or layout stays itself through five rounds of changes instead of drifting. LIST|Comment-based edits. Place a comment on a region of the generated image and describe the change; the model edits that region and leaves the rest alone. LIST|Better reference fidelity. Subjects in reference photos are preserved more reliably, which is what makes brand-consistent imagery possible. LIST|Speed. Generation latency is down by up to 50% compared with Images 2.0, which changes how many variations you are willing to try. LIST|Sketch. Type `@Sketch` and draw directly in ChatGPT; the drawing becomes a composition reference for the final image. LIST|Templates and shared prompts. Preset formats such as Poster and Merch, and the ability to share a prompt with someone else. It rolled out on September 8, 2026 to ChatGPT, ChatGPT Work and Codex users across tiers, on desktop, mobile and web. The Codex part is the one designers should notice: the same model is available inside the agent that builds the page. ### Flare vs Sunburst: which API model, and what does it cost? For developers, OpenAI released two API models. GPT-Image-2.5 Flare is the default: the same quality, editing and speed gains, at half the latency of GPT Image 2, aimed at high-volume work. GPT-Image-2.5 Sunburst trades speed for tighter control across edits and is aimed at production creative work where drift on the third or fourth edit costs real time. Pricing is identical for both, per OpenAI's model page: $5 per million text input tokens ($1.25 cached), $8 per million image input tokens ($2 cached), $30 per million image output tokens. Quality settings run `low`, `medium`, `high`, `xhigh`, `max` and `auto`, and the model is served on the image generation and image edit endpoints only. Because the price is the same, Flare is the default and Sunburst is what you switch to when you have measured that its lower edit drift is worth the wait. Inside ChatGPT and Codex you do not pick; you get Images 2.5. The Flare and Sunburst distinction only exists in the API. ### Hero images and section imagery This is the best use, and where the consistency improvement lands hardest. A landing page needs a hero, three or four section images and often a few smaller supporting shots that all read as one photoshoot. With Images 2.0 that meant regenerating until the lighting and palette matched. With 2.5, generate the hero first, then reference it for every subsequent image: "Same set, same lighting, same lens, new subject: the product on a desk from above." Write the prompt like an art director's brief, not a caption. Camera and lens, light source and time of day, palette limited to your brand's two or three colors, a note on what must not appear (text, logos, extra people). Then ask for the aspect ratio your layout needs rather than cropping later. My general prompting rules for UI carry over here: https://griffinwooldridge.com/blog/ai-prompts-for-ui-design Comment-based editing changes the revision loop. When a hero is right except for one thing, comment on that thing ("replace the mug with a phone") instead of re-rolling and losing the composition you liked. ### Icons and illustration sets Sets are where consistency across edits earns its keep. Generate one icon with a fully specified style (stroke weight, corner radius, palette, perspective, background), then ask for the next one in the same style and reference the first. Do a sheet of eight or twelve at once when you can, so the model resolves the style once. Two honest limits. First, the output is raster. For product UI you want SVG, so treat the generated set as a reference for a designer or an agent to redraw as vectors, or accept PNG for marketing use only. Second, small glyphs at small sizes are exactly where dense-detail rendering is weakest; generate large and check at the size you will ship. For UI icons you will use in a real product, an icon library plus your own adjustments is still faster than generating. ### UI mockups: useful for exploration, not for design You can ask Images 2.5 for a dashboard or an app screen and get something that looks like one. Use that for mood and direction: a client conversation about density or tone, a thumbnail for a pitch, a Sketch-driven layout exploration where you draw the rough structure and let the model render a version. It is a fast way to see three directions in a minute. Do not use it as the design. The text is still where it goes wrong: labels, numbers and small type can come out plausible but wrong, and nothing in the output is a real component. The moment you need exact spacing, a type scale or a state, move to a tool that produces structure. That is Claude Code, Codex, Claude Design or Figma, with the mockup as reference. In Codex specifically, the good pattern is the reverse: let GPT-6 Astra build the real page and call Images 2.5 for the imagery inside it, which is what the Astra test did with 2.0. PICK|Hero and section imagery|Yes|Consistency across edits makes a matching set practical. PICK|Illustration sets|Yes|Specify the style once, reference the first image for the rest. PICK|UI icons|With care|Raster output; redraw as SVG for product use. PICK|UI mockups|Exploration only|Text and structure are not reliable; build the real screen elsewhere. PICK|Photo of a real product|Yes|Better reference fidelity than 2.0; give it clean product shots. ### Where it still breaks Typography and dense small text. Better than 2.0, not solved. Any image whose job depends on readable words needs the words added in a design tool afterward. Structured graphics. Charts, tables, dense diagrams and anything with alignment as a requirement come out approximately right, which for that class of image is wrong. Drift on long edit chains. Consistency is much improved, and Sunburst is tuned for it, but past a handful of edits it is still faster to restart from the best version than to keep patching. Rights and provenance. Nothing in the 2.5 release changes the questions about using generated imagery commercially, using someone's likeness as a reference, or generating in a living artist's style. Keep your reference images to ones you own. ### FAQ What is new in ChatGPT Images 2.5? Faster generation (up to 50% lower latency than 2.0), more natural lighting and texture, better preservation of subjects from reference photos, edits that stay consistent across turns, comment-based editing, a Sketch tool and templates. Released September 8, 2026. Is ChatGPT Images 2.5 free? OpenAI says it is rolling out to all ChatGPT, ChatGPT Work and Codex users across tiers. What differs by tier is how many images you can generate before waiting, and OpenAI does not publish those numbers. What is the difference between GPT-Image-2.5 Flare and Sunburst? Both are API models with the same price. Flare is the fast default; Sunburst takes longer and is tuned for tighter control across edits. Inside ChatGPT you get Images 2.5 without choosing. Can Images 2.5 design a UI? It can render something that looks like a UI, which is useful for exploring direction. It does not produce reliable text, components or spacing. Use it for reference and build the screen in a design or coding tool. Can it generate icons for a website? Yes, as a consistent raster set if you specify the style precisely and reference the first icon. For product UI, redraw the set as SVG or use an icon library. Does Images 2.5 work in Codex? Yes. OpenAI lists Codex in the rollout, so an agent building a page can generate the page's imagery in the same session. ### Where this fits Images 2.5 makes the imagery half of an AI-built site faster and more consistent; it does not make the design half. Pair it with an agent that produces real structure, and treat the generated image as a component you art-direct rather than a page you accept. For the rest of the Codex-side workflow, start here: https://griffinwooldridge.com/blog/codex-for-designers --- # How I Built an iOS App With Claude Code as a Designer (and Shipped It) URL: https://griffinwooldridge.com/blog/build-ios-app-with-claude-code Published: 2026-09-13 Author: Griffin Wooldridge I am a designer, not an engineer, and Rolltake is a native SwiftUI teleprompter that is live on the App Store. Claude Code wrote the Swift, built to my iPhone, diagnosed a freeze the simulator never showed, and drove App Store Connect. I made the product calls. Here is the workflow, what broke, and what I would change. Rolltake is a teleprompter for iPhone. You write or import a script, it scrolls under a fixed reading line so your eyes stay on the lens, and you can record from the front camera with the prompter overlaid. Bluetooth remotes, a mirror mode for beam-splitter rigs, an Apple Watch companion. Everything is on-device: no account, no network, no tracking. Free, native SwiftUI, iOS 17 and up. I have never written a Swift file by hand. The whole thing was built through Claude Code, deploying to a real iPhone 17 Pro Max on every substantive change. This is the honest version: what Claude Code owned, what I owned, and the bugs that only showed up on hardware. ### Why build a teleprompter at all? Every prompter app I tried either nagged for a subscription, watermarked the take, or made speed a vague slider that meant something different on every script. I wanted one that felt like Apple built it: open it, load your words, press play. The other reason was the experiment. Designers keep asking whether you can build a real native app with Claude Code and ship it. The App Store listing is the answer. ### What Claude Code did, and what I did Claude Code wrote all the Swift. The stack is native Apple frameworks with no cross-platform layer: SwiftUI, SwiftData for persistence, a CADisplayLink scroll engine, UITextView for text rendering, AVFoundation for recording, CoreBluetooth and GameController for remotes, WatchKit, and a StoreKit 2 scaffold that ships dormant. XcodeGen generates the Xcode project from a `project.yml`. It also ran the pipeline: builds, device installs, simulator screenshots, an ffmpeg transcode for App Review, and the App Store Connect submission through Chrome automation, all from the same session. I did the designer's job. I decided what the app was and was not (no Android, no audio-only mode, no Live Activity, paywall off). I picked the name and the store positioning. I made the calls on speed levels, reading line, themes, and typefaces. And I was the eyes on the device, because the simulator cannot prove camera, haptics, Bluetooth, or rotation. Product judgment on my side, implementation and tooling on Claude Code's side, the phone as referee. For how I brief Claude Code on visual work in general, see https://griffinwooldridge.com/blog/claude-fable-5-for-ui-design-how-to-get-beautiful-output-every-time ### The workflow: a real iPhone in the loop The loop was edit Swift, `xcodegen generate`, `xcodebuild` for the device, `xcrun devicectl device install` and launch, verify, iterate. Every substantive change went to the physical phone, signed with free provisioning (seven-day expiry, `-allowProvisioningUpdates`). Each surface had a job: LIST|Physical device via devicectl: the source of truth. Performance, feel, camera, haptics, and BLE were only claimed after a run here. LIST|iOS Simulator: fast functional checks and screenshots. Two limits: it runs on the Mac CPU, so it does not reproduce device-only performance, and its tap injection uses points (402x874 on a 17 Pro), not pixels. LIST|`xcrun simctl io screenshot`: clean 1320x2868 frames for the 6.9-inch App Store slot. LIST|Chrome automation: drove App Store Connect for the submission. Tests were a 25-case XCUITest suite covering create, edit, rename, duplicate, delete, sort, search, prompter scroll, sentence navigation, and export. It finished 25 for 25 green with a Release build compiling archive-ready for `generic/platform=iOS`. One discipline mattered more than any tool. Claude Code said out loud when the simulator could not prove something. Camera, haptics, Bluetooth, and 180-degree rotation were each flagged as needing my eyes on the device rather than reported as done. If you take one habit from this post, take that one. ### The design decisions a designer cares about Speed is a 1 to 10 level mapped to lines per second, not words per minute. WPM depends on the script and the font, so the same number scrolls at different visual paces. A level is content-independent and font-aware, so level 5 looks like level 5 on any script. I rejected the WPM display outright. Appearance lives with the script. Each `Script` model holds its own font size, line spacing, margin, typeface, theme, reading-line position, speed level, and mirror setting. App-wide last-used defaults live in UserDefaults, so a new script inherits the look you just set. The polish pass was where the designer role paid off most. The camera-active state became an opaque accent chip with a white glyph so it reads on any background. Slider endpoints became tappable glyphs that nudge one step and repeat on hold. Haptics for record start and stop, countdown ticks, and back-a-sentence. The recording timer moved to top-center, clear of the text. Rename stopped bumping a script to the top of Newest First, because organizing is not authoring. None of those are engineering decisions. You only notice them with the phone in your hand reading a real script, which is where a designer should be while Claude Code handles the Swift. ### What broke The interesting bugs were one bug in different clothes. In a screen presented from a SwiftData `@Query` list, every write to the shared `@Model` triggers an app-wide re-render. The worst version was a hard freeze on opening a script. The prompter screen's `init` applied stored appearance defaults to the script, which wrote to the model, which invalidated the list's `@Query`, which rebuilt the full-screen cover, which ran `init` again. About 11,600 re-inits in 50 seconds. The simulator never reproduced it: a fresh install had no stored defaults, so the write never ran. Only phones with prior use froze. Assigning an identical value to a SwiftData property still fires a change notification. After two wrong guesses, Claude Code instrumented it. An on-device perf log flushed a timestamped line at each mark; a main-thread hang stops after the last written line, so the gap points at the culprit. Pulled off the phone with `xcrun devicectl device copy from`, the log showed thousands of `init` lines. Render loop, not layout cost. The same root cause explained a report that speed, typeface, color, mirror, and the sliders were all reverting: `init` re-ran on every parent re-render and wrote stored defaults back over the user's fresh edit. Moving the apply step into a one-shot `onAppear` guarded by a `@State` flag fixed every control at once. One more. A refactor deferred `context.insert` until the user typed and pushed an uninserted model into the navigation path; inserting it mid-edit changed its persistent identifier and the script vanished. That broke 13 UI tests in one run, which is how it was caught. The throughline: treat SwiftData writes as global re-render triggers, keep hot-path edits in local state, never do side effects in a View's `init`, and verify feel on hardware. ### App Store submission and the naming pass The app started as Cuey, was briefly Rollcue, and shipped as Rolltake. More than 85 candidates were run against the iTunes Search API (the real App Store index), Google Play, PyPI, and npm. Rollcue had two exact App Store collisions. Prompteer collided with an AI-prompting app and a Python package. Rolltake came back clean everywhere, with only a same-name sports podcast in a different trademark class. The rename then ran across the whole codebase in one pass (directories, targets, bundle IDs, type names, color token, StoreKit product IDs, docs), automated with `find -print0 | xargs -0 perl -i` and checked with a residual grep. The ASO decision was to list as `Rolltake - Teleprompter`, brand plus the highest-volume head keyword, so it indexes on "teleprompter" while keeping a defensible brand. The home-screen name stays plain Rolltake. Subtitle is `Scripts, prompter & remotes`, three feature nouns that are also keyword roots not in the title. Primary category is Photo & Video, where the audience is; secondary is Productivity. Screenshots were six real in-app frames at 1320x2868. The watch and remote renders built for the landing page stayed out of the store set, because Guideline 2.3.3 requires real app UI. Apple came back with Guideline 2.1, Information Needed: the routine request for a demo video and written answers on a new app, not a bug rejection. No code changed. The one gotcha was the attachment field refusing a 399 MB HEVC screen recording; an ffmpeg transcode to 7.4 MB H.264 went through. Resubmitted, approved, live. ### What I would do differently Put a used device in the loop from day one. The freeze only existed on a phone with prior state; a clean simulator hid it. Instrument before the second guess, not after it. The flush-per-line log cracked the freeze in one run after two speculative fixes failed. Write the UI tests earlier. The lost-scripts bug was caught because 13 tests failed at once. Keep the scope cuts. No Android (a rewrite, not a toggle), no audio-only mode, no Live Activity (the app is foreground and full-screen, so it would never show), and the paywall dormant behind `ProGate.enabled = false`. Each still looks right. For where a designer's time goes in these tools, see https://griffinwooldridge.com/blog/ai-native-designer-roadmap ### FAQ Do you need to know Swift to build an iOS app with Claude Code? I did not write any Swift by hand and Rolltake shipped. You do need to follow what Claude Code explains, make product decisions, and test on a real iPhone. Knowing SwiftUI would have shortened the SwiftData debugging, but it was not required. Can Claude Code use Xcode? It drives the toolchain from the terminal: xcodegen for the project, xcodebuild for builds, xcrun devicectl to install and launch on a physical iPhone, and xcrun simctl for simulator screenshots. I opened Xcode's Organizer for the final archive and upload. Is Rolltake free? Yes. The whole app is free at launch: prompter, camera recording, Apple Watch and Bluetooth remote control, and mirror mode. No subscription, no ads, no account, no in-app purchases. A StoreKit 2 scaffold exists but ships switched off. What does it cost to build and ship an app this way? Rolltake is free to download. To build you need a Mac with Xcode, an Apple Developer account for distribution signing (free provisioning covers device testing with a seven-day expiry), and a Claude Code subscription. I did not track total spend, so I will not invent a number. Why speed levels instead of words per minute? WPM depends on the script and the font, so the same number scrolls at different visual paces. Rolltake uses a 1 to 10 level mapped to lines per second, which is content-independent and font-aware. The WPM display was rejected as misleading. ### Where this fits A designer can ship a native iOS app with Claude Code. The part that needs you is the part that always did: deciding what the product is, noticing what feels wrong on the phone, and refusing to claim something works until you have seen it work. Rolltake is on the App Store at https://apps.apple.com/us/app/rolltake-teleprompter/id6806368467 and the web version is at https://rolltake.app/app/ --- # I Tested GPT-6 Astra for Web Design (with Images 2.0) URL: https://griffinwooldridge.com/blog/gpt-6-astra-web-design-test Published: 2026-09-07 Author: Griffin Wooldridge I gave OpenAI's GPT-6 Astra a high-end landing page brief inside Codex and let it design, code, and generate every custom image with ChatGPT Images 2.0 in one pass. Here is what it built, where it broke, and how it compares to Fable 5.1 and Claude Code from a designer's perspective. GPT-6 Astra is OpenAI's most capable general-purpose model yet, with big gains in coding, tool use, computer use, and long-running agentic tasks. The part I cared about was different: what happens when you pair that intelligence with ChatGPT Images 2.0, OpenAI's image generation model, inside a single Codex workflow. The biggest limitation of AI-generated websites has never been the code. It has been the imagery. You can get a decent landing page in minutes, but custom visuals that fit the art direction, sit inside the layout, and feel like one brand have stayed hard. So I gave Astra a demanding brief for a fictional travel app called Roam and let it handle design, code, interactions, and imagery in one pass. Short version: this is my favorite method for building image-heavy websites right now, and the reason is the combination of capabilities rather than any single benchmark. ### What is GPT-6 Astra? GPT-6 Astra is OpenAI's newest flagship model. It launched the same week Anthropic shipped Claude Fable 5.1, so the two are being compared everywhere. My designer's test of 5.1 is here: https://griffinwooldridge.com/blog/claude-fable-5-1-ui-design-test On OpenAI's published benchmarks, Astra beats Fable 5.1 on five of six shared rows, including BenchCAD, FrontierMath Tier 4, DeepSWE, Terminal-Bench, and AutomationBench. Fable 5.1 still wins Humanity's Last Exam with tools. A model that crushes technical benchmarks is not automatically a good designer, though. Benchmarks measure whether it can complete tasks. They say nothing about whether it has taste, and taste is something you have to test for yourself. That is why this review is from a designer's perspective rather than an engineer's. ### GPT-6 Astra vs Fable 5.1: pricing and cost per task Pricing looks identical at first glance. Both models list at $10 per million input tokens and $50 per million output tokens, though Fable 5.1's cached input is cheaper at $0.25 versus $1.00. Artificial Analysis's measured cost per task tells a different story: GPT-6 Astra comes in about 56% cheaper on the same work because it needs fewer tokens to finish. So on paper GPT-6 is more powerful and cheaper. That still does not tell you whether it can establish a visual direction, keep a brand coherent across sections, or make an image feel like it belongs in a layout. For the full model-versus-model design comparison from the previous generation, see https://griffinwooldridge.com/blog/gpt-5-6-vs-fable-5 ### Why Images 2.0 gives Codex an edge over Claude Code I use Claude Code for most of my work, and I pay for a ChatGPT subscription on top of it for one reason: a native image generation model. Claude Code has no built-in image model. I sometimes use the Higgsfield MCP to generate images from Claude Code, but it is only free up to a point, and then I am paying a third bill. Inside Codex, Images 2.0 is right there. The model can decide what visuals a section needs, generate them, and build the interface around them without a hand-off between tools. For web design specifically, that closes the gap that has been holding AI-built sites back. If you are new to Codex, my setup and workflow guide is here: https://griffinwooldridge.com/blog/codex-for-designers ### The Roam landing page: what GPT-6 Astra built I wanted the page to lean hard on generated imagery and interactive scroll effects so the visitor gets something cinematic rather than a standard SaaS layout. Astra delivered a full-bleed hero, a card stack that fans out as you scroll, and a series of destination sections with oversized type over Images 2.0 photography. In my opinion the imagery on this site could pass as real photography. We all know what an AI-slop image looks like, and none of these read that way. Once the hero image existed, GPT-6 layered a cursor-following distortion effect on top of it, so the hero responds to the visitor's mouse. A generated image plus a coded interaction on top of it is the whole point of this workflow. Astra also kept the type system and the orange asterisk brand mark consistent across every section, including the quieter content blocks that most AI builds get lazy on. ### The prompt: one pass, no separate image step I did not ask ChatGPT to generate images and then bring them into the project. I started with a single prompt, said I wanted the page to seriously flex Codex's visual and image-related capabilities, and included one line: use Images 2.0 wherever custom imagery would improve the experience. I listed the sections I wanted, gave guidance on look and feel, and pasted a few links to websites that do immersive scroll experiences well so it had references to work from. That is what makes this different from every image workflow I have used before. Image generation stops being a fragmented step before or after the build and becomes part of the design process itself. For more on writing briefs that get good UI out of these models, see https://griffinwooldridge.com/blog/ai-prompts-for-ui-design The reference links did a lot of work in that prompt. If you want a repeatable source of them, these are the five reference sites I give agents: https://griffinwooldridge.com/blog/ai-ui-design-reference-sites ### GPT-6 usage limits on the ChatGPT Plus plan One honest caveat. I hit my Codex usage limit fast, even on light reasoning mode, because of how much GPT-6 consumes per turn. I am on the $20 per month Plus plan. If you are on a Pro plan with 5x or 20x usage you will feel this much less. My recommended strategy right now: use GPT-6 Astra for the first prompt only and let it get 90% of the way there. Once the imagery, effects, and section layouts exist, drop to a cheaper model like GPT-5.6 for bug fixes and polish. You do not need the most expensive model to tone down a warp effect. ### Add a quiet view to effect-heavy sites A page this effect-heavy needs an escape hatch. I had Astra add a toggle in the bottom-left corner I call a quiet view. Click it and you land on a near-static version of the same site: no scroll effects, no cursor distortion, same imagery and copy. It is a good option for visitors who do not care about the show and just want to get through the page, and it doubles as a performance mode. ### Does it hold up on mobile? Sites with this many dynamic elements often fall apart on mobile, so I checked it inside Codex's browser using Chrome's device toolbar at iPhone 15 Pro Max width. A few bugs here and there, but overall a solid interactive mobile experience. The hero, cards, and destination sections all restacked. On a phone I would still prefer the quiet view so the imagery gets the attention and the device does not have to run every effect. ### Results at a glance PICK|Best for|Image-heavy landing pages|Astra plus Images 2.0 generates the visuals and builds the layout around them in one prompt. PICK|Biggest advantage over Claude Code|Native image model|Codex has Images 2.0 built in; Claude Code needs a third-party MCP and a separate bill. PICK|Best workflow|Astra first, GPT-5.6 after|Let Astra do the first 90%, then switch models for fixes to stretch a Plus plan's limits. PICK|Watch out for|Usage limits and mobile bugs|A $20 Plus plan runs dry fast, and effect-heavy pages need a quiet view for phones. ### Final verdict: is GPT-6 Astra good for web design? Yes, and the bigger story is the combination of capabilities. Astra being better at coding or reasoning is useful, but designers already have very capable models for that. What makes this workflow powerful is giving the model Images 2.0 and letting it treat imagery as part of the design process. It can decide what visuals it needs, generate them, build the interface around them, and layer on animation, shaders, 3D, and interactions that would normally take several tools. This does not replace taste or strong creative direction. If anything those get more important as the tools get more capable. But the gap between having an idea and producing a solid, visually rich experience is getting ridiculously small, and for designers that is the part of GPT-6 Astra worth paying the most attention to. For the broader stack of tools I use alongside Codex, see my complete AI design tools guide: https://griffinwooldridge.com/blog/ai-design-tools ### FAQ Is GPT-6 Astra good for web design? Yes. In this test it produced a coherent, image-heavy landing page with scroll effects, a cursor-following hero, and consistent typography from a single prompt. Its real advantage is having ChatGPT Images 2.0 built in, so it can generate custom imagery as part of the build. What is ChatGPT Images 2.0? Images 2.0 is OpenAI's image generation model, available inside ChatGPT and Codex. In this workflow GPT-6 called it directly to create hero and section photography that fit the art direction, with no separate image step. Is GPT-6 Astra better than Claude Fable 5.1 for design? On OpenAI's benchmarks Astra scores higher and costs about 56% less per task. For design work the deciding factor was imagery: Codex has a native image model and Claude Code does not. For pure UI judgment both are strong, and I still use Claude Code for most of my work. Can you use Images 2.0 inside Codex? Yes. Add a line like use Images 2.0 wherever custom imagery would improve the experience to your prompt, and Codex will generate and place images as it builds the page. How do I avoid hitting GPT-6 usage limits? Use Astra for the first prompt only, then switch to a cheaper model such as GPT-5.6 for bug fixes and polish. Pro plans with 5x or 20x usage feel the limits far less than the $20 Plus plan. Does GPT-6 Astra output work on mobile? Mostly. At iPhone 15 Pro Max width the page restacked correctly with a few bugs. For effect-heavy sites, ship a quiet view toggle that disables scroll and cursor effects. --- # I Tested Claude Fable 5.1 as a UI Designer URL: https://griffinwooldridge.com/blog/claude-fable-5-1-ui-design-test Published: 2026-09-02 Author: Griffin Wooldridge I tested Claude Fable 5.1 on a personal finance dashboard, a reference-led website redesign, and a professional video editor to find out whether its UI design judgment is actually improving. Claude Fable 5.1 is very good at producing a credible first UI direction, especially when the product has clear information architecture and realistic constraints. Across three very different tests, it made strong decisions about hierarchy, typography, spacing, density, and visual tone without falling back to the same generic AI dashboard every time. The caveat is important: it still needs designer judgment. Fable 5.1 can get you from a blank canvas to something worth reacting to in minutes, but the final 10 to 20 percent still depends on a human noticing awkward interaction choices, missing product logic, and details that look polished without being fully resolved. ### What is Claude Fable 5.1? Fable 5.1 is Claude's newer model for demanding coding and agentic work. Anthropic positions it as a stronger, more efficient successor to Fable 5, with improvements aimed at long-running tasks, self-verification, and the quality of finished artifacts. The benchmark story is useful context, but it does not tell a designer whether the model can establish a visual direction, manage hierarchy, or keep a complex interface coherent. That is why I tested the output as design work rather than treating coding scores as a proxy for taste. In the video, the agentic coding comparison shows Fable 5.1 reaching a similar score at low effort to Fable 5 at high effort. The more practical question is whether that capability turns into noticeably better interfaces. OpenAI shipped GPT-6 Astra the same week. I gave it a very different brief, an image-heavy landing page built with Images 2.0 inside Codex, and the comparison is worth reading alongside this one: https://griffinwooldridge.com/blog/gpt-6-astra-web-design-test ### How I tested Fable 5.1 for UI design I used three briefs that stress different parts of interface design. The finance dashboard tests hierarchy, data visualization, density, and polish. The personal-site redesign tests art direction, typography, and the model's ability to learn from references. The professional video editor tests whether it can organize a genuinely complex workspace without flattening everything into a simple web-app layout. Each test started with a clear product goal. I reviewed the first pass like a designer, then gave one focused round of feedback. That matters because a useful AI design tool should not only produce an attractive screenshot; it should respond intelligently when the direction needs refinement. ### Test 1: a personal finance dashboard from scratch The first challenge was a premium desktop personal finance dashboard with no visual references. I wanted to see what Fable 5.1 would invent on its own, and whether it could make a data-heavy product feel calm rather than crowded. This was the strongest result. The interface establishes a clear reading order around net worth, uses quieter type for supporting values, and reserves color for trends and meaningful states. The chart, cash accounts, liabilities, navigation, and secondary data all feel like parts of one system rather than separate generated cards. Fable also added working touches such as chart tooltips and a consistent dark theme. A few navigation decisions were more decorative than product-driven, but the visual hierarchy and density were unusually controlled for a first pass. ### Test 2: redesigning my personal website with real references For the second test, I asked Fable 5.1 to redesign griffinwooldridge.com as a polished, modern portfolio. This time I did not want the model relying only on its training data, so I had it research relevant patterns through the Mobbin and 21st.dev MCP servers before designing. That reference layer helped. The final direction kept the site's editorial content and monochrome foundation, then pushed the typography, scale, and composition into something more expressive. The oversized name, restrained navigation, split hero, and project framing feel intentional rather than like a portfolio template with different copy dropped in. The weak spots appeared when visual direction met implementation detail. Some spacing and interaction choices still needed correction, and the model occasionally optimized for a dramatic screenshot over the way the page should behave. Even so, the art direction was strong enough to prove that grounded references materially improve AI-generated UI. The five reference sites I rotate between, and the order I use them in, are laid out here: https://griffinwooldridge.com/blog/ai-ui-design-reference-sites. The Mobbin MCP setup itself is here: https://griffinwooldridge.com/blog/mobbin-mcp-claude-code-design-references Want the same reference workflow? Get 20% off Mobbin here: https://mobbin.com/griffin ### Test 3: designing a professional video editor The final brief was deliberately harder: create a full professional video editor from scratch. A convincing editor needs a timeline, preview, media and tool panels, tracks, transport controls, inspectors, and dozens of small states, all competing for limited space. Fable 5.1 produced a surprisingly credible professional shell. The timeline dominates the lower workspace, the preview remains visually central, and the surrounding tools are dense without becoming unreadable. It understood the visual grammar of a desktop creative tool instead of turning the brief into another dashboard. Interaction depth was the real limit. Dragging clips, managing tracks, trimming media, and handling selection states expose product decisions that cannot be solved by surface polish alone. Still, getting this much coherent structure from one prompt makes the result an excellent prototype and a strong foundation for iteration. ### Results at a glance PICK|Best visual result|Personal finance dashboard|The clearest hierarchy, most controlled density, and strongest use of realistic data. PICK|Best art direction|Personal website redesign|Real references from Mobbin and 21st.dev pushed it beyond a generic portfolio template. PICK|Most ambitious result|Professional video editor|A convincing pro-app shell with a real timeline, panels, tools, and dense controls. ### What Fable 5.1 did well The biggest improvement is that the model can make different products feel different. The dashboard is restrained and analytical, the portfolio is editorial, and the video editor is dense and utilitarian. That range is a better signal of design ability than one beautiful landing page. It was consistently strong at three things: Establishing a clear visual hierarchy before adding detail. Using typography, spacing, and contrast as a system rather than styling each component independently. Holding a coherent direction across a large interface without obvious visual drift. ### Where it still needs designer judgment Fable 5.1 can make an interface look resolved before the underlying product decisions are resolved. That is the point where a designer has to slow down and ask whether navigation maps to real destinations, whether controls have useful states, whether dense information can be scanned, and whether dramatic layout choices survive smaller screens. It also benefits from a tightly scoped feedback round. General feedback such as `make it better` gives the model too much room to rewrite the direction. Specific feedback such as `reduce the chart emphasis, tighten the table density, and preserve the existing type scale` produces a much more controlled second pass. For repeatable output, put those visual rules in an `AGENTS.md` file instead of re-explaining them in every prompt: https://griffinwooldridge.com/blog/agents-md-for-design-projects ### Final verdict: is Claude Fable 5.1 good at UI design? Yes. Fable 5.1 is genuinely good at UI design, especially as a first-pass design partner. It can turn a strong brief into a coherent visual system, handle much more interface density than earlier models, and create a useful direction quickly enough that your time shifts from blank-canvas production to critique and refinement. My ranking was the personal finance dashboard first, the professional video editor second, and the website redesign third. The dashboard was the most complete, while the editor was the most ambitious and structurally impressive. The website redesign had a strong visual direction, but it needed the most correction when the art direction met responsive behavior and implementation detail. It is not replacing the judgment of a good designer. It is compressing the time required to reach something worth judging. That is a meaningful change: instead of spending hours making the first draft coherent, you can spend that time directing the work, testing the interaction model, and polishing the decisions that matter. Everything in the original Fable 5 prompting guide still applies to 5.1, including the design-system-first prompt and the effort dial: https://griffinwooldridge.com/blog/claude-fable-5-for-ui-design-how-to-get-beautiful-output-every-time ### How to get better UI from Fable 5.1 Treat the model like a design collaborator, not a slot machine. Define the product, users, core tasks, density, and visual constraints before asking it to build. Give it real references when art direction matters, and explain what to learn from those references instead of asking it to copy them. Then review the first pass in layers: hierarchy first, layout second, interaction logic third, and surface polish last. One focused feedback round is usually more effective than a long list of disconnected visual tweaks. If you are using Claude Code, start here: https://claude.ai/referral/QKgwnTDdgw . For real interface references, get 20% off Mobbin here: https://mobbin.com/griffin . For the broader tool stack, see my complete AI design tools guide: https://griffinwooldridge.com/blog/ai-design-tools ### FAQ Is Claude Fable 5.1 good for UI design? Yes. In these tests it produced strong hierarchy, typography, spacing, and visual direction across a finance dashboard, portfolio redesign, and professional video editor. It is strongest as a high-quality starting point that a designer then directs and refines. What was the best Fable 5.1 UI result? The personal finance dashboard. It had the best balance of hierarchy, density, realistic data, and polish, with a clear net-worth focal point and quieter supporting information. Can Fable 5.1 design complex professional software? It can create a convincing structure. The video editor included a preview, timeline, tracks, panels, and controls, but deeper editing behavior still requires product judgment and iteration. Do design references improve Claude's UI output? Yes. The website redesign used Mobbin and 21st.dev references, and its visual direction was more distinctive than a reference-free portfolio prompt. References reduce guessing and give the model proven patterns to reason from. Does Fable 5.1 replace UI designers? No. It accelerates the path from a blank canvas to a coherent first draft. Designers still provide taste, interaction logic, prioritization, accessibility decisions, and the final quality bar. --- # How to Turn a Figma Design into Code with AI URL: https://griffinwooldridge.com/blog/figma-to-code-with-ai Published: 2026-08-17 Author: Griffin Wooldridge Turning a Figma design into clean, working code used to be the slowest handoff in the process. AI agents have collapsed it, but only if you set them up right. Here's how to go from a Figma frame to production code without the mess. The handoff from design to code has always been where quality leaks out: spacing drifts, tokens get approximated, and the built version is almost-but-not-quite the design. AI agents can now turn a Figma frame into working code directly, which is genuinely a big deal, but the naive version of it produces a mess. The difference is entirely in the setup. Here's the approach that gets clean, on-system code out of a design, instead of a brittle pixel-copy you have to rebuild anyway. ### Why the naive approach fails Hand an agent a flat screenshot of a Figma frame and say "build this," and you'll get something that looks close and is structurally wrong: absolute-positioned divs, hard-coded pixel values, invented color names, no reuse of anything you already have. It looks right in one viewport and falls apart everywhere else. The problem is that a screenshot throws away everything that makes the design a system: the variables, the components, the intent. Good output needs that context back. ### Give the agent your real design context The single biggest upgrade is connecting the agent to your actual Figma data instead of an image. Figma's MCP server exposes your selected frames, variables, and components, so the agent writes code that references your real tokens and component names rather than guessing at them. This is why an MCP setup matters so much for design-to-code specifically. The servers worth connecting, and how: https://griffinwooldridge.com/blog/mcp-servers-for-designers ### Point it at your components, not a blank slate Even with good context, an agent will happily invent a new button if you don't tell it not to. State the rule up front: reuse the existing components and tokens, don't create new primitives. The durable place for this is an AGENTS.md file in your repo, so the agent applies it on every task without you repeating yourself. How to write one that keeps output on-system: https://griffinwooldridge.com/blog/agents-md-for-design-projects ### Describe intent, not just the frame Tell the agent what the screen does and how it should behave, not just how it looks. Which elements are primary, what should happen on smaller screens, which parts are interactive. A frame is a single state; real code has to handle all of them, and the agent makes far better calls when it knows the intent behind the pixels. The same prompting principles that get good UI generation apply here: https://griffinwooldridge.com/blog/ai-prompts-for-ui-design ### Review like a designer, iterate in passes Treat the first output as a rough draft and review it the way you'd review a junior dev's PR: check the spacing against your scale, confirm it used your tokens, resize the window. Then fix one thing at a time with specific instructions, not a giant rewrite. Small, targeted passes preserve what's already right. The goal is a fast loop where each pass gets measurably closer to the design, not one-shot perfection. ### Which tool for this job Any of the strong agents can do design-to-code well once it has context. Claude Code is a great default; Codex is especially strong on larger, logic-heavy builds; Cursor keeps you in a visual editor with more hands-on control. Pick per task, and learn one deeply before adding a second. Designer-focused walkthroughs: https://griffinwooldridge.com/blog/codex-for-designers and https://griffinwooldridge.com/blog/cursor-for-designers . For the full landscape, start at the guide: https://griffinwooldridge.com/blog/ai-design-tools Not in Figma at all? Brilliant is a free, AI-native alternative with MCP built in: https://griffinwooldridge.com/blog/brilliant-figma-alternative ### What changed at Config 2026 Figma's Config 2026 (June 23-24) moved a lot of this workflow inside Figma itself. Figma Motion adds timeline animation with keyframes and easing, inspectable in Dev Mode with CSS, JSON and React export. Custom shader effects and generative plugins are both in open beta: you describe the effect or the tool and the Figma agent builds it. The one to watch for design-to-code is Code Layers, in closed beta since July: working code sits on the canvas as a layer next to your frames, so you can explore directions in code and design side by side. The waitlist is at https://www.figma.com/config-betas The MCP server grew too. As of September 2026 it exposes 29 tools in five groups, including code-to-design writes and generative plugins, which means the agent can push work back into Figma rather than only reading from it. The setup in this post still applies; the server just does more once it is connected. ### FAQ Do I need Figma's MCP, or is a screenshot enough? A screenshot works for a quick throwaway, but for anything you'll actually ship, connect the real Figma context. It's the difference between code that references your system and code that guesses at it. Will AI-generated code match my design system exactly? Only if you give it the system: your tokens via Figma context, your components via an AGENTS.md rule to reuse them. Without that, it approximates, which is where drift comes from. Is design-to-code going to replace front-end developers? No. It collapses the tedious first-draft step and hands designers more reach, but judgment about architecture, edge cases, and accessibility still matters. It's leverage, not a replacement. --- # The Best MCP Servers for Designers (2026) URL: https://griffinwooldridge.com/blog/mcp-servers-for-designers Published: 2026-08-17 Author: Griffin Wooldridge MCP servers let AI tools like Claude reach outside their training data, into real design references, production component libraries, and your own design system. Here are the ones worth connecting as a designer, what each one does, and how to set them up. Most AI design tools are boxed in by whatever they saw during training. MCP, the Model Context Protocol, is the standard that lets them reach out to live sources instead: a library of real app screens, a set of production components, your Figma file, your project's own docs. For designers, this is the difference between an agent that guesses at a screen and one that designs from evidence. There are a lot of MCP servers now, and most of them are built for engineers. This is the short list that changes how you design. I use these daily and make videos about them for 30,000+ designers, so this is the practical cut, not a directory. ### What an MCP server does Think of an MCP server as a specialized tool you plug into an AI agent. Once it's connected, the agent can call that tool mid-task: fetch a reference, pull a component, read a file. You don't script any of it; the agent decides when the tool is useful and uses it in the flow of the work. The reason this matters for design specifically is grounding. The single biggest cause of generic AI UI is asking a model to invent a screen from vague taste words. MCP servers give the model something real to work from, which is exactly what raises the quality floor. ### Mobbin: real design references The Mobbin MCP connects a library of 600,000+ real, shipped app screens to Claude Code. Instead of inventing a settings page, the agent can look at how a dozen real products actually solved that page, then design from those patterns. It's the closest thing to a cheat code for making AI output stop looking generic. This is the first server I'd add if you only add one. Full setup and a real workflow: https://griffinwooldridge.com/blog/mobbin-mcp-claude-code-design-references Mobbin sits alongside Refero, 21st.dev, Transitions.dev and Beautiful UI in my reference stack; here is how I sequence them: https://griffinwooldridge.com/blog/ai-ui-design-reference-sites ### Relume: production web components Where Mobbin gives you references, the Relume Library MCP gives you buildable parts: 1,000+ real, production web components and wireframe sections that plug straight into Claude. Rather than generating markup from scratch, the agent assembles pages from proven components, which is both faster and far more consistent. Reference-first plus component-first is a strong pairing. Here's how Relume works and why it fits: https://griffinwooldridge.com/blog/relume-mcp ### Figma's MCP: your own design system Figma ships an MCP server that exposes your actual design context: selected frames, variables, and components. Connected to an agent, it means the code the agent writes can reference your real tokens and component names instead of inventing a parallel system that only looks close. As of September 2026 the official server exposes 29 tools in five groups: design to code, code to design, design systems and Code Connect, generative plugins and shaders, and account. Eleven of them write, so the agent can create files and native Figma content as well as read your selection. If your team already lives in Figma, this is the server that keeps AI-generated work on-system rather than on-vibes. Point the agent at a selection and ask it to build from the variables it finds, not from guesses. If you have moved off Figma, Brilliant, a free AI-native alternative, also supports MCP: https://griffinwooldridge.com/blog/brilliant-figma-alternative ### Miro: whiteboard and workflow context Miro's MCP brings the messy, upstream part of design into the loop: flows, research notes, and the board where a feature is still being figured out. An agent that can read the board understands intent before it draws pixels, which is where a lot of AI design work goes wrong. I walked through using Miro's AI collaboration layer with an MCP here: https://griffinwooldridge.com/blog/miro-ai-design-workflows-claude-mcp ### Stitch and Paper: two newer servers worth a look Google Stitch generates UI from prompts, and its MCP server (`npx -y @google/stitch-mcp@latest`) lets Claude Code, Cursor or Antigravity ask Stitch for a screen and then build it in your codebase in one pass. Google also publishes a set of Agent Skills for it that work across those same agents. Paper is a newer design tool built around agents. Its MCP server exposes 25 tools, per Paper's docs, and they read and write: an agent can create artboards, set text, update styles, grab screenshots and pull the JSX or Tailwind for any node. It supports Cursor, Claude Code, Claude Desktop, Codex, GitHub Copilot and Antigravity. Neither replaces Mobbin or Figma in my stack yet, but if you want the agent to draw as well as read, these are the two to try. The video above walks through the whole setup. ### How to add an MCP server The mechanics are the same across most servers, and you only do it once per tool. In short: - Find the server's connection details (a URL for hosted servers, or a command for local ones). The provider's docs give you this. - Open your agent's MCP settings. In Claude Code that's the MCP config; other tools have an equivalent. - Add the server, authenticate if it asks, and restart the agent so it loads. - Confirm it worked by asking the agent to use it once ("search Mobbin for checkout screens"). Start with one server, get comfortable with how the agent calls it, then add the next. A stack of three you actually use beats ten you connected once and forgot. ### FAQ Do I need to be technical to use MCP servers? No. Connecting a server is a one-time settings step, and after that the agent handles the calls. If you can install a plugin, you can add an MCP server. Which MCP server should a designer add first? Mobbin, for real design references. It has the biggest single effect on output quality because it stops the model from inventing screens from nothing. Are MCP servers only for Claude? No. MCP is an open standard, so the same servers work across tools that support it, including Claude Code, Cursor, and others. The setup screen differs but the server is the same. --- # How to Write an AGENTS.md File for Design Projects URL: https://griffinwooldridge.com/blog/agents-md-for-design-projects Published: 2026-08-17 Author: Griffin Wooldridge AGENTS.md is a plain-text file that tells AI coding agents how your project works: your stack, your design system, your conventions. Getting it right is the difference between an agent that produces on-brand UI and one that guesses. Here's exactly what to put in it as a designer. If you've used Codex, Cursor, or Claude Code and gotten UI that's technically correct but off-brand, the fix usually isn't a better prompt. It's a file. AGENTS.md is a plain-markdown file in your project root that agents read automatically before they touch anything, and it's where you encode the context you'd otherwise repeat in every prompt. Most AGENTS.md examples are written by and for engineers, all build commands and test runners. This is the designer's version: what to put in it so the interface an agent produces actually looks like your product. ### Why the file beats the prompt A prompt is per-message; the agent forgets it the moment the task ends. AGENTS.md is per-project; the agent reads it every single time, on every task, without you asking. That's a fundamental difference. Anything you find yourself explaining twice belongs in the file, not the chat. It also compounds. A prompt improves one screen. A good AGENTS.md improves every screen the agent ever builds in that project, and keeps a team's AI output consistent even when different people are driving. ### The design-system section This is the part most designers skip and shouldn't. Give the agent your actual system in plain language it can apply: LIST|Color: name your tokens and their roles ("`--accent` is the single brand color, used only for primary actions; never use raw hex"). LIST|Type: your font families and a real scale, with weights. State the hierarchy rule: size and weight for emphasis, not color. LIST|Spacing: your base unit and scale (`4px` base, `8/12/16/24/32`). LIST|Components: the ones that already exist and must be reused instead of reinvented ("use the existing `Button` and `Card`; do not create new primitives"). The goal is to make on-system the path of least resistance, so the agent reaches for your tokens and components by default. ### Stack and conventions Agents produce much better code when they know the ground rules, so state them once: the framework and version, the styling approach (`Tailwind`, `CSS modules`, `styled-components`), file and folder conventions, and anything that's a hard no (`no inline styles`, `no new dependencies without asking`). Keep it concrete. `Follow best practices` tells the agent nothing. `Components live in src/components, one per file, named in PascalCase` tells it exactly what to do. ### A starter you can copy You don't need a long file. This skeleton covers the essentials, and you fill each line with your real values: LIST|`# Project`: what it is, in one sentence. LIST|`## Stack`: framework, styling, key libraries. LIST|`## Design system`: color tokens, type scale, spacing, existing components to reuse. LIST|`## Conventions`: file structure, naming, hard rules. LIST|`## Avoid`: the specific anti-patterns you keep seeing (decorative gradients, oversized headings, new components when one exists). Start there, then add a line every time the agent gets something wrong. The file gets sharper the more you use it. ### Keep it short and current A bloated AGENTS.md is as bad as none; agents weight it heavily, so stale instructions actively steer them wrong. Treat it like a living doc: when your tokens change, update the file the same day. When a rule stops mattering, delete it. This is the same context you'd hand a new designer on their first day, written for a teammate that starts fresh every task. For where AGENTS.md fits in a broader AI workflow, the tool guides go deeper: https://griffinwooldridge.com/blog/codex-for-designers and https://griffinwooldridge.com/blog/cursor-for-designers Where this file pays off most is design-to-code. Combined with the Figma MCP, it is the difference between code that reuses your components and code that approximates them: https://griffinwooldridge.com/blog/figma-to-code-with-ai. If you want to see what a real design system looks like before you describe one, the MyAryaka system I built is a good template: https://griffinwooldridge.com/design/design-system ### FAQ Is AGENTS.md the same as a Claude Code CLAUDE.md file? They serve the same purpose, giving the agent standing project context. AGENTS.md is the more widely adopted, cross-tool name; some tools look for their own filename, but the content you put in is identical. Where does the file go? In your project's root directory, so the agent finds it automatically. Larger projects can also add scoped files in subfolders for area-specific rules. I'm a designer who doesn't write much code. Is this still worth it? Yes, arguably more so. The design-system and "avoid" sections are pure design judgment, and they're what keep an agent's output on-brand no matter who prompts it. --- # How to Prompt AI for Better UI Design URL: https://griffinwooldridge.com/blog/ai-prompts-for-ui-design Published: 2026-08-17 Author: Griffin Wooldridge The gap between generic AI UI and genuinely good output is mostly the prompt. After a year of doing this daily, here's the approach that consistently gets beautiful, on-brand interfaces instead of purple-gradient slop. Give the same model a lazy prompt and a sharp one and you get two completely different designers. The models are good enough now that the bottleneck is rarely the tool; it's how you brief it. Here's the approach I keep coming back to after a year of prompting these tools daily for real work. None of this is about magic words. It's about giving the model the same things you'd give a good freelancer: references, constraints, and specific feedback. ### Give it references, not adjectives "Make it modern and clean" means nothing to a model, the same way it means nothing to a human designer. Adjectives are where generic output comes from. Instead, point at real examples: a product whose UI you admire, a specific screen, a style you want to echo. The strongest version of this is letting the model look at real shipped screens directly, which is what reference tooling like the Mobbin MCP is for: https://griffinwooldridge.com/blog/mobbin-mcp-claude-code-design-references If you want a ready-made list of where to pull references from, I use five sites in a fixed order, evidence first, components second, motion last: https://griffinwooldridge.com/blog/ai-ui-design-reference-sites ### Describe the job, not just the screen Before you ask for a layout, tell the model what the screen is for and who's using it. "A dashboard" produces a generic dashboard. "The first screen a warehouse manager sees at 6am to spot which orders are late" produces something with a point of view: the right thing is big, the noise is gone. Design decisions fall out of purpose. Give the model the purpose and it makes better decisions on its own. ### Constrain the visual system up front Ambiguity is where AI slop lives. Hand the model your system before it starts: one accent color and its job, a type scale, a spacing unit, whether it's light or dark. Constraints don't limit quality, they're the reason the output looks intentional instead of like a template. The prompting approach that gets genuinely beautiful output, in detail: https://griffinwooldridge.com/blog/claude-fable-5-for-ui-design-how-to-get-beautiful-output-every-time New to Claude for design work? The beginner walkthrough covers the basics first: https://griffinwooldridge.com/blog/claude-design-tutorial ### Iterate in small, specific passes The instinct is to write one giant prompt and hope. Better to get a rough version, then fix one thing at a time: "tighten the spacing in the header," "the primary button should be the only red element," "reduce the heading to 32px." Small, specific edits are the whole game, and they're how a real design review works too. Big vague rewrites make the model change everything, including the parts that were right. Small edits preserve what's working. UX Pilot's Global Edit and Section Edit are a good example of the same loop inside a dedicated tool: https://griffinwooldridge.com/blog/ux-pilot ### Name the anti-patterns Models have default habits, and for UI most of them are the tells of generic output: decorative gradients, oversized headings, low-contrast gray text, using color for emphasis instead of size. Call them out explicitly. A short "avoid" list in your prompt (or your AGENTS.md) does more for quality than any positive instruction. For the full map of which tools to prompt for which job, start here: https://griffinwooldridge.com/blog/ai-design-tools ### FAQ What's the single biggest prompting mistake? Using adjectives instead of references. "Modern and clean" is where generic UI comes from. Show the model a real example of what you mean. Should the visual system go in the prompt or somewhere else? If it's a one-off, the prompt is fine. If you're working in a project repeatedly, put it in an AGENTS.md so the agent applies it automatically every time: https://griffinwooldridge.com/blog/agents-md-for-design-projects Does the model matter, or is it all prompting? Both, but prompting is the bigger lever than most people think. A strong prompt on a good model beats a lazy prompt on the best model. I compared two top models on the same brief here: https://griffinwooldridge.com/blog/gpt-5-6-vs-fable-5 --- # AI Design Tools for Designers (2026): The Complete Guide URL: https://griffinwooldridge.com/blog/ai-design-tools Published: 2026-01-02 Author: Griffin Wooldridge The AI design landscape moves fast, and most roundups are just link lists. This is the guide I wish I had: the tools I actually use as a working product designer, grouped by the job they do, with an honest take on when each one earns its place. Use it as a map, then follow the links into the deep-dive reviews for the ones you care about. If you design interfaces for a living in 2026, the question is no longer whether to use AI, it's which tools for which job. There are dozens, most overlap, and the marketing makes them all sound identical. I've spent the last year building with these tools daily and making videos about them for 30,000+ designers, so this guide organizes the ones worth your time by the actual job they do: generating UI, referencing real designs, turning designs into code, building full products, and running the workflow around all of it. Each section below is a short, honest summary with a link to the full walkthrough. Start with the category that matches what you're stuck on. PICK|Best-looking UI from a prompt|Claude Fable 5.1|Strongest first-pass design judgment I have tested; pair it with real references. PICK|Image-heavy marketing pages|GPT-6 Astra in Codex|Images 2.0 generates the photography inside the same build. PICK|Output keeps coming out generic|Mobbin MCP|The agent researches 600,000+ shipped screens before it designs. PICK|Working product, not a mockup|Anything|Database, auth and Stripe from one prompt. PICK|Already prompting Claude|Claude Skills|Cheapest quality upgrade available; turn on Frontend Design first. ### Which AI model is best for generating UI? This is the foundation: the large models you prompt to produce actual interface designs and front-end code. The gap between them is mostly about taste and attention to detail, not raw capability. Claude Fable 5 is the one I reach for most when I want genuinely beautiful, finished-looking UI on the first pass. September 2026 update: both labs shipped new flagships in the same week. I tested Claude Fable 5.1 on three UI briefs, a finance dashboard, a reference-led site redesign and a video editor, and its first-pass design judgment is the best I have seen: https://griffinwooldridge.com/blog/claude-fable-5-1-ui-design-test OpenAI's GPT-6 Astra is the one to reach for on image-heavy marketing pages, because Codex can call Images 2.0 and generate the photography as part of the build. Here is the Roam landing page test: https://griffinwooldridge.com/blog/gpt-6-astra-web-design-test My model lineup as of September 2026: Claude Fable 5.1 for one-shot UI where the first pass has to look shipped, Opus 5 (shipped July 24 at the same $5/$25 per million tokens as Opus 4.8) for daily building, and Sonnet 5 ($2/$10) when cost matters more than polish. Fable's $10/$50 list price is 2x Opus 5 and 5x Sonnet 5, so it earns its place on the screens that matter, not on every iteration. Whichever model you pick, the prompt is the bigger lever. My model-agnostic prompting rules are here: https://griffinwooldridge.com/blog/ai-prompts-for-ui-design ### How do I stop AI-generated UI from looking generic? Real references The single biggest reason AI-generated UI looks generic is that you asked the model to invent a screen from vague taste words. The fix is reference-first design: let the agent look at how real shipped products solve the problem before it designs anything. The Mobbin MCP plugs a library of 600,000+ real app screens directly into Claude Code, so it can research actual products, then design from evidence. This is the closest thing to a cheat code for quality, and I walked through setup and a real workflow here: https://griffinwooldridge.com/blog/mobbin-mcp-claude-code-design-references And for the full shortlist of MCP servers worth connecting as a designer, including Figma, Miro, Google Stitch and Paper: https://griffinwooldridge.com/blog/mcp-servers-for-designers ### Codex or Cursor: which alternative to Claude Code should a designer learn? Claude Code isn't the only agent that turns a designer's words into a real, working interface. Two strong alternatives are worth knowing. OpenAI's Codex is an agentic coding tool that's especially good at larger, logic-heavy projects. Cursor is an AI-first editor that keeps you in a visual workspace with more hands-on control. Both do the same core job as Claude Code, building software from natural language, just with a different feel. For most designers the move is to learn Claude Code plus one of these, then pick per task. Whichever agent you choose, two setup steps do more for output quality than switching tools. Put your design system in an AGENTS.md file so the agent applies it every time, and when you start from Figma, give the agent the real file context instead of a screenshot. ### Which AI app builder ships a real product, not a mockup? Design tools stop at the mockup. App builders keep going and give you a working product with a real database, auth, and payments. I tested one called Anything by building an actual full-stack client portal, and reviewed honestly where it delivered and where it fell short: https://griffinwooldridge.com/blog/anything-ai-app-builder-review ### How do I get more out of Claude? Skills Most designers prompt Claude the same way they'd prompt any chatbot and leave a lot of quality on the table. Skills are a built-in feature that changes the ceiling of what Claude produces for design work, and most people don't know they exist. Which Skills matter for designers, and what each is good for: https://griffinwooldridge.com/blog/claude-skills-for-designers ### What tools run the workflow around the building? Hosting, notes and boards The building got easy; the stuff around it is where afternoons still disappear. Free hosting built for agent output, notes that write themselves after a review, and a board your team is already in will each save you more time than another model swap. ### How do I choose the right AI design tool? A quick way to pick, based on what you're trying to do. If you want the best-looking UI from a prompt, start with Claude Fable 5. If your output keeps coming out generic, add the Mobbin MCP so the agent references real screens first. If you want more control and visibility while building, use Cursor or Codex alongside Claude Code. If you need a working product, not a mockup, reach for an app builder like Anything. And if you're already prompting Claude, turn on Skills before anything else, since it's the cheapest quality upgrade available. None of these replace design judgment. They compress the mechanical parts so you spend your time on the decisions that matter. Worth knowing beyond the main list: Brilliant is a free, AI-native Figma alternative, UX Pilot gets you usable UI quickly, and Framer 3.0's Agents will redesign a real site on its own canvas if you already ship in a builder. ### FAQ What's the best AI tool for UI design in 2026? For generating polished UI from a prompt, Claude Fable 5.1 is my default. For making that output non-generic, pair it with the Mobbin MCP so the model designs from real references instead of taste words. Can AI replace a product designer? No. These tools compress the mechanical work, mockups, boilerplate, first drafts, but design judgment, research, and knowing what to build are still yours. The designers who win are the ones who use AI to move faster on the parts that don't need judgment. Do I need to know how to code? Increasingly less. Tools like Cursor and app builders like Anything handle the implementation. Knowing the basics still helps you steer them, but you can ship real work without writing much yourself. Where should a beginner start? Pick one job you do often and one tool from this guide for it. Learning one tool deeply beats sampling ten. Most people should start with Claude Fable 5.1 plus the Mobbin MCP for reference-grounded UI. Which is better for design, GPT-6 Astra or Claude Fable 5.1? For product UI and dashboards I still reach for Fable 5.1 in Claude Code. For image-heavy landing pages, GPT-6 Astra in Codex wins because it can generate custom imagery with Images 2.0 as part of the build. I tested both in September 2026: https://griffinwooldridge.com/blog/claude-fable-5-1-ui-design-test and https://griffinwooldridge.com/blog/gpt-6-astra-web-design-test --- # GPT-5.6 vs Fable 5: The Ultimate UI Design Test URL: https://griffinwooldridge.com/blog/gpt-5-6-vs-fable-5 Published: 2026-07-10 Author: Griffin Wooldridge OpenAI's GPT-5.6 and Anthropic's Fable 5 were the two best models for generating UI when I ran this test in July 2026. Same brief, same constraints, judged the way a designer would: first pass, attention to detail, and how each handles iteration. Fable 5 won on consistency; GPT-5.6 on bold first passes. Both have since been succeeded, and the September update below covers what changed. Benchmarks don't tell you which model designs a better interface. Taste does. So instead of scores, I ran a practical test: the same prompt, the same constraints, judged on the things that make UI feel finished. The video shows the full head-to-head; this is the written verdict. Both are excellent. The differences are in the details, which is exactly where design lives. PICK|First pass|Fable 5|Looks shipped out of the gate: considered spacing, realistic data, intentional interactions. PICK|Attention to detail|Fable 5|Fewer AI tells (emoji in cards, logos as text, skipped graphics) across a full layout. PICK|Iteration|Fable 5|Targeted feedback changes the thing you asked about without regressing the rest. PICK|Bold starting points|GPT-5.6|More ambitious first drafts when you want an experimental direction. PICK|List price (July 2026)|GPT-5.6 Sol $5 / $30 vs Fable 5 $10 / $50|Per million input / output tokens. Fable 5 costs more per token; Sol is the cheaper starting point. ### Which model produces the better first pass? First impressions matter because most of a project's direction is set in the opening minutes. Fable 5 tends to produce a first pass that already looks shipped: considered spacing, realistic data instead of lorem ipsum, interactions that feel intentional. GPT-5.6 comes out strong too, often with ambitious touches, but the polish can be less even from section to section. If you judge only the opening screen, Fable 5 usually looks the more finished of the two. ### Which model holds detail across a full layout? This is where a design test is won or lost. The tells of AI-generated UI, emoji stuffed into cards, generic gradients, real company logos rendered as plain text, complex graphics quietly skipped, are all about detail. Fable 5 is the stronger of the two at avoiding those tells and holding quality across an entire layout. GPT-5.6 can produce impressive individual moments but is more likely to drop detail as the screen gets complex. For work where the finish is the point, that consistency is the deciding factor. ### Which model takes design feedback better? No first pass is the final answer, so how a model takes feedback matters as much as its opening move. Both handle plain-English direction well. The question is whether targeted feedback improves the specific thing you asked about without regressing everything else. In my testing Fable 5 iterated more predictably, while GPT-5.6 occasionally reworked more than requested. The prompting approach matters a lot here regardless of model. I broke down how to get consistently great output from Fable 5 in a dedicated guide: https://griffinwooldridge.com/blog/claude-fable-5-for-ui-design-how-to-get-beautiful-output-every-time ### What the two models are, and what they cost GPT-5.6 went into general availability on July 9, 2026 across ChatGPT, the API and Codex, as a family of three: Sol (the flagship I tested), Terra for everyday work and Luna as the cheapest tier. Sol lists at $5 per million input tokens and $30 per million output. Claude Fable 5 is Anthropic's first publicly available Mythos-class model, priced at $10 per million input and $50 per million output. On paper that makes GPT-5.6 the cheaper model per token. In practice the bill depends on how many tokens each model burns to finish, which is why I look at usage on real work rather than list price. Fable 5 is token-hungry; a single dashboard prompt moved my Claude Max usage 23 points, and I documented that in the Fable 5 guide: https://griffinwooldridge.com/blog/claude-fable-5-for-ui-design-how-to-get-beautiful-output-every-time ### Which model I'd trust with UI work For pure UI design work, Fable 5 is the one I reach for: more consistent polish, better detail retention, more predictable iteration. GPT-5.6 is genuinely capable and worth using, especially when you want a bolder or more experimental starting point. The good news is you don't have to marry one, and both fit into a wider stack. See where each model sits in the full guide: https://griffinwooldridge.com/blog/ai-design-tools ### September 2026 update: GPT-6 Astra and Fable 5.1 Both models have a successor now, and the two launched in the same week. Claude Fable 5.1 keeps Fable 5 pricing, cuts cached-input cost by 75%, and in my three-brief test made stronger first-pass calls on hierarchy, typography and density than 5 did: https://griffinwooldridge.com/blog/claude-fable-5-1-ui-design-test GPT-6 Astra is the bigger shift for web design specifically, because inside Codex it can call Images 2.0 and generate the page's photography as part of the build. On an image-heavy landing page it is now my first pick; for product UI I still reach for Claude Code: https://griffinwooldridge.com/blog/gpt-6-astra-web-design-test The verdict below stands as a record of the July test, and the judging criteria have not changed: first pass, detail, iteration. ### FAQ Which is better for UI design, GPT-5.6 or Fable 5? For consistent, finished-looking UI, Fable 5 is my pick. GPT-5.6 is very capable and can be better for bolder, more experimental first passes. Are GPT-5.6 and Fable 5 still the latest models? No. As of September 2026 both have successors: GPT-6 Astra from OpenAI and Claude Fable 5.1 from Anthropic. The design criteria in this post still apply; my tests of both newer models are linked in the update section above. Does the prompt matter more than the model? Often, yes. Grounding the model in real references and realistic content improves both models more than switching between them. Can I use both? Absolutely. Many designers start a concept in one and refine in the other. They fit alongside each other in a wider AI design stack. How much do GPT-5.6 and Fable 5 cost? At the July 2026 test, GPT-5.6 Sol listed at $5 per million input tokens and $30 per million output; Fable 5 at $10 and $50. Real cost depends on how many tokens each burns to finish a task. --- # Claude Design Tutorial for Beginners (Full Walkthrough) URL: https://griffinwooldridge.com/blog/claude-design-tutorial Published: 2026-07-15 Author: Griffin Wooldridge Claude Design is Anthropic's prompt-to-prototype tool: describe a screen, deck or one-pager and Claude builds a real, editable version you refine with comments, direct edits and adjustment knobs. This beginner's walkthrough covers what it is, who gets it, how to start, and how to get output that looks designed rather than generated. If you've used Claude to write or code, Claude Design applies the same idea to interfaces: you work in plain language and Claude produces the real thing, not a static picture of it. It's one of the most beginner-friendly ways into AI-native design because there's almost no tooling to learn first. This is the written version of my full walkthrough. Let's cover what it is, then how to use it well. ### What is Claude Design? Claude Design launched on April 17, 2026 as a research preview from Anthropic Labs and is now in beta. Instead of dragging rectangles on a canvas, you describe the screen, flow, deck or one-pager you want and Claude generates a real, working version you can preview, edit and iterate on. At launch it ran on Claude Opus 4.7's vision model, and it is available to Claude Pro, Max, Team and Enterprise subscribers (Enterprise admins have to switch it on). It produces more than UI. Interactive prototypes, wireframes, pitch decks, marketing one-pagers and code-powered prototypes with voice, video and 3D are all in scope. For beginners that is the appeal: you do not need to master a complex interface before you can make something good. ### How do I get started with Claude Design? LIST|Step 1: Open Claude Design from claude.ai on a Pro, Max, Team or Enterprise plan. LIST|Step 2: Describe one screen you can picture clearly: what it is for, who uses it, and the elements it must contain. Paste real content if you have it. LIST|Step 3: Review the first version the way you would review a junior designer's work. Comment inline on specific elements, edit text directly, or use the adjustment knobs Claude generates for spacing, color and layout. LIST|Step 4: Build up section by section, one specific change per turn. LIST|Step 5: Share a link, export a ZIP, PDF, PPTX or standalone HTML, send it to Canva, Adobe, Miro, Gamma, Base44, Lovable, Replit, Vercel or Wix, or hand the bundle to Claude Code to build it for real. There is no Figma export. Start simple: describe one screen you have a clear picture of. Tell Claude what it's for, who it's for, and the key elements it needs. The more concrete you are about purpose and content, the better the first pass. Avoid vague adjectives like "clean" and "modern", they don't give Claude anything real to work toward. Once you have a first version, treat the rest like a design review: react to what you see, ask for specific changes, and build up the screen section by section. ### How do I get output that looks designed, not generated? The single biggest quality lever is grounding. Give Claude real references and realistic content instead of asking it to invent from nothing. A simple "no lorem ipsum" constraint alone makes the result look dramatically more finished. Claude Design can also import your design system, from GitHub, from design files, or with the /design-sync command, so screens come out in your tokens and components instead of the defaults. If you want to go further, feed it real product references so it designs from evidence, which is exactly what tools like the Mobbin MCP enable: https://griffinwooldridge.com/blog/mobbin-mcp-claude-code-design-references And if you want the deeper prompting approach that gets consistently beautiful UI, this guide goes further: https://griffinwooldridge.com/blog/claude-fable-5-for-ui-design-how-to-get-beautiful-output-every-time The prompting approach that makes the biggest difference in output quality is broken down here: https://griffinwooldridge.com/blog/ai-prompts-for-ui-design ### Claude Design vs Claude Code: which should a designer use? They solve different jobs, and I use both. Claude Design is for getting to a visual quickly and refining it with people who do not write code. Claude Code is for building the real product in a real codebase. PICK|Explore a direction or pitch an idea|Claude Design|Fast to a shareable prototype; comments and knobs for non-coders. PICK|Ship the interface in your codebase|Claude Code|Works in your repo with your components; hand off the Claude Design bundle to start. PICK|Slides, one-pagers, marketing collateral|Claude Design|Exports to PDF, PPTX, HTML, Canva, Gamma and more. PICK|Reference-grounded UI at scale|Claude Code plus the Mobbin MCP|The agent researches shipped screens before it designs. The handoff is the part I like most. Once a direction is settled in Claude Design, the bundle goes to Claude Code and the build starts from the approved visual instead of a description of it. My setup for that side, including the Skills that raise the quality ceiling, is here: https://griffinwooldridge.com/blog/claude-skills-for-designers ### Where it falls short The beta shares usage limits with Claude chat, Claude Code and Cowork, and complex prototypes eat them quickly. The knobs are good for tuning, less good for structural changes; when the layout is wrong, describe the new structure rather than nudging sliders. And it does not know your product. Without references and real content it defaults to the same competent, generic layouts every model produces. That is not a tool problem, it is a briefing problem, which is why the prompting rules below matter more than any feature. ### FAQ What is Claude Design? Anthropic's AI-native design experience: you describe interfaces in plain language and Claude builds real, editable UI you can iterate on with feedback. Is Claude Design good for beginners? Yes, it's one of the easiest ways in because there's very little tooling to learn. You direct with words and refine from there. Do I need design experience? It helps, since design judgment is still yours, but you can start with almost none and learn by iterating. Claude handles the production. How do I make it look less generic? Ground it: use realistic content and real references instead of vague adjectives. That's the biggest quality difference for beginners. Who can use Claude Design? Claude Pro, Max, Team and Enterprise subscribers. It launched in April 2026 as a research preview from Anthropic Labs and is now in beta; Enterprise admins need to enable it. Can Claude Design export to code? Yes. It exports standalone HTML or a ZIP and can hand a bundle to Claude Code for development, alongside PDF and PPTX exports, shareable links, and direct sends to Canva, Adobe, Miro, Gamma, Base44, Lovable, Replit, Vercel and Wix. It does not export to Figma. --- # Relume Library MCP: Give Claude 1,000+ Real Web Components URL: https://griffinwooldridge.com/blog/relume-mcp Published: 2026-07-22 Author: Griffin Wooldridge Relume's library of 1,000+ production web components now plugs straight into Claude, Cursor and any MCP client. Instead of inventing sections, the agent searches the library and pulls real, editable components with the design system attached. Here is how to set it up, what to ask it for, and why it pairs with Mobbin. Most AI web design fails the same way: you ask for a landing page and get generic sections the model made up. The fix is to give it real, proven building blocks to work from. The Relume Library MCP does exactly that, handing Claude access to over 1,000 real web components so it assembles pages from established patterns instead of guessing. This is the written companion to my full walkthrough. ### What is the Relume Library MCP? Relume is a well-known library of website components and wireframe sections used by real design teams. The MCP connects that library directly to Claude, so the agent can search and pull actual components, heroes, feature sections, pricing tables, footers, and build with them. MCP (Model Context Protocol) is just the standard that lets an AI agent use outside tools and data. Here, it gives Claude a catalog of proven components to reach for while it works. Relume shipped the MCP on July 1, 2026, and it works in Cursor, Claude, Windsurf, VS Code and any other MCP client. The important detail is what comes back: not a screenshot or a wireframe, but editable code with the design system attached, so the agent builds on-system instead of guessing at spacing and type. Relume Publish followed in beta on August 24, 2026, so a site built from the library can go live from Relume and keep being edited after launch. ### How to set up the Relume MCP in Claude Code Setup follows the same shape as every MCP server, and takes a few minutes: LIST|Step 1: Sign in to Relume and open the Library MCP page. Copy the connection command for your editor (Claude Code, Cursor, VS Code and Windsurf each get their own). LIST|Step 2: Run the add-MCP command in your terminal, then start a fresh Claude Code session so it picks up the new server. LIST|Step 3: List your MCP servers, select Relume, and approve the sign-in when the browser window opens. LIST|Step 4: Prompt normally. When a request touches page structure, ask Claude to search the Relume library before it writes any section. If you have already connected the Mobbin MCP, the flow will feel familiar; the steps are the same as in my Mobbin setup guide: https://griffinwooldridge.com/blog/mobbin-mcp-claude-code-design-references ### What to ask it for The library is organized the way a marketing site is organized, so prompt at the section level. "Find three hero sections with a left-aligned headline and a product screenshot, then build the one with the strongest hierarchy" gets a better result than "make a hero." The sections I pull most are heroes, feature grids, pricing tables, testimonial blocks, FAQ accordions and footers, because those are the sections where an invented layout is most likely to look off. Ask for two or three candidates, have Claude describe the differences, then pick. Once the component is in the project, treat it like any other code. Swap in your tokens, replace the placeholder copy with real content, and give feedback the way you would in a design review: one specific change at a time. The prompting rules in my UI prompting guide apply directly: https://griffinwooldridge.com/blog/ai-prompts-for-ui-design ### Why it pairs with Mobbin This is the second half of a powerful pattern. The Mobbin MCP gives Claude real screens to reference for inspiration and structure; the Relume MCP gives it real components to actually build with. Together they turn reference-first design into an end-to-end workflow: research real products, then assemble from real building blocks. If you haven't set up the first half yet, start here: https://griffinwooldridge.com/blog/mobbin-mcp-claude-code-design-references Both belong in an AI-native designer's stack, which I lay out in the full guide: https://griffinwooldridge.com/blog/ai-design-tools Relume is one of the MCP servers I recommend to designers; for the full shortlist, see: https://griffinwooldridge.com/blog/mcp-servers-for-designers ### Where it falls short A component library cannot make decisions for you. Relume gives Claude proven structure, but the choice of which section goes where, how much to show above the fold, and what the page is trying to get someone to do is still design work. Pages assembled from good components with no point of view look like templates, because that is what they are. It is also web-first. If you are designing a mobile app or a dense product dashboard, Mobbin is the more useful reference, and the wider MCP shortlist has better fits: https://griffinwooldridge.com/blog/mcp-servers-for-designers PICK|Marketing site sections|Relume MCP|Real, editable components with the design system attached. PICK|App screens, flows and dashboards|Mobbin MCP|600,000+ shipped screens to research before designing. PICK|Your own components|Figma MCP|Reads your actual tokens and layout from the file. ### FAQ What is the Relume Library MCP? A connector that gives Claude access to Relume's library of 1,000+ real web components so it can build pages from proven sections instead of inventing them. How is it different from the Mobbin MCP? Mobbin gives Claude real screens to reference; Relume gives it real components to build with. They complement each other. Do I need a Relume account? Yes, the MCP connects to Relume's library, so you use it with your Relume access. Check their current plans for MCP availability. Will it make my sites look generic? The opposite, done well. You're building from real, production-grade components rather than whatever the model invents on the spot. Which editors support the Relume Library MCP? Cursor, Claude (including Claude Code), Windsurf, VS Code and any MCP-compatible client, as of the July 2026 release. What does the MCP actually return? Editable code for the component with the design system attached, not an image. You adapt tokens and copy in your project like any other code. How do I prompt it well? Ask at the section level, request two or three candidates, have the agent describe the differences, and pick. Then refine one specific change at a time. --- # Brilliant: The Free, AI-Native Figma Alternative (2026) URL: https://griffinwooldridge.com/blog/brilliant-figma-alternative Published: 2026-06-24 Author: Griffin Wooldridge Brilliant is a free, AI-native design tool that does roughly 95% of what Figma does, with AI agents working right on the canvas and plain-text, git-friendly files. I put it head-to-head with Figma. Here's where it wins, where Figma still leads, and whether it's time to switch. Figma is still the industry standard, but it was built before the AI era and it charges accordingly. Brilliant is a different bet: a free, AI-native design tool where agents work alongside you on the canvas and your files are plain text you can version with git. I tested it against Figma to see how real the alternative is. You can try it here: https://brilliant.design/ This is the written version of my full comparison. ### What is Brilliant, and what does it actually include? Brilliant is a free, AI-native design tool that covers most of what designers use Figma for day to day. The twist is that AI agents operate directly on the canvas with you, your files are plain-text and git-friendly rather than locked in a proprietary format, and there's no per-seat or Dev Mode paywall to work around. It's built for how designers work now: with AI in the loop and code never far away. A few specifics from the product itself. Files are a plain-text format Brilliant calls Blueprint (.bl), which it says is around 20x more token-efficient than JSON, so an agent can read a whole file cheaply and the file diffs in a pull request like code. The built-in chat runs on Claude, OpenAI, Gemini, OpenRouter or a custom endpoint, and the MCP connects Claude Code, Cursor and Copilot. There is per-turn undo, so you can revert an agent's edit and keep your own. It runs on the web and as a macOS desktop app. Exports cover PNG, JPEG, SVG, WebP, PDF, React, HTML, MP4 and MOV. The shader materials, liquid glass, metal and around fifty GPU presets, are the kind of thing that takes a plugin and a lot of patience in Figma. ### Where does Brilliant beat Figma? The headline is price: it's free, with no seat cost and no separate Dev Mode. Beyond that, it leans into being AI-native and developer-friendly, native GPU shaders, seven export formats, and unlimited MCP so your AI tools can plug straight in. If your workflow already runs through AI agents and code, that combination is hard to ignore. For solo designers, small teams, and anyone tired of per-seat pricing, the math is compelling: https://brilliant.design/ ### Where does Figma still lead? This isn't a clean sweep. Figma still leads on a few things that matter for bigger teams and complex work: component variants, interactive prototypes, and live multiplayer editing. If your process depends heavily on those, Figma remains the safer choice for now. Update, September 2026: Brilliant's site now lists components with variants and per-instance overrides, and live collaborative editing. I have not retested either since the June comparison, so treat those two gaps as narrowing rather than closed. Interactive prototyping is still the clearest reason to keep a Figma seat. The honest read: Brilliant is a real alternative for most everyday design and a clear win on cost and AI-nativeness, while Figma keeps the edge on advanced prototyping and collaboration. One reason to keep Figma in the loop for now is handoff. When I go from a Figma frame to production code with an agent, the Figma MCP is what gives the agent real layout and token values: https://griffinwooldridge.com/blog/figma-to-code-with-ai. Brilliant has MCP built in too, so the same reference-first setup applies, and I compared the servers worth connecting here: https://griffinwooldridge.com/blog/mcp-servers-for-designers ### Should you switch from Figma to Brilliant? If you're a solo designer or small team who works with AI and doesn't lean on advanced prototyping or multiplayer, Brilliant is genuinely worth switching to, and it's free to try. If you're on a large team living in component variants and live collaboration, keep Figma for now and watch this space. Either way, an AI-native, git-friendly, free tool is exactly the kind of shift worth paying attention to: https://brilliant.design/ Brilliant is one piece of a fast-moving AI design stack; for the full map of tools and when each earns its place, see my complete guide: https://griffinwooldridge.com/blog/ai-design-tools ### How to try Brilliant in an afternoon LIST|Step 1: Open brilliant.design, create a file, and rebuild one screen you know well from a reference. That tests the canvas and auto layout. LIST|Step 2: Connect the MCP to Claude Code or Cursor and ask the agent to change the screen: swap the type scale, add a state, reflow for mobile. That tests the agent loop and per-turn undo. LIST|Step 3: Export to React or HTML and open it in your project. That tests whether the handoff is real. If all three feel good, you have most of what you use Figma for. The reference-first approach I use for AI-built UI applies here unchanged: https://griffinwooldridge.com/blog/ai-ui-design-reference-sites ### FAQ Is Brilliant really free? Yes. It's free to use, with no per-seat cost and no separate Dev Mode paywall. Is Brilliant a real Figma alternative? For most everyday design work, yes, it covers roughly 95% of what Figma does. Figma still leads on component variants, interactive prototypes, and live multiplayer. What makes it AI-native? AI agents work directly on the canvas with you, files are plain-text and git-friendly, and it supports unlimited MCP so your AI tools connect straight in. Should I switch from Figma? Solo designers and small AI-focused teams should seriously consider it. Large teams reliant on advanced prototyping and multiplayer should stay on Figma for now. Does Brilliant work with Claude Code and Cursor? Yes. Its MCP connects to Claude Code, Cursor and Copilot, and the built-in chat can run on Claude, OpenAI or Gemini models. What file format does Brilliant use? A plain-text format called Blueprint (.bl) that diffs in pull requests and branches like code. Brilliant says it is around 20x more token-efficient than JSON for agents. --- # How to Use Codex as a Designer URL: https://griffinwooldridge.com/blog/codex-for-designers Published: 2026-06-08 Author: Griffin Wooldridge Codex is OpenAI's agentic coding tool, and it turns out to be one of the fastest ways for a designer to turn an idea into a real, working interface. You describe what you want, it writes and edits the code, and you iterate in plain English. Here's how I use it, where it fits alongside Claude Code, and how to get good UI out of it instead of generic output. For a long time, "designers who code" meant designers who could hand-write HTML and CSS. That bar is gone. With Codex, you describe the screen you want and the agent builds it, runs it, and fixes it, while you steer with feedback. You stay in the designer's seat, making decisions about hierarchy, spacing, and flow, and hand off the mechanical work. This post is the written version of my full walkthrough. If you'd rather watch, the video covers the same ground with live examples. ### What is Codex? Codex is OpenAI's coding agent. It runs in your terminal, your editor, and the cloud, and it can read a whole project, write and edit files, run commands, and check its own work. For a designer, the important part is that you don't need to know the syntax. You describe the interface in the same language you'd use in a design review, and Codex produces the real thing you can open in a browser. It sits in the same category as Claude Code: an agent that builds software from natural language. The difference is mostly ecosystem and feel, which is worth understanding if you're choosing between them. Codex also has something Claude Code does not: a native image model. With GPT-6 Astra and Images 2.0 it can generate the photography for a landing page as part of the same build. I tested that on a full travel-app site here: https://griffinwooldridge.com/blog/gpt-6-astra-web-design-test The Codex desktop app (updated April 16, 2026) is where most of this lives now: it generates images with gpt-image-1.5 for mockups and page assets, and previews the page in an in-app browser where you comment on elements directly and the agent follows the note. GPT-6 Astra has been rolling out as Codex's model since September 3, 2026. ### Codex vs Claude Code for designers I use both. Claude Code tends to have a strong eye for polished, finished-looking UI out of the box, which is why it's my default for pure visual work. Codex is exceptional at reasoning through a whole codebase, staying consistent across a larger project, and grinding through multi-step tasks without losing the thread. For a designer, a simple rule works: reach for Claude Code when the job is mostly look and feel, and reach for Codex when the job is bigger, more logic-heavy, or spread across many files. Neither is strictly better. Knowing both means you pick the right one per task instead of forcing one tool to do everything. The full guide covers where each fits: https://griffinwooldridge.com/blog/ai-design-tools For where building sits in the wider shift, see the roadmap: https://griffinwooldridge.com/blog/ai-native-designer-roadmap ### How to get good UI out of Codex The same principle that works everywhere applies here: don't prompt from taste words. "Make it clean and modern" produces generic output because you've asked the model to average everything. Instead, give it something concrete to anchor to, a reference screen, a described layout, a real design system, or realistic content instead of lorem ipsum. Be specific about structure and let Codex handle implementation. Describe the sections, the hierarchy, the states, and the interactions you want, then let it write the code. Review in the browser, give pointed feedback like a design crit, and iterate. The tighter your direction, the better the result. ### A designer's workflow with Codex My loop looks like this. I start by telling Codex what I'm building and pointing it at references or an existing design system so it isn't guessing. I ask for a first pass of the real screen, open it, and react to what I see. Then I iterate section by section, treating each round like feedback on a junior's work: specific, visual, and about decisions rather than syntax. The result is that I spend my time where design judgment matters, hierarchy, flow, and detail, and almost none of it fighting with code. The biggest upgrade for Codex's output is giving it project context in an AGENTS.md file: https://griffinwooldridge.com/blog/agents-md-for-design-projects And turning a design into clean code is its own skill: https://griffinwooldridge.com/blog/figma-to-code-with-ai ### FAQ Do I need to know how to code to use Codex? No. You describe what you want in plain English and Codex writes and edits the code. Knowing the basics helps you steer it, but you can build real interfaces without writing much yourself. Is Codex better than Claude Code? Neither is strictly better. Claude Code tends to produce more polished UI out of the box; Codex is stronger on large, logic-heavy projects. Most designers benefit from using both and picking per task. What can a designer actually build with it? Real, working interfaces you can open in a browser: landing pages, prototypes, dashboards, full front-ends. It writes production code, not throwaway mockups. Where should I start? Pick one small screen you'd normally mock up, describe it to Codex with a concrete reference, and iterate. Learning the feedback loop on something small is the fastest way in. --- # How to Use Cursor as a Designer URL: https://griffinwooldridge.com/blog/cursor-for-designers Published: 2026-07-23 Author: Griffin Wooldridge Cursor is an AI-first code editor, and it's one of the most approachable ways for a designer to start building real interfaces. Unlike a terminal agent, you see the code and the design side by side, and the AI edits it with you. Here's how I use Cursor as a designer, and when I reach for it over Claude Code. If a terminal-based agent feels intimidating, Cursor is the friendlier on-ramp. It looks like a normal editor, but the AI is built into everything: you can select an element, describe a change, and watch it happen, or hand the agent a whole task and review the result. For designers who want more visibility and control than a pure chat interface gives, it's a great fit. This is the written companion to my full walkthrough. The video shows the workflow live if you'd rather watch. ### What is Cursor? Cursor is an AI-native code editor built on the foundation of VS Code, so it feels familiar if you've ever opened one. What makes it different is that the AI is everywhere: an inline edit command for targeted changes, a chat that can see your whole project, and an agent that can carry out multi-step tasks across files. You're always looking at the actual code and the running result, which gives designers a strong sense of control. Like Codex and Claude Code, it builds real software from natural language. The distinction is that Cursor keeps you in a visual editor rather than a terminal, which many designers find easier to learn. Two 2026 releases matter for designers. Cursor 3 (April 2, 2026) added a unified agents window: local and cloud agents in one sidebar, running in parallel, with an integrated browser for previewing local sites. Cursor 3.7 (June 5) added Design Mode, where you shift-click to multi-select elements, talk to the agent through a persistent mic, and queue the next edit while the current one runs. Design Mode is the part designers should try first. ### Cursor vs Claude Code for designers Claude Code runs in the terminal and is fantastic when you want to describe something and let it run. Cursor keeps you closer to the work: you see every file, every change, and can make small manual tweaks between AI edits. That visibility is the main reason a designer might prefer it. In practice, Cursor is a great place to start and to do precise, hands-on editing, while a terminal agent shines for larger hands-off builds. Both belong in an AI-native designer's toolkit, which I break down in the full guide: https://griffinwooldridge.com/blog/ai-design-tools ### How to get good UI out of Cursor Reference-first design still wins. Give Cursor something concrete to work from, a screenshot, a described layout, your design tokens, real content, rather than asking for "something clean." The more specific your direction, the less generic the output. Use the right tool for the job inside Cursor: inline edits for small, surgical changes, chat for reasoning about the whole screen, and the agent for building something new end to end. Review constantly in the preview and give feedback the way you'd critique a design, pointed and visual. The biggest upgrade for Cursor's output is an AGENTS.md with your design system in it: https://griffinwooldridge.com/blog/agents-md-for-design-projects See also going from a Figma design to code: https://griffinwooldridge.com/blog/figma-to-code-with-ai ### FAQ Is Cursor good for designers who can't code? Yes. It's one of the most approachable entry points because you can describe changes in plain English and watch them happen, while still seeing the real result. You'll pick up enough to steer it as you go. Cursor or Claude Code, which should I use? Cursor keeps you in a visual editor with more control and is easier to start with; Claude Code is a terminal agent that's great for larger hands-off builds. Many designers use both. Is Cursor free? There is a free Hobby plan with limited completions and agent requests, and Pro is $20 a month (as of September 2026) with a usage-based credit pool for premium models. Start on Hobby to learn the workflow, then upgrade when you hit the limits. What should my first project be? Rebuild a screen you already know well, a settings page, a pricing section, from a reference. It teaches you the edit-and-review loop fast. --- # How to Become an AI-Native Designer: A 2026 Roadmap URL: https://griffinwooldridge.com/blog/ai-native-designer-roadmap Published: 2026-08-06 Author: Griffin Wooldridge Being an AI-native designer means changing how you work so AI is woven through your whole process, from research to shipped interface, not collecting every tool. This is the roadmap I'd give any designer who wants to get ahead in 2026: the mindset, the skills, and the tools, in the order that matters. The designers pulling ahead right now aren't the ones who adopted one AI tool. They're the ones who rebuilt their workflow around AI so it touches everything they do. The good news: the path is learnable, and it's less about talent than about picking the right things to practice in the right order. Here's the roadmap. The video walks through it with examples if you'd rather watch. ### 1. Shift the mindset first Before any tool, the shift is mental: stop thinking of AI as a shortcut for isolated tasks and start treating it as a collaborator across your entire process. An AI-native designer delegates the mechanical work, first drafts, boilerplate, research synthesis, and spends their own time on judgment: what to build, why, and whether it's good. If you protect the judgment and hand off the rest, everything else follows. The judgment part is the same work it always was. The Cashier UI redesign that cut transaction times 28% came from field research and workshops, not tooling: https://griffinwooldridge.com/design/cashier-ui. AI changes how fast you get to the decisions, not whether you have to make them. ### 2. Learn to design from evidence, not taste words The single most valuable skill is reference-first design. Generic AI output comes from generic prompts. When you ground your work in real references, real products, real content, real design systems, the quality jumps. Learn to research shipped products before you design, and increasingly to let your tools do that research for you. A connector like the Mobbin MCP puts 600,000+ real screens inside your AI so it designs from evidence: https://griffinwooldridge.com/blog/mobbin-mcp-claude-code-design-references ### 3. Learn to build, not just mock up The line between design and implementation is dissolving. You no longer need to hand-code, but you do need to be able to turn an idea into a real, working interface. That means getting comfortable with an agent that builds: Claude Code, Codex, or Cursor. You don't have to master all three, pick one and go deep. I've written designer-focused guides for https://griffinwooldridge.com/blog/codex-for-designers and https://griffinwooldridge.com/blog/cursor-for-designers to get you started. The goal isn't to become an engineer. It's to be able to produce the real thing, not just a picture of it. For context on where I started, the agent route gets you to the same place in a fraction of the time as this military logistics app, which I learned React by hand on in 2022: https://griffinwooldridge.com/design/logistics-app ### 4. Build a tool stack around your process Once the mindset and core skills are in place, assemble tools by the job they do rather than by hype: models for generating UI, connectors for real references, editors or agents for building, and workflow tools for research and notes. The point is a coherent process, not a pile of subscriptions. My full guide to the AI design tool landscape lays out what fits where: https://griffinwooldridge.com/blog/ai-design-tools For the model layer, as of September 2026: Claude Fable 5.1 for one-shot UI where the first pass matters, Opus 5 for daily building at half Fable's price, Sonnet 5 when cost matters most, and GPT-6 Astra in Codex when the page needs generated imagery. Hiring is moving the same way: in Figma's 2026 design hiring research, 73% of hiring managers said they increasingly need candidates who are proficient with AI tools, and 79% said the same about designing AI products. Part of the stack is showing your work well; here's how I make crisp product demos: https://griffinwooldridge.com/blog/product-demos For the research and notes layer, Granola turns the meetings themselves into notes you can act on: https://griffinwooldridge.com/blog/granola Miro's AI keeps that synthesis on the board your team already uses: https://griffinwooldridge.com/blog/miro-ai-design-workflows-claude-mcp ### FAQ What is an AI-native designer? A designer who has rebuilt their workflow so AI is part of every stage, research, ideation, design, and building, rather than a one-off shortcut. The focus stays on judgment while AI handles the mechanical work. Do I need to learn to code to be AI-native? Not in the traditional sense. You need to be able to build real interfaces using AI agents like Claude Code, Codex, or Cursor, which handle the code for you. Basic literacy helps you steer them. Which AI tool should I learn first? Start with one model for generating UI and one way to build (an agent or editor). Depth beats breadth, learn one deeply before adding more. How long does it take to become AI-native? It's a shift in workflow, not a certification. Most designers feel the difference within a few weeks of deliberately routing real work through these tools instead of doing it by hand. --- # Framer 3.0 AI Agents: A Hands-On Tutorial and Review URL: https://griffinwooldridge.com/blog/framer-3-ai-agents-tutorial-review Published: 2026-07-01 Author: Griffin Wooldridge Framer 3.0 brings AI Agents directly into the canvas, plus Branching and External Agents for Claude Code, Codex, and Cursor. I used the new workflow to redesign my entire site. Here is what worked, what failed, and how to get better results. Framer AI Agents might be the biggest shift the website builder has made since launch. This is not another AI wireframe generator living beside your real design tool. In Framer 3.0, the Agent works directly on the same responsive canvas you use to design, edit, manage content, and publish a production website. I tested the complete workflow by redesigning my own site live. The Agent rebuilt sections, applied a new visual direction across breakpoints, restored content it initially removed, updated shared text styles, cleaned up my CMS, and helped audit the site's SEO. I also connected Claude Code as an External Agent to see how Framer works from the terminal. Watch the full Framer AI Agents redesign walkthrough here: https://youtu.be/ogK1_DTM5Zg ### What is Framer 3.0? Framer 3.0 is Framer's June 2026 platform update built around four major launches: Agents, Branching, External Agents, and a redesigned Community. The editor itself also received a visual refresh. Together, those changes turn Framer from a visual website builder with AI features into a website workspace where human designers and AI agents can work on the same production canvas. The headline feature is Framer Agents. You describe a goal in plain English and the Agent can create or revise pages, generate responsive layouts, write and organize content, connect to CMS collections, create components, fix issues, and help prepare a site for publishing. Everything it makes remains editable in Framer. Branching makes those changes safer. You can explore a redesign or let an Agent make broad updates in an isolated version of the project, review the result, and apply approved changes back to main without putting the live site at risk. External Agents connect tools such as Claude Code, Codex, Cursor, and Gemini CLI to a Framer project. That makes structured work involving local files, APIs, scripts, CMS data, redirects, localization, code components, and audits possible from the terminal. Framer has kept shipping since launch. The Agent's model picker now has reasoning levels and a Fast mode for supported models like Opus 5 (August 12, 2026), shaders accept video as well as images (August 11), the Agent handles 3D transform properties like Rotate XYZ, Perspective and Backface (September 1), and the CMS gained a List field for repeating content (September 8). ### How Framer AI Agents are different from other AI website builders Most AI website builders generate a draft in a separate environment. That can be useful for ideation, but the handoff becomes the hard part: importing the result, rebuilding it in the real design system, fixing breakpoints, reconnecting content, and preparing it for production. Framer's advantage is that design and production already live in the same place. The Agent works on the real page, with the real layers, styles, components, breakpoints, and CMS. You can inspect what it changed, edit the result manually, prompt another revision, and publish from the same project. That changes the designer's role without removing it. My preferred split is simple: the Agent brings speed and scale; I bring taste and the final call. It handles the repetitive 80 percent, while I direct and refine the 20 percent that makes the site feel intentional and personal. ### Framer AI Agents tutorial: redesigning a real website I started in the Framer dashboard and opened my existing portfolio project. The updated editor places an Agent tab in the right sidebar beside the familiar Style controls. The interface is intentionally minimal: choose a model, write a prompt, and let the Agent inspect the current page before it starts changing the canvas. My first prompt limited the redesign to the homepage. That constraint mattered. I wanted to establish the design direction on one page before spending credits and time applying an unproven idea across the entire site. The brief asked for a clean modern site with a bold typeface, a full-bleed vertical gradient moving from near-black navy through saturated blue into white, high contrast, airy spacing, and consistent padding. A detailed first prompt gave the Agent enough constraints to build a coherent foundation rather than guessing what 'make it better' meant. The result appeared across desktop, tablet, and mobile layouts together. The Agent built the gradient, restyled the navigation, created a new typographic direction, worked down through the footer, spotted a responsive problem, and corrected it during its own review pass. ### The first result looked good, but it deleted my content The first redesign exposed an important limitation. The new visual direction was strong, but the Agent replaced much of the homepage content instead of restyling it. Navigation tabs, hero copy, and key sections from the previous version disappeared. I used Framer's undo control to compare the versions, then gave the Agent a corrective prompt: keep the styling of the redesign, but retain all copy and section types from the previous version. The next pass restored the content while preserving the new visual system. This is the most practical prompting lesson from my test: explicitly separate content from presentation. If you want a visual redesign, say that the existing information architecture, copy, links, CMS connections, and section types must remain unless you approve a change. Do not assume the Agent will infer that constraint. ### The best Framer Agent workflow combines prompting and manual editing Once the foundation was right, I stopped prompting every small adjustment. I centered an awkward logo row, removed a section fill so it blended into the hero gradient, equalized card heights, adjusted spacing, changed a section background to the primary blue, and refined the heading typeface directly on the canvas. That hybrid workflow is faster than treating the Agent like a slot machine. Use prompts for broad, repeatable, multi-breakpoint work. Use Framer's visual controls for precise decisions you can make faster by looking at the canvas. The same rule applies to components. When the redesign made navigation links hard to see, I referenced the navigation component directly in the prompt and asked it to use the primary text style. The Agent fixed the shared component instead of patching one page. ### How to roll a Framer redesign across every page After I approved the homepage direction, I asked the Agent to apply that design language to the rest of the site while maintaining each page's existing content. It updated the About, Design, and Blog pages, reusing the homepage as the visual reference. This is where Framer Agents feel meaningfully faster than a traditional redesign. The Agent can apply typography, color, spacing, and layout logic across pages and breakpoints in one pass. Because it works with Framer's responsive layout system, those changes are not limited to one static desktop mockup. The rollout still required review. I adjusted image alignment and sizing manually, tightened tracking in the shared H1 text style, and repaired a navigation component. But the Agent removed the repetitive work of rebuilding the same design direction page by page. ### Can Framer AI Agents manage the CMS? Yes. Framer Agents can work with CMS collections, fields, and content, which makes them useful for blogs, portfolios, directories, and other repeatable content systems. In my project, the Agent audited the blog CMS, found unused fields, removed an obsolete category field, created a better category structure, and filled a missing article excerpt. The result was a cleaner collection with complete content across all posts. For larger CMS tasks, use a more capable model and ask the Agent to inspect before it edits. For focused cleanup or one missing field, a faster model can be more economical. The important part is to specify the collection, the matching rule, what can change, and what report you want after the work is complete. ### Framer Branching makes AI changes safe for production An AI agent working on a live website is only useful if you can control what reaches production. Framer Branching provides that control. A branch is an isolated version of the project where an Agent or teammate can redesign sections, update CMS content, test a new idea, or make broad changes without affecting main. You can review and compare the work, collaborate on it, apply approved changes back to main, and publish only when you are ready. This is especially useful for redesigns, AI-generated changes, content review, and parallel work. Framer also lets you publish a branch to a preview URL for review without changing the live site. For professional teams, Branching is the feature that turns rapid AI iteration into a responsible production workflow. ### How Framer External Agents work with Claude Code, Codex, and Cursor Framer External Agents let a terminal-based AI tool connect to the real Framer project. Framer's setup flow installs the Agent tooling, authorizes the project, and gives your preferred agent access to supported pages, canvas structure, CMS collections, code files, styles, assets, localization, metadata, and publishing information. I connected Claude Code because it is already central to my workflow. From the terminal, I could inspect the project and ask for a full SEO pass. The Agent found missing metadata, duplicate or deprecated pages that should not be indexed, and weak image alt text coverage. It then helped write page titles and descriptive alt text across the site. External Agents are strongest when the task starts outside Framer or needs repeatable logic: importing CMS content from CSV or JSON, syncing external data, auditing SEO and accessibility, normalizing slugs, managing redirects, updating localization, creating code components, or applying a mapping across many pages. Framer does not require a separate Framer MCP server for this workflow. Its native Agent connection lets supported local agents work with the project directly. High-impact operations should still follow an inspect, propose, apply, summarize, and review sequence before anything is published. If you have not set up one of those agents yet, both connect to Framer the same way. Here is my designer-focused guide to Codex: https://griffinwooldridge.com/blog/codex-for-designers And the same for Cursor: https://griffinwooldridge.com/blog/cursor-for-designers ### Best prompts for Framer AI Agents Good Framer prompts define the source, target, constraints, and expected output. 'Make my site premium' leaves too much to interpretation. 'Redesign only the homepage using this color system, preserve every existing section and link, update all breakpoints, and summarize changed components' gives the Agent a reviewable job. For a new design direction, start with one section or one page. Describe the layout, typography, color, spacing, content requirements, and elements that must not change. Review the first pass before expanding the direction across the site. For structured work, name the exact page, component, CMS collection, local file, or style token. Ask the Agent to inspect first, list its proposed changes, and summarize what it changed afterward. For visual polish, prompt broad changes and finish precise spacing, alignment, and typographic decisions manually. Framer is still a visual design tool; the best workflow uses that advantage instead of hiding the canvas behind chat. ### Framer 3.0 review: is the new Agent good? After redesigning my full site, my honest answer is yes, with direction. Framer Agents automate a remarkable amount of work through plain-language instructions, and the direct connection to the production canvas makes the output more useful than a disconnected AI mockup. The Agent was strong at establishing a visual system, applying it across responsive pages, updating shared styles and components, and handling structured CMS and SEO work. It was less reliable when my prompt left content preservation implicit. It also did not remove the need for taste: I still made the final decisions about typography, alignment, contrast, spacing, and which generated ideas belonged in the finished site. That balance is why the release works. Framer 3.0 does not force designers to choose between manual control and automation. You can prompt on the canvas, edit directly, isolate risky work in a branch, or use Claude Code, Codex, and Cursor for technical workflows. The Agent accelerates production, but you still direct the design process. For creators, designers, developers, and teams building real websites, this is one of the first AI design workflows that meets you at production instead of stopping at a draft. ### FAQ What is the Framer AI Agent? Framer's Agent is an AI website editor built directly into the Framer canvas. It can generate and update content, layouts, interactions, components, code, responsive breakpoints, CMS content, styles, and more while keeping the result editable. Is Framer 3.0 available now? Yes. Framer launched Agents, Branching, External Agents, the new Community, and its redesigned interface on June 16, 2026. Can Framer AI Agents edit an existing website? Yes. The Agent can inspect and update an existing Framer project. For redesigns, explicitly tell it to preserve current copy, links, CMS connections, section types, and information architecture unless you want those changed. Can Framer Agents make responsive websites? Yes. The Agent can create and revise responsive layouts across Framer breakpoints. You should still review desktop, tablet, and mobile before publishing. Can Claude Code or Codex edit a Framer site? Yes. Framer External Agents can connect Claude Code, Codex, Cursor, Gemini CLI, and similar local agents to supported Framer project resources. They are especially useful for CMS work, code components, bulk edits, localization, redirects, audits, and workflows involving local files or APIs. Does Framer use MCP for External Agents? Framer says a separate MCP server is not required. Its native Framer Agent setup connects supported local agents directly to the project. What is Framer Branching? Branching creates an isolated version of a Framer project where you or an Agent can experiment without changing main. You can review changes, apply them to main, and publish when approved. Is Framer good for SEO? Framer supports page metadata, semantic content, redirects, CMS fields, image alt text, and publishing controls. Agents and External Agents can help audit and update those elements, but you should review their recommendations and the rendered site before publishing. How do I try Framer AI Agents? Create or open a Framer project, select the Agent tab in the right sidebar, and start with a specific brief for one section or page. You can start Framer here: https://framer.link/griffin-wooldridge ### The bottom line Framer 3.0 is bigger than an AI feature update. Agents add speed on the canvas, Branching adds safety, and External Agents let you bring an established Claude Code, Codex, or Cursor workflow into the same production website. The best results still come from a designer who can write a clear brief, recognize what is working, correct what is not, and make the final call. That is exactly why this release feels useful: it accelerates the work without pretending judgment no longer matters. Watch my complete Framer AI Agents tutorial and live redesign: https://youtu.be/ogK1_DTM5Zg Official Framer 3.0 launch details: https://www.framer.com/events/ Framer's guide to Agents: https://www.framer.com/help/articles/how-to-use-agents/ Framer's guide to External Agents: https://www.framer.com/help/articles/use-external-agents-with-framer/ If you're weighing Framer against other ways to ship a site, I ranked the responsive website builders here: https://griffinwooldridge.com/blog/best-responsive-website-builders-ranked And for the broader AI design toolkit: https://griffinwooldridge.com/blog/ai-design-tools --- # AI Design Workflows in Miro: Flows, Sidekick and Claude MCP URL: https://griffinwooldridge.com/blog/miro-ai-design-workflows-claude-mcp Published: 2026-06-23 Author: Griffin Wooldridge Most AI tools are single-player: you open a blank prompt, re-explain everything from scratch, and wrangle the output back to your team. Miro's AI runs on the same canvas your team already works on. Here's the full workflow (Flows, Sidekick, Prototypes, and the Claude MCP server) and why it changes what happens after the session ends. Every design team knows this feeling. You run a great workshop, the energy is high, you've brainstormed and collected all these insights - and the next day comes and none of that progress has been synthesized. The session was collaborative, but everything that came after it was just you trying to make sense of the mess alone. AI was supposed to fix this. But here's the problem with nearly every AI tool: it's single-player. You open a blank prompt completely disconnected from the work your team just did, re-explain everything from scratch, and get an output you have to wrangle back into context. The more my team leaned on AI, the more our outputs scattered across five different tools. The mess got faster, not smaller. For the past few weeks I've been running my design process inside Miro, where the AI works on the same canvas my team already uses. Miro sponsored this video, but I changed my actual workflow because of it. ### The four pieces Miro launched this generation of features at Canvas 26 on May 19, 2026, alongside Connectors, Engage and an updated Talktrack. Miro's AI system has four components worth understanding: Flows, Prototypes, Sidekick, and the MCP server. Flows are the heart of it, so that's where I'll start. ### Flows: structure the mess without leaving the canvas After five user interviews, a Miro board looks like a wall of sticky notes. Normally turning that into something a PM can act on takes me about two hours of clustering and rewriting. I built a Flow instead. Flows are visual, multi-step AI workflows that run directly on the canvas. Mine does three things in sequence: clusters the raw notes into themes, pulls the top pain points with supporting quotes, and formats everything into a structured, prioritized table. Run it, and in a few seconds that wall of notes becomes three organized, readable views of the research, all still on the same board. The key word is sequential. Each step builds on the last, and you can see exactly what happened at every stage. This isn't magic behind a loading spinner - the logic is visible and steerable. ### Sidekick: collaborative, not just fast After a Flow runs, I add a Sidekick - contextual AI expertise dropped in at exactly the right moment. I dropped a research-led Sidekick at the clustering step to pressure-test the themes. Here's what makes this collaborative instead of just efficient: my teammate can jump onto the same canvas, see exactly what the AI did, steer it, and verify the output before anything moves forward. We're all looking at the same logic in the open at the same time. That's the upgrade I actually care about - going from collaborating on a session to executing on it together. Single-player AI gives you a faster solo output. A Sidekick on a shared canvas gives you a faster team output. The difference matters. ### Prototypes: from insight to interactive without leaving the board Old workflow: export everything, open Figma, start mocking screens before anyone agreed on a direction. Building got easier but knowing what to build didn't get clearer. With Miro Prototypes, I stay on the canvas. I select the insight I want to act on (a research cluster, a rough PRD, a brainstorm node), prompt the Sidekick, and it builds a working interactive prototype right there. Not a static image. Something you can actually tap through and test. The AI sees the context around whatever I selected from the rest of the board, so the prototype isn't generated cold. It understood the problem we were solving. This changes the stakeholder conversation. They react to something tangible in the same place the discussion lives. I generate three completely different directions in an hour, the team picks one, and nobody burned craft time on the other two. The old trap was spending a week in Figma polishing one direction, showing it, and being told to start over. Now we align on direction cheaply, then invest in execution. ### The MCP server: Claude reads the whole board This is the piece I'm most excited about. Miro has an MCP server, which means an AI agent (Claude, in my case) can read and write directly to your Miro board. So when I ask Claude to help me draft a spec, it can read the entire board: the debates, the discarded directions, the tradeoffs we talked through, the research clusters, the prototype we landed on, and why we rejected the alternatives. It finally has the reasoning behind the work. I've stopped re-explaining backstory to my AI every single time. I don't open Claude with 'okay, we interviewed five users and found this pain point, here's the quote, oh and we considered this approach but rejected it because...' It already knows. It just reads the board. For engineers: connect your agent this way and it understands the thinking that shaped the work - sprint decisions, scoping tradeoffs, architecture notes. You're not asking Cursor to code in a vacuum. It's reading your Miro board with the full picture. For PMs: connect Claude to pressure-test your roadmap against the actual user research. For anyone running retrospectives: feed the board to an agent and turn the messy output into action items with full context intact. The board becomes the shared source of truth for your whole team's AI stack, not just one more tool in the chaos. ### The full loop A messy session goes in. Flows structure it. Sidekicks keep the team in control. Prototypes get everyone aligned. The MCP server carries the full context off to whatever tool your team ships with. The session still happens on the canvas. What changed is everything that comes after it. The collaboration doesn't stop when the session stops - it accelerates. Most AI tools are built for individuals. The teams that ship the best work aren't the ones with the smartest prompts. They're the ones running collaborative AI workflows where the AI works on the same canvas the team is already on, where everyone can see the logic, steer the output, and build on what came before. If you want to try it: https://miro.pxf.io/E0PzZ4 Miro's MCP is one of several worth connecting; I rounded up the best MCP servers for designers here: https://griffinwooldridge.com/blog/mcp-servers-for-designers For the meetings that feed the board, Granola handles the notes: https://griffinwooldridge.com/blog/granola ### FAQ What is Miro Flows? Flows are visual, multi-step AI workflows that run directly on your Miro canvas. You build a sequence of steps (cluster notes, extract pain points, format a table) and the AI executes them in order on whatever content you've selected on the board. What is the Miro MCP server? MCP (Model Context Protocol) is a standard that lets AI agents read and write to external tools. Miro's MCP server lets Claude, Cursor, or any compatible agent pull context directly from your board (debates, decisions, research, prototypes) without you re-explaining the backstory. How is this different from ChatGPT or Claude on their own? ChatGPT and Claude in isolation are single-player: you open a blank context and re-explain your project each time. Miro's AI runs on a shared canvas where the whole team can see what the AI did and steer it together. The MCP server then lets external agents read that shared context, so nothing gets lost in translation. Do I need to know how to code to use Miro's AI features? No. Flows, Sidekick, and Prototypes are all no-code - you build them by selecting content and prompting in plain English. The MCP server requires connecting an agent like Claude Code, but Miro has a setup guide and it's a one-time configuration. Is this useful for solo designers or only for teams? Both. Solo, you get a structured workflow that replaces two hours of manual synthesis. On a team, you get genuine collaborative AI - stakeholders see the same output, can steer it, and build on it together. The team benefits are bigger, but the solo time savings are immediate. Where does Miro fit in a design workflow that already uses Figma and Claude Code? Miro is the thinking layer - research synthesis, alignment, direction-setting, prototyping early concepts. Figma is still the right tool for high-fidelity production design. Claude Code handles implementation. The MCP server is the bridge: it lets Claude Code read the Miro board so the context from your research and sprint decisions travels with the work into execution. --- # Mobbin MCP: 600,000+ Real References Inside Claude Code URL: https://griffinwooldridge.com/blog/mobbin-mcp-claude-code-design-references Published: 2026-07-07 Author: Griffin Wooldridge Most AI-generated UI fails for one reason: you asked the model to invent a screen from vague taste words. The Mobbin MCP fixes that. It plugs Mobbin's library of 621,500+ real, shipped app screens straight into Claude Code, so your agent can research actual products before it designs anything. Here's how it works, how to set it up, and whether it's worth paying for. If you design with Claude Code, you already know the failure mode. You type something like "make a clean, modern settings page," and you get a screen that is technically fine and completely generic. Flat cards, a stock toggle, spacing that feels off, the same layout every other prompt produces. The model is guessing at taste, because "clean and modern" is not a spec, it's a vibe. The Mobbin MCP changes where the design starts. Instead of asking Claude to imagine a screen, you let it look at how real companies actually built that screen first, then design from evidence. I walked through the whole setup and workflow in the video above, and this post is the written version with the exact steps. Short answer: if you build UI in Claude Code every week, the Mobbin MCP is worth a paid plan. It makes the agent research 621,500+ shipped screens before it designs, which raises the floor on every first pass. If you only design occasionally, the free library plus manual screenshots is enough. ### What is Mobbin? Mobbin is a design reference library. It's a searchable archive of real product UI, screenshots pulled from live iOS, Android and web apps, organized so you can study how shipping teams solve interface problems. Designers have used it for years as inspiration: you want to design a paywall, you look at forty real paywalls from apps people actually pay for, and you notice the patterns. The catalog is huge, more than 621,500 screens across thousands of apps, and it's kept current, so you're looking at how products look now, not a Dribbble shot from 2019 that never shipped. That last part matters. Dribbble shows you what looks good in a portfolio. Mobbin shows you what real teams put in front of real users. ### What is the Mobbin MCP? MCP stands for Model Context Protocol. It's the standard that lets an AI agent like Claude Code reach outside its own training and use live tools and data. An MCP server is just a connector: it hands the model a set of actions it can call on your behalf. The Mobbin MCP gives Claude Code direct access to that 621,500-screen library. Once it's connected, Claude gets tools for searching screens, flows and sections. So instead of browsing Mobbin in your browser, screenshotting a few references and pasting them into a prompt, you just describe what you're building and the agent pulls the relevant real-world examples itself, then designs against them. No screenshots, no tab-switching, no copy-paste. The shift is subtle but big. The reference step stops being something you do manually before you prompt. It becomes part of what the agent does automatically while it works. ### Why reference-first design beats prompting from taste words Here's the core problem the Mobbin MCP solves. When you prompt an AI model with adjectives, "minimal," "premium," "friendly," you're asking it to average everything it has ever seen that was tagged with those words. Averages are generic by definition. That's why so much AI UI has the same slightly-off, seen-it-before quality. Reference-first design flips the order. The agent searches real shipped screens for the exact pattern you need, summarizes what those products actually do, and then builds from that evidence. A settings page designed after studying twenty real settings pages is grounded in decisions real teams made and tested. A settings page designed from the word "clean" is grounded in nothing. As a designer, this is also just good practice encoded into the tool. You were supposed to research references before designing anyway. The MCP makes the agent do it every time, instead of skipping straight to output. ### How to set up the Mobbin MCP in Claude Code Setup takes about two minutes: LIST|Step 1: Copy the add-MCP command from Mobbin's setup page and run it in your terminal. LIST|Step 2: Start a new Claude Code session so it picks up the new server. LIST|Step 3: List your MCP servers, select mobbin, and sign in with your Mobbin account when the browser window opens. Approve it once and you are connected. From then on, you just prompt normally. When your request touches UI, Claude can call the Mobbin tools on its own to go find references before it designs. You'll see it search, pull screens, and describe the patterns it found, then build with that context in hand. One thing to know going in: the MCP is a paid feature. It's included on all of Mobbin's paid plans, not the free tier, with unlimited usage during the beta (Mobbin says it may require AI credits later). You can find the current setup details here: https://mobbin.com/?via=griffin ### A real workflow: designing from evidence Say you're building an onboarding flow. Old way: you prompt Claude, it invents three screens, you feel like something's missing, you go to Mobbin in your browser, look at how Duolingo and Notion and Linear handle onboarding, screenshot a few, paste them back in, and re-prompt. Four context switches before you get something good. With the MCP, you tell Claude what you're onboarding users into and ask it to reference real products first. It searches onboarding flows across shipping apps, summarizes the shared structure, welcome, permission priming, a quick win, then progressive setup, and builds your flow on that skeleton. The first pass is already grounded, so your iterations are about your product instead of fixing generic scaffolding. The same loop works for anything: paywalls, empty states, dashboards, settings, profile screens, checkout, toasts and dialogs. Wherever there's an established pattern, the agent can go learn it before it draws it. ### What you can search: screens, flows and sections The MCP exposes three levels of reference, and knowing them helps you prompt well. Screens are individual UI states, one paywall, one settings page, one empty state. Flows are sequences, the full sign-up or checkout journey across multiple screens, which is where you learn ordering and pacing. Sections are the building blocks, a navigation bar, a pricing table, a comment thread, pulled out so you can compare how dozens of apps solve one component. In practice you mix all three. You might have Claude pull a flow to get the overall shape, then drill into sections for the parts that matter most, then reference specific screens for polish. It's the same way a good designer researches, just running inside the agent. ### Is the Mobbin MCP worth it? If you're regularly designing or building UI with Claude Code, yes. The value isn't that it saves you a few screenshots. It's that it raises the floor on every first pass, so you spend your time refining real decisions instead of dragging generic output toward something usable. If you only touch design occasionally, the honest answer is that the free Mobbin library plus manual references may be enough. The MCP earns its keep when the reference-then-design loop is something you're doing every day, because then automating it compounds. For me, working with AI agents on interface work constantly, having the reference step happen automatically is the difference between the agent guessing and the agent knowing. If you want to try it, you can find the current paid plans and setup here: https://mobbin.com/?via=griffin ### FAQ Do I need a paid Mobbin plan? Yes. The MCP is included on all paid plans, with unlimited usage during the beta. The browsing library has a free tier, but the agent integration is a paid feature. You can see the current plans here: https://mobbin.com/?via=griffin Does it work with tools other than Claude Code? Yes. Mobbin's setup docs now cover Claude Code, Claude Desktop, Cursor, Codex and v0, and any MCP-compatible agent can connect to it. This post and video focus on Claude Code because that's where I do most of my building. If you work in Codex, my setup guide is here: https://griffinwooldridge.com/blog/codex-for-designers Will it just copy other apps' designs? No. It gives the agent references to learn patterns from, the same way you'd study real products before designing. You're getting grounded structure and proven patterns, not a pixel-for-pixel clone. How many screens are in the library? More than 621,500 real, shipped screens across iOS, Android and web, kept current so you're referencing how products look today. ### Where the Mobbin MCP fits The Mobbin MCP is the rare integration that changes the quality of the output, not just the speed. It closes the gap between "AI made me a screen" and "AI made me a screen grounded in how real products actually work." If you build interfaces with Claude Code, it belongs in your setup. Set it up and start designing from real references: https://mobbin.com/?via=griffin https://griffinwooldridge.com/blog/ai-design-tools https://griffinwooldridge.com/blog/claude-fable-5-for-ui-design-how-to-get-beautiful-output-every-time https://griffinwooldridge.com/blog/claude-skills-for-designers https://griffinwooldridge.com/blog/cursor-for-designers Mobbin is my top pick, but it's one of several MCP servers worth running; I compared the best ones here: https://griffinwooldridge.com/blog/mcp-servers-for-designers Mobbin is where I start, but it is one of five reference sites I give agents, each for a different stage: https://griffinwooldridge.com/blog/ai-ui-design-reference-sites --- # Anything AI App Builder Review (2026): Pricing, Limits & What I Built URL: https://griffinwooldridge.com/blog/anything-ai-app-builder-review Published: 2026-06-11 Author: Griffin Wooldridge I tested the Anything AI app builder by shipping a real client portal with authentication, a database and Stripe. Here is what worked, what broke, and whether it is worth paying for. ### Anything AI app builder review: the short answer Anything is one of the strongest AI app builders I have tested for designers who want to ship a real product without assembling the backend themselves. From one prompt, it produced a working client portal with authentication, database tables, file uploads, Claude-powered proposals and Stripe checkout. The tradeoff is control and cost. The first UI still looked generic, complex redesigns used credits quickly, and the autonomous Max tier is expensive. My verdict: use the free plan to validate a serious app idea, then move to Pro when you need private projects, a custom domain and enough credits to iterate. PICK|Best for|Designers shipping full-stack apps|Database, auth, hosting and payments are built into one workflow PICK|What I built|Freelance client portal|Clients, projects, invoices, file uploads and Stripe checkout PICK|Best plan|Pro for active projects|Private projects, custom domains and a practical credit allowance PICK|Main drawback|Credit usage|Long builds, redesigns and Max sessions can consume credits quickly ### What is Anything? Anything is an AI app builder. At its core, you describe what you want in plain English, and it builds you a real full-stack application complete with a database, back-end logic, user authentication, and payments. You can also build for iOS and Android, not just the web. It doesn't build from a template, and it's not a drag-and-drop builder. It generates high-quality working code from your description as an AI agent. It has hundreds of thousands of users, and the reason it's growing so fast is that it's the first tool to get the full picture right: the UI, but everything underneath it as well. Anything has a free plan if you want to poke around before committing, and new users get 20% off a paid plan through my link. ### Building a real app: a freelance client portal To show what Anything can do, I built something I've genuinely wanted for a while: a freelance client portal. A tool where I can track active clients, manage project deadlines, store deliverables, and send invoices, all in one place. This is the kind of app that requires real back-end functionality. And it's not just for me - it's for any designer managing client work. Concretely, I set it three tasks: User authentication plus a dashboard of active clients, projects, status and deadlines File uploads for deliverables and a simple invoices view Stripe payments so clients can pay invoices inside the portal When you're inside Anything, the left sidebar gives you dedicated pages for projects, databases, and custom instructions. Custom instructions let you describe exactly how you want Anything to respond when you prompt it, essentially a personalization layer. ### Connecting Figma and generating from one prompt If you already work in Figma, you can connect your Figma account directly. Hand it your existing designs, and Anything will build them as an actual working app. I typed out what I wanted, hit generate, and Anything started planning the app, thinking through structure, functionality, and scope. It enabled sign-in, set up API routes, and did a ton of back-end work without me asking. That was all from a single prompt. ### Auth and a database from the first build The first build landed on a sign-in page. I created an account to test authentication and it worked. Back in the databases section of my dashboard, I could see that a dedicated database had already been created with support for users, clients, projects, invoices, and more. ### The first dashboard The app already had a dashboard, a client list, a projects page, and an invoices page, with a couple of helpful KPIs at the top showing total outstanding and total paid. A solid start. ### Fixing bugs by describing them The first thing I tested was adding a client. That worked, but a dropdown menu on the right side of the client card wasn't responding at all. I told Anything: "I've created a client, but the dropdown on the right to edit the client isn't working. Fix it." It fixed it. The dropdown opened, editing worked, and the changes persisted after navigating away and back, confirming the database was functional. ### Adding AI features in plain English Here's where things get interesting. I wanted the app to auto-generate a project proposal based on the client's name and project type, without hunting down an API, writing integration code, or handling response formatting. I just typed: "Add a button on the project page that uses Claude to auto-generate a project proposal based on the client name and project type. Display it in a modal." Anything has over 100 built-in integrations you can add just by describing them. Claude, ChatGPT, Stripe, Google Maps, PDF generation, email - all available with a slash command. I hit "Generate Proposal" and got back a full, well-structured design project proposal complete with phases, a cost breakdown, and next steps for the client. You can regenerate it or copy it straight to your clipboard. The whole thing took one prompt. ### Setting up Stripe payments For the final functional piece, I wanted clients to be able to pay their invoices directly inside the portal. In Anything, there's an "Accept Payments" section in the dashboard. I connected my Stripe account by simply logging in, no digging for API keys. Then back in the project, I told it: "Let's allow clients to pay their invoice in this portal. Set up Stripe payments to make this happen." It implemented a "Copy Link" button that leads to a real Stripe checkout page. It's in test mode by default, but telling Anything to push to production flips it to a live invoice page where clients can pay and funds go straight to your Stripe account. If you've ever tried to set up Stripe manually, you know how painful that process is. This took one sentence. ### Making it look good Functional is great, but at this point the app was looking pretty generic - default colors, basic layout. So I attached a screenshot for design inspiration and said: "Let's give this dashboard some more personality, make it prettier, and use the attached design as inspiration." The result was new colors, a refreshed layout, and working charts with tooltips. Not a full redesign, but a meaningful visual lift with zero friction. ### Publishing and going live Publishing is straightforward. Hit publish, and the app gets a live URL. On a paid plan, you can connect a custom domain and remove the Anything branding in about two minutes. For mobile, Anything builds on Expo, which means your app is App Store ready out of the box. There's an App Store review feature that scans for issues Apple might reject so you can fix them before submitting. No Xcode, no provisioning profiles, no developer account. ### The feature that impressed me most: Max Max is Anything's autonomous software engineer mode. When you run Max on your project, it doesn't wait for your input. It opens your app in a real browser, scrolls through it, clicks buttons, logs in as a test user, goes through the checkout flow, and tries to break things. When it finds something broken, it fixes it, then tests again. It's like having a QA engineer and a developer working together in the background while you do other things. ### Anything pricing and limits Anything is credit-based. Every message you send burns credits, and bigger jobs (Max runs, multi-agent builds, long sessions) burn more, so the plan you need depends on how much you build, not how many apps you have. The free plan lets you build and publish without paying, but projects are public, the app carries Anything branding, and you're on a small monthly credit allowance. It's enough to judge the tool, not to ship a client project. Pro is $19 a month (about $14 a month billed annually) for 20K credits, private projects, custom domains, no Anything branding, unlimited projects and 50 GB of storage. This is the plan most designers will land on. Max is $199 a month (about $159 a month annually) for 220K credits plus the Max agent itself: parallel agents, automated testing that drives your app in a real browser, visual QA with a computer-use agent, 1M context and 150 GB storage. You can also buy extra credits on any paid plan. Limits worth knowing before you start: Stripe runs in test mode until you tell Anything to push to production, mobile builds go through Expo so App Store publishing still needs an Apple developer account, and complex redesigns eat credits fast, so keep prompts specific. ### FAQ Is Anything AI free? Yes, there is a free plan you can build and publish on. Paid plans start at $19 a month for Pro, and new users get 20% off through my link. Does Anything build real code or templates? Real code. It generates a full-stack app from your description, with a database, authentication, back-end logic and payments, rather than filling in a drag-and-drop template. Can Anything publish mobile apps? Yes. It builds on Expo, so your app is App Store ready, and there's a review feature that scans for issues Apple might flag before you submit. Anything vs Claude Code, which is better for app building? For most designers Anything is faster end to end because hosting, database, auth and Stripe are built in. Claude Code gives you more control and is my everyday tool, but Anything gets more of the full picture right out of the box. What is Anything Max? Max is Anything's autonomous engineer mode. It opens your app in a real browser, clicks through it, finds bugs and fixes them without you prompting each step. It's included on the Max plan. ### Should you build with Anything? If you've had an app idea sitting in your notes for months because you couldn't build it, this is a genuinely good time to do something about it. I'd put Anything on the same level as Claude Code in terms of app-building capability and ease of use, which is saying something because Claude Code is my usual go-to. Anything just gets more of the full picture right, from the UI to the infrastructure underneath it. Pick an idea you've been sitting on, and just describe it. If you want to try it yourself, there's a free plan to start and new users get 20% off a paid plan through my link: https://anything.link/griffin-wooldridge If you keep building after the first prototype, add your visual rules to an AGENTS.md file so the interface stays consistent across prompts: https://griffinwooldridge.com/blog/agents-md-for-design-projects I also pushed Anything harder by building a full-stack client portal with it; that walkthrough is here: https://griffinwooldridge.com/blog/full-stack-freelancer-portal-anything-ai-app-builder For how Anything fits the wider landscape: https://griffinwooldridge.com/blog/ai-design-tools --- # Stop Letting AI Design From Scratch: 5 UI Reference Sites URL: https://griffinwooldridge.com/blog/ai-ui-design-reference-sites Published: 2026-09-01 Author: Griffin Wooldridge The best AI UI design references give coding agents real products, components, and motion patterns to work from. Here is how I use Refero, Mobbin, 21st.dev, Transitions.dev, and Beautiful UI to get more intentional interface design. ### The best AI UI design reference sites The best AI UI design reference sites in 2026 are Mobbin for real product research, Refero for complete user flows and visual styles, 21st.dev for production-ready components, Transitions.dev for motion patterns, and Beautiful UI for AI-native interface components. AI coding tools can build interfaces quickly, but speed is not the same as taste. Ask an agent to design from scratch and you will usually get the same cards, gradients, layouts, and color palettes. The fix is not a 500-word prompt full of adjectives. The fix is giving the agent better evidence. PICK|Best overall reference library|Mobbin|Deep search, real product flows, and an MCP that works inside your agent PICK|Best for complete UX flows|Refero|See how proven apps handle a task from beginning to end PICK|Best for coded components|21st.dev|Copy a component, its code, or an agent-ready implementation prompt PICK|Best for interface motion|Transitions.dev|Production-quality animation patterns plus an installable AI skill PICK|Best for AI-native UI|Beautiful UI|Polished components for chat, search, insights, and generative interfaces ### Why AI-generated UI looks generic An AI agent is excellent at implementation, but it cannot infer your product's visual direction from words like clean, modern, or premium. Without references, it falls back to the patterns most common in its training data. That is why unrelated AI-built products often feel strangely similar. Reference-first design separates the problem into three layers: research the patterns that already work, choose components with more character than the default output, and add motion deliberately. The five resources below each solve one part of that stack. ### Refero: complete UX flows and Design.md inspiration Refero is useful when you need to understand how an experience works, not just how one isolated screen looks. Its library includes real web and iOS products from companies such as Stripe, Coinbase, Mercury, Figma, GitHub, and Webflow. You can browse screens, but the valuable part is seeing an entire flow: subscribing, uploading, personalizing, adding to cart, or completing onboarding. That sequence gives an agent interaction context. Instead of asking it to invent an upload flow, you can point to a proven example and explain what to preserve or change. Refero's Styles feature is particularly relevant for AI-assisted design. It turns the visual language of a real site into a markdown-style design specification covering typography, color, layout, border radius, and other system decisions. Give that file to an agent and it has a much clearer target than a screenshot plus a few taste words. Explore Refero: https://refero.design/ ### Mobbin: the best overall UI reference library for AI agents Mobbin is my default starting point because its library is both enormous and deeply searchable: more than 1,400 apps, 620,000 screens, and 320,000 flows at the time of recording. It covers individual screens, UI elements, complete flows, web products, and mobile apps. Deep Search is the differentiator. A query such as “empty states that encourage users to create their first project” returns examples that match the intent, not only a keyword or category. That lets you research a design problem at the level you would actually discuss it with another designer. The Mobbin MCP removes the manual handoff. I can ask Claude Code to find friendly, trustworthy fintech references, compare the strongest examples, and build a visual report explaining the patterns that create trust. The agent can link every recommendation back to the real screen in Mobbin, so the result is useful research rather than invented mood-board filler. For setup and a full MCP walkthrough: https://griffinwooldridge.com/blog/mobbin-mcp-claude-code-design-references ### 21st.dev: real UI components as code Refero and Mobbin show an agent what good products look like. 21st.dev gives it components it can actually implement. Each example is real code rather than a flattened screenshot, and you can copy the source, copy an agent-ready prompt, or optimize the instruction for the coding tool you use. The components span landing-page sections such as heroes, features, and pricing as well as product UI including dashboards, sign-up screens, toggles, sliders, and navigation. Importantly, you do not have to accept the component's original styling. Bring the structure into your project, then tell the agent to adapt its typography, spacing, tokens, and states to your existing design system. This is how you escape the default AI component vocabulary without rebuilding everything by hand. The 21st.dev MCP can also expose the library directly inside a compatible agent. Browse components on 21st.dev: https://21st.dev/ ### Transitions.dev: motion references for AI-built interfaces Motion is one of the easiest ways to spot an interface that was generated without design direction. Agents often ignore animation entirely or add movement that feels arbitrary. Transitions.dev provides a focused library of useful interface transitions that can be copied as production code. The library includes a generous set of free patterns, with additional examples on the Pro plan. More importantly, Transitions.dev offers an installable skill containing the motion patterns from the site. A one-line install can give Claude Code, Codex, Cursor, or another compatible agent concrete examples of how responsive, purposeful UI motion should behave. Use it near the end of a build, after the structure and visual system are stable. Motion should clarify state changes and hierarchy, not distract from an unresolved layout. Explore Transitions.dev: https://transitions.dev/ ### Beautiful UI: components for AI-native products Beautiful UI is the most specialized resource in this list. It focuses on components for products where the end user interacts with AI: chat experiences, generative states, search, insights, flowcharts, navigation, and other patterns that traditional component libraries often do not cover well. The design and interaction quality make it valuable even when you are not building an AI product. You can use it as a reference for restrained color, typography, animation, dense information, and polished state changes. Design engineers can copy the code directly; designers can point an agent at a pattern and ask it to reproduce the behavior inside their own system. Explore Beautiful UI: https://beautifului.dev/ ### A practical reference-first AI UI workflow The tools work best as a sequence rather than five disconnected bookmarks. LIST|Research and visual direction: use Mobbin first, then Refero when you need additional context or a complete flow. Ask the agent to explain the patterns it finds before it starts drawing. LIST|Components and implementation: use 21st.dev after the direction is clear. Bring in selected components and adapt them to your tokens instead of asking the agent to invent a design system from scratch. LIST|Motion and interaction: use Transitions.dev once the product is nearly complete. Add movement where it explains a change, reinforces hierarchy, or makes an interaction feel responsive. LIST|AI-specific patterns: add Beautiful UI when the product includes chat, generation, agent activity, insights, or other AI-native behavior. This workflow is agent-agnostic. It works with Claude Code, Codex, Cursor, or any tool that can inspect references and implement code. The important change is the order: evidence first, components second, motion last. Two things make this stick across a project. First, write the visual rules you settle on into an AGENTS.md so the agent applies them every time: https://griffinwooldridge.com/blog/agents-md-for-design-projects Second, brief with references instead of adjectives, which is the whole point of my prompting guide: https://griffinwooldridge.com/blog/ai-prompts-for-ui-design I ran this exact workflow with Claude Fable 5.1 on a redesign of this site: https://griffinwooldridge.com/blog/claude-fable-5-1-ui-design-test ### FAQ What is the best UI reference site for AI agents? Mobbin is the strongest all-around choice because it combines a very large library, intent-based Deep Search, complete product flows, and an MCP that lets an agent research without leaving the session. How do I give design references to Claude Code or Cursor? Start with links or screenshots and describe which patterns matter. For a repeatable workflow, connect an MCP such as Mobbin or Refero, and store your own visual rules in an AGENTS.md or design markdown file. Should I copy UI components exactly? No. Use the component's structure and behavior as a starting point, then adapt its tokens, typography, spacing, responsive behavior, accessibility, and states to your product's design system. Can these resources fix bad AI-generated UI automatically? They raise the quality of the evidence and implementation options, but you still need design judgment. Choose references for a reason, explain the patterns worth borrowing, and review the result instead of asking the agent to imitate a screenshot blindly. Which resource should I use for UI animation? Transitions.dev is the most focused option in this list. Its copyable patterns and installable skill make it useful for teaching an AI coding agent how polished interface motion should behave. --- # Best Responsive Website Builders (2026): 6 Tested & Ranked URL: https://griffinwooldridge.com/blog/best-responsive-website-builders-ranked Published: 2026-05-18 Author: Griffin Wooldridge I tested Wix, Wix Studio, Webflow, Squarespace, Hostinger and Carrd for mobile responsiveness, breakpoint control and handoff. Here is the best builder for each kind of site. ### Best responsive website builders in 2026, ranked Wix is the best responsive website builder for most people in 2026. Wix Studio is the better choice for professional designers and agencies, while Webflow offers the deepest breakpoint control for people who already understand front-end layout. I’m a UI designer who has shipped sites across the major builders. I compared Wix, Wix Studio, Webflow, Squarespace, Hostinger and Carrd on the things that matter after the desktop mockup: mobile output, breakpoint control, fluid sizing, editing speed and how safely a client can take over. PICK|Best for most people|Wix|Strong automatic responsiveness plus a dedicated mobile editor PICK|Best for designers and agencies|Wix Studio|Custom breakpoints and fluid control without Webflow's learning curve PICK|Best for CSS-level control|Webflow|The most precise breakpoint and layout system PICK|Best polished templates|Squarespace|Reliable automatic mobile layouts with less configuration PICK|Best one-page builder|Carrd|Fast, inexpensive and responsive by default ### What makes a website builder truly responsive? Before the rankings, here’s what I’m measuring. A lot of builders claim to be “mobile-friendly.” The good ones do something specific: Real breakpoint controls: you can edit desktop, tablet, and mobile as separate canvases, not just preview them Fluid units: percentage widths, relative spacing, and CSS-style units instead of fixed pixels that blow out on smaller screens A dedicated mobile editor: not a toggle. An actual editor where you can adjust layout, typography, and spacing independently Stable drag-and-drop: elements stay anchored to the layout system when the screen size changes AI generation that outputs clean responsive code: in 2026, the best builders ship AI tools that can generate a fully responsive starter site from a prompt. The bad ones generate something that looks fine on the homepage and breaks everywhere else. That’s the rubric. Here’s the ranking. ### #6 Carrd Best for: Single-page personal sites, link-in-bio pages, coming-soon pages Carrd is the best one-page responsive website builder for tiny projects. It’s responsive by default, extremely cheap, and you can ship something in under an hour. The ceiling is the issue. Carrd is single-page only. Design flexibility is minimal. You’re not building anything that scales beyond a portfolio or a simple lead magnet. It’s a legitimately good free responsive website builder - just for small things. If you need more than one page, keep reading. ### #5 Hostinger Best for: Business owners who want speed and simplicity over customization depth Hostinger stands out because it gives you two genuinely strong paths to a responsive site. Path one: Hostinger’s AI website builder. Describe your business, and it generates a complete site - desktop, tablet, and mobile all dialed in by default. The built-in mobile editor handles typography and spacing adjustments automatically. For someone who doesn’t want to think about responsive design at all, this just works. Path two: Hostinger Horizons. Their newer AI vibe coding tool builds the frontend with React under the hood, fully responsive by default. It leans more toward web apps than traditional landing pages, but for solopreneurs building MVPs or interactive tools, it’s a real shortcut. Hostinger is less about deep customization and more about speed. If you want a business site up fast without making a single responsive design decision yourself, it’s a strong pick. ### #4 Squarespace Best for: Portfolios, small business sites, users who want polish without configuration Squarespace has some of the best-looking responsive templates on the market. The editor is clean, and the automatic responsive output is genuinely solid for most use cases. The limitation is control. Squarespace’s responsive design is essentially automatic - you design the desktop view and Squarespace adapts it to mobile based on its own rules. You can toggle elements off on mobile and adjust spacing, but you don’t get full per-breakpoint editing. There’s no separate canvas to rebuild your mobile layout from scratch. For a lot of users, that’s completely fine. But if you’ve ever needed your mobile layout to be structurally different from your desktop layout (different stacking order, different navigation, different image) you’ll hit the wall quickly. It’s a great pick for clean portfolio and brand sites. Not the right tool if you need deep responsive customization. ### #3 Webflow Best for: Designers and developers with front-end knowledge who want full control Webflow is the developer favorite, and for good reason. If you understand the box model, flexbox, and CSS grid, Webflow’s breakpoint system is best in class. You get precise control at every screen size, clean output, and the ability to build genuinely complex responsive layouts. The tradeoff is the learning curve - and it’s steep. If you’ve never touched front-end concepts, you will struggle. Freelance clients who inherit Webflow projects often give up because they can’t figure out how to make a basic edit. The builder is tailored to people who understand how HTML and CSS actually work. If you only know web design on a visual level, complex implementations will start to feel out of reach. Webflow ranks high for designers and developers who want full control. It ranks lower for everyone else. For beginners, it’s not where I’d start. ### #2 Wix Studio Best for: Freelance designers, agencies, and anyone building beyond a basic small business site Wix Studio is what Wix built specifically for designers and agencies. It competes directly with Webflow on responsive controls - without the same learning curve. You get three breakpoints out of the box (desktop, tablet, mobile) plus the ability to add custom breakpoints. A dedicated mobile editor. Fluid scaling on type, spacing, and grids. CSS-style responsive units baked into the editor. And responsive behavior controls on individual elements - you can tell a heading to scale proportionally, wrap, or stay fixed, and it works without writing a single media query. The grid system handles layout changes automatically. Section grids, stacks, alignment controls, design tokens for colors and typography - the whole editor feels like it was built by people who actually ship client sites. As a serious responsive design website builder, it’s the closest thing to Webflow without the steep curve. For freelance designers, agencies, or anyone building anything beyond a basic site, Wix Studio is the best call. ### #1 Wix (with Wix Harmony) Best for: most people, from beginners and business owners to freelancers shipping client work Wix earns the top spot in 2026 because of Wix Harmony, their flagship AI website builder announced on January 21, 2026 and rolled out over the following weeks. Harmony lets you generate a fully responsive, business-ready site from a single prompt. Aria, Wix’s built-in AI agent, builds a complete site already optimized for desktop and mobile. What separates Harmony from other AI site generators is the underlying architecture. Most vibe coding tools produce something that looks fine on the homepage and breaks everywhere else. Harmony is built on top of Wix’s existing platform - which means Aria’s changes don’t break the responsive layout, don’t introduce bugs, and don’t compromise SEO or accessibility. Once Harmony generates the site, you can drop into the editor and customize anything. Drag-and-drop controls, the dedicated mobile editor, real responsive templates - all of it. You can keep talking to Aria or take over manually. A few more reasons Wix takes the top spot: Over 2,000 designer-made responsive templates across every industry Automatic mobile optimization plus a separate mobile editor for fine control Enterprise-grade infrastructure with 99.99% uptime Built-in SEO tools and web accessibility compliance For most people (beginners, business owners, and freelancers who want to hand sites off to clients) Wix is the most complete responsive website builder available in 2026. The combination of Harmony’s AI generation, Aria’s ongoing assistance, and Wix’s mature responsive system is the best all-in-one package on the market. ### Quick reference: which builder should you use? Business owner who wants simplicity Need a single-page or link-in-bio site Portfolio or small business site, clean templates Designer or developer who wants full CSS-level control Freelance designer or agency building client sites Best all-in-one value for most people ### The final ranking Wix is the best responsive website builder for 2026 for most users - the combination of Harmony’s AI generation and a mature responsive system underneath makes it the strongest all-in-one package. Wix Studio is the top pick for designers and agencies who want maximum control without Webflow’s learning curve. Webflow is best for developers or designers with a technical background. Squarespace is solid for polished portfolio sites. Hostinger handles the responsive design decisions for you. Carrd is the fastest path to a simple one-pager. If the site you are building is closer to an app than a brochure, a builder is the wrong tool. Anything gives you auth, a database and Stripe from one prompt, and I reviewed it end to end: https://griffinwooldridge.com/blog/anything-ai-app-builder-review If you want to generate the screens first and then build, UX Pilot is the fastest end-to-end UI generator I have used: https://griffinwooldridge.com/blog/ux-pilot And if you would rather have a model write the site outright, my Claude Fable 5 prompting guide is where I would start: https://griffinwooldridge.com/blog/claude-fable-5-for-ui-design-how-to-get-beautiful-output-every-time Building for AI agents specifically? Hosting matters too, and I covered that here: https://griffinwooldridge.com/blog/web-hosting-for-ai-agents Framer, one of the builders ranked above, also gets a full hands-on review: https://griffinwooldridge.com/blog/framer-3-ai-agents-tutorial-review ### FAQ What is the best responsive website builder in 2026? Wix, for most people. Wix Harmony generates a fully responsive site from one prompt, and the dedicated mobile editor and responsive templates underneath let you customize it without breaking the layout. Which builder is best for designers and agencies? Wix Studio. You get three breakpoints plus custom ones, a dedicated mobile editor, fluid scaling and CSS-style responsive units, without Webflow's learning curve. Is Webflow good for beginners? Not really. Its breakpoint system is best in class if you understand the box model, flexbox and CSS grid, but people without front-end knowledge tend to struggle, and clients who inherit Webflow sites often can't make basic edits. Does Squarespace let you edit the mobile layout separately? Only partially. You can hide elements on mobile and adjust spacing, but there is no separate canvas to rebuild the mobile layout, so structurally different mobile designs hit a wall. --- # Claude Fable 5 for UI Design: Beautiful Output Every Time URL: https://griffinwooldridge.com/blog/claude-fable-5-for-ui-design-how-to-get-beautiful-output-every-time Published: 2026-06-12 Author: Griffin Wooldridge Anthropic released Claude Fable 5 in June 2026 and it is already leading nearly every benchmark. Here is how to use it for UI design, when to pick it over Opus 5 and Sonnet 5, and the prompting approach that gets beautiful output every time instead of generic AI slop. Short answer: Claude Fable 5 is the best model I have used for product UI, on one condition. You brief it like a senior design engineer: design system first, realistic data, explicit states, clear scope. Do that and the first pass looks shipped. Skip it and you get the same generic dashboard as every other model, at twice the token cost. I put Fable 5 through three real tests: One-shotting a full dashboard from a single prompt Building an entire multi-screen flow using the Mobbin MCP Rebuilding a landing page from nothing but a screenshot Prefer to watch instead? Here is the full video walkthrough: ### What is Claude Fable 5? Claude Fable 5 is Anthropic's first publicly available Mythos-class model, and it sits a tier above Opus 5 in raw capability. It is the top scorer on the major end-to-end vibe coding benchmark, basically maxing out what is currently possible for UI, UX, and product design work. The headline feature for designers is vision-based self-verification. Fable 5 does not just review its work by reading code. It uses actual vision to check its output against your original design or goal, resizing between mobile and desktop, clicking through interactions, and fixing its own bugs before handing the work back to you. When it comes time for you to review, you are reviewing finished work rather than supervising every step of the process. ### When to use Claude Fable 5 vs Opus 5 and Sonnet 5 Before you switch your default model, you need to understand the tradeoff. Claude Fable 5 lists at $10 per million input tokens and $50 per million output. That is two times Opus 5 ($5 and $25) and five times Sonnet 5 ($2 and $10), which is the model I usually default to. So what kind of work justifies that higher token usage? Fable 5 earns its cost on the hardest tasks, and UI design is one of them. It is much better at one-shotting entire apps, it holds a design system together across many screens without drifting, and it thoroughly checks its own work using vision once it finishes generating. Here is a simple rule of thumb: Use Sonnet 5 for quick iterations, small components, and everyday design work where you want speed and low cost. Use Opus 5 for more complex work that still fits in a single focused session. Use Claude Fable 5 when you are building an entire app, a full multi-screen flow, or anything where you want the model to plan, build, and verify autonomously with minimal hand-holding. ### How much does Claude Fable 5 cost to run? Fable 5 is token-hungry. I am on the Claude Max 5x plan, which gives me a lot more room to run a powerful model like this. My 5-hour limit started at 68 percent before my first generation. After one prompt that built a complete dashboard, it jumped to 91 percent. That is a 23 percent increase in usage from a single prompt. If you are on Claude Pro, you will burn through your usage quickly, especially across a full project. For that reason, treat Fable 5 as the model you reach for on high-value builds, and keep a cheaper model in rotation for routine work. ### When should I use the 1 million context window? When you switch to Fable 5 in Claude Code, you will see two options: the regular model and the 1 million context window version. A context window is just the model's working memory, the maximum amount of information it can see and process at one time. As a designer, reach for the 1 million context window when you are feeding the model a lot of upfront context: an entire design system, a full codebase, or a stack of user research documents it needs to remember while it designs. For a lighter task where you are not loading much context, regular Fable 5 works just fine. ### How to write Claude Fable 5 prompts for UI design This is the part that matters most, because the output is only as good as the direction you give it. A model this powerful does not reward lazy prompting. If you say "build me a dashboard with this, this, and this" in one sentence, the model has to guess what you want, no matter how capable it is. Long, concrete, thorough prompts are what unlock beautiful output. The prompt I used to one-shot my dashboard did four specific things: LIST|Step 1: Force design-system thinking first. I asked the model to define a design system before building any components, so the output is coherent rather than component-by-component guesswork. LIST|Step 2: Anchor to realistic data. A simple "no lorem ipsum" constraint dramatically improves how finished the final UI looks. LIST|Step 3: Specify states explicitly. Hover, focus, loading skeletons, empty states. Models skip these by default unless you ask. LIST|Step 4: Set clear scope. Concrete requirements give the model a target to verify against later. Write your prompt like a brief you would hand to a senior design engineer, then let the model plan and build against it. Here was my prompt: Build a fully interactive dashboard for a B2B analytics SaaS product. This will be used by business analysts to identify key company performance metrics. A sidebar nav with icons, active states, and a collapsed/expanded toggle A top header with search, notifications, and a user avatar menu A main content area with: KPI cards (with trend indicators), a line chart showing 90-day data, a data table with sortable columns and row actions, and a status feed Use a cohesive design system - define your spacing scale, type scale, and color system before building components Hover states, focus states, and loading skeletons on all interactive elements All data should be realistic and hardcoded - no placeholder Lorem Ipsum ### How does the effort dial work: medium, high, extra, max and ultra? Claude Code gives you an effort selector, and you should think of it as a dial for how hard the model works. For a medium-complexity project, leave it on medium. When you want deeper thinking and more rigorous verification, you can turn it up to high, extra, max, or ultra code, which is the absolute maximum effort level. Running Fable 5 on Ultra Code means you are using one of the most powerful AI configurations available right now. It also burns the most tokens, so I usually turn it down to extra to preserve my limit. Remember that even at lower effort, you are still getting an extremely capable model, just with slightly less deep thinking and faster responses. ### Test 1: one-shotting a dashboard with Claude Fable 5 For my first test, I gave Fable 5 my detailed design-system-first prompt and watched what happened. It immediately chose to run its interface design skill, which is exactly what that skill was built for: dashboard/product UI. What followed was the most impressive thing I have seen from any model. About 10 minutes and 20k tokens in, Fable 5 started resizing the browser between mobile and desktop widths to exercise the responsive interactions on its own. It tried to change the table sorting, found that it did not work, opened the console, diagnosed the bug, and fixed it. This autonomous, vision-based review session happened in real time without me asking for any of it. After about 25 minutes, the first build was done, and it might be the best first pass I have ever seen Claude Code produce. The interactions felt precise, the data looked realistic down to the trend indicators, the date range selectors worked, the toasts animated fluidly in the bottom right, and the sidebar collapsed and expanded with a smooth animation rather than snapping. The search bar was functional and highlighted matching rows in the table. Nothing about it read as AI-generated. ### Test 2: building a full multi-screen flow with the Mobbin MCP A single screen is one thing. An entire app is another. The problem with building a whole flow from scratch is that the model only has its training data to rely on, so it can drift into generic patterns. The fix is to give it a reference layer. I pointed Claude Code at Mobbin using the Mobbin MCP. Mobbin is a go-to resource for professional designers, with over 600,000 screenshots of real mobile and web apps from companies like OpenAI, Cursor, and Vercel. These are patterns that have actually shipped to real users, which is how you know they are reliable rather than just pretty. Instead of manually digging through hundreds of screens, I told the agent to study the most relevant designs on Mobbin and use them to inform new revenue, accounts, and settings pages. I also asked for a complete visual report of everything it referenced, so I could verify it actually did the research. The result was excellent. Fable 5 delivered all three screens plus an HTML report showing it had referenced top dashboards from Stripe, Mixpanel, HubSpot, and Squarespace, with a note on each explaining the specific pattern it pulled. The revenue page matched the overview page's styling exactly. The accounts page had functional KPI selectors to filter the table. The settings page split everything into clean tabs, drawing on the settings pages of Figma, Coda, Render, and Pitch, complete with a member management table, toggleable notifications, and a polished billing tab. The key takeaway: Fable 5 does not drift off the design guidelines and component styling it already established, which is a problem you have probably hit with other models. 👉🏼 Try Mobbin today here: https://mobbin.com/?via=griffin ### Test 3: screenshot to code, and whether Claude Fable 5 is good for web design For the final test, I gave Fable 5 a screenshot of the entire Stripe landing page and asked it to rebuild the page from scratch in HTML, CSS, and JavaScript. I deliberately did not point it at stripe.com, because I wanted to test pure vision skills rather than let it read any source code. The results were mixed. On the upside, it implemented a dynamic animated shader in the background that shifts color, which is something I have struggled to get other models to do. On the downside, the attention to detail dropped off. The hero section looked noticeably different, company logos came back as plain text instead of real logos, and the more complex graphics, like Stripe's node-network visualization, were either skipped or replaced with safe, standard-looking sections. Telltale signs like emoji inside cards and generic gradients gave away the AI origin. So is Claude Fable 5 good for web design? For polished marketing pages with complex custom graphics, it still plays it safe and your job as a web designer is secure for now. For product UI, UX, and dashboard work, it is a genuine leap forward. ### Fable 5.1 update (September 2026) Anthropic shipped Claude Fable 5.1 in early September 2026. Everything in this guide still applies: the prompt structure, the effort dial, and the 1M context window are unchanged, and 5.1 keeps the $10/$50 list price. One pricing change matters: cached input reads dropped to $0.25 per million tokens, a quarter of what other Claude models charge, which cuts the cost per design on reference-heavy prompts that reuse a big design system or codebase. What improved is design judgment on the first pass. In my 5.1 tests it made stronger calls on hierarchy, typography, spacing, and density without falling back to the same generic dashboard every time, and it needed fewer correction rounds to get past the safe, templated look. The caveat is the same as it was for 5. The final 10 to 20 percent still needs a designer to catch awkward interaction choices and missing product logic. I ran 5.1 through a finance dashboard, a reference-led site redesign, and a video editor, with screenshots of each: https://griffinwooldridge.com/blog/claude-fable-5-1-ui-design-test ### FAQ What is Claude Fable 5? Anthropic's first publicly available Mythos-class model. It sits a tier above Opus 5 and uses vision to check its own output, resizing between mobile and desktop and fixing its own bugs before it hands the work back. How much more does Fable 5 cost than Opus 5 and Sonnet 5? On list price, two times Opus 5 and five times Sonnet 5 as of September 2026 ($10/$50 vs $5/$25 vs $2/$10 per million tokens). A single dashboard prompt moved my Claude Max 5x usage from 68 to 91 percent, so save it for high-value builds. When should I use the 1 million context window version? When you are feeding the model a lot of upfront context, like a full design system, a codebase, or a stack of research documents it needs to remember while it designs. For lighter tasks the regular model is fine. Is Claude Fable 5 good for web design? For product UI, dashboards and multi-screen flows it is a real leap. For polished marketing pages with complex custom graphics it still plays it safe: in my screenshot-to-code test, logos came back as text and the hero drifted. ### What this means for designers You have now seen what Claude Fable 5 can do from a single prompt, how it handles a full multi-screen flow with the Mobbin MCP, and how it performs at turning a screenshot into code. The thing worth remembering is that the output is only as good as the direction you give it. Fable 5 produces truly impressive interfaces, fast, but it is still responding to your taste, your judgment, and how well you can describe what you want. The design thinking does not disappear. It moves earlier in the process, into the prompt and the references you provide. If you are a UI, UX, or product designer, this is an exciting time to be working. Set up a thorough design-system-first prompt, give the model a strong reference layer, tune your effort dial to match the job, and go see what you can build. Want to see how Fable 5 holds up against OpenAI's best on the same UI brief? I ran that head-to-head here: https://griffinwooldridge.com/blog/gpt-5-6-vs-fable-5 The prompting principles behind this apply to any model, and I broke them down separately here: https://griffinwooldridge.com/blog/ai-prompts-for-ui-design For repeatable output, I keep the project-level visual rules in an AGENTS.md file: https://griffinwooldridge.com/blog/agents-md-for-design-projects And when the model needs real components instead of invented UI, these are the MCP servers I connect: https://griffinwooldridge.com/blog/mcp-servers-for-designers For the full toolkit around Fable 5, start with my complete guide: https://griffinwooldridge.com/blog/ai-design-tools --- # Claude Skills for Designers URL: https://griffinwooldridge.com/blog/claude-skills-for-designers Published: 2026-03-09 Author: Griffin Wooldridge Most designers prompt Claude the way they'd prompt any AI and hope for something usable. Skills are the built-in feature that changes the quality of what it produces. Here's what they are and which ones are worth turning on. ### The hidden feature that changes how you generate UI Most designers are prompting Claude the same way they'd prompt any AI: describe what you want, hope for something usable, tweak it from there. And it works, kind of. But there's a built-in feature most designers don't know about that completely changes the quality of what Claude produces. It's called skills, and once you understand how they work, you'll never go back to prompting without them. ### What are Claude Skills? Think of a skill as a plug-in for Claude. It's a set of instructions and context that gets loaded before Claude responds, completely changing how it approaches a specific type of task. Instead of Claude making generic decisions about how to design or code something, a skill gives it a design playbook to follow - specific guidance on aesthetics, output format, constraints, and what to avoid. The difference in output quality is significant. Skills live as folders with a skill.md file at the root. That file is the brain: it has a name, a description that tells Claude when to trigger it, and the actual instructions. Some skills also include reference documents, scripts, or assets that Claude can pull from. There are several skills worth knowing about as a designer. Here's a breakdown of the ones that matter most. ### What does the Frontend Design skill do? This is the headliner. If you only use one skill, make it this one. When you ask Claude to build a landing page, dashboard, component, or any UI - this skill kicks in before it writes a single line of code. It forces Claude through a design thinking process first, asking it to consider four things: Purpose: what problem is this interface solving, and for who? Tone: what's the aesthetic direction? Minimal, editorial, brutalist, maximalist? Constraints: any technical requirements to work within? Differentiation: what makes this memorable? The skill includes a section called Frontend Aesthetics Guidelines that reads like it was written by a senior product designer. It covers typography (with explicit direction to avoid generic fonts like Arial and Inter in favor of distinctive, characterful pairings), color, motion, spatial composition, and atmosphere. The most important part: the skill explicitly tells Claude what not to do. It bans what it calls "AI slop" - those overused purple gradients, rounded corner cards on white backgrounds, Inter everywhere. Every designer has seen that output. This skill is specifically built to avoid it. Update, September 2026: Anthropic has since rewritten the skill. The current version drops the named font blacklist and instead casts Claude as the design lead at a studio known for giving every client a distinct identity. It makes Claude draft a short design plan (color, type, layout, principles), review that plan against the brief so the choices are specific to this project rather than defaults, and take one aesthetic risk it can justify. The four questions above still drive it, and the output is more distinctive than the original. The result is UI that actually looks designed, not AI-generated. ### How does the Implement Design skill turn Figma into code? This one is from Figma directly, and it does exactly what it sounds like. You give Claude a Figma URL, and it translates your design into production-ready code - as close to one-to-one visual fidelity as possible. Here's what's happening under the hood: Claude parses the URL, pulls the file key and node ID, and calls the Figma MCP server to fetch your full design context. That means it's reading actual layout properties, auto layout settings, typography specs, color values, spacing tokens - not guessing from a screenshot. It also takes a screenshot of the design as a visual reference and downloads any assets like icons or images before it starts building. What makes this different from just screenshotting a design and pasting it into Claude is that it maps to your actual project conventions. If your codebase uses a specific component library or design system, it reuses your existing buttons, inputs, and typography components instead of recreating them from scratch. It also runs a validation checklist at the end - layout, typography, colors, interactive states, responsive behavior, and accessibility - all compared against the Figma screenshot. One thing to note: this skill requires the Figma MCP server to be connected. That's the bridge that lets Claude actually read your files. Once it's set up, you paste a link and Claude does the rest. If you've ever handed Claude a screenshot and gotten back something that looked nothing like your design, this skill closes that gap considerably. The skill handles the translation; the setup around it is what decides whether the code matches your system. My full Figma-to-code process, including what to put in the prompt and the AGENTS.md, is here: https://griffinwooldridge.com/blog/figma-to-code-with-ai ### What is Theme Factory? Theme Factory gives you 10 pre-built professional themes - each a complete package with a curated color palette and carefully paired fonts. Think of it like a design system starter kit, but not just for UI. You can apply any theme to slides, documents, web pages, dashboards, or reports - basically any artifact Claude generates. So if you're building a presentation and don't want to spend 20 minutes picking fonts and colors, you pick a theme and everything stays consistent throughout. Each theme has a distinct visual identity built for specific contexts: corporate presentations, creative pitches, editorial layouts, and more. And because each one includes both header and body font pairings, you get solid typographic hierarchy built in. ### How does the Brand Guidelines skill keep output on brand? This one is about consistency at scale - and it's especially relevant for in-house designers and small agency teams. Out of the box, the skill is configured with Anthropic's brand. But that's not the point. The real value is using it as a template to encode your brand into Claude. What the skill does: it takes a set of brand rules (hex codes, font stacks, spacing values, logo usage, tone of voice) and enforces them automatically across everything Claude generates. Every artifact, every landing page, every deck comes out on brand without you having to check it. For small teams without a dedicated design system person, this is huge. You build the skill once, share it with your team, and suddenly marketing, sales, and anyone else generating things in Claude is automatically working within your visual standards - without needing to know anything about design. ### What is the Canvas Design skill for? This one's different from everything else. It's not for UI - it's for creating actual visual art: posters, graphics, and static design pieces as real PNG and PDF files. It uses a two-step process. First, Claude creates a written design philosophy - an aesthetic manifesto. It defines a visual movement, describes the principles behind it, the forms, colors, and composition rules it'll follow. Then in step two, it takes that philosophy and executes it on a canvas as a real image file. It's designing from principles first. Claude comes up with a creative direction and then expresses it visually - useful for event posters, social graphics, abstract art for presentations, or quickly exploring a visual direction you want to think through. It won't replace Photoshop or Illustrator. But it gives you a fast, principled way to explore visual ideas that you wouldn't otherwise be able to with Claude. ### How do I build my own Claude skill? This is where things get interesting. You're not limited to what's already been built. There's a skill called the Skill Creator - a skill for making skills. The workflow works like this: you tell Claude what you want the skill to do (maybe a skill that generates mobile app screens in your company's design system, or one that writes UX copy in your brand voice). Claude then interviews you - asking about edge cases, input formats, output expectations. Then it writes a draft of the skill.md file. But it doesn't stop there. It creates test prompts, runs them, shows you the results, and lets you evaluate whether the skill is working. You give feedback, it revises, you repeat. It's an iterative design process - the same way you'd design a product. When you're done, you can package it as a skill file and share it. Install it on another machine, send it to a teammate, share it with the community. It's like building your own design plug-in. If what you want to build is a whole product rather than a skill, an app builder gets you there faster than prompting from scratch. I shipped a client portal with auth, a database and Stripe in Anything and reviewed it honestly: https://griffinwooldridge.com/blog/anything-ai-app-builder-review ### FAQ What are Claude Skills? Sets of instructions and context, stored as folders with a skill.md file at the root, that load before Claude responds and change how it approaches a specific type of task. Which skill should a designer turn on first? Frontend Design. It forces Claude through purpose, tone, constraints and differentiation before it writes code, and the September 2026 rewrite adds a plan-and-critique pass plus one justified aesthetic risk per project, which is what keeps the purple-gradient, Inter-everywhere look out. Does the Implement Design skill need anything set up? Yes, the Figma MCP server has to be connected. That is how Claude reads your real layout, typography, colors and spacing from a Figma URL instead of guessing from a screenshot. Can I make my own skill? Yes. The Skill Creator skill interviews you about what the skill should do, drafts the skill.md, runs test prompts, and revises from your feedback until it works. You can package it and share it with teammates. ### The full designer's toolkit Put it all together and you've got a complete creative toolkit inside Claude: PICK|UI that looks designed|Frontend Design|Purpose, tone, constraints and differentiation before any code; bans the purple-gradient look. PICK|Figma designs to production code|Implement Design|Reads real layout, type and tokens through the Figma MCP. PICK|Consistent theming across artifacts|Theme Factory|Ten palette-and-font packages for slides, docs and dashboards. PICK|Your brand enforced automatically|Brand Guidelines|Hex codes, font stacks, spacing and tone applied to everything Claude makes. PICK|Posters and static graphics|Canvas Design|Principles first, then a real PNG or PDF. PICK|Something that does not exist yet|Skill Creator|Interviews you, drafts skill.md, tests it, revises. Skills aren't just a nice-to-have. They're the difference between Claude guessing at what good design looks like and Claude having an actual design system to work from. If you want to see all of this in action, watch the full videos below: Skills pair well with a reference-first workflow; the Mobbin MCP is the piece I reach for most: https://griffinwooldridge.com/blog/mobbin-mcp-claude-code-design-references New to designing with Claude? Start with the full walkthrough: https://griffinwooldridge.com/blog/claude-design-tutorial And for where skills fit in a wider AI-native workflow: https://griffinwooldridge.com/blog/ai-native-designer-roadmap --- # Full-Stack Freelancer Portal in One Afternoon with Anything URL: https://griffinwooldridge.com/blog/full-stack-freelancer-portal-anything-ai-app-builder Published: 2026-03-29 Author: Griffin Wooldridge Building a freelance client portal in one afternoon with Anything: role-based access, a real PostgreSQL database, backend functions, Resend email and working file uploads. ### Start with a plan, not a prompt A client portal with role-based access, file uploads, email notifications, and a real PostgreSQL database used to mean weeks of scaffolding or a hefty freelance bill. I wanted to see how far Anything could take me, from a blank project to something I'd feel comfortable putting in front of real users. What surprised me wasn't the speed so much as how much of the hard stuff (bcrypt password hashing, scoped API responses per role, cloud file storage) happened without me ever touching a config file. Before writing a single line of anything (or asking the agent to), I opened Anything's Plan mode - a free, credit-less mode where you talk through your data model with the agent before committing to a build. I told it I needed a users table, a projects table with name, description, status, deadline, and assigned freelancer fields, a deliverables table for uploaded files linked to projects, and a payments table tracking amount, status, and date per project. The agent came back with a refined schema, flagging relationships I hadn't fully thought through. Think of it as a rubber duck that actually pushes back. Once I was happy with the six-step plan it generated, I hit approve - and that's when the actual building started. ### From blank project to live database in under a minute After approving the plan, Anything spun up the database tables and API endpoints automatically. I didn't touch SQL. When it asked if I wanted to build a UI to visualize and manage the data, I said yes - and within a minute I had an actual running app with a projects view, a users table, deliverables, and payments. To make the UI useful immediately, I asked the agent to populate the dev databases with placeholder data, and watched rows appear in real time. One thing worth knowing: every project in Anything gets two separate environments - development and production. Dev is your sandbox; when you publish, the table *structure* pushes to production but the test data stays behind. That means all the placeholder data I generated never bleeds into real user accounts. I also discovered mid-session that I wanted a notes field on the projects table. Instead of hunting through a schema editor or writing an ALTER TABLE statement, I just told the agent: *add a notes field to the projects database.* The column appeared. That kind of thing saves a lot of context-switching. ### "Add sign up and log in" is a complete prompt This was the moment that made me sit up. My entire auth prompt was: *add sign up and log in to this app.* Four words (plus two). The agent added three pages - sign up, sign in, sign out - redirected the dashboard to a landing page for unauthenticated users, and created four new database tables: accounts, sessions, users, and verification_tokens. Under the hood, passwords are hashed with bcrypt and sessions are tracked via secure cookies. You don't configure any of this - it just works that way. When I noticed that a wrong password silently refreshed the page with no error, I asked the agent to *show an error banner upon incorrect email and password combination.* One prompt, done. Anything's project settings also surface OAuth options for Google, X, and Facebook sign-in (you bring your own credentials), with Apple sign-in listed as coming soon. There's also a magic link option for passwordless auth if you ask for it. The flexibility is real - it's not just one opinionated auth setup baked in. ### Role-based access that works at two levels The freelancer portal only makes sense if admins and freelancers see completely different things. I gave the agent a single prompt describing both roles in plain English: admins see all projects and freelancers, can assign people, and review uploads; freelancers only see their own assigned projects and can upload deliverables to those. The agent added a role field to the users table, built two separate views, and updated the sign-up flow to let new users choose their role. When I logged in as a freelancer, I saw two tabs - My Projects and Deliverables - scoped to only what was assigned to me. The admin view showed everything, with an admin badge in the nav and full controls across projects, users, deliverables, and payments. But the more important thing is *where* that scoping happens. It works at two levels simultaneously. At the page level, the server checks your session cookie and role before rendering anything. At the data level, the same API endpoint (say, GET /api/projects) returns all projects for an admin and only your assigned projects for a freelancer. I made this explicit with a follow-up prompt to lock down the backend function, and the agent tightened the logic accordingly. Same URL, different data, no client-side trickery. ### Backend functions: where the secret stuff lives Most no-code tools blur or completely hide the line between frontend and backend. Anything surfaces it clearly. Opening the code view shows an API folder where all backend functions live - serverless functions that run on the server, handle sensitive logic, and scale automatically. Each function has its own route visible in the publish menu: /api/deliverables, /api/payments, and so on. The reason this matters is straightforward: if you put an API key or database credentials in your page code, anyone can open browser dev tools and read it. Backend functions keep that on the server. To demonstrate this, I asked the agent to create a new endpoint at /api/project-stats that returns total project counts, in-progress vs. completed breakdowns, and outstanding payment totals - but only for admins. The agent wrote the function, added the access check, and then offered to wire it into the frontend. I said yes, and the KPI cards appeared at the top of the admin dashboard pulling live from that endpoint. Functions can run for up to five minutes per request, which opens up longer-running operations (AI processing, bulk exports, chained API calls) that would time out in a typical frontend fetch. ### Email notifications with Resend (and where your API keys go) The missing UX piece in most freelancer tools is the moment when someone gets assigned to a project and has no idea. I fixed that with a Resend integration. Anything has Resend as a built-in option, so the prompt was: *when an admin assigns a freelancer to a project, send them an email notification using /Resend, with the project name, description, and deadline.* The setup requires a Resend account, an API key, and a custom domain (so emails come from *notifications@yourdomain.com* rather than a generic address). Domain verification is a one-time DNS step through whatever registrar you use - Cloudflare, Namecheap, wherever. The API key goes into Project Settings → Secrets, not into the chat, not into the code. Secrets stored there are available to backend functions but never exposed to the frontend - which is the whole point. I also added a RESEND_FROM_EMAIL secret so the sending address is configurable. After testing by assigning my freelancer account to a new project as admin, the email arrived with the project title, description, and deadline populated correctly. ### File uploads are three things happening at once The deliverables feature looks simple from the UI (drag, drop, done) but the agent had to wire three things together: an upload component on the frontend, a backend function that sends the file to cloud storage, and a database write that saves the returned URL to the deliverables table. When I uploaded a file from the freelancer account, I got an inline preview and a download link. Switching to the admin account, the same file showed up confirmed. Out of the box, supported formats include PNG, JPEG, HEIC, GIF, WebP, SVG, PDF, audio, and video, with a 10MB cap per file. But validation is just a prompt away - I asked it to *show an error if the file is over 5MB and only accept PDF and image files,* and the next upload attempt with an oversized file hit a clear error message. The more interesting edge case: I could ask it to run GPT-4 Vision on every uploaded image to generate a description and save that alongside the file. The agent would wire the upload event to an AI backend function automatically. That's the kind of integration that could easily eat a day of developer time. ### Styling by reference and testing with a real browser The fastest way to style an app in Anything isn't writing CSS - it's dropping a URL. I gave it Linear's landing page and said *style the app like this.* Because Anything can fetch and read the URL, it matched the typography, color palette, and spacing from the reference page. One prompt, a few minutes, and the whole app looked substantially different. You can also drop a screenshot into the chat input if you'd rather pull from a specific image. Logos go through Project Settings → Assets, then a follow-up prompt to place them where you want them. For testing, Anything has a mode called Max that opens your app in a real browser and clicks through it like a human would - filling forms, navigating between pages, checking that data shows up in the right place for the right roles. It's slower and more expensive than standard mode, but it catches things a visual review misses. I ran it on the full freelancer-then-admin flow and watched the sidebar populate in real time with what it was checking. You can run multiple Max instances in parallel for different user flows. If you're putting something in front of real people, it's worth the extra cost. For my shorter, honest review of Anything as an app builder, start here: https://griffinwooldridge.com/blog/anything-ai-app-builder-review And for where it fits among the tools: https://griffinwooldridge.com/blog/ai-design-tools ### FAQ How long did the freelancer portal take to build? One afternoon, starting from Anything's Plan mode and ending with auth, role-based access, backend functions, Resend email notifications and working file uploads. Does Anything give you a real database? Yes. Approving the plan created PostgreSQL tables and API endpoints automatically, with separate development and production environments so placeholder data never reaches real users. How does role-based access work in Anything? At two levels: the server checks your session cookie and role before rendering a page, and the same API endpoint returns different data for admins and freelancers. Where do API keys go? Project Settings, then Secrets. Secrets are available to backend functions and never exposed to the frontend, which is how the Resend key stayed out of the page code. --- # The AI Notepad Changing How I Work: Granola URL: https://griffinwooldridge.com/blog/granola Published: 2026-03-06 Author: Griffin Wooldridge Why Granola replaced my manual meeting notes: how recipes, chat and integrations turn back-to-back calls into notes you can act on afterwards. We all know the pain of taking notes manually and sifting through them after a meeting. It's even harder on days with back-to-back calls and barely any time to pull out actionable insights from everything you captured. As a designer I have plenty of days like that: getting feedback on designs, discussing new projects with my team, conducting user interviews. I've been testing out a tool called Granola that's been changing how I handle all of it. It's an AI notepad, and I want to walk you through exactly how I've been using it in my actual workflow. ### What is Granola? At its core, Granola is an AI-powered notepad that sits in the background while you're in meetings. It transcribes your conversations across whatever platform you're on (Zoom, Google Meet, Slack huddles, and more) and then takes the notes you jot down during the call and enhances them with the full context of what was actually said. The key difference versus a lot of other tools in this space: there's no bot joining your call. No awkward "Notetaker Bot has joined the meeting" once you start transcribing. Granola transcribes your device's audio directly, so the experience for everyone on the call stays completely normal. You should still let people know you're transcribing, but the experience itself is way less intrusive. Granola currently works on macOS, Windows, and iOS - so whether you're in a remote or in-person meeting, you can always capture those important conversations and keep everything in one place. ### How I use it Whenever I join a meeting, Granola automatically detects it and starts transcribing in the background. It's discreet and doesn't send distracting notifications while I'm taking notes, which lets me stay focused on what's happening - whether it's a presentation or a quick sync with a coworker. Because Granola is a notepad first, I jot down whatever I want, just like I would on any notepad. The difference is that once the meeting wraps, Granola takes my rough notes and the full transcript and generates a structured summary organized around the things I wrote down. It's not just spitting out a generic recap of the whole meeting - it's building the summary around what I cared about enough to write down. That distinction matters a lot. It means the output actually reflects my priorities, not just a chronological dump of everything that was said. The notes come out in a clean Notion-style format - broken into sections, easy to scan, and fully editable. If I want to restructure something or add context after the fact, I just click in and type. You also get a set of templates you can apply depending on the type of meeting you're in - standups, one-on-ones, client calls - or you can leave it on Auto and let Granola figure it out. You can even build your own custom template if you have a specific format you prefer. For design reviews, I set up a template that pulls out feedback items, decisions made, and next steps. That alone has saved me a significant amount of time. ### Recipes This is where Granola really sets itself apart from other AI note-taking tools. Granola has a feature called Recipes - and if you've used slash commands in tools like Notion or Linear, this will feel familiar. Recipes are pre-built prompts or workflows that you can run before, during, or after a meeting. Before a call, I'll open up my note for that meeting, jot down who I'm meeting with and what it's about, then run a recipe that suggests talking points and questions based on that context. It pulls from the details I've written and gives me relevant suggestions - not just generic filler. I walk into the meeting more prepared, which is huge when you're bouncing between calls all day. I've also been using a recipe that generates formatted tickets on the fly. So if a colleague flags a design issue during a call, I can immediately generate a ticket description ready to drop into Linear or Jira - before the call is even over. No more "I'll write that up after" and then forgetting about it. You can also create your own recipes for whatever repetitive tasks you run into. If there's something you find yourself doing after every meeting, you can probably automate it. ### Chat The other feature worth highlighting is Chat. At any point, during or after a meeting, you can chat directly with your notes and ask questions about what was discussed. Say I'm 30 minutes into a long call and someone references something from earlier that I didn't fully catch. I can just ask Granola in the chat, "what did they say about the timeline?", and it pulls the answer directly from the transcript. No scrubbing through anything, no guessing. And since Granola keeps the full transcript of all your meetings, you can ask about things across multiple conversations. If I need to remember what a client said about their brand direction three meetings ago, I can pull that up through chat. It genuinely starts to feel like a searchable second brain for all of your conversations. For someone who's often in design reviews and stakeholder meetings back-to-back, being able to search across all of those conversations and surface specific details has changed how I work. ### Integrations and automation Granola connects with tools like Slack, Attio, and Zapier - so you can build automations off of your meeting notes. Send follow-up summaries to a Slack channel automatically. Push action items into your project management tool. Update your CRM after a sales call. All without leaving Granola. This is what takes it from being a nice notepad to being an actual workflow tool. Your meeting notes stop being static documents sitting in a folder somewhere and start actively driving the work that comes after the call. ### Who is this for? Honestly, regardless of what kind of work you do - if you have meetings and need to turn those conversations into action, Granola is worth trying. I was skeptical at first given how many note-taking tools already exist, but after spending time with all the capabilities built into it, it's something I wish I had downloaded sooner. The notepad-first approach means you stay engaged in the conversation instead of frantically trying to capture everything. The AI works in the background to fill in the gaps. The recipe system is genuinely powerful once you start customizing it for your specific workflows. And the chat feature means you never have to worry about missing something, because you can always go back and ask. ### FAQ What is Granola? An AI notepad that transcribes your meetings in the background across Zoom, Google Meet, Slack huddles and more, then turns your rough notes plus the transcript into a structured summary. It runs on macOS, Windows and iOS. Does Granola add a bot to the call? No. It transcribes your device's audio directly, so nothing joins the meeting. You should still tell people you are transcribing. What are Granola recipes? Pre-built prompts you run before, during or after a meeting: suggest talking points from your agenda, generate a Linear or Jira ticket from a flagged issue, or automate whatever you do after every call. What does Granola integrate with? Slack, Attio and Zapier, so summaries can post to a channel, action items can go to your project tool, and a CRM can update after a sales call. ### The three things that stuck with me To recap - the three features that have had the biggest impact on how I work: The notepad-first approach keeps me present in conversations instead of scrambling to write everything down. Recipes let me automate the stuff that used to eat up time between calls - follow-ups, tickets, prep work. Chat means I never lose anything from a conversation, even if I wasn't fully locked in the whole time. As a designer, a lot of my work happens in meetings. Having a tool that handles everything around those conversations - and lets me just focus on the conversation itself - has made my workdays noticeably more productive and a lot less stressful. 👇🏼 Use the link below to get an upgraded Granola subscription FREE for your first month. https://go.granola.ai/griffin-wooldridge Granola is one tool in a broader AI-native workflow; I laid out the whole stack and mindset here: https://griffinwooldridge.com/blog/ai-native-designer-roadmap --- # Product Demos: The Missing Piece of Your Marketing Strategy URL: https://griffinwooldridge.com/blog/product-demos Published: 2026-03-09 Author: Griffin Wooldridge Most product demos fail for a UX reason nobody names. Here's what a good demo does, and why designers who can also make video are unusually good at them. I've worked in product design long enough to see the same mistake play out over and over. A team spends months building something genuinely useful. The engineering is tight. The UX is solid. And then they hand it off to marketing, who writes a landing page full of feature lists, slaps on a "Book a Demo" button, and calls it a day. Then they wonder why conversion is low. Product demos work. Not the 45-minute sales call kind. The kind that shows your product in motion, solving a real problem, in the time it takes someone to finish a sip of coffee. That format converts. The problem is most companies either don't make them, or they make them badly. ### Why most product demos fail The average product demo has one of three problems, and sometimes all three at once. The first is leading with features instead of outcomes. Nobody buys a feature. They buy a result. A demo that walks through the settings panel before showing what the product actually does has already lost the viewer. The second is length and pacing. Attention is expensive. If your demo is eight minutes of screen recording with a voiceover in a monotone, most people are gone by minute two. The best demos are tight, purposeful, and move fast. The third, and the one nobody talks about, is that most demos aren't designed. There's a big difference between hitting record and showing your product, and crafting a demo experience. The framing, the pacing, the visual hierarchy - all of it matters. A product demo is a piece of content. It needs to be treated like one. ### The UX problem nobody's talking about Here's something most marketing teams don't think about: a product demo is a UX problem. You're designing an experience for a viewer who is skeptical, distracted, and has three other tabs open. The goal isn't to show everything your product does. The goal is to make them feel that this product solves their problem. That's a design challenge. It requires understanding the user's mental model before they ever see your UI. It requires sequencing information in a way that builds toward a payoff. It requires knowing which moments to slow down on, and which to cut entirely. Most video agencies don't think this way. And most UX teams aren't thinking about the demo as part of the product experience at all. That gap is where demos go to die. ### What a good product demo looks like A great demo does four things in order, and fast. First, it names the pain. In the first few seconds, your viewer should feel seen. You're describing a problem they already know. This is the hook, and it earns you the next 60 seconds. Second, it shows the solution in motion. Not described. Not bulleted. Shown. The product doing the thing it does, in a context that's recognizable to the viewer. Third, it makes the outcome visceral. What does life look like after they use this? What did they just save - time, money, stress? Make it concrete. Make it land. Fourth, it gives them a clear next step. Every demo needs a frictionless CTA. Something they can act on right then and there. I apply this same structure to YouTube content. Every video is essentially a product demo - you're showing someone how a tool or workflow works and making them feel the value of it in real time. The overlap is bigger than most people realize. ### Why the designer-creator combination matters If you're thinking about commissioning demo content, here's the question I'd ask before hiring anyone: do they think like a product designer or like a video producer? Because those are different skill sets, and you need both. A video producer thinks in visual effects and timelines. A product designer thinks in user goals, information hierarchy, and what the viewer is trying to understand. The best demo content comes from someone who can do both - who can look at your product and immediately identify the two or three moments that need to land, then build a visual sequence around those moments. My background is in UX and product design. But I've also spent years making content that actually has to work - that has to hold attention, communicate clearly, and move people toward an action. That combination is what makes demo content effective instead of just polished. ### Who this is for If you're building a SaaS product, an AI tool, or anything with a UI that needs to communicate its value - this applies to you. Specifically, it matters most if your landing page isn't converting the way it should (people are landing, looking, and leaving - a well-made demo often fixes this without touching a word of copy), if your sales cycle involves explaining the product too much, or if you're launching something new and need to make it feel real (a concept is hard to buy, but a demo makes it tangible). ### FAQ Why do most product demos fail? One of three reasons, often all at once: they lead with features instead of outcomes, they run too long at a flat pace, and nobody designed them. Hitting record is not the same as crafting a demo experience. What should a good product demo do? Four things, in order and fast: name the pain, show the solution in motion, make the outcome concrete, and give a clear next step. How long should a product demo be? Short enough to finish in the time it takes someone to sip their coffee. Eight minutes of monotone screen recording loses most viewers by minute two. Why hire a designer to make demo content? Because a demo is a UX problem. A product designer thinks in user goals and information hierarchy, which is what decides which two or three moments need to land. ### Why this matters for your marketing Most products have a communication problem. The product works, but people just can't feel that from the outside. A product demo, done well, closes that gap. It lets someone experience the value of your product before they've paid anything. And in a world where attention is expensive and trust is hard to earn, that's crucial for your marketing strategy. If you want to see how I think about this stuff in practice, my YouTube channel is where I document it, tool by tool, workflow by workflow: https://www.youtube.com/@griffinwdesigns. And if you're working on something and want to talk through it, reach out through the contact page: https://griffinwooldridge.com/contact. I take on a small number of projects and I'm always interested in interesting problems. For the full set of AI tools I use as a working designer, start with my complete guide: https://griffinwooldridge.com/blog/ai-design-tools --- # How to Create End-to-End UI Designs with UX Pilot URL: https://griffinwooldridge.com/blog/ux-pilot Published: 2026-01-28 Author: Griffin Wooldridge 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. ### Getting started When you open UX Pilot, you're dropped into your dashboard. Hit New File to kick things off. You can add context about your designs right here, but I prefer to wait until I'm inside the file before giving instructions. Head to the Studio tab - this is where your first design iteration comes to life. You'll choose between Wireframe or Hi-fi depending on where you are in your process. You can always convert a wireframe to hi-fi later, but for this walkthrough I'm going straight to hi-fi. Since I'm designing a mobile-first app, I'll set the screen size to Mobile before writing my prompt. ### Writing your prompt One of the things I appreciate about UX Pilot is that it can generate an entire flow - multiple screens - not just a single screen. If you have design inspiration or reference documents you want it to use as context, you can attach those directly to your prompt. And if you're not sure where to start, Prompt Examples gives you ideas to work from, while Enhance Prompt adds more detail to better guide the AI. For my demo, I used this prompt: "Design a modern mobile personal banking app for everyday consumers. Target users are working adults who use the app as their primary bank. Core goals: show balances and recent activity instantly, enable fast transfers and payments, reduce financial anxiety, feel premium and regulated - not playful." Because I'm generating a full flow, I need to specify what screens to include. You can do this manually, or hit Autoflow and let UX Pilot decide. I used Autoflow, and it built out a detailed prompt for each screen automatically. ### Using your own design system Under Advanced Settings, there's a feature that matters a lot for designers working within existing component libraries: design system integration via the Figma plugin. The process is simple. Open your Figma design system and the UX Pilot plugin, go to the Design Systems tab, start a new collection, and import the components you want UX Pilot to be aware of. Once that's done, you can regenerate any screen using your own components by going to Generate → Variations and switching the model to your imported design system. The result is a new screen with the same content, but styled using your actual components. ### Customizing the theme You don't need to import a design system to get well-styled results. The Theme Editor lets you fine-tune your color palette, border radius, effect styles, and fonts. This is especially useful early in concepting when you want to explore multiple visual directions before committing to one. Instead of regenerating screens from scratch every time something feels off, you adjust the theme once and reapply it across the entire project. It makes exploring different brand directions (clean and professional versus friendly and playful) fast and low-effort. ### Editing your screens Once UX Pilot generates your screens, you have a few ways to refine them: Global Edit is what I reach for most - it regenerates the full screen based on a prompt you write, like "rearrange this screen's sections for better hierarchy and less clutter." It's great for broad directional changes. Section Edit gives you more granular control over a specific area of the screen, while Manual Edit opens an intuitive editing view similar to Figma's UI for precise adjustments. If you just want to add content without changing what's already there, Add New Section is the quickest path. ### Generating a prototype Once you're happy with your screens, building a clickable prototype is a single step. Hit Cmd/Ctrl + A, open the dropdown, and click Generate Prototype. Just like that, you have a working prototype you can tap through to test core flows, validate navigation, and check whether key tasks are intuitive. This is especially powerful for designers and PMs who need to walk into stakeholder meetings with something concrete. Instead of presenting static screens, you can demo real user journeys and answer questions about how the product works in practice. That level of interactivity builds credibility and helps teams align faster. I've spent hours prototyping a single design flow in Figma; the DeliverSmart case study is a whole project of exactly that: https://griffinwooldridge.com/design/deliversmart. UX Pilot turns that entire process into a single click - which gives you back time to focus on refining the experience rather than drawing connections between frames. ### Copying directly into Figma Since Figma is still part of my workflow, one of my favorite UX Pilot features is the ability to copy a design and paste it directly into Figma. And it doesn't paste a screenshot - it pastes a fully structured frame with auto-layout intact, making it easy to iterate on without starting from scratch. ### Responsive layouts, automatically In UX Pilot, you don't need to manually create different layouts for different screen sizes. Select a screen, click Generate → Mobile Version (or Desktop if you started mobile), and UX Pilot generates the alternate layout automatically. Desktop and mobile side-by-side, ready to hand off to developers. ### FAQ Can UX Pilot generate a whole flow, not just one screen? Yes. Write the prompt, then either list the screens yourself or hit Autoflow and it writes a detailed prompt for each screen automatically. Can I use my own design system in UX Pilot? Yes. Import your components through the Figma plugin's Design Systems tab, then regenerate any screen with Generate, Variations and switch the model to your imported system. How do I turn UX Pilot screens into a prototype? Select all, open the dropdown and click Generate Prototype. You get a clickable prototype you can tap through in one step. Does UX Pilot export to Figma? Yes. Copy a design and paste it into Figma and you get a structured frame with auto-layout intact, not a screenshot. Can UX Pilot fit into an existing Figma workflow? Yes, and that is how I use it. The Figma plugin imports your components as a design system UX Pilot generates with, and Copy to Figma pastes a structured auto-layout frame, not a screenshot. The catch is direction: UX Pilot to Figma is smooth, but edits you make in Figma do not flow back, so finish exploration in UX Pilot before you polish in Figma. Can UX Pilot generate end-to-end product flows from prompts? Yes. Write one prompt describing the product and its users, then list the screens or hit Autoflow and UX Pilot writes a per-screen prompt for you. My banking demo went from a paragraph to a full onboarding, balances and transfer flow in one run. Free and Standard cap flows at seven screens; Pro removes the limit. Can UX Pilot create responsive layouts for product screens? Partly. It does not generate one fluid layout; it generates a second version. Select a screen, choose Generate then Mobile Version (or Desktop if you started on mobile), and it re-lays out the content for the other size, ready to hand off side by side. Tablet and in-between breakpoints you still handle yourself, in Figma or in code. Is UX Pilot good for solo designers who want faster turnaround? Yes, especially for the first 80%. Flow generation, the Theme Editor and one-click prototypes cover the work that used to eat a solo designer's week. Budget for credits: Standard's 420 a month is roughly 70 screens, and Deep Design mode uses two to three times more per screen. Turn it off until you have a direction worth polishing. Can UX Pilot generate multiple design directions from one brief? Yes. A single generation can return four distinct variations, and Generate then Variations reruns a screen in another style or in your imported design system. The Theme Editor is the cheaper route for exploring directions: change palette, radius and fonts once and reapply across the project instead of regenerating every screen. Is UX Pilot good for product design iteration? Good for early and mid iteration, weaker for fine detail. Global Edit regenerates a screen from a written note, Section Edit changes one area, and Manual Edit gives you a Figma-like canvas. Every edit costs credits, though, and pixel-level tweaks are faster in Figma after you paste the frame across. Iterate on structure in UX Pilot, on detail in Figma. Can agencies use UX Pilot to build client work faster? Yes, for discovery and concept work. Generating a flow from a client brief or PRD in a call, showing a clickable prototype the same day, and importing the client's design system through the Figma plugin all fit agency work well. Teams is $31 per user a month billed annually with shared credits. Use the Standard-quality mode for concepts; save Deep Design for approved directions. ### Is UX Pilot worth trying? UX Pilot brings together several AI-powered features that meaningfully accelerate early design work - from generating multi-screen flows and building prototypes to integrating your existing design system and exploring visual directions through the Theme Editor. It's not a replacement for thoughtful design, but it removes a lot of the friction that slows the process down. You can try it for free on the UX Pilot site, and the free tier is enough to run the full flow in this post once. Pricing, checked September 2026: the free plan needs no card. Paid plans start at $14 a month billed annually (Standard, 420 credits a month); Pro is $22 a month billed annually with 1,200 credits, unlimited screen flows and Figma import and export; Teams is $31 per user. Monthly billing costs more, and the Deep Design and Max modes burn credits faster, so switch them off for exploration. UX Pilot is one way to generate UI; for the approach that gets genuinely good output from any tool, see my prompting guide: https://griffinwooldridge.com/blog/ai-prompts-for-ui-design And the full toolkit: https://griffinwooldridge.com/blog/ai-design-tools --- # Web Hosting for AI Agents (Instant + Free) URL: https://griffinwooldridge.com/blog/web-hosting-for-ai-agents Published: 2026-03-15 Author: Griffin Wooldridge Your AI agent builds the page in minutes, then hosting eats the afternoon. here.now is a free setup that takes under two minutes and fits how you already work with agents. Building with an AI agent for the first time is a great feeling. You ask Claude Code or Cursor to put together a landing page, a prototype, a slide deck, and it works. What used to take a day or two now takes twenty minutes. The building part has gotten dramatically easier. Then you try to share it, and reality sets in. ### The gap no one talks about Deploying a static site isn't technically hard - but it requires a specific kind of knowledge that has nothing to do with what you were building. You need to know what Vercel is. You need to connect a repository, configure build settings, and understand the difference between a branch deploy and a production deploy. For a designer or PM who just wants to show a stakeholder a working prototype, that friction is real. It breaks momentum at exactly the wrong moment - right when you want to show your work. AI agents can generate the thing, but getting it onto the internet can be a headache. That's been the missing link. here.now is instant, free web hosting built specifically for AI agents. The pitch is simple: tell your agent to publish something, and a live URL appears in seconds. No account required to try it. No build step. No config files. No repo to connect. It supports any file type - HTML, images, PDFs, video, audio. Whatever your agent produced, here.now can host it. That includes complex pages with embedded media, not just bare HTML. ### Setup takes under two minutes There are two ways to get started with here.now, and both are fast: Just ask your agent: tell Claude Code, Cursor, or whichever agent you use to check out here.now and set itself up. It'll figure it out on its own - which feels fitting given what this tool is for. Copy the setup prompt manually: go to here.now, click "copy setup instructions for agent," and paste into your agent. It installs the skill directly, so from that point on your agent knows how to publish natively. Either way, you don't create an account, you don't open a terminal, and you don't write a config file. The setup is a one-time paste. ### The workflow in practice Once here.now is set up, the publishing flow becomes part of your natural agent conversation: Build something with your agent Say "publish this to here.now" Get a live, shareable URL in seconds To update: make changes, push to the same URL - no need to resend links That last point matters more than it might seem. When you update your site, the URL doesn't change. Anyone you already shared it with will see the new version on refresh. No more "here's the new link" messages. ### Why this matters now We're in a moment where the tools for building have outpaced the tools for sharing. An AI agent can produce a functional, interactive prototype in the time it takes to set up a Vercel project. The gap between "created" and "published" has become a real bottleneck - and one that's easy to overlook because we've accepted it as normal. here.now is a bet that that gap shouldn't exist. The agent built it; the agent should be able to publish it. The fact that no account is required to try it keeps the barrier exactly where it should be: zero. ### FAQ What is here.now? Instant, free web hosting built for AI agents. You tell your agent to publish something and a live URL appears in seconds, with no account, build step, config file or repo required to try it. How do I set up here.now with Claude Code or Cursor? Either ask your agent to check out here.now and set itself up, or copy the setup instructions from here.now and paste them into your agent. It is a one-time paste. What file types does here.now host? Any: HTML, images, PDFs, video and audio, including pages with embedded media. Do I need an account? Not to try it. If you want your sites to stay up permanently, create an account, which is also free. ### Try it Go to https://here.now, grab the setup instructions, and paste them into your agent. If you want your sites to stay up permanently, create an account, which is also free. The whole thing takes less than two minutes. Choosing where to build the site? I ranked the responsive website builders here: https://griffinwooldridge.com/blog/best-responsive-website-builders-ranked If you would rather build in a site builder with hosting built in, my Framer 3.0 review covers that workflow: https://griffinwooldridge.com/blog/framer-3-ai-agents-tutorial-review And once it is live, show it well; here is how I think about product demos: https://griffinwooldridge.com/blog/product-demos