Modernize without chaos
Refresh current websites
How to redesign, rebrand, and restructure an existing site with SuperGrok Heavy — audit → tokens → surgical rewrites → deploy — without losing SEO or breaking forms.
Pick a refresh mode before you prompt
| Mode | When | Heavy instruction |
|---|---|---|
| Polish | Structure OK, looks dated | Keep IA + copy intent; restyle tokens, type, spacing only |
| Restructure | Confusing nav / weak funnel | New IA map first; migrate URLs with redirects |
| Rebrand | New logo/colors | Token pass + component inventory; freeze routes |
| Rebuild | Legacy WP/HTML mess | Extract content → rebuild static/React → Hostinger |
| Performance | Looks fine, feels slow | Images, fonts, JS budget, cache headers only |
Never start with “make it modern”
Vague = purple gradients and random radii. Always lock mode, brand constraints, and “do not change URLs/forms” unless you intend to.
Step 1 — Audit prompt (paste with screenshots or HTML dump)
Site audit
/design Audit this existing website for a visual + conversion refresh.
I will provide: [screenshots OR repo path OR HTML export]
Output ONLY:
1. What works (keep)
2. What looks dated / AI-slop risk
3. Hierarchy problems (nav, CTAs, type scale)
4. Mobile failures
5. Token proposal (≤5 colors, ≤2 fonts, radii scale)
6. Ordered refresh plan in 5 PRs / phases
7. Risks to SEO and forms
Do NOT write application code yet.Step 2 — Page inventory (force Heavy to catalog)
Inventory before rewrites
Create a page inventory as a markdown table:
| Path | Purpose | Primary CTA | Traffic priority | Refresh action |
|------|---------|-------------|------------------|----------------|
| / | Home | Demo | High | Restructure hero |
| /pricing | Pricing | Buy | High | Clarify tiers |
| /blog/* | SEO | Newsletter | Medium | Template only |
| /contact | Form | Submit | High | Keep endpoint |
Rules:
- Do not invent pages we don't have
- Flag orphan pages
- Flag 3 highest-ROI pages to refresh firstStep 3 — Surgical rewrite prompts
Homepage only
Refresh ONLY the homepage.
Constraints:
- Keep all existing routes and form action URLs
- Keep current brand accent hex: #2DD4BF
- Keep logo SVG path unchanged
- Rewrite hero + social proof + features density
- Improve mobile spacing; no horizontal overflow at 390px
- Do not touch pricing page or blog templates
Deliver: diff summary of files changed + before/after notes per section.CLI plan for multi-page refresh
/plan Refresh marketing site in 3 phases:
Phase 1: tokens + shell (nav/footer)
Phase 2: home + pricing
Phase 3: inner pages + blog template
Constraints: no URL changes; preserve form endpoints; WordPress stays unless we agree to migrate.
Wait for approval between phases.CSS-layer refresh (fastest win on static / WP)
When you cannot rewrite components yet, layer a design system over legacy markup:
refresh-layer.css
:root {
--bg: #0a0b0d;
--fg: #f2f3f5;
--muted: #a0a8b4;
--accent: #2dd4bf;
--border: #2a303a;
--font: "IBM Plex Sans", system-ui, sans-serif;
--display: "Syne", system-ui, sans-serif;
--space: 1rem;
--radius: 10px;
}
body {
background: var(--bg);
color: var(--fg);
font-family: var(--font);
line-height: 1.6;
}
h1, h2, h3 {
font-family: var(--display);
letter-spacing: -0.02em;
line-height: 1.15;
}
/* Map common legacy classes without rewriting HTML */
.site-header { border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); }
.btn-primary {
background: var(--accent);
color: #042f2e;
border: 0;
border-radius: var(--radius);
padding: 0.75rem 1.25rem;
font-weight: 600;
}
.card {
background: #12151a;
border: 1px solid var(--border);
border-radius: calc(var(--radius) + 6px);
padding: 1.25rem;
}
/* Kill common dated patterns */
.mega-gradient-hero { background: var(--bg) !important; }
.shadow-heavy { box-shadow: none !important; }
@media (max-width: 640px) {
.container { padding-inline: 1rem; }
.row { flex-direction: column !important; }
}Hostinger: enqueue the layer (WordPress child theme)
<?php
// functions.php (child theme)
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style(
'refresh-layer',
get_stylesheet_directory_uri() . '/refresh-layer.css',
[],
'1.0.0'
);
});Content rewrite without redesigning layout
Copy-only pass
Rewrite marketing copy only. Do not change layout, classes, or structure.
Audience: [who]
Offer: [what]
Voice: specific, concrete, no hype adjectives (ban: revolutionary, seamless, cutting-edge)
For each section output:
- New headline (≤8 words)
- New subhead (≤20 words)
- 3 bullets with real outcomes
- CTA label
Map replacements as: old → new so I can paste into CMS.Preserve SEO while refreshing
SEO guardrails for Heavy
While refreshing:
1. Keep title/H1 primary keyword intent unless we redefine positioning
2. Do not delete indexable pages without 301 plan
3. Keep image alt text; improve if empty
4. Preserve canonical URLs
5. Generate a redirects.csv for any path changes:
from,to,type
/old-services,/services,301
/about-us,/about,301
6. After refresh, list pages that need Search Console re-inspectionHostinger / nginx-style redirects example
# .htaccess (Apache / many Hostinger plans)
RewriteEngine On
RewriteRule ^old-services/?$ /services [R=301,L]
RewriteRule ^about-us/?$ /about [R=301,L]Safe rollout sequence
- Backup (Hostinger on-demand)
- Staging subdomain refresh
- Forms + analytics smoke test
- Mobile 390px visual pass
- Swap DNS / publish
- CDN purge
- Search Console URL inspection for top 5 pages
Post-deploy verification prompt
Verify the refreshed site:
- Homepage hero CTA works
- Contact form submits
- No console errors on / /pricing /contact
- No horizontal overflow at 390px
- 301s for old paths return Location headers
Report a pass/fail table.Tip
Full rebuilds: use Startup websites patterns, then Hostinger deploy. Prompt craft: Get what you want.