Customizing your site design with Claude
Tweak tokens, components, and layouts without leaving the conversation — or the repo.
The default look — dark surfaces, lime accent, Syne headings — is a starting point. Everything is plain Astro, Tailwind, and CSS variables, so Claude can restyle the site the same way it edits a blog post.
Design tokens first
Open src/styles/global.css. The @theme block defines:
--color-accent— primary highlight (default#d4ff5c)--color-surface/--color-surface-muted— backgrounds--font-display— heading font (Syne)
Change a token once, and buttons, gradients, and cards follow. Try:
Change the accent color to electric blue and update the hero gradients to match.
Components, not copy-paste chaos
Reusable pieces live in src/components/: Button, PostCard, Reveal, Header, and more. Homepage sections are composed in src/pages/index.astro.
Prompts that work well:
- Make the header sticky with a stronger blur on scroll.
- Add a testimonial section below the capabilities block.
- Restyle blog cards with a larger image area.
Claude reads surrounding code and matches existing patterns — same class naming, same Reveal wrappers.
Animations and polish
This template ships with scroll reveals and a WebGL hero background (React Bits Strands). You can dial intensity via props or ask for simpler CSS-only motion if you prefer lighter pages.
Ship with confidence
After design changes, Claude runs npm run check and npm run build. Broken layouts or type errors get fixed before commit. Your content files stay untouched unless you ask otherwise.