DEV Community: Raja Irfan Ahmed

Tired of DevTools?😫 Reverse-Engineer Any Web Design in Seconds⚡

Raja Irfan Ahmed — Sun, 25 Oct 2026 03:01:14 +0000

Every frontend developer knows this frustration:

You see an award-winning site like Stripe, Linear, or Mobbin. You open Chrome DevTools. You start digging through nested <div> tags, copying hex codes, guessing font weights, and trying to inspect hover states.

Twenty minutes later, you have 15 browser tabs open, color codes scattered in your notes app, and zero working components. 🤦‍♂️

I got tired of doing this manually. So I built an autonomous web tool to automate the entire process: md.irfan [STUDIO EXTRACTOR] 🚀

Here is the problem, the solution, and how you can use it right in your browser. 👇

🛑 The Problem

Why is studying or reverse-engineering web design so painful today?

DevTools is slow and manual ⏳: Finding the primary color, button padding, border radii, and easing curves across dozens of elements takes hours.
Modern sites break traditional scrapers 💥: Award-winning sites (built on Vite, React, Framer Motion, and GSAP) use full-screen curtain intro animations, percentage loaders, and lazy IntersectionObservers. Traditional scrapers take a snapshot at 800ms and capture an unhydrated black loading screen.
Scattered, non-reusable output 🗑️: Even if you inspect elements, you only get raw, disconnected CSS snippets instead of structured tokens, Tailwind configs, or reusable component recipes.

💡 The Solution

md.irfan [STUDIO EXTRACTOR] is an autonomous browser agent that reverse-engineers live websites directly from their computed CSSOM tree into clean, production-ready specifications. ⚡

Here is how it handles the hard parts:

1. Preloader Barrier Dismissal 🚪

It does not use dumb timers. It polls document.readyState and monitors curtain overlay elements (opacity < 0.05 or display: none). It only begins extraction once the real hero section mounts into view.

2. Progressive Micro-Scroll Walk 📜

It progressively walks the document height (0% -> 35% -> 65% -> 100%). This triggers lazy-loaded images, Framer Motion whileInView hooks, and GSAP ScrollTrigger timelines so nothing is missed.

3. Autonomous Interactive Click Engine 🖱️

It safely clicks navigation tabs, collapsible FAQ accordions, and carousel arrows inside a sandboxed session. It records every height expansion and state change into an interactive telemetry ledger.

4. Multi-Thousand-Line `DESIGN.md` Output 📋

It synthesizes the entire site into a disciplined specification containing:

YAML Frontmatter 🏷️: Complete color scales, typography scales, surface ladders, and radii tokens.
Architectural Rationale 📐: 10-domain breakdown covering hero execution, navigation anatomy, Bento grids, and motion choreography.
Component Recipes 🧱: Ready-to-use HTML and CSS with hover, focus, and active states.

5. Evidence-Based Confidence Score 🎯

Zero AI hallucinations. The confidence score is calculated directly from 4 measured DOM metrics:

$$\text{Score} = \frac{\text{Components Match} + \text{Colors Covered} + \text{Text Styles Covered} + \text{Tokens Seen}}{4}$$

6. 1-Click ZIP Export Package 📦

Downloads the complete design system in a single .zip bundle:

DESIGN.md (Full specification)
tokens.json (Machine-readable tokens)
tokens.css (Vanilla CSS variables)
tailwind.config.js (Tailwind theme extension)
components/ (HTML/CSS component templates)

🛠️ How to Use It

No local installation or terminal commands required:

Step 1: Open the live tool 🌐

Launch the web studio directly in your browser:
👉 designextractor.vercel.app

Step 2: Enter any URL or pick a preset 🎯

Paste any website link (e.g. linear.app, stripe.com) or explore flagship presets:

Linear 🟣 (Near-black canvas, lavender-blue accents)
Mobbin ⚪ (Gallery-white canvas, Saans variable fonts)
Stripe 🔵 (Deep navy, crisp light surfaces, electric blurple)
Airbnb 🔴 (Clean hospitality aesthetic, coral accents)
Notion 📓 (Document canvas, clean typography)
IKEA 🟡 (Scandinavian minimalism, bold blue and yellow)

Step 3: Inspect live tokens & evidence 🔍

Watch the real-time radar walk through preloader dismissal, scrolling, and clicks.
Check the Evidence-Based Confidence Score with its 4-signal breakdown.
Switch between Formatted Preview, Raw Markdown, and Structured YAML Tokens.

Step 4: Export and build in 1-click 🚀

Click Copy MD or Copy Tokens to paste directly into your editor.
Click Export ZIP to download the complete design system package.
Drop tokens.css into your Next.js, Vite, or Astro project and start coding immediately!

🌟 Try It Out

The web tool is live and free to explore:

