u/Business-Ad6390

Need feedback for my “Figma + DevTools + AI” chrome extension

Built a Chrome extension because I got tired of how annoying website editing workflows are 😭

It’s called Tweaklify.

The idea is simple: click any element on a website and edit it visually instead of constantly fighting with DevTools and CSS. You can tweak spacing, typography, colors, shadows and layouts through proper UI controls, double click text to edit it instantly, use a live HTML editor, generate or edit sections with AI, convert sections into React, Vue, Angular or Shopify Liquid, preview everything live on the page, and then copy/export the generated code directly into your project.

The AI part is honestly my favorite. You can type things like “make this hero section more modern”, “add a pricing section”, or “convert this to React” and it updates directly on the page. You can add your own API key, I don't store any data or do anything with my server so I only make request to openAI endpoint for AI.

Basically trying to make website editing feel more like Figma + DevTools combined.

Would genuinely love feedback, what would make a tool like this useful for you?

reddit.com
u/Business-Ad6390 — 4 days ago

Building “Figma + DevTools + AI” as a Chrome extension - Tweaklify

Been building a Chrome extension called Tweaklify because I honestly got tired of how annoying website editing workflows are 😭

The goal is to make editing websites feel visual instead of technical.

Right now you can:

  • click any element and tweak styles visually
  • edit spacing, colors, typography, shadows, borders etc through proper UX inputs instead of raw CSS
  • double click text to edit content instantly
  • open a live HTML editor and modify sections directly
  • use AI to edit existing sections
  • generate completely new sections with AI
  • convert sections/components into React, Vue, Angular or Shopify Liquid
  • preview changes live on the page
  • experiment with layouts without constantly opening DevTools
  • copy/export the generated section code directly into your project

The AI part is what I’m most excited about.

You can do stuff like:
“make this hero section look more modern”
“turn this into a Shopify section”
“convert this card component to React”
“add a pricing section below this”

and it generates/edit things directly on the page.

I’m trying to make it feel like Figma + DevTools + AI had a baby.

it is my second side hustle after a shopify app lol, it is live on Chrome web store

Still early but would genuinely love feedback:
What feature would make something like this actually useful for you?

reddit.com
u/Business-Ad6390 — 4 days ago
▲ 5 r/sidehustlestack+5 crossposts

Building “Figma + DevTools + AI” as a Chrome extension

Been building a Chrome extension called Tweaklify because I honestly got tired of how annoying website editing workflows are 😭

The goal is to make editing websites feel visual instead of technical.

Right now you can:

  • click any element and tweak styles visually
  • edit spacing, colors, typography, shadows, borders etc through proper UX inputs instead of raw CSS
  • double click text to edit content instantly
  • open a live HTML editor and modify sections directly
  • use AI to edit existing sections
  • generate completely new sections with AI
  • convert sections/components into React, Vue, Angular or Shopify Liquid
  • preview changes live on the page
  • experiment with layouts without constantly opening DevTools
  • copy/export the generated section code directly into your project

The AI part is what I’m most excited about.

You can do stuff like:
“make this hero section look more modern”
“turn this into a Shopify section”
“convert this card component to React”
“add a pricing section below this”

and it generates/edit things directly on the page.

I’m trying to make it feel like Figma + DevTools + AI had a baby.

Still early but would genuinely love feedback:
What feature would make something like this actually useful for you?

You can check it out at --> Tweaklify.xyz

u/Business-Ad6390 — 2 days ago