DEV Community: Arsalan Malik

Screenshot-to-Code Sounds Easy. Here Are 5 Things AI Still Gets Wrong

Arsalan Mlaik — Wed, 19 Aug 2026 07:57:55 +0000

Screenshot-to-code sounds simple.

Upload a screenshot → generate frontend code → done.

In practice, it is not quite that simple.

I've been experimenting with AI frontend generators, and the first generated result can look surprisingly close to the reference. But once you start treating that code like a real frontend project, you notice several things AI still doesn't understand particularly well.

Here are five of them.

1. Responsive Behavior

A screenshot represents one viewport.

Your application doesn't.

AI can look at a desktop screenshot and reproduce the layout, but it doesn't always know what should happen when the viewport becomes 390px wide.

For example, should three cards become:
[ Card ][ Card ][ Card ]
or:
[ Card ] [ Card ] [ Card ]
What happens to the sidebar?

Does the navigation collapse?

Should the heading size change?

Should the buttons become full width?

The screenshot doesn't provide those answers.

A good generated UI therefore still needs to be tested at different breakpoints:
320px 375px 768px 1024px 1440px
This is one of the first places where a developer needs to take over.

2. Component Architecture

AI can generate something that looks correct while producing a component structure that is difficult to maintain.

You might get one huge component containing hundreds of lines of JSX.

It works.

But if the same card, button, header or form appears somewhere else, you now have duplicated markup.

A real application might look more like:
Dashboard ├── Header ├── Sidebar ├── DashboardContent │ ├── StatsCard │ ├── Chart │ └── ActivityList └── Footer
The screenshot tells AI what the page looks like.

It doesn't tell AI how you want your application's component architecture to work.

That's still an engineering decision.

3. CSS That Looks Right but Isn't

This is probably one of the easiest ways to spot generated frontend code.

The AI wants to reproduce the screenshot, so sometimes it reaches for fixed positioning:
.element { position: absolute; top: 142px; left: 287px; }
It might look perfect at the original viewport.

Resize the browser and things start falling apart.

For production UI, the layout usually needs to be based on things like:

Flexbox
CSS Grid
gap
responsive units
containers
breakpoints
clamp()
framework utilities

The goal isn't to reproduce a screenshot at one exact resolution.

The goal is to build the layout system that could have produced that screenshot.

That's a much harder problem.

4. AI Can't See Application Logic

A screenshot can show a button.

It cannot tell you what the button does.

For example:
[ Add to Cart ]
The image doesn't tell the AI whether clicking it should:

call an API
update React state
open a modal
update a cart counter
redirect to checkout
show an error

The same problem happens with forms.

A screenshot can show:
Email [____________] Password [____________] [ Login ]
But it doesn't describe:

validation
authentication
loading states
API errors
disabled states
session handling

This is where screenshot-to-code ends and application development begins.

5. The Small Details Are Still Hard

The overall layout can be surprisingly accurate while the UI still feels "off."

Usually it's because of small details:

Font weight
Line height
Letter spacing
Border radius
Shadow intensity
Icon size
Button height
Image cropping
Padding
Element alignment

Each difference may be small.

Together, they make the generated interface noticeably different from the reference.

That's why I prefer an iterative workflow:
Screenshot ↓ Generate ↓ Preview ↓ Compare ↓ Refine ↓ Test
The first generation is the starting point, not the finished product.

So Are Screenshot-to-Code Tools Actually Useful?

Absolutely.

The mistake is expecting them to replace frontend development.

The real value is reducing the amount of repetitive work between:

"I have this UI design."

and

"I have a working frontend implementation."

I've been using tools such as Make Your UI for this type of workflow.

What I particularly like about the frontend-generator approach is that the generated code doesn't have to take over the existing project.

Generate the UI.

Preview it.

Modify it.

Then decide what actually belongs in your codebase.

That distinction matters when you're working on a real application.

I don't necessarily want an AI agent changing files throughout my existing project just because I asked it to recreate one component.

Sometimes I simply want:

"Give me this UI in React + Tailwind."

Then I'll decide where that component belongs.