🚀 Live Studio: designextractor.vercel.app
🔖 Bookmark the link for your next frontend project or redesign.
💬 Drop a comment below: Suggestions for improvements. What issues have you faced using the tool? Which tool should I develop next to solve your problem?

I Solved Our Biggest Frontend Problem: Why I Built a 7-Agent UI/UX Suite 🤯!

Raja Irfan Ahmed — Fri, 16 Oct 2026 07:18:23 +0000

Whenever I started a project, I always hit the exact same roadblock.

I was stuck on frontend engineering, colors, layout, and UI/UX (User Interface / User Experience).

Back-end logic made sense. APIs made sense. But turning an idea into a clean, modern, eye-catching web application was always a painful struggle.

Most AI tools made it worse. Every time I asked an AI assistant for a landing page or portfolio, it gave me the exact same design: dark gray cards, centered walls of text, broken button contrasts, and zero creative personality.

So I decided to solve our biggest frontend problem once and for all.

I built an open-source suite of seven specialized agent skills for Google Antigravity and Claude Code. You can check out the live portfolio build at irfanlovefrontend.vercel.app and clone the full skill suite on GitHub.

Here is the story of how it works, what it solves, and how you can use it to build better web apps.

The Frustration: Why Most AI Frontend Code Fails
How I Fixed It: 7 Specialized Agent Skills
The Rules That Make It Look Human
Live Demo: See It in Action
How You Can Use It on Your Own Projects
I Need Your Feedback to Make It Even Better
Want to Contribute? Let Us Build Together

The Frustration: Why Most AI Frontend Code Fails

When you ask a standard AI model to code an interface, it falls into repetitive statistical habits:

Repetitive Layouts: It picks the first generic template in its training weights. Every project looks like a duplicate clone of the previous one.
Text Walls: Headlines wrap into 4 to 6 lines because containers are too narrow.
Empty Gaps in Grids: Multi-card bento grids end up with awkward, dead white spaces.
Fragile Animations: Complex scroll events crash mobile browsers by listening directly to scroll listeners.

I realized frontend engineering requires distinct cognitive modes. One model trying to do everything at once creates sloppy results.

To fix this, I separated frontend development into five dedicated engineering stages and two auxiliary tools.

How I Fixed It: 7 Specialized Agent Skills

Each skill lives in its own folder and corresponds to an exact slash command:

1. `/ui-ux` (Master Orchestrator)

Coordinates the full four-stage lifecycle autonomously inside your frontend/ folder. It updates PLAN.md with real-time checkboxes as each milestone finishes.

2. `/frontend-architect` (Stage 1 Foundation)

Scaffolds Next.js 15, selects one of six calibrated substrate palettes (like Swiss Industrial, Warm Utilitarian, or Cold Luxury), configures fluid clamp typography, sets up Lenis smooth scrolling, and creates an SVG BrandLogo with small-size favicon legibility.

3. `/creative-layout-engineer` (Stage 2 Macro-Layout)

Designs wide hero sections, four distinct hero archetypes, gapless bento grids using Tailwind grid-flow-dense, and canonical route shells (/about, /projects, /skills, /contact) with zero layout shift.

4. `/interactive-component-engineer` (Stage 3 Components & Motion)

Builds Double-Bezel hardware cards, button-in-button CTAs (Call to Action) with kinetic diagonal hover physics, and GSAP ScrollTrigger timelines.

5. `/experience-qa-auditor` (Stage 4 Production Hardening)

Verifies mobile responsiveness down to 320px viewport width, builds custom 404 pages and client error boundaries, and runs a strict 45+ item mechanical Pre-Flight Check.

6. `/build-error-resolver` (Auxiliary Build Recovery)

Applies surgical diffs (< 5% of affected code) to fix TypeScript errors and Next.js compilation issues without touching your architecture.

7. `/github-readme-writer` (Auxiliary Documentation)

Generates authoritative, human-written GitHub READMEs, case studies, and launch posts with zero generic AI clichés and zero em-dashes.

The Rules That Make It Look Human

To make sure the output never feels like an AI template, the suite enforces strict design rules:

The Deterministic Seed Engine: A math calculation (len(prompt) % 6) selects different colors, fonts, and hero layouts for every project.
The 2-Line Iron Rule: Hero headlines must sit in wide containers (max-w-5xl or max-w-6xl) and never exceed 2 lines on desktop.
Gapless Bento Flow: Grid columns mathematically interlock so there is zero empty space.
Double-Bezel Hardware Enclosures: Cards feature an outer machined shell and concentric inner radius for real physical depth.
Single-Project Spatial Rhythm: Sub-pages share the exact same header Y-axis height and breadcrumb alignment so the page never jumps when navigating.

Live Demo: See It in Action

I used this exact agent skill suite to build a portfolio web application with Next.js 15, TypeScript, Tailwind CSS, Lenis, and GSAP:

