{"slug": "show-hn-antidraw-open-source-ai-prototyping-canvas-for-any-react-library", "title": "Show HN: Antidraw – Open-source AI prototyping canvas for any React library", "summary": "AntidrawHQ released Antidraw, an open-source, locally run AI prototyping canvas that executes Claude Code on the user's own Claude account and renders every frame as working React code built from libraries already on npm, including shadcn/ui, Radix, Mantine, Material UI and company design systems such as Cloudflare's Kumo, Microsoft's Fluent UI, Shopify's Polaris and GitHub's Primer. The Apple Silicon build is distributed as a direct .dmg download from the project's GitHub releases page, with additional releases and issue tracking hosted on GitHub and the product site at antidraw.com. AntidrawHQ positions the tool for product managers, designers, marketers and sales to produce clickable, data-driven prototypes with real states, animations and responsive layouts rather than static mockups.", "body_md": "[**Download for Apple Silicon**](https://github.com/AntidrawHQ/antidraw/releases/latest/download/Antidraw-arm64.dmg)\n  ·\n  [All releases](https://github.com/AntidrawHQ/antidraw/releases)\n  ·\n  [antidraw.com](https://antidraw.com)\n  ·\n  [Issues](https://github.com/AntidrawHQ/antidraw/issues)\n\nAntidraw is a design canvas for your coding agents. Describe what you want and it appears on a Figma-like canvas, where every frame is real React code: components that actually work, built from the libraries and design systems your team already uses, ready to hand to your developer as they are.\n\nIt runs on your machine, not somewhere in the cloud. Antidraw runs Claude Code locally, with your own Claude account.\n\nshadcn/ui, Radix, Ark UI, React Aria, Mantine, Material UI. Install it, ask for it, and it's on the canvas, working.\n\n| shadcn/ui | Radix | Ark UI | \n| React Aria | Mantine | Material UI | \n| Chakra UI | HeroUI | Motion | \n| Magic UI | Recharts | Remotion | \n| React Three Fiber | ElevenLabs UI | Workday Canvas | \n| Supabase UI | Clerk Components | React Email | \n\n…and anything else on npm.\n\nKumo from Cloudflare, Fluent from Microsoft, Polaris from Shopify, Primer from GitHub. Or your company's own, from a private registry.\n\n| Kumo · Cloudflare | Fluent UI · Microsoft | Polaris · Shopify | \n| Primer · GitHub | React Spectrum · Adobe | Ant Design · Ant Group | \n| Carbon · IBM | Atlassian Design System | Lightning · Salesforce | \n| Base Web · Uber | Gestalt · Pinterest | Paste · Twilio | \n| EUI · Elastic |  |  | \n\nThere's no list of supported libraries. If it's on npm, your agent installs it and builds with it, right on the canvas. Use Motion to build micro-interactions, Remotion for video, React Three Fiber for 3D.\n\nPMs, designers, marketers and sales spend their days describing products to each other. With Antidraw they can show it, working.\n\nMake prototypes and wireframes people can actually use and share. Explore directions until you find the right one, at AI-native speed.\n\n- **Several takes on one PRD.** Hand it the PRD and ask for three takes. Each one is built from the components your team already ships, so every option on the table is one engineering could actually build.\n- **Real flows you can click through.** Screens that link up, with the transitions, loading states and small interactions in place. Walk a stakeholder through the real thing instead of narrating a slide.\n- **Real data, real logic.** Drop in a spreadsheet or a sample of real data, and give the prototype logic a picture can't fake: sorting, filtering, search, totals, pricing maths. Your numbers and edge cases, not lorem ipsum.\n- **Test it with users.** Run research sessions on a prototype that behaves like the product. Testers click through the real flow while you watch, and you can change it between sessions.\n\nDesign in the material the product is made of.\n\n- **Animations other tools can't do.** Springs, gestures, scroll, drag and physics you can actually feel, not a prototype link that fakes it with dissolves. Tune the motion on the real component until it's right.\n- **Build the controls you need.** Ask for the exact sliders, swatches and toggles a design needs, then shape it by hand. When AI can make almost anything, the craft is in having the right handles.\n- **Design every state.** Hover, loading, empty, error, the 40-character name and the three-line title. Flip through them on the real component instead of drawing each one.\n- **Responsive for real.** Resize the frame and the layout reflows the way it will in the browser. No more drawing a mobile, tablet and desktop copy of every screen.\n\nOn-brand assets from the real product, with every detail yours to adjust.\n\n- **Launch videos with Remotion.** Feature announcements made from your real components and brand, scene by scene. The product in the video is the product people get, and every frame is yours to adjust.\n- **Slides made of real components.** Launch keynotes and webinar decks built from your actual product and brand. Animated where you want it, and never out of date with the app.\n- **Every size, from one design.** Because it's code, one design adapts. Ask for the square, the story and the banner, and each one lays itself out properly instead of being redrawn.\n\nShow prospects the product they're buying, shaped around them.\n\n- **Mockups with their data.** Their logo, their colours and their records, inside your product. Show a prospect what it looks like when it's theirs, before they've signed anything.\n\nFree and open source, now in alpha, for Macs with Apple Silicon or Intel. It runs Claude Code on your machine, with your own Claude account.\n\n- **Apple Silicon:**[download `Antidraw-arm64.dmg`](https://github.com/AntidrawHQ/antidraw/releases/latest/download/Antidraw-arm64.dmg)\n- **Intel:** download the`x64``.dmg` from[Releases](https://github.com/AntidrawHQ/antidraw/releases)\n\nDrag Antidraw to `/Applications`. Builds are signed and notarized, so the first launch works without any Gatekeeper workarounds. Updates arrive automatically via `electron-updater` from the GitHub Releases feed.\n\nEarly alpha. macOS only. Expect rough edges, and please [open an issue](https://github.com/AntidrawHQ/antidraw/issues) when you hit one.\n\nRequires Node 20+ and npm.\n\n```\ngit clone https://github.com/AntidrawHQ/antidraw\ncd antidraw\nnpm install\nnpm run dev:shell\n```\n\nThat launches the Electron shell in dev mode with HMR. `npm run dev:server`\nruns the cloud Worker locally instead (see `packages/server/README.md`).\n\nTo produce an installable build:\n\n```\nnpm run build:unpack -w @antidraw/shell    # unpacked .app at packages/shell/release/<version>/mac-<arch>/\nnpm run build:mac    -w @antidraw/shell    # full DMG (host arch)\n```\n\nReleases are cut by pushing a `v*.*.*` tag — the workflow in `.github/workflows/release.yml` builds, signs, and notarizes both arches, then uploads a draft release. Promote the draft to \"published\" when ready; `electron-updater` only picks up published releases.\n\n```\npackages/\n  shell/              Electron app (main + preload + renderer)\n  plugin-runtime/     Runtime imported by user workspaces\n  create-workspace/   `npm create @antidrawapp/create-workspace` scaffolder\n  server/             Cloudflare Worker cloud API (Hono + D1)\n  website/            antidraw.com, built with Astro\n  share-page/         The share page at antidraw.com/s/<slug>\n  site-worker/        Serves published sites at <slug>.antidraw.app from R2\n  site-upload/        Content-addressed static-site uploads to R2\n```\n\nThe shell is the actual app. `server` is the network-exposed cloud API that\ngates publish/sync — distinct from the shell's in-Electron API, which is not\nnetwork-exposed. `create-workspace` and `plugin-runtime` are the npm packages\nusers consume from their own design workspaces.\n\n[MIT](https://github.com/AntidrawHQ/antidraw/blob/main/LICENSE).", "url": "https://wpnews.pro/news/show-hn-antidraw-open-source-ai-prototyping-canvas-for-any-react-library", "canonical_source": "https://github.com/AntidrawHQ/antidraw", "published_at": "2026-11-06 13:07:31+00:00", "updated_at": "2026-11-06 13:20:55.789168+00:00", "lang": "en", "topics": ["ai-tools", "ai-agents", "developer-tools", "generative-ai"], "entities": ["Antidraw", "AntidrawHQ", "Claude Code", "Anthropic", "shadcn/ui", "Radix", "Material UI", "Cloudflare"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/show-hn-antidraw-open-source-ai-prototyping-canvas-for-any-react-library", "markdown": "https://wpnews.pro/news/show-hn-antidraw-open-source-ai-prototyping-canvas-for-any-react-library.md", "text": "https://wpnews.pro/news/show-hn-antidraw-open-source-ai-prototyping-canvas-for-any-react-library.txt", "jsonld": "https://wpnews.pro/news/show-hn-antidraw-open-source-ai-prototyping-canvas-for-any-react-library.jsonld"}}