|
1
|
# Common Pitfalls & Solutions |
|
2
|
|
|
3
|
Documented from real-world cloning projects. Each pitfall was encountered during production use and caused user-visible quality issues. |
|
4
|
|
|
5
|
## Pitfall 1: Building from Memory Instead of Source HTML |
|
6
|
|
|
7
|
**Problem**: After extracting the page, the builder works from a mental model or screenshot interpretation, leading to wrong section types, missing elements, and fabricated content. |
|
8
|
|
|
9
|
**Solution**: Before writing ANY component, open `raw.html`and read the exact HTML for that section. Verify: |
|
10
|
|
|
11
|
- Exact heading text (copy-paste, don't retype) |
|
12
|
- Button labels and their HTML classes |
|
13
|
|
|
14
|
- Which elements actually exist (don't add badges/labels that aren't there) |
|
15
|
- Layout structure (flex vs grid vs absolute) |
|
16
|
|
|
17
|
- Number of child elements |
|
18
|
|
|
19
|
## Pitfall 2: Reusing Components for Different Visual Patterns |
|
20
|
|
|
21
|
**Problem**: A`ProductCarousel`component with price badges and "personalize" labels gets reused for a category carousel that should only have images and names. The result looks completely wrong. |
|
22
|
|
|
23
|
**Solution**: Apply the "one component per visual pattern" rule: |
|
24
|
|
|
25
|
- If two sections have different card structures, they need different components |
|
26
|
- Product cards (image + name + price + badge) ≠ Category cards (image + name only) |
|
27
|
|
|
28
|
- Even if the layout is similar (horizontal scroll), the card contents dictate the component |
|
29
|
- When in doubt, create a new component — it's cheaper than debugging a wrong reuse |
|
30
|
|
|
31
|
## Pitfall 3: Wrong Button Styles |
|
32
|
|
|
33
|
**Problem**: Using outlined/bordered buttons when the original has solid/filled buttons (or vice versa). Using wrong colors, wrong border-radius, wrong font-size. |
|
34
|
|
|
35
|
**Solution**: For every button in raw.html: |
|
36
|
|
|
37
|
1. Check the HTML classes — do they include "filled", "primary", "solid", etc.? |
|
38
|
2. Extract computed styles:`background-color`, `border`, `border-radius`, `color`, `font-size`, `padding` |
|
39
|
|
|
40
|
3. Especially check: is `background-color`transparent (outlined) or a solid color (filled)? |
|
41
|
4. Match the exact`border-radius`—`4px`≠`999px`(pill shape) |
|
42
|
|
|
43
|
## Pitfall 4: Wrong Text Alignment |
|
44
|
|
|
45
|
**Problem**: Center-aligning text when the original is left-aligned, or vice versa. |
|
46
|
|
|
47
|
**Solution**: Always extract`text-align`from computed styles. Common patterns: |
|
48
|
|
|
49
|
- Hero headings: often centered |
|
50
|
- Split-layout text blocks: usually left-aligned |
|
51
|
|
|
52
|
- Card titles: varies — check each one |
|
53
|
- Footer columns: usually left-aligned |
|
54
|
|
|
55
|
## Pitfall 5: Missing Mobile Navigation |
|
56
|
|
|
57
|
**Problem**: Clones skip the hamburger menu, making the site unusable on mobile. |
|
58
|
|
|
59
|
**Solution**: At 390px viewport width: |
|
60
|
|
|
61
|
1. Look for hamburger/menu buttons |
|
62
|
2. Click the button to open the drawer |
|
63
|
|
|
64
|
3. Capture: drawer width, slide direction, background color, link list, close mechanism |
|
65
|
4. Screenshot the open state |
|
66
|
|
|
67
|
5. Implement with: slide-in animation, backdrop overlay, body scroll lock, close on backdrop click |
|
68
|
|
|
69
|
## Pitfall 6: Placeholder Images |
|
70
|
|
|
71
|
**Problem**: Builder can't find the right image, so it reuses a hero image or leaves a broken`<img>`tag. |
|
72
|
|
|
73
|
**Solution**: |
|
74
|
|
|
75
|
- Download ALL images in Phase 1, before building starts |
|
76
|
- Map each image to its section in`downloaded-assets.json` |
|
77
|
|
|
78
|
- If an image download fails, immediately try alternative approaches: |
|
79
|
- Add User-Agent header |
|
80
|
|
|
81
|
- Try different CDN size parameters |
|
82
|
- Use `curl`with`-L`flag for redirects |
|
83
|
|
|
84
|
- Screenshot the element as a fallback |
|
85
|
- Never use a placeholder or borrowed image from another section |
|
86
|
|
|
87
|
## Pitfall 7: Fabricated Content |
|
88
|
|
|
89
|
**Problem**: Builder adds text, badges, or decorative elements that don't exist on the original page. |
|
90
|
|
|
91
|
**Solution**: The raw HTML is the source of truth. Before adding any element, verify it exists in`raw.html`. Specifically: |
|
92
|
|
|
93
|
- Don't add "NEW" badges unless they're in the HTML |
|
94
|
- Don't add star ratings unless they're in the HTML |
|
95
|
|
|
96
|
- Don't add prices to category cards that only have names |
|
97
|
- Don't add "Shop Now" buttons that don't exist |
|
98
|
|
|
99
|
- Don't add background patterns or gradients that aren't in the original CSS |
|
100
|
|
|
101
|
## Pitfall 8: Skipped Sections |
|
102
|
|
|
103
|
**Problem**: Builder misses sections because they weren't prominent in the screenshot or seemed redundant. |
|
104
|
|
|
105
|
**Solution**: Use the section inventory checklist. Every single section must be built and checked off. Common sections that get skipped: |
|
106
|
|
|
107
|
- Announcement bars (thin bar at top of page) |
|
108
|
- Brand logo marquees |
|
109
|
|
|
110
|
- "As seen in" sections |
|
111
|
- Newsletter signup sections (often above footer) |
|
112
|
|
|
113
|
- Secondary CTAs between major sections |
|
114
|
|
|
115
|
## Pitfall 9: Wrong Section Order |
|
116
|
|
|
117
|
**Problem**: Sections are arranged in a different order than the original. |
|
118
|
|
|
119
|
**Solution**: The section inventory records the exact top-to-bottom order from the DOM. Assemble `App.tsx`in exactly this order. Don't reorder for "better flow" — match the original exactly. |
|
120
|
|
|
121
|
## Pitfall 10: Font Loading Issues |
|
122
|
|
|
123
|
**Problem**: Fonts flash, don't load, or use the wrong weight/style. |
|
124
|
|
|
125
|
**Solution**: |
|
126
|
|
|
127
|
- Use`<link rel="preconnect">`for font domains |
|
128
|
- Add`font-display: swap`to all`@font-face`declarations |
|
129
|
|
|
130
|
- Load the exact font weights used (don't just load 400 and 700 — check if 500 or 600 is used) |
|
131
|
- For self-hosted fonts, use`@font-face`in`index.css`with local paths to`public/fonts/` |
|
132
|
|
|
133
|
## Pitfall 11: Playwright `networkidle`Timeout |
|
134
|
|
|
135
|
**Problem**:`page.goto(url, wait_until="networkidle")`hangs forever on sites with persistent WebSocket/analytics connections. |
|
136
|
|
|
137
|
**Solution**: Use`wait_until="domcontentloaded"`+`page.wait_for_timeout(5000)`. |
|
138
|
|
|
139
|
## Pitfall 12: CDN Image 403 Errors |
|
140
|
|
|
141
|
**Problem**: CDN images return 403 when fetched without proper headers. |
|
142
|
|
|
143
|
**Solution**: Always download with a real browser User-Agent: |
|
144
|
|
|
145
|
```text |
|
146
|
|
|
147
|
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 |
|
148
|
|
|
149
|
``` |
|
150
|
|
|
151
|
For Shopify CDN, also try appending `?v=timestamp`. |
|
152
|
|
|
153
|
## Pitfall 13: Oversized or Undersized Elements |
|
154
|
|
|
155
|
**Problem**: Buttons, images, or containers are dramatically too large or too small because they inherited wrong CSS classes or had unconstrained widths. |
|
156
|
|
|
157
|
**Solution**: For every visible element, extract and set: |
|
158
|
|
|
159
|
- `width`/`max-width`(especially for buttons — don't let them fill 100%) |
|
160
|
-`height`(especially for images — maintain aspect ratio with`object-fit`) |
|
161
|
|
|
162
|
- `font-size`(don't let headings inherit a 72px size from a parent) |
|
163
|
- Use`max-width`on containers (typically 1200-1440px) to prevent full-viewport stretch |
|
164
|
|
|
165
|
## Pitfall 14: Unused Template Dependencies |
|
166
|
|
|
167
|
**Problem**: Artifact scaffolding includes 40+ shadcn/Radix dependencies that bloat the project. |
|
168
|
|
|
169
|
**Solution**: Replace`index.css`entirely with plain CSS (no Tailwind/shadcn). For`package.json`, the only deps a clone needs are: `react`, `react-dom`, `vite`, `@vitejs/plugin-react`, and Replit vite plugins. Remove everything else. |
|
170
|
|
|
171
|
## Pitfall 15: Sticky Header Not Working |
|
172
|
|
|
173
|
**Problem**: Header doesn't stick or doesn't show scroll-triggered style changes. |
|
174
|
|
|
175
|
**Solution**: |
|
176
|
|
|
177
|
```tsx |
|
178
|
|
|
179
|
const [scrolled, setScrolled] = useState(false); |
|
180
|
|
|
181
|
useEffect(() => { |
|
182
|
|
|
183
|
const handler = () => setScrolled(window.scrollY > 50); |
|
184
|
|
|
185
|
window.addEventListener('scroll', handler, { passive: true }); |
|
186
|
|
|
187
|
return () => window.removeEventListener('scroll', handler); |
|
188
|
|
|
189
|
}, []); |
|
190
|
|
|
191
|
``` |
|
192
|
|
|
193
|
Apply `position: sticky; top: 0; z-index: 50`with CSS transition on`background-color`and`box-shadow`. |
|
194
|
|
|
195
|
## Pitfall 16: Text-Based Logo Instead of Real SVG |
|
196
|
|
|
197
|
**Problem**: Builder uses an SVG `<text>`element or a styled`<span>`to render the brand name, instead of extracting the real logo SVG paths from the source HTML. The result looks obviously fake. |
|
198
|
|
|
199
|
**Solution**: Search`raw.html`for`<svg`elements near logo/brand class names. Most sites embed their logo as inline SVG with`<path>`elements. Extract the complete SVG including`viewBox`, `width`, `height`, and all `<path>` data. Common search patterns: |
|
200
|
|
|
201
|
```python |
|
202
|
|
|
203
|
# Search near 'logo' class references in raw HTML |
|
204
|
|
|
205
|
idx = html.find('logo') |
|
206
|
|
|
207
|
# Then look for <svg nearby |
|
208
|
|
|
209
|
``` |
|
210
|
|
|
211
|
## Pitfall 17: Per-Section Verification Loops Are Too Slow |
|
212
|
|
|
213
|
**Problem**: Building one section, screenshotting it, comparing, fixing, then moving to the next section creates 10+ screenshot cycles that consume enormous time and context. |
|
214
|
|
|
215
|
**Solution**: Build ALL sections from raw HTML in one pass, assemble them in App.tsx, then take ONE full-page screenshot and fix all issues at once. The raw HTML provides enough information to get sections 90% right on the first build. The full-page screenshot catches the remaining 10%. |
|
216
|
|
|
217
|
## Pitfall 18: Shopify CDN `_small`Suffix Not Upscaled |
|
218
|
|
|
219
|
**Problem**: Shopify product/hero images contain`_small.jpg`or`_small.png`in the filename, producing low-resolution downloads. The CDN upscaler only handles`?width=X` query params but not the filename suffix pattern. |
|
220
|
|
|
221
|
**Solution**: Add filename suffix replacement alongside query param upscaling: |
|
222
|
|
|
223
|
```python |
|
224
|
|
|
225
|
if 'cdn.shopify.com' in url and '_small.' in url: |
|
226
|
|
|
227
|
url = url.replace('_small.', '_1200x.') |
|
228
|
|
|
229
|
``` |
|
230
|
|
|
231
|
## Pitfall 19: Keeping Router/Query Boilerplate in Clone |
|
232
|
|
|
233
|
**Problem**: The `createArtifact`scaffold includes wouter Router, React Query provider, toast provider, etc. These are dead code for a single-page static clone and add complexity. |
|
234
|
|
|
235
|
**Solution**: Replace`App.tsx`with a simple component that renders all sections in order. No router, no query client, no toast provider. A clone is one page rendered statically. |
|
236
|
|
|
237
|
## Pitfall 20: Translating or Anglicizing a Non-English Page |
|
238
|
|
|
239
|
**Problem**: The target URL is a localized page (e.g.,`/es-do`for Spanish,`/fr` for French), but the clone is built in English. This happens because: (a) the raw HTML may return English text (localization happens via client-side JS), or (b) the builder unconsciously writes English text instead of copying from the source. |
|
240
|
|
|
241
|
**Solution**: |
|
242
|
|
|
243
|
1. Check the URL for locale indicators (`/es`, `/fr`, `/de`, `/ja`, `/pt`, etc.) |
|
244
|
2. If a locale is present, ALL user-facing text must be in that language — headings, buttons, nav links, footer, CTAs, descriptions |
|
245
|
|
|
246
|
3. If the raw HTML shows English despite a locale URL, translate the UI text to match the URL's language |
|
247
|
4. **Brand terms stay in English**: product names, color names, brand program names (e.g., "ALO Wellness Club", "SUNSHINE") |
|
248
|
|
|
249
|
5. Do NOT assume the page is English just because `raw.html`contains English — many sites load translations via JavaScript |
|
250
|
|
|
251
|
## Pitfall 21: Wrong Announcement Bar Background Color |
|
252
|
|
|
253
|
**Problem**: The announcement/promo bar at the top of the page gets a guessed background color (commonly black or white) instead of the actual color. The real color is often a distinctive brand color (e.g., lime yellow-green`#f2f5a2`). |
|
254
|
|
|
255
|
**Solution**: During Phase 1, extract the computed `background-color` from the banner element AND its child containers: |
|
256
|
|
|
257
|
```python |
|
258
|
|
|
259
|
banner = document.querySelector('[class*="banner"], [class*="announcement"]') |
|
260
|
|
|
261
|
bannerBg = getComputedStyle(banner.querySelector('div, .col-12') or banner).backgroundColor |
|
262
|
|
|
263
|
``` |
|
264
|
|
|
265
|
The background may be on a child element (e.g., `.col-12`inside the banner), not the banner itself. Always check both. |
|
266
|
|
|
267
|
## Pitfall 22: Wrong Logo Position (Centered vs Left-Aligned) |
|
268
|
|
|
269
|
**Problem**: The logo is placed in the center of the header when the original has it left-aligned (or vice versa). This is one of the most visually jarring mistakes because the logo's position defines the entire header layout. |
|
270
|
|
|
271
|
**Solution**: Take a header-only screenshot (top 150px) during Phase 1 extraction and use it as the definitive reference. The three common header layouts are: |
|
272
|
|
|
273
|
- **Logo-left + nav-right**: Logo left-aligned, nav links to the right of logo, icons on far right |
|
274
|
- **Logo-center + nav-split**: Nav links split left/right with logo centered |
|
275
|
|
|
276
|
- **Logo-left + nav-center**: Logo left, nav links centered, icons right |
|
277
|
|
|
278
|
Extract the logo's bounding rect and compare its`left`position to`headerWidth / 3` to classify. |
|
279
|
|
|
280
|
## Pitfall 23: Missing Account/Rewards/Loyalty UI in Header |
|
281
|
|
|
282
|
**Problem**: The header is built with just logo + nav + icons, but the original has additional text elements like "SIGN IN TO GET REWARDS", loyalty program links, or account status text. These are easy to miss because they look like minor text, but they're prominent UI elements. |
|
283
|
|
|
284
|
**Solution**: During Phase 1, search for loyalty/rewards/account elements in the header: |
|
285
|
|
|
286
|
```python |
|
287
|
|
|
288
|
rightElements = header.querySelectorAll('[class*="loyalty"], [class*="rewards"], [class*="account"]') |
|
289
|
|
|
290
|
``` |
|
291
|
|
|
292
|
Extract their text and HTML. Include them in the header component alongside the icon bar. Common patterns: |
|
293
|
|
|
294
|
- Account icon + "Sign in to get rewards" text |
|
295
|
- Points balance display |
|
296
|
|
|
297
|
- "Join Now" or "Login" links next to nav icons |