Live URL: https://irfanlovefrontend.vercel.app/
GitHub Repository: https://github.com/rajairfanahmed/ui-ux-skill

Take a look on both desktop and mobile to see the spatial consistency, font pairings, and smooth scroll in action.

How You Can Use It on Your Own Projects

You can install these skills into your Antigravity or Claude Code setup:

git clone https://github.com/rajairfanahmed/ui-ux-skill.git

Copy the .agents/skills folder to your project root or your global agent configuration directory.

Then invoke the master skill inside your editor:

/ui-ux Build a bespoke landing page for an engineering studio with dark mode, smooth scroll, and case study cards.

You can also specify your own custom preferences in your prompt:

Custom color palettes (e.g. "Use deep navy #0A1128 with gold #D4AF37 accent")
Custom typography (e.g. "Use Outfit for headlines and Plus Jakarta Sans for body")
Specific pages (e.g. "Include /services, /case-studies, and /pricing")

The agent will adopt your constraints while preserving strict anti-slop rules.

I Need Your Feedback to Make It Even Better

This is version 1.0.0, and I want to keep improving it for developers everywhere.

I need your honest advice:

Colors: Are the substrate palettes hitting the right contrast and mood?
Typography: Which font pairings look best on your screen?
Animations: Are the GSAP spring physics smooth, or do you prefer subtler transitions?
Layouts: What reference websites do you love? Share them with me so I can study their layout rhythm and add them as inspiration patterns.

Please do not hesitate to comment below. Every single suggestion helps me upgrade the suite.

Want to Contribute? Let Us Build Together

The project is released under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License (CC BY-NC-SA 4.0).

This means:

You are free to inspect, learn from, and run the suite for your non-commercial personal projects.
You can fork the repository, improve the rules, and submit Pull Requests.
You may NOT resell or package the skills for commercial monetization or personal financial gain.

If you want to contribute, please reach out or open a Pull Request on GitHub.

And if this project helps solve your frontend headaches, please consider starring the repository on GitHub:

👉 GitHub Repository: https://github.com/rajairfanahmed/irfanlovefront

👉 Live Preview: https://irfanlovefront.vercel.app/

Thank you for reading, and let us build cleaner frontend interfaces together!

I Built a GitHub Achievement Automation Toolkit (CLI + Local Dashboard)

Raja Irfan Ahmed — Sun, 10 May 2026 13:10:46 +0000

Have you ever looked at a GitHub profile and wondered how people get badges like Pull Shark, Galaxy Brain, and Quickdraw?? If so, this post is for you.

I created a toolkit that automates GitHub achievement tasks. You can use it from your terminal or a local browser dashboard. No cloud, no third-party service; your tokens stay on your machine.

What It Does

The toolkit handles the repetitive GitHub actions that trigger achievement milestones

Pair Extraordinaire — co-authored commits on merged PRs (tiers: 1 / 10 / 24 / 48)
Pull Shark — merged pull requests (tiers: 2 / 16 / 128 / 1024)
Galaxy Brain — accepted answers in Discussions (tiers: 2 / 8 / 16 / 32)
Quickdraw — close an issue within 5 minutes (single tier)
YOLO — merge a PR without a code review (single tier)
Starstruck — star milestones on one repository (tiers: 16 / 128 / 512 / 4096)
Public Sponsor — verifies your public sponsorship status

You run it from the CLI or the dashboard. It checks your GitHub REST rate limit first. Then, it uses delays and controls to avoid throttling. It also shows the API reset ETA live.

Two Modes

CLI (npm start) — Terminal menus powered by Ink. Use them for setup, running achievements, checking status, and repo helpers.

Dashboard (npm run web:dev) — A local Next.js app (port 3000) with four tabs

Tab	What it shows
Overview	.env check, token validity, repo access, Discussions status, rate limit
Achievements	Pick a tier, hit Run or Resume — one job is active at a time
History	Paginated local log with links to GitHub
Settings	Env summary (no secrets shown)

The "Stop run" button is cooperative. It waits for the current GitHub request to finish before stopping. No hard kills, no broken states.

How It Works (Two Accounts Required)

You need two GitHub accounts: a main account (where the badges appear) and a helper account (acts as the second party for co-authoring, PR reviews, discussion answers, etc.).

The main account owns a test repository. The team adds the helper as a collaborator with write access. Each account gets its own Personal Access Token (classic).

GITHUB_TOKEN=ghp_your_main_account_token
GITHUB_USERNAME=your-main-username
TARGET_REPO=your-main-username/your-test-repo-name
HELPER_TOKEN=ghp_your_helper_account_token

Both tokens stay in a .env file on your machine; never committed, never sent anywhere.

Quick Setup (4 Steps)

Part A — Main account + test repo

Create a new repo under your main account
Enable Discussions: Repo Settings → General → Features → Discussions (needed for Galaxy Brain)
Note your TARGET_REPO as username/repo-name (not the full URL)

