A simple but really useful browser extension for frontend devs

Source: Dev.to

Overview

Co Designer is a Chrome extension that turns your browser into a visual CSS editor and generates ready‑to‑paste GitHub Copilot CLI prompts from your changes.

• Select any element on a page.
• Tweak fonts, colors, layout, shadows visually.
• Hit “Generate” to receive a text prompt.
• Paste the prompt into GitHub Copilot CLI and apply the changes.

I used GitHub Copilot from start to finish on this project, and it was an amazing experience! 🥰

Repository

• GitHub Repo:

Installation

1. Download the zip file from the repository.
2. Unzip the downloaded archive.
3. Open Chrome and navigate to chrome://extensions/.
4. Enable Developer mode (toggle the switch in the top‑right corner).
5. Click Load unpacked in the top‑left corner.
6. Select the unzipped folder.

The extension is now installed and ready to use.

Usage

1. Click the extension icon to activate Co Designer.
2. Choose any element on the page you want to edit.
3. Adjust visual properties (fonts, colors, layout, shadows, etc.) using the UI.
4. Press Generate to create a GitHub Copilot CLI prompt.
5. Copy the generated prompt and paste it into your terminal where Copilot CLI is running.

Your CSS changes will be applied automatically.