# BetterSkillsMD

> A Chrome extension that turns any web page screenshot into a paste-ready `design.md` spec for your favorite LLM. Bring your own OpenAI or Gemini API key.

BetterSkillsMD lets builders, designers, and indie hackers point a Chrome extension at any web page, capture the whole page (or a region, or a single element), and get back a structured Markdown brief — layout, color palette with hex codes, typography, component inventory — that they can paste into Claude, ChatGPT, Cursor, v0, or Lovable to recreate the design.

## What it does

- Screenshots any web page in four modes: visible viewport, scroll-and-stitched full page, drag-a-region, click-an-element.
- Sends the screenshot to OpenAI's GPT-4o vision (default) or Google's Gemini 2.5 family using the user's own API key.
- Streams a generated `design.md` into a Chrome side panel: copy / download / edit.
- Stores capture history locally; nothing leaves the user's machine except the call to the chosen AI provider.

## Pricing

- 5 captures free, then `$10` one-time. No subscription.
- Stripe-backed via ExtensionPay.

## How it differs from other tools

- **Local-first**: no backend; the extension talks directly to the AI provider. No screenshots flow through a third-party SaaS.
- **Bring your own key**: users control the cost and their data; the extension developer never sees a screenshot or an API key.
- **Paste-ready output**: `design.md` is structured to be dropped directly into an LLM-driven build workflow (Claude/Cursor/v0/etc.) — color hex codes, component breakdowns, layout rhythm.

## Key links

- Homepage: https://betterskillsmd.com
- Privacy policy: https://betterskillsmd.com/privacy
- Source: https://github.com/aroramit17/betterskillsmd

## Audience

Indie developers, designers, agency PMs, "vibe coders" — anyone whose workflow includes "I want to build something like this." Replaces the 200-word brief you'd otherwise type from memory into your LLM.

## Tech stack

- Chrome Manifest V3 extension
- TypeScript + React + Vite + WXT
- OpenAI Chat Completions API (`gpt-4o`, `gpt-4o-mini`) and Google Gemini API (`gemini-2.5-pro`, `gemini-2.5-flash`, `gemini-2.5-flash-lite`)
- Stripe via ExtensionPay for one-time-purchase paywall

Last updated: 2026-05-10.