Effortless Alt Text Generation: Innovative Chrome Extension Tool

Effortless Alt Text Generation: Innovative Chrome Extension ToolEffortless Alt Text Generation: Innovative Chrome Extension Tool

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Karelle Hofler

pro

• 1d

Panopt solves a problem most accessibility tools ignore: writing good alt text is tedious, so most images on the web still don't have it. I designed and built a Chrome extension that lets anyone right-click an image and generate a high-quality, contextual alt text description in seconds.

I handled the full build solo, product design, frontend, backend, API integration, and the pay-as-you-go credit system (no subscription required, since accessibility tooling shouldn't lock people into recurring billing). Since launch, it's picked up organic installs across more than a dozen countries with zero paid promotion.

My role: Solo founder & full-stack developer: product design, engineering, Claude API integration, Chrome Web Store launch

Tools/Tech: TypeScript/JavaScript, Plasmo, Chrome Extension APIs, Claude API (Anthropic), Supabase

Completed work

Supabase React Chrome Extension Development Claude Stripe

Natalia Trusova

• Jun 21

Title: I built a design system generator inside Figma Make. Here's the workflow.

The problem I kept running into: every new client project meant re-explaining the brand to every AI tool from scratch. Figma Make didn't know the colors. Cursor didn't know the tokens. Claude didn't know the rules. I was the shared memory — and I kept losing things.

So I built Design System Gen. Entirely inside Figma Make. Powered by Claude API.

The workflow:

Upload brand references → Claude API analyzes them across 8 dimensions (palette, mood, typography, composition, lighting, texture, motion, UI DNA) → structured data, not vibes → generates 11 files, each formatted for a specific tool in your stack.

figma-make.md → paste once, Figma Make knows your entire design system design-system.css → all tokens as CSS custom properties tokens.json → W3C format, imports directly into Figma Variables starter.tsx → React starter with tokens already bound .cursorrules → Cursor knows your system from root Claude.md → Claude reads it automatically every session + 5 more for docs, LLMs, prompts, components

Every tool gets its own context file. All consistent with each other.

The part I'm most proud of: I'm a designer. I don't write code. The entire tool — UI, API integration, file generation logic — was built and shipped inside Figma Make. No external hosting. No separate codebase.

Live at: vibecodingdsgen.figma.site

Add your Claude API key and try it with your own moodboard.

#FigmaMake #DesignSystem #VibeCoding #AI #Claude #UXUI #DesignSystems #ConfigMakeathon

UX Design AI Engineer Claude Figma

Rada Hnedova

• Jun 22

As someone who constantly jumps between Figma, Claude, ChatGPT, Cursor, Lovable, and other AI tools, this problem feels very familiar 😅

The tools are getting smarter, but keeping context consistent is still surprisingly manual. Love seeing people tackle that gap.

Prem Shandilya

pro

• Jun 21

Designed this hero section for @Raos Healthcare. ✨ The goal was to balance credibility + clarity + conversion while keeping the experience clean and easy to navigate. 👉Check it out here: https://raoshealthcare.com/ Drop a🧡if you like it.

Claude Copywriting Product Design UX Design Figma Framer

MD Rafee Alam

• Jun 22

The coral gradient and the doctor cut-out work well together for healthcare, trust signals without feeling clinical. How the product categories are floating around the hero adds context without cluttering the main message.