198 lines
3.1 KiB
Markdown
198 lines
3.1 KiB
Markdown
# 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.
|