designr

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #claude-code #codex #cli #developer-tools #react #windows

★ 92 Open GitHub ↗

A chrome extension that inspects CSS styles and saves snapshots of web components and designs 🎨✨📸

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">designr inspects <strong>CSS styles</strong> and saves <strong>snapshots</strong> of <strong>web components</strong> and <strong>designs</strong></p>

<h2 align="center">🎨 &nbsp; Functionality &nbsp;</h2>
<p align="center">designr is an <strong>open-source</strong> <strong>browser extension</strong> designed to inspect and save CSS styling on web pages. designr provides information about <strong>element styles</strong> and save the styles into a palette for later use. designr is a simple and intuitive way for designers and web developers to  <strong>save CSS references.</strong></p>
<br/>

<h2 align="center">🛠 &nbsp; Setup &nbsp;</h2>
<p align="center">To get started with development, <strong>fork or clone the repository</strong>. Once the repository is installed, go to the extensions page in your brower. For example, the extension manager page for Chrome is <code>chrome://extensions</code> which will let you edit and upload the extension package. On the extension manager page, toggle <code>Developer Mode</code> on, click <code>Load unpacked</code>, and select the <strong>folder of the downloaded extension</strong>.</p>

<br/>

<h2 align="center">⚙️ &nbsp; Code Structure &nbsp;</h2>
<div align="center">
  The code for designr adheres to the following structure: <br /> <br />
  
  |   |   |
  |---|---|
  |<code>assets/</code>| includes all assets for the extension  |
  |<code>css/designr.css</code>| CSS file for the designr element inspector view|
  |<code>css/styles.css</code>|CSS file for the designr popup view|
  |<code>js/libs</code>|contains all JS code for libraries|
  |<code>js/background.js</code>|background JS code for designr|
  |<code>js/designr.js</code>|JS code for the designr element inspector view|
  |<code>js/script.js</code>|JS code for the designr popup view|
  |<code>index.html</code>|HTML code for the designr popup view |
</div>

<br/>

<h2 align="center">💜 &nbsp; Contributing &nbsp;</h2>
<p align="center">If you would like to contibute new features, bug fixes, or have any recommendations on how the extension can be improved, feel free to contribute by <strong>forking this repository, contributing a change that either resolve an issue or adds a new feature, and submitting a PR for review.</strong></p>

designr

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README