UI Builder – Mockup Tool

OneClickPrompts

One Click Prompts for AI chat interfaces Tired of typing the same instructions into AI chats? OneClickPrompts adds a simple menu of your custom prompts right inside the chat window. Create a button for any prompt you use often—like "respond in a markdown table" or "act as a senior developer"—and just click it instead of typing. Convenient menu for editing prompts. You can see how it works on video. Has multi-profile prompt library functionality and tries to count tokens! FREE | Open Source Works in All Major AI Chats: This extension works on the most popular AI chat websites: ChatGPT, Claude, Gemini, and others! (Store policy prevents listing them here, but the full, updated list of supported sites is on the GitHub page.) 🔥Now with token counter for ChatGPT and most sites! (Well, it 𝘢𝘱𝘱𝘳𝘰𝘹𝘪𝘮𝘢𝘵𝘦𝘴 tokens, so it is not precise, but with better precision than other extensions I tried. Enable counter in modules and it will work. Settings allow you to select one of FIVE prediction models with calibration, or just turn it on and forget about it! You can also count tokens for what you write and for what is already in chat thread separately) What It Actually Does: ✅ Custom Prompt Buttons Create buttons for any text you want. Use an emoji or a few characters for the label so you can find it quickly and click. Click the button to put the text in the input box. Or press hotkey. ✅ Floating Panel & Prompt Queue Click the '🔼' button to open a floating panel you can drag anywhere on the screen. Inside, you'll find the Prompt Queue. This lets you: Add multiple prompts to a list. Send them one by one with a delay you can set. Useful for tasks that require several steps, like get news updates once an hour or something like that - and each prompt is controlled by you. ✅ Profiles Organize your buttons into different sets using profiles. Create one for coding, one for writing, one for a specific project, etc. Switch between them with a dropdown. ✅ Keyboard Shortcuts If you want, you can enable shortcuts (Alt + 1-9) to trigger your first nine buttons without using the mouse. ✅ More Customization: Auto-Send: Each button can be set to automatically submit after inserting the text. Holding Shift reverses this behavior. | Separators: Add visual lines between buttons to keep them organized. Backup/Restore: Save your entire setup (profiles and buttons) to a JSON file and load it back later or on another computer. Modules: Modules: 🛜Cross chat prompt sharing: Want to send a message to all chats you have opened? Just type your prompt, and then, either click on the button ⬆️ that will send prompt to ALL open tabs (Each tab can block incoming messages via Shift-click!) or use the store and paste prompt buttons: can be better than copy-pasting as does not clutters clipboard. To use you will have to activate it in settings under "Modules", and you choose either broadcast option or store-send option. 🔢Token approximator: like best effort token counter, displays token usage in chat on a webpage. For Tinkerers: Edit CSS Selectors: If a site update breaks the button placement, you can go into the advanced settings and edit the CSS selectors yourself to fix it.... or place in other place you want. The Important Stuff: 🔒 Private: Your prompts and settings never leave your computer. They are stored locally in your browser. There is no tracking, no accounts, and no data sent to any server. 🌐 Open-Source: The code is public on GitHub. You can check it yourself to see how it works. ⚡ Simple: while this extension has a lot of settings, you don't have to use them. You can only use what you need and leave other settings untouched. ⁉️How to Use: Install the extension. Click the icon in your toolbar to open settings. Create a button. It will show up in your next chat session. Support & Feedback If something doesn't work, try reloading the page. If it's still broken, please open an issue on GitHub. I appreciate bug reports and suggestions. GitHub: https://github.com/MaxITService/OneClickPrompts

HTML to Figma: Convert Websites into Designs & Wireframes by Wireframeit

Transform live websites and HTML into fully editable designs or low-fidelity wireframes. Wireframeit accurately captures the layout, typography, and structure of any site and converts it into editable design files ready to export directly to Figma or download as SVG, PNG, or JPG. ⚙️ Choose Your Output • Full Design Retain the exact look and feel of the original webpage, including fonts, styles, and layout. Images are replaced with placeholders to streamline editing and design handoff. • Wireframe Reduce complexity by stripping colors, images, and detailed styles to create clean, low-fidelity wireframes, perfect for rapid prototyping and layout planning. 🛠️ Features • One-Click Webpage Conversion Instantly convert any live webpage into an editable design, with customization options to control fidelity and detail. • Figma Export Send designs directly to Figma, eliminating manual imports. • Responsive Preview & Export View and export designs optimized for desktop, tablet, or mobile screens. • Media Inspector Download all images and media assets embedded on a webpage. • Color Inspector Extract and export every color used on the page. • Multiple Export Formats Export your designs as editable SVG files or high-quality PNG and JPG images. 🚀 Quick Start • Add Wireframeit to your browser. • Open the webpage you want to convert. • Click the Wireframeit icon to open the editor and customize your design. • Export your design as a Figma file, SVG, PNG, or JPG. 🔗 Support For assistance please visit our official website or contact support@wireframeit.com.

Snable: UI Inspector & CSS Scanner

Analyze any web page that catches your eye! Get a detailed overview of colors, fonts, and visual elements for design inspiration. SNABLE: YOUR PERSONAL UI DESIGN ANALYZER Snable provides professional UI analysis directly in your browser, revolutionizing how you explore web design. This Chrome extension meticulously deconstructs any website, revealing its core visual elements for your understanding and inspiration, serving as the essential companion for the Snable Figma Plugin. ⭐ HIGHLIGHTS — Instant analysis of a website's visual structure — Extraction and organization of color palettes and typography — Comprehensive design insights at your fingertips — Ability to favorite pages for future reference — Directly links with the Snable Figma Plugin for design asset export ⚡ TOP FEATURES — Real-time color and font style analysis — Visual hierarchy insights — Clean, user-friendly reporting — Easy page bookmarking — Figma plugin integration for seamless data flow 👥 IDEAL FOR — UI/UX Designers (inspiration) — Web Developers (pattern analysis) — Design Students (real-world learning) — Brand Managers (consistency checks) — Digital Artists (web aesthetics) — Anyone exploring design principles ℹ️ GET STARTED Install Snable Chrome Extension, then simply click the extension icon on any webpage to instantly uncover its design secrets. No setup required – professional design insights are just one click away! Also check the Snable Figma Plugin for a better experience! ⭐ Love Snable? We'd appreciate your review! 🌐 For updates & more → snable.bozzhik.com 📧 Questions or suggestions? Reach out → bozzhik@gmail.com 💬 Join our community → snable.bozzhik.com/socials

Instant Web Mockups

Generate Instant Mockups with Mockified