Design Toolkit: copy any section as code - Copy a section as code for AI, plus colors from images
by•
Two new things. Copy a section: select any part of a page and copy it as Tailwind, HTML, React, Vue or Elementor, then paste it into your AI tool so it gets real values, not a screenshot to guess from. The export is drawn next to the original and measured, so it reports a match (95% on a real button), not perfection. Colors from an image: copy a palette for Figma, CSS variables, Tailwind or JSON. No account; inspected pages stay in your browser. One section at a time, not whole sites.
Replies
Hi Product Hunt. This is a second launch because two things changed and I'd like your feedback on them.
Copy a section for your AI: select any part of a page and copy it as Tailwind, HTML, React, Vue or Elementor, then paste it into Claude, Cursor or Lovable. Instead of guessing spacing and font sizes from a screenshot, your AI gets the real values. The export is drawn next to the original and measured, so it reports a match (95% on a real button from tailwindcss.com) instead of promising perfection.
Colors from an image: pull a palette from any image, background or video frame and copy it for Figma, CSS variables, Tailwind or JSON.
Limits: it copies one section at a time, not whole sites, and it does not carry scripted interactions, CMS content or forms. There is no account, and the pages you inspect stay in your browser. Free for 7 days, then a one-time payment.
What would you want it to carry that it doesn't yet?