whatisgithub

What is clickdeck?

ningsiii/clickdeck — explained in plain English

Analysis updated 2026-05-18

35TypeScriptAudience · vibe coderComplexity · 2/5LicenseSetup · easy

In one sentence

A browser extension for visually tweaking fonts, colors, and text on any webpage by clicking elements, no code or dev tools needed.

Mindmap

mindmap
  root((ClickDeck))
    What it does
      Click to edit elements
      Font and color tweaks
      Export HTML or PDF
    Standout feature
      Copy AI Edit Prompt
    Tech stack
      TypeScript
      Chrome and Edge extension
    Use cases
      Polish AI generated pages
      Quick visual fixes

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Click an element on an AI-generated landing page and tweak its font size, color, or spacing visually

USE CASE 2

Export a visually edited page as an HTML file or a print-ready PDF, including a 16:9 slide format

USE CASE 3

Generate a structured prompt describing your visual edits to paste into Claude or ChatGPT so it updates the source code

USE CASE 4

Make small visual fixes to a page without opening browser developer tools or writing CSS

What is it built with?

TypeScriptChrome extensionEdge extension

How does it compare?

ningsiii/clickdeckkarminski/codevincireloops-app/reloops
Stars353535
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderatemoderate
Complexity2/53/53/5
Audiencevibe coderdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Alpha release, not yet published to the Chrome Web Store.

MIT license: use, copy, modify, and distribute freely, including commercially, as long as you keep the copyright notice.

So what is it?

ClickDeck is an open-source browser extension for Chrome and Edge that lets you visually edit an HTML page directly in the browser, without opening developer tools or touching code. You click on any element on the page, then adjust its font size, font weight, line spacing, text alignment, color, or the text content itself. When you are done, you can export the modified page as an HTML file or send it to the browser's PDF print flow in several paper formats including A4 and a 16:9 slide format. The tool is aimed specifically at people working with AI-generated web pages. AI coding tools can produce a reasonable first draft of a landing page, presentation, or document, but the final adjustments are often visual rather than structural: a heading that needs to be a bit larger, a color that reads as too cold, a paragraph with too little breathing room. ClickDeck sits between Chrome's built-in developer tools, which require knowing CSS, and a full design application, which is overkill for small tweaks. One feature worth noting is a "Copy AI Edit Prompt" button. After you make visual adjustments in the extension, this generates a structured text prompt describing the changes you made. You can paste that prompt into Claude or ChatGPT to have it update the underlying source code to match what you shaped visually. The extension runs entirely locally in the browser and does not send page content anywhere by default. Its diagnostics feature only copies recent local logs to your clipboard so you can choose whether to include them in a bug report. The README lists what it does not do: it does not generate content with AI, it does not write changes back to the original source files, and it is not a free-form drawing or design canvas. The project is in alpha and has not been submitted to the Chrome Web Store yet. It is released under the MIT license.

Copy-paste prompts

Prompt 1
Explain how ClickDeck's Copy AI Edit Prompt feature turns visual edits into a prompt for an AI coding tool
Prompt 2
Walk me through using ClickDeck to adjust text color and spacing on an AI-generated landing page
Prompt 3
What export formats does ClickDeck support when I'm done editing a page
Prompt 4
Compare ClickDeck to using Chrome DevTools for small visual tweaks on a generated webpage

Frequently asked questions

What is clickdeck?

A browser extension for visually tweaking fonts, colors, and text on any webpage by clicking elements, no code or dev tools needed.

What language is clickdeck written in?

Mainly TypeScript. The stack also includes TypeScript, Chrome extension, Edge extension.

What license does clickdeck use?

MIT license: use, copy, modify, and distribute freely, including commercially, as long as you keep the copyright notice.

How hard is clickdeck to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is clickdeck for?

Mainly vibe coder.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.