AI Should Generate. Developers Should Decide.

For me, this is where screenshot-to-code becomes genuinely useful.

Not:

Screenshot → AI → Production

But:

Screenshot → AI → Code → Developer review → Refinement → Production

AI is very good at giving developers a starting point.

Developers are still responsible for architecture, responsiveness, accessibility, performance and application logic.

And honestly, that's probably the better workflow.

Let AI handle the repetitive part.

Keep the engineering decisions with the developer.

Have you tried screenshot-to-code tools?

I'm curious what your experience has been.

What's the biggest problem you've found in AI-generated frontend code — CSS, responsiveness, component architecture, or something else?

We Built an AI Frontend Generator — Sharing It With the Dev Community

Arsalan Mlaik — Mon, 10 Aug 2026 16:44:26 +0000

We've been working on a tool called Make Your UI to speed up one of the repetitive parts of frontend development: turning a design idea into working code.

The basic workflow is:

Prompt / Screenshot → Generate → Preview → Refine → Fix → Export

You can start with a simple description of a UI or upload a screenshot. The tool generates the frontend and lets you see the result directly in the browser.

What we've built

Text-to-code generation
Screenshot-to-code
15+ JavaScript framework targets
20+ CSS/styling options
Live desktop, tablet and mobile preview
Refine the existing UI using natural-language instructions
Runtime error detection and Fix Error
Code explanation
Code export

The part we've found most useful is the iterative workflow. Instead of generating code, opening a separate project, finding an issue and going back to the AI, you can generate and refine the interface in the same place.

We're sharing it with the developer community because we'd genuinely like feedback on how well it handles real UI screenshots and whether this workflow actually saves time compared with existing approaches.

Try it:
Make Your UI

Dev Community Offer

We're offering our first 20 users 40% off the Basic Package while we gather early feedback.

Claim the 40% Developer Community Offer

If you try it, we'd particularly like to know where the generated UI is accurate and where it still needs improvement.

I Built an AI Frontend Generator — Make Your UI

Arsalan Mlaik — Fri, 07 Aug 2026 13:09:59 +0000

I’ve been working on an AI tool that can generate frontend UI from images or simple text descriptions.

You can:

🖼️ Image → Code — upload a UI screenshot and recreate it
✍️ Text → Code — describe the interface you want
✨ Refine UI — ask AI to change colors, spacing, layout, etc.
💡 Explain Code — understand generated code and individual sections
🧪 CodePen — test and experiment with the generated UI
🐛 Fix Errors — detect and fix frontend code issues
📱 Responsive Preview — test mobile, tablet and desktop layouts

The goal is to make the workflow:

Idea → UI → Code → Refine → Test → Ship

I’ve finished testing the core workflow and would really appreciate feedback from developers and frontend engineers.

👉 Try it here:
Make Your UI — AI Frontend Generator

Would love to know what you think and what features you’d want to see next.

We Built an AI Article Engine That Creates Complete, Web-Verified Content in One Click

Arsalan Mlaik — Mon, 29 Jun 2026 19:23:50 +0000

AI writers are everywhere, but most of them still generate generic text that requires hours of editing, fact-checking, formatting, and adding images before it is ready to publish.

That's why we built Elite Engine 2.

Our goal was simple: create an article engine that does more than just write paragraphs.

What Is Elite Engine 2?

Elite Engine 2 is an AI-powered content engine designed for bloggers, developers, SEO professionals, agencies, and content creators who want complete, publish-ready articles instead of rough drafts.

It combines writing, research, structure, and visual enhancements into a single workflow.

Key Features

🌐 Web-Verified Content

The engine uses external sources to help provide more accurate and up-to-date information.

🎯 Automatic Tone Selection

It automatically adapts the writing style based on the topic, removing the need for manual adjustments.

🌍 Auto Language Detection

The system understands multiple languages and generates content accordingly.

🖼 Relevant Images

Articles include contextually relevant images instead of random placeholders.

📊 Charts and Flow Diagrams

Complex topics become easier to understand with visual explanations.

💻 Code Playground

