Co-Founder & CAO @PanzeStudio // Serial Designpreneur // Own Philosophy @Rakibulism // Crazy vibecoder

substack

github

projects

productHunt

dribbble

Rakibul Islam • Peerlist

<h3>About xsplit</h3>xsplit is a web-based tool designed to help users create seamless image sets for X (formerly Twitter). It allows you to cut a wide image into two, three, or four equal parts that, when posted in order, appear as one continuous picture. A key feature is that the entire process runs in your browser, meaning no images are uploaded, ensuring your privacy and security.<ul><li>Easy to Use: Simply drop a wide image, choose the number of parts (2 to 4), and frame your desired crop by panning and zooming.</li><li>Browser-Based: All image processing happens locally in your browser. No uploads, no accounts, and no server interaction are required.</li><li>Flexible Slicing: Select the number of parts, and the tool ensures they are equal. Leftover pixels are distributed to maintain continuity.</li><li>Aspect Ratio Control: Lock each part to common aspect ratios like 4:5, 1:1 (square), or 3:4 to ensure they display correctly on X without cropping.</li><li>File Size Preview: See the estimated file size for WebP, JPEG, and PNG formats before downloading, allowing you to choose the best option for your needs.</li><li>Single Download: The entire set of image parts is delivered as a single zip file.</li><li>Orientation Preservation: Portrait shots are handled correctly, maintaining their upright orientation.</li><li>Multiple Input Methods: Upload files, paste directly from your clipboard, or drag and drop images.</li></ul>xsplit is ideal for anyone looking to enhance their visual content on X with creative, multi-part images without compromising privacy.

Xsplit - Split image & Join the trend on X

<h3>A curated list of useful tools for web-focused design engineers.</h3><ul><li>Inspiration: Discover a wide range of tools for design inspiration, including Awwwards, Mobbin, and Pinterest.</li><li>Components: Find essential components and libraries like React Bits and shadcn/ui to streamline your development process.</li><li>AI Code: Leverage AI-powered tools such as Google Gemini, OpenAI Codex, and v0 by Vercel to enhance your coding experience.</li><li>Web Utility: Utilize tools for color selection, regex testing, and SVG optimization with options like Color.review and RegExr.</li><li>Desktop Utility: Explore productivity tools like Raycast and Warp for a more efficient desktop experience.</li><li>Video &amp; Capture: Access tools for screen recording and video editing, including OBS Studio and ShareX.</li><li>Whiteboard: Collaborate and brainstorm with digital whiteboarding tools like Excalidraw and Miro.</li><li>Organization: Manage your projects and ideas with tools like Linear, Obsidian, and Trello.</li><li>Fonts: Discover a variety of font resources, including Fontshare and Free Faces.</li><li>Visual: Explore visual tools and platforms such as cables.gl and ShaderToy.</li><li>Interface: Access design and prototyping tools like Figma, Framer, and Penpot.</li><li>Animation: Find tools for creating animations, including Jitter and Lottie Creator.</li><li>Motion: Utilize motion design tools like Cavalry and Theatre.js.</li><li>Audio: Explore audio tools for sound design and generation.</li><li>Volumetric: Discover tools for working with volumetric data and 3D capture.</li><li>3D: Access powerful 3D creation and modeling software like Blender and Spline.</li><li>glTF: Find tools for working with the glTF 3D file format.</li><li>Digital Fashion: Explore tools for creating and visualizing digital fashion.</li><li>Research: Utilize AI-powered research assistants like ChatGPT and Google Gemini.</li><li>Browser: Discover alternative browsers focused on privacy and productivity.</li><li>Emoji: Tools for creating and managing emojis.</li><li>Test: Resources for testing and development.</li></ul>Suggest new tools and contribute to the growing list!

Design Engineer Tools

Open Icons is a curated hub that brings together 13 of the best open‑source icon packs in one place. It lets designers, developers, and creators browse and search thousands of free SVG icons with ease. You can instantly copy the SVG code, download files, or grab a CDN link—making it simple to integrate icons into any workflow. Built for speed and accessibility, Open Icons eliminates the hassle of juggling multiple sources and delivers a unified, streamlined experience for modern design projects.

Open Icons

