# PIXEL PERFECT WORKFLOW

## PRIMARY OBJECTIVE

Recreate the reference website section with pixel-perfect visual accuracy.

The goal is NOT to recreate Elementor, WordPress, PHP, or original HTML structure.

The goal IS to recreate the final visual output exactly as shown in the reference screenshot.

---

## SOURCE PRIORITY

Always follow this order:

1. Reference Screenshot (Highest Priority)
2. Live Website Visual Output
3. User Instructions
4. HTML Inspect Data
5. Existing Codebase

If screenshot and HTML conflict, always follow the screenshot.

---

## CORE RULES

### Rule 1

Never redesign.

Do not improve the design.

Do not modernize the design.

Do not optimize spacing because it looks better.

Do not change typography because it feels cleaner.

Match the reference exactly.

---

### Rule 2

HTML is reference only.

Inspect code exists only for:

* Content identification
* Asset extraction
* Text extraction
* Image extraction
* Icon extraction
* Section identification

Do not recreate Elementor structure.

Do not copy Elementor wrappers.

Do not reproduce unnecessary nested divs.

---

### Rule 3

Build clean Next.js components.

Use:

* Next.js App Router
* TypeScript
* Tailwind CSS

Create reusable components only when visual accuracy is preserved.

---

### Rule 4

Never modify unrelated sections.

Only touch files required for the requested section.

Do not refactor the page.

Do not reorganize folders.

Do not rename components unless required.

---

### Rule 5

Before implementation, perform visual analysis.

Return:

* Container width
* Padding
* Margin
* Gap values
* Border radius
* Typography sizes
* Font weights
* Icon sizes
* Image dimensions
* Layout behavior
* Responsive behavior

---

### Rule 6

For screenshot recreation tasks:

1. Audit first
2. Create implementation plan
3. Wait for approval
4. Implement

Never skip the audit phase.

---

## SCREENSHOT COMPARISON WORKFLOW

When a reference screenshot and implementation screenshot are provided:

Step 1:
Compare both screenshots.

Step 2:
List every mismatch.

Step 3:
Categorize mismatches:

* Layout
* Padding
* Margin
* Radius
* Typography
* Icon sizing
* Image sizing
* Alignment
* Responsive issues

Step 4:
Create a fix plan.

Step 5:
Implement only the listed fixes.

---

## SUCCESS CRITERIA

Implementation is complete only when:

* Side-by-side comparison shows no obvious visual differences.
* Layout matches reference.
* Padding matches reference.
* Typography matches reference.
* Border radius matches reference.
* Image positioning matches reference.
* Mobile behavior matches reference.

---

## FAILURE CONDITIONS

Task is considered failed if:

* Design is improved instead of matched.
* Layout is approximated.
* Unrelated components are modified.
* Existing sections are unnecessarily refactored.
* HTML structure is copied without matching visual output.
* Visible differences remain.

---

## REQUIRED RESPONSE FORMAT

For every task:

1. Audit First
2. List Differences
3. Create Implementation Plan
4. Wait For Approval
5. Implement
6. Re-compare
7. Verify Pixel Accuracy

Never skip these steps.