Technical articles can include code examples and interactive snippets.

🔗 Verified External Links

External references are checked to help avoid broken links and improve reliability.

🧠 Better Hinglish Understanding

Elite Engine 2 understands mixed-language prompts naturally, making it useful for multilingual creators.

🚀 Expert Mode

Advanced users can generate more detailed and technical content when required.

Why We Built It

Most AI tools save time on writing, but creators still spend hours:

Fact-checking information
Finding images
Adding references
Creating diagrams
Formatting articles
Improving readability

We wanted to simplify the entire content creation process and reduce repetitive work.

Who Is It For?

Bloggers
Content Creators
SEO Professionals
Affiliate Marketers
Developers
Agencies
Technical Writers
Students

Our Vision

We believe AI should help creators spend less time on repetitive tasks and more time focusing on ideas.

Elite Engine 2 was built to streamline content production, combining writing, research, visuals, and references into a single workflow.

If you'd like to see what we're building, check it out:

👉 https://makemychance.com/elite-engine2/

We're continuously improving the engine and would love to hear your feedback.

What Are AI Agents?

Arsalan Mlaik — Wed, 18 Feb 2026 11:27:18 +0000

AI agents are software systems designed to perceive their environment, reason about it, and take actions autonomously to achieve defined goals. Unlike traditional programs that execute…

The post What Are AI Agents? first appeared on Makemychance.

Modern CSS Isn’t What You Think Anymore — And That’s Why Tailwind Makes Sense Now

Arsalan Mlaik — Sat, 27 Dec 2025 13:37:16 +0000

If you still think CSS is just about selectors, properties, and fighting specificity, you’re already behind. Modern CSS has quietly evolved into something much more structural…

The post Modern CSS Isn’t What You Think Anymore — And That’s Why Tailwind Makes Sense Now first appeared on Makemychance.

CSS Gradient Generator

Arsalan Mlaik — Wed, 24 Dec 2025 14:03:34 +0000

This CSS Gradient Generator helps developers and designers create beautiful linear and radial gradients instantly using an easy visual interface. You can add multiple colors, change gradient direction, preview results in real time, and copy clean CSS code for direct use in websites, landing pages, and UI designs. Tools like this improve workflow efficiency, especially for front-end developers working with modern CSS layouts.
Check & Give feedback
CSS Gradient Generator

Is Your Chrome Browser at Risk? Critical Security Flaw You Must Fix Today

Arsalan Mlaik — Wed, 24 Dec 2025 11:20:14 +0000

If you use Google Chrome, it’s time to pay attention. A serious security flaw has been discovered in Chrome, and it could put millions of users…

The post Is Your Chrome Browser at Risk? Critical Security Flaw You Must Fix Today first appeared on Makemychance.

Azure Introduces New Networking Updates for Better Security and Reliability

Arsalan Mlaik — Sun, 07 Dec 2025 14:58:57 +0000

Published on Makemychance

Microsoft Azure has rolled out new networking improvements aimed at helping developers build more secure, stable, and highly available cloud applications.

The latest updates strengthen DDoS protection, improve traffic filtering, and offer deeper network monitoring, making it easier for developers and DevOps teams to identify issues faster. Azure’s upgraded load balancing and automatic failover features also reduce downtime during heavy traffic or service interruptions.

For high-availability workloads, Azure now provides improved zone redundancy, smarter cross-region routing, and more efficient connection management. These changes support developers working on distributed systems, microservices, and global applications.