Part B — Helper account + collaborator invite

Log in as your helper account
From your main account: repo Settings → Collaborators → invite the helper with write access
Accept the invite from the helper account

Part C — Generate tokens

Main account token: scope repo
Helper account token: scopes repo + write:discussion

Part D — Install and run

git clone https://github.com/rajairfanahmed/github-achievement-unlocker-badge-automation-toolkit
cd github-achievement-unlocker-badge-automation-toolkit
npm install      # automatically creates .env from .env.example
# fill in your .env values
npm start        # CLI
npm run web:dev  # Dashboard at localhost:3000

A Note on Public Sponsor and Starstruck

We manage these two in distinct ways. The tool does not provide hacks or shortcuts for them.

Public Sponsor — You sponsor on GitHub first (real sponsorship). The tool only verifies your account's public sponsor state afterward.

Starstruck — Requires real stars from real users. The tool can poll your star count and help you track progress, but the stars have to be genuine.

Local State, Not GitHub State

The system saves progress to achievements-data-<username>.json in the project root. Git has ignored this file. It tracks local operation history and tier progress. It does not interact with GitHub's badge system in a direct manner. GitHub awards badges on its end based on the actual actions performed.

Common Mistakes to Avoid

Wrong	Right
`TARGET_REPO=https://github.com/user/repo`	`TARGET_REPO=user/repo`
Same token for both accounts	Separate tokens, separate accounts
Helper invited but invite not accepted	Helper must accept the invite
`GITHUB_TOKEN="ghp_..."` with quotes	`GITHUB_TOKEN=ghp_...` without quotes

Built On

This project is based on and improved from the original work by n0.

This version includes several updates

A local Next.js dashboard
A live rate limit display
Achievement cards with tier protection (finished tiers can't be rerun)
Cooperative stop behavior
History pagination
Post-install bootstrap for .env

Requirements

Node.js 18+
npm
Two GitHub accounts
A test repository owned by the main account

Repo

Everything is open source. Check the setup guide, the .env.example, and the dashboard at:

👉 github.com/rajairfanahmed/github-achievement-unlocker-badge-automation-toolkit

If this saves you time, drop a star; it helps others find it.

👉 Portfolio

🚀I Built a Chrome Extension That Runs Entire Coursera Courses on Autopilot

Raja Irfan Ahmed — Sun, 10 May 2026 12:54:38 +0000

🚀 I Built a Chrome Extension That Automates Entire Coursera Courses

If you have ever taken a course on Coursera, you know the routine.

Play a video. Wait. Click next. Open a reading. Mark it complete. Start a quiz. Repeat

After a while, it doesn’t feel like learning — it feels like doing the same actions again and again.

So I decided to build something for it.

💡 The Idea

I didn’t want a small automation script.

I needed a tool that could manage a whole course from beginning to end. I wanted it to work without needing me to intervene all the time.

Something that could:

1. Navigate through lessons without manual input.
2. Handle videos, readings, and quizzes
3. And continue running without breaking

A one-click autopilot specifically designed for managing courses.

⚙️ What It Does?

Once you start it, the extension takes over.

🎬 Plays videos with automatic playback and speed control.
⏭ Moves to the next lesson when done
📖 Marks readings as complete
🧠 Solves quizzes using AI
🔁 Keeps progressing until the course is finished

You don’t need to keep clicking anything.

🧠 AI Quiz Solving

This was the most interesting part to build.

The extension:

Extracts questions directly from the page
Sends them to AI (Claude or ChatGPT)
Parses the response
Fills answers automatically

You can also use it more safely:

Fill in answers only
Review them yourself before submitting

🧩 The Real Challenge

Automation sounds simple, but real websites are messy.

Things break easily

Videos pause randomly
Buttons change behavior
Quizzes have different formats
Pages don’t always load the same way

The goal wasn’t just automation — it was making it stable.

So a lot of effort went into:

Detecting what is happening on the page
Handling edge cases
Preventing loops and failures
Keeping everything running smoothly

🔄 How I Approached It?

Instead of treating everything differently, I simplified the logic.

Every step in a course is just one of these:

Video
Reading
Quiz

So the system keeps checking:

> “What type of page is this, and what should I do next?”

That made the whole flow predictable and easier to control.

⚡ Why I Built This?

Mainly to remove friction

When something is repetitive, it kills momentum.

This tool doesn’t skip learning. Instead, it cuts out pointless manual tasks.

## 💭 Final Thoughts

This project ended up being more than I expected.

It wasn’t just about automation, but about:

Building something that runs continuously
Handling real-world unpredictability
Integrating AI in a practical way

And the primary goal is to create something genuinely useful.

## 🔗 Project Link

If you want to check it out or try it

👉 Coursera Automation Tool