{"slug": "subframe", "title": "Subframe", "summary": "Subframe launched a desktop app for macOS and Windows that combines an HTML- and React-based design canvas, a built-in browser, and a coding agent harness for Claude Code and Codex. The tool is priced at $0 for a Free tier limited to one project and $20 per editor per month for Pro, which adds unlimited projects, 6x AI credits and multiple themes per project; users can connect their own Claude or Codex subscription, and a Subframe MCP server brings design context to external agents. Subframe said every canvas layer maps to code elements so designs can be implemented 1:1 in a codebase, with the agent able to read the browser, the user's selection and the repo's components and tokens.", "body_md": "# Design & build in one tool.\n\nSubframe is a design tool for your codebase, and a coding agent with a canvas.\n\n## Canvas.Browser.Agent.\n\nThree tools you use to make software, now in one place. Built for those who design & ship with craft.\n\n[Download for macOSDownload for Windows](https://www.subframe.com/downloads/welcome)\n\nDesign canvas\n\n## Infinite canvas built for code.\n\nEverything you want in a design tool: drag & drop, layers, inspector. The difference is the canvas is based on HTML & React, so you can implement it exactly as designed.\n\nExplore freely. The canvas holds every idea, exploration, and state before you build. Option + drag and iterate until it feels right.\n\nCollaborate with your team & agents. Share a link. Comment in a thread. Review together, then turn feedback into changes with your agent.\n\n- Full design control. Insert, drag, duplicate, or edit inline with layers and properties.\n- 1:1 with code. Every layer maps to code elements for responsive flex behavior.\n- Components. Props, slots, and variants – synced with the design system in your codebase.\n- Multiplayer & comments. Share and collaborate on canvas with your team or agent.\n- Themes & design tokens. Manage colors, text and other tokens across light & dark modes.\n- Prompt inline. Ask for designs or automate repetitive tasks without leaving the canvas.\n\nBuilt-in browser\n\n## Preview & edit your live app.\n\nOpen localhost or any website in built-in browser tabs. Iterate live with visual edits or bring existing screens to the canvas to design further. It’s a browser, for building.\n\nCapture to canvas. Select an element in the browser, then copy & paste to the canvas as editable designs.\n\n- Inspect & edit live. Tweak in browser with design controls for every token, component, and classname.\n- Prompt with precision. Comment directly on elements in the browser for targeted edits for the agent.\n\nCoding agent\n\n## One agent for design & code.\n\nWork with Claude Code and Codex directly in Subframe. We give it a harness to code, design, and interact with the browser so you can ship ideas faster, with higher fidelity.\n\n- Builds in your codebase. Implement directly in your repo, while referencing your exact designs.\n- Designs on your canvas. Kick off explorations or document your UI on the canvas with full code context.\n\nThe agent that sees what you see.\n\n- Your selection. Inspect in browser or paste designs in chat.\n- Your designs. Every design on the canvas can be referenced directly.\n- Your browser. Agent screenshots and reads the underlying code.\n- Your codebase. Components, tokens, and code are the source of truth.\n\n### Your agent, in Subframe.\n\nConnect Claude Code and Codex directly in Subframe using your own subscription.\n\n- Claude CodeFable 5.1Opus 5.5Opus 4.6Sonnet 5.5Haiku 5.5\n- CodexGPT-6.1 SolGPT-6 AstraGPT-6 SolGPT-6 LunaGPT-5.6 Terra\n\nOr use the Subframe MCP to bring design context to your external agents.\n\n## Designing & building is a roundtrip.\n\n1. Connect.Open codebase.Preview existing app.Plan with the agent.\n2. Explore.Design from scratch.Capture from browser.Generate new flows.\n3. Build.Paste any design.Inspect and tweak.Implement in code.\n4. Ship.Manage git branches.Share prototypes.Make pull requests.\n\n## Made for builders like you.\n\n## Pricing\n\n### Free\n\n$0/ month\n\n- One project\n- Unlimited viewers & editors\n- Use your Claude / Codex subscription\n- Limited AI credits\n\n[Download for macOSDownload for Windows](https://www.subframe.com/downloads/welcome)\n\n### Pro\n\n$20/ editor / month\n\n- Unlimited projects\n- Unlimited viewers & editors\n- Use your Claude / Codex subscription\n- 6x AI credits\n- Multiple themes per project\n\n[Upgrade to Pro](https://app.subframe.com/settings/billing)\n\nAI credits are consumed only in the web version or when used instead of your Claude / Codex subscription.\n\n[Learn more about AI credits](https://docs.subframe.com/admin/pricing-and-plans)\n\n## FAQ.\n\n## ### What is Subframe?\n\nA desktop app that combines three things in one tool: a design canvas, a coding agent, and a built-in browser. You design and ship from the same place, in your codebase.\n\n## ### What can I build with Subframe?\n\nWeb apps, websites, landing pages, portfolio sites, internal tools, production codebases – basically any web-based project. We even use Subframe to build Subframe.\n\n## ### Does Subframe replace Figma / my design tool?\n\nYes – Subframe is a full featured design tool purpose-built for interface design.\n\n## ### Does it replace Cursor or coding agent desktop apps?\n\nFor most people, yes. You work directly with your coding agent in Subframe, with full access to your code and designs. No need to switch to a different tool to implement.\n\n## ### Which coding agents are supported in Subframe?\n\nYou can use your existing Claude Code or Codex subscription as the internal agent in Subframe. Or connect with other external agents like Cursor or Gemini via MCP.\n\n## ### Does my code leave my machine?\n\nNo – your codebase stays on your machine. Subframe reads and writes local files, same as the coding agent you use today.\n\nYour design canvas lives in the cloud, accessible from both web and desktop.\n\n## ### Can I use my existing components and design system?\n\nYes – everything you build uses the design system in your codebase. You can also import components & design tokens directly from code when designing.\n\n## ### Does it work with my stack?\n\nThe browser and canvas work with anything that renders on the web, but Subframe works best when used with React.\n\nDesign & build in Subframe.\n\nCanvas. Browser. Agent.", "url": "https://wpnews.pro/news/subframe", "canonical_source": "https://www.subframe.com", "published_at": "2026-10-23 19:22:38+00:00", "updated_at": "2026-10-23 19:42:45.693887+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "developer-tools", "agent-protocols", "ai-products"], "entities": ["Subframe", "Claude Code", "Codex", "Anthropic", "OpenAI", "Subframe MCP"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/subframe", "markdown": "https://wpnews.pro/news/subframe.md", "text": "https://wpnews.pro/news/subframe.txt", "jsonld": "https://wpnews.pro/news/subframe.jsonld"}}