<h3>Components for serious products.</h3>cano is an open registry of design-led components built on shadcn/ui, Tailwind, and Radix UI. The source code is copied directly into your project, eliminating package dependencies and lock-in. It is free and MIT-licensed, forever.The Cano CLI is a full-screen terminal application designed to streamline the installation and browsing of components. It offers features like framework detection, a searchable component picker, and live installation progress.<h3>Key Features:</h3><ul><li>App Shell: Provides a structural foundation for dashboards with a collapsible sidebar, topbar, and scrollable content area.</li><li>Command Palette: Implements a global command interface (Cmd+K) with grouped results, recent items, keyboard shortcuts, and a discoverability footer.</li><li>Data Table Pro: A production-ready data table built on TanStack Table, offering sorting, filtering, column visibility, row selection, and pagination.</li><li>Empty State: A centered placeholder component for various states like empty, error, no results, and completion, including icon, copy, and action slots.</li><li>Onboarding Stepper: A controlled multi-step wizard with a step indicator, per-step content panels, validation error handling, and a navigation footer.</li></ul>All components are designed to be production-grade and accessible, including essential states like loading, empty, error, and keyboard interactions. The components integrate seamlessly with existing shadcn projects without conflicts.

Cano UI

<h3>Innovative Design Tool for Figma</h3>Mockuper is a powerful Figma plugin designed to effortlessly place any design onto devices and shapes with true perspective. It offers three core functionalities in one seamless tool:<ul><li>True Perspective Warp: Accurately map your designs onto any four-point vector shape or frame with a homography transformation, ensuring edges converge realistically like real screens.</li><li>Skew Presets &amp; Device Mockups: Quickly skew frames and rectangles using intuitive presets or fine-tune with sliders. Additionally, access a comprehensive catalog of editable vector device mockups, including phones, tablets, laptops, desktops, watches, and browsers, to showcase your work in context.</li><li>Image Dropping: Easily drop your images into ready-made device mockups. The plugin supports various input methods, including uploading files, pasting from the clipboard, drag-and-drop, or using existing layers on your canvas.</li></ul>Mockuper prioritizes user privacy and performance, with all processing happening locally within the plugin – no network access or data uploads are required. Installation is straightforward via the Figma Community, requiring no complex setup or accounts. Transform your flat designs into professional, in-context mockups in just a few simple steps.

Mockuper

<h3>Explore and utilize a comprehensive collection of 9,184 Apple SF Symbols for your design projects. This resource provides seamless access to all SF Symbols, allowing you to browse, copy as SVG or text directly from your browser, and integrate them into your Figma and Framer workflows. The symbols are rendered from authentic vector outlines, eliminating the need for the SF font to be installed on your system.</h3><ul><li>Web App: Search, recolor, and copy any symbol as SVG or text. Download symbols or use them directly in any browser.</li><li>Figma Plugin: Live insert symbols as SF font glyphs or SVGs, with the ability to replace any selected layer in place.</li><li>Framer Plugin (Coming Soon): Insert any of the 9,184 symbols onto the Framer canvas as a clean, recolorable SVG. Options to Flatten or Outline and replace in place will be available.</li></ul>This tool is free to use and does not require the SF font.

SF Symbols

<h3>Discover a vast collection of free SVG logos tailored for apps, development tools, and tech brands.</h3>This comprehensive resource offers 15,015 high-quality SVG logos, ensuring you have the perfect visual asset for your projects. Effortlessly search and filter logos by category, size, and more. Download or copy logos in a single click, streamlining your design workflow.<ul><li>Extensive Library: Access over 15,000 free SVG logos.</li><li>Versatile Formats: Includes both icons and wordmarks.</li><li>Intuitive Search &amp; Filtering: Quickly find what you need.</li><li>One-Click Download/Copy: Seamless integration into your projects.</li><li>Figma Plugin: Enhance your design process with direct Figma integration.</li></ul>Explore logos categorized into 20 distinct categories, including AI, Languages &amp; Runtimes, Frameworks &amp; UI Libraries, and more. The platform is built with modern web technologies, ensuring a smooth and efficient user experience.

Brands Logo

<h3>Key Features:</h3><ul><li>Always-on-top floating window: The to-do list floats above all other applications, even full-screen ones, across different Spaces.</li><li>Scheduled opening: The app opens automatically on a user-defined schedule, with hourly defaults and custom time options.</li><li>Spoken reminders: A voice announces the number of pending tasks when the app opens.</li><li>Daily must-do tasks: Tasks marked as 'must-do' reset each morning and cannot be dismissed permanently, only snoozed.</li><li>Native and lightweight: Built without Electron, the native macOS and Windows apps are small (~450 KB) and efficient.</li><li>Cross-platform availability: Available as native apps for macOS and Windows, an Android app, and an installable Progressive Web App (PWA).</li><li>Open Source: The entire codebase is available on GitHub, allowing users to review, modify, and rebuild the application.</li><li>No account or trackers: The application is completely free, with no sign-in required and no user data tracked.</li><li>Offline functionality: Tasks are stored locally on the device, ensuring full functionality without an internet connection.</li><li>Browser and Design Tool Integration: Includes a Chrome extension for toolbar access and plugins/widgets for Figma and FigJam.</li></ul>Today is a unique to-do list application designed to ensure that important tasks are not overlooked. It offers a persistent, always-on-top window that can be configured to open automatically at specific times, even reading out the number of pending tasks. The app emphasizes action by making 'must-do' tasks persistent until completed. It is built with a focus on performance, avoiding heavy frameworks like Electron, and is available across multiple platforms including native macOS and Windows applications, an Android app, and an installable web app. Being open-source, users are encouraged to inspect and contribute to the code. Today prioritizes user privacy with no account requirements or data tracking, and operates fully offline.