For general information, users can check the Azure homepage (https://azure.microsoft.com) or Microsoft’s website (https://www.microsoft.com).

Google Workspace Studio Agents: A Simple Guide for Developers

Arsalan Mlaik — Thu, 04 Dec 2025 15:03:22 +0000

Google recently introduced Workspace Studio Agents, a powerful way to automate workflows, integrate apps, and create AI-powered task agents — all inside Workspace. Developers can now build custom agents that connect Gmail, Docs, Drive, Sheets, third-party APIs, and internal systems without heavy backend setups.

In this article, we’ll break it down in a simple and developer-focused way.

🎯 What Are Workspace Studio Agents?

Agents are AI-driven automation bots that can perform tasks for you inside Google Workspace.
Think of them as serverless backend workflows running on Google’s infrastructure.

✔ Read & parse emails
✔ Update Sheets automatically
✔ Connect APIs
✔ Trigger workflows from user actions
✔ Assist inside Gmail, Docs, Meet, and Chat

This makes Workspace Studio Agents perfect for automation and productivity workflows.

🧩 Why Developers Should Care

1. Serverless automation

No servers, deployments, or maintenance — agents run on Workspace infrastructure.

2. Built-in OAuth & Permissions

Agents use Workspace-level authentication, so you don’t need to maintain login logic.

3. Integrations become easier

One agent can connect:

Gmail API
Drive API
Sheets API
Calendar API
Third-party APIs (REST/JSON)
Internal ERP/CRM

4. Ideal for internal tools

Companies can build internal tools without deploying full backend architecture.

⚙️ How Agents Work (Developer View)

Workspace Studio provides:

1. Triggers

Agents can start from:

New email in Gmail
A message in Google Chat
A document event
A time-based scheduler
Manual user actions

2. Actions

Agents can perform:

Send emails
Read/update Sheets
Create Drive folders/files
Modify Docs
Generate AI summaries
Call APIs

3. Connectors

Connectors allow you to integrate with:

Slack
HubSpot
GitHub
Jira
Stripe
Custom APIs

🛠 Example: Auto-Reply Agent Using AI

const email = GmailApp.getLastReceivedEmail();

const response = await ai.generate({
  prompt: `Write a polite reply for: ${email.body}`,
});

GmailApp.sendEmail(email.sender, "Re: " + email.subject, response.text);

This agent reads an email → uses AI to generate a response → sends it.

📌 Use Cases for Developers

1. Automated Reporting

Fetch data → process → update Sheets → email results.

2. Workflow Automation

Move files, label emails, rotate logs, archive documents.

3. CRM Integration

Sync leads from forms → push to CRM API → notify sales team.

4. AI Document Assistants

Summaries, translations, formatting, rewriting inside Docs.

5. Custom Chat Agents

Chat-based bots for:

IT support
HR queries
Sales automation

For further reading:
Makemychance.com

Official Google Workspace Studio: https://workspace.google.com/

🧭 Final Thoughts

Workspace Studio Agents are changing how teams automate workflows. For developers, they unlock a lightweight, serverless way to integrate systems, build internal tools, and use AI across Workspace apps.

This is the future of productivity automation — fast, scalable, and developer-friendly.

WooCommerce Settings Explained

Arsalan Mlaik — Wed, 03 Dec 2025 18:48:35 +0000

If you’re planning to build an online store with WordPress, WooCommerce is the easiest and most powerful way to start. But after installing it, the biggest confusion is always the same:

“Which WooCommerce settings should I configure first?”

In this guide, I’ll break down every important WooCommerce setting in a simple, real-world way — no complex jargon, just pure practicality. Let’s make your store ready for real customers.

1. General Settings – Your Store Identity

This is where you set your shop’s basic information.

Key options to configure:

Store address → City, state, country
Currency → INR, USD, etc.
Thousand/Decimal separators → 1,000.00 or 1.000,00
Enable taxes if needed

If your store location or currency is wrong, your entire checkout experience gets messed up. So set this carefully.

2. Products Settings – How Your Store Behaves

These options directly affect how your products appear and function.

Important product settings:

Shop page: Select a page to show all your products
Add to cart behavior: Redirect to cart or stay on product page
Measurements: Default weight (kg/lb), dimensions (cm/inch)
Reviews: Enable product reviews + star ratings

Tip:
If you're running a COD-heavy store in India, avoid redirecting to the cart — it increases cart abandonment.

3. Inventory Settings – Stock Management

Inventory management is optional, but recommended.

Turn on “Manage Stock” to:

Automatically reduce stock when orders are placed
Receive low-stock and out-of-stock alerts
Hide out-of-stock items

Useful when selling physical products. For digital items, you can safely disable stock management.

4. Tax Settings – Optional but Useful

If you enabled tax earlier, this tab will appear.

You can set:

Standard tax rates
Reduced rates
Zero rates
Prices inclusive/exclusive of tax

For Indian sellers (GST):
You can create separate tax classes for 5%, 12%, 18%, and 28% rates.

5. Shipping Settings – Delivering Your Products

This is where most beginners get confused, so let’s make it simple.

WooCommerce shipping includes:

Shipping zones → Region-wise rules
Shipping methods → Flat rate, free shipping, local pickup
Shipping classes → Category-wise pricing

Example:

Zone: “India”
Method: Flat rate ₹50
Class: “Heavy product” = ₹100 extra

Super clean, super scalable.

6. Payments Settings – Accepting Money

Every store must configure this right.

WooCommerce supports:

Cash on Delivery (COD)
PayPal
Stripe
Razorpay (India’s favorite)
Direct bank transfer
UPI (via plugins)

My recommendation for India:
✔ Razorpay for online payments
✔ COD as a secondary option
This combo works best for conversions.

7. Accounts & Privacy – User Experience Matters

Here you control how users log in and checkout.

Important toggles:

Allow guest checkout
Allow users to create accounts
Auto-generate username & password
Data retention options

Best setup for beginners:
Enable guest checkout to make ordering fast and frictionless.

8. Emails – Customize Notifications

WooCommerce emails look very basic by default.

You can customize:

Header image
Colors
Footer text
Sender name & email

If your emails look clean, customers trust your store more.

9. Integrations – Optional Add-Ons

Depending on plugins, you may see:

Google Listings
Mailchimp
Jetpack
Analytics extensions

Not required for everyone, so enable only what you need.

10. Advanced Settings – Only If Necessary

This is the technical section.

Includes:

Page setup (Cart, Checkout, My Account)
REST API
Webhooks
WooCommerce data storage

If you're not a developer, don’t touch the API or Webhook settings.

Final Thoughts

WooCommerce looks big from the outside, but once you understand the settings clearly, it becomes a super flexible eCommerce engine. Configure the basics — products, payment, and shipping — and your store is ready for sales.

🛈 Mastering CSS Tooltips: A Quick & Practical Guide

Arsalan Mlaik — Tue, 02 Dec 2025 11:17:37 +0000

Published on Makemychance.com
Tooltips are small UI elements that display helpful text when users hover or tap on an element. They improve UX without adding clutter — and with just a few lines of CSS, you can create clean, modern tooltips for any website.

🔍 What Is a Tooltip?

A tooltip is a small popup text that appears on hover, focus, or tap.
Great for icons, buttons, forms, and feature explanations.

🧩 The Easiest Tooltip (HTML Only)

<button title="Click to submit">Submit</button>

✔ Super quick
✘ Can't customize the style

🎨 Custom CSS Tooltip (Modern UI)

HTML

<div class="tooltip">
  Hover me
  <span class="tooltip-text">This is a tooltip</span>
</div>

CSS

.tooltip {
  position: relative;
  cursor: pointer;
}
.tooltip .tooltip-text {
  visibility: hidden;
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: 0.3s ease;
  white-space: nowrap;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

📌 Tooltip Positions

Top (default)
Bottom
Left
Right

Just adjust top, left, bottom, or transform values.

🛈 Tooltip with Arrow

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 5px solid transparent;
  border-top-color: #333;
  transform: translateX(-50%);
}

📱 Tooltip on Mobile?

Since there's no hover on mobile:
✔ Show tooltip on click
✔ Use an info icon (i)
✔ Add a small JS toggle if needed

🛑 Common Mistakes

❌ Too much text
❌ Tooltip covering the element
❌ Bad contrast
❌ No mobile alternative

Keep it simple and readable.

🔗 Helpful References

MDN Tooltip Basics https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
CSS-Tricks Tooltip Guide https://css-tricks.com/css-tooltips/

🚀 Final Note

Tooltips are tiny but powerful UX boosters. With simple CSS, you can create clean, smooth, and accessible tooltips that fit perfectly into any modern UI.