3.1 KiB
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:
- Reference Screenshot (Highest Priority)
- Live Website Visual Output
- User Instructions
- HTML Inspect Data
- 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:
- Audit first
- Create implementation plan
- Wait for approval
- 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:
- Audit First
- List Differences
- Create Implementation Plan
- Wait For Approval
- Implement
- Re-compare
- Verify Pixel Accuracy
Never skip these steps.