Today — the to-do list you can't ignore

Reecap — photos into a cinematic video

Pokecut Admin — Dashboard

Agent Skill OS

Auto-Generate Your Entire Shadcn Design System in Figma with just one click. This plugin allows you to create complete design tokens including colors, typography, spacing, and effect styles instantly. Download the plugin for free and enjoy its open-source nature. It works seamlessly with Figma's dynamic-page mode, offering a streamlined design workflow.<h3>How It Works</h3><ol><li>Install: Download the .figplug file and double-click to install in Figma.</li><li>Run in Figma: Open the plugin from Figma's plugin menu.</li><li>Generate: Click "Generate Variables" and watch your design system appear.</li></ol><h3>What It Generates</h3><ul><li>Color variables with Light &amp; Dark modes.</li><li>Number &amp; spacing tokens for consistent layouts.</li><li>Typography system from Shadcn with 11 text styles.</li><li>Effect styles for shadows and elevation.</li><li>Layout spacing system for grids and margins.</li><li>Organized variable collections for colors and numbers.</li></ul>Built by @rakibulism, a Lead Product Designer &amp; UX Psychologist, this plugin is designed to streamline your design workflow by offering future-forward digital experiences shaped by human behavior and clarity.

Alpha Shadcn/UI System Figma Plugin

Rakibulism is a unique approach to product design, blending the principles of UX psychology with innovative design strategies to create digital experiences that resonate with users. With a focus on turning founders' ideas into impactful products, Rakibulism emphasizes design that is both human-centric and problem-solving. Key features include shaping MVPs, building full-scale products, and a deep understanding of user behavior to ensure products are not only functional but also memorable. This approach is particularly beneficial for startup founders and entrepreneurs looking to bring their visions to life. The process involves a discovery call to understand project needs, followed by design iterations and final delivery to ensure the product attracts potential customers. Rakibulism is not just about designing for screens; it's about designing for people and fostering growth through meaningful digital experiences.

My Portfolio

Join a community where design meets purpose and progress.Hello Designers is a vibrant community for creators who think beyond visuals. It's a place where visionary designers meet clarity, and where design, purpose, and progress intersect. This community is built for product thinkers, UX explorers, and creative minds who share more than just pixels. Here, design is not only seen but understood.<h3>Why Join Hello Designers?</h3><ul><li>Connect with world-class product and UX designers.</li><li>Receive real feedback, not just likes.</li><li>Learn about design systems, tools, and industry trends.</li><li>Stay inspired with thoughtful discussions and creative events.</li></ul>Join us and be part of a community that builds, learns, and creates together. Discover inspiration and bring the world to the Galactic Civilization of Designers.

Hello Designers

Co- Founder & CEO, Slashit App

Software craftsman

Co-Founder & CTO at Panze UX Design Studio
Leading mobile app & product design for startups.

Slashit is a simple tool that helps anyone reply faster using dynamic templates, text snippets, and AI powered commands. Save time, reduce repetitive typing, and boost productivity, whether you’re in support, sales, freelancer or just writing a lot.

Slashit App - Windows

<h3>Seenframes - Framer Templates for Startups &amp; Creators</h3>Get beautifully designed Framer templates starting at just $3.99. Built by Seen Design Lab with a UX-first approach, Seenframes is designed to help creators, startups, and indie makers launch faster, smarter, and cheaper.Why choose Seenframes?<ul><li>Affordable pricing with templates starting at just $3.99, no subscriptions or surprises.</li><li>Launch-ready designs built to convert, not just look pretty.</li><li>UX-first templates created by real designers who care.</li><li>Niche-specific layouts for SaaS, portfolios, landing pages, and more.</li><li>Fully customizable in Framer, allowing you to make it yours in seconds.</li><li>Responsive by default, ensuring a seamless experience across devices.</li></ul>Join thousands of data-driven professionals who are creating beautiful visualizations in minutes with Seenframes. Browse our templates and discover how you can design less and build more.

Seenframes

