u/Business-Ad6390

Been building a Chrome extension called Tweaklify because I kept running into the same problem: designing in static tools doesn’t always show how a website actually feels.

Product designers often have to explain interactions, spacing, or UX ideas to developers through comments, Loom videos, or endless revisions. Tweaklify lets you edit the real website directly in Chrome so you can:

• Prototype in production-like environments
• Test ideas instantly
• Communicate UX visually
• Experiment without touching the codebase
• Reduce back-and-forth with engineering

You can:

• Click any section to tweak styles
• Adjust spacing, typography, shadows, borders, etc.
• Double-click text to edit copy instantly
• Use a live HTML editor for advanced edits
• Generate new sections with AI or modify existing ones
• Convert sections to React, Vue, Angular, or Shopify Liquid
• Preview changes live and export the code

AI prompts let you do things like:

• “Make this hero section feel more modern”
• “Improve hierarchy in this pricing section”
• “Add a cleaner mobile layout”

I’m trying to make website iteration feel more like designing in real-time rather than in isolation.

For designers and frontend developers: what would make a tool like this truly useful in your workflow?

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?

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?