Slashit App is a simple tool that helps anyone reply faster using dynamic templates, text snippets, and AI powered commands. Save time, reduce repetitive typing, and boost productivity, whether you’re in support, sales, freelancer or just writing a lot.We built Slashit App because we were tired of typing the same message/mail/comment again and again. If you write replies, fill forms, or send emails all day, this is for you.Slashit App helps you:• Create dynamic templates with placeholders• Turn short text into full messages with Snippets (like typing “tks” to get “Thank you so much!”)• Use AI in your template to auto write parts for you• Set your own magic hotkeys (select text → press key → text changes based on your prompt)• See and reuse anything you copied with Clipboard History It works anywhere you can type, web, apps, tools, wherever you have input field. Most importantly you can customize everything: shortcuts, hotkeys, AI prompts, all the way you like.Our goal? Help you write faster, save time, and stop typing the same sentence ten times a day. We use it daily and it really helps, hope it does the same for you.We’re still early and learning fast. Would love your feedback and ideas.Thanks for checking it out.— Mahmudul HasanCo-founder, <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="slashit.app">Slashit App</a><a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="mailto:support@slashit.app">support@slashit.app</a> | <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://www.slashit.app/">https://www.slashit.app/</a>

Slashit App

<h3>Why did you build this?</h3>I built Seen Wireframe UI Kit because I was tired of over-polished design kits that look pretty but don’t think. As a UX-first designer, I wanted something that helps you map flows fast, without sacrificing clarity or human behavior logic. This kit is made for thinkers, not just pixel pushers. It’s here to give structure to chaos and spark real interaction ideas.<h3>What’s new and unique about this launch compared to alternatives?</h3>Most UI kits chase trends. Seen is built differently.<ul><li>It's made by a UX psychologist who lives and breathes user behavior.</li><li>It’s not bloated with unnecessary fluff — just the core blocks to get real work done.</li><li>It includes user-centered wireframe flows, not just screens.</li><li>Inspired by actual product strategy, not just Dribbble vibes.</li></ul>Seen’s design system is future-proof, super editable, and Figma-ready for fast collab.I’m proud that this isn’t just another design asset. It’s a mindset shift.It helps product teams, freelancers, and visionaries design with purpose — faster and smarter.

Wireframe UI Kit

Rak-GPT is an intuitive and user-friendly mobile app UI designed to interact seamlessly with an AI-powered chatbot. The app provides a modern, clean interface, ensuring users can easily engage in meaningful conversations. The design emphasizes simplicity, accessibility, and an interactive experience that feels personal and engaging.Key Features:Dynamic Chat InterfaceA minimalistic chat layout with smooth animations and clear typography.Includes voice input, text input, and quick-reply suggestions for seamless interaction.Customizable ThemesDark mode and light mode options for user comfort.Personalize the interface with vibrant color palettes and font styles.Smart AI PromptsContext-aware suggestions for improved conversation flow.Categories for quick queries like daily tasks, brainstorming, or casual chatting.Profile and HistoryUsers can access and manage previous chats effortlessly.Editable profile options for personalization.Multi-Platform IntegrationSync data across devices (mobile, tablet, desktop) for continuity.Connect with WhatsApp and Telegram for extended access.Accessibility-First DesignLarge, easy-to-read text and scalable UI elements.Support for multiple languages, including voice-to-text and text-to-speech functionalities.The design reflects modern trends with rounded edges, minimalistic icons, and a responsive layout that adapts beautifully to all screen sizes. Rak-GPT combines functionality and aesthetic appeal to create an engaging AI chatbot experience.

Rak-GPT — AI Chatbot GPT Mobile App UI Design

Alpha UI is the critical pre-launch testbed for the Seen Design System (Seen DS) — a foundational step where design theory meets real-world validation. It’s a meticulously crafted prototype environment built to rigorously evaluate and refine the core components, visual language, and interaction patterns that will power Seen DS.This project exists to serve everyone who builds digital products at scale:<ul><li>Founders who demand a design system that scales seamlessly and drives consistency across teams and platforms.</li><li>Developers who require clean, modular, and reusable UI components optimized for rapid implementation.</li><li>UI/UX designers who need a flexible, user-tested framework to innovate confidently without reinventing the wheel.</li></ul>Alpha UI isn’t a final product — it’s the intelligent sandbox where hypotheses about usability, accessibility, and design cohesion are tested, measured, and perfected. It transforms abstract guidelines into living components, ready for real users, real devices, and real scenarios.By doing this, Alpha UI ensures Seen DS launches not just as a design system but as a robust, battle-tested foundation that empowers creators to build consistent, intuitive, and forward-thinking digital experiences.