A Simple Astro UI Relayout Tip with Claude Code
Today, I want to share a simple but surprisingly effective tip for relayouting my blog UI built with Astro. This is the current state of the site, using Astro’s default theme.
Rather than jumping straight into CSS tweaks, I approached this as a conversation, with Claude Code, almost as if I were talking to a professional product or web designer. My prompt was intentionally simple: I described what I felt was off, what I wanted to improve, and the overall vibe I was aiming for.
could we have another color for
- button -> I prefer gradient color
- Title of article -> I think it should be a different color than black, because they look similar due to text size and all black color
- Background and main text could keep the current color (mainly white and black)
in general, I want this Blog has the feeling of the future (with AI as main theme), and a bit of Gradient & galaxy, but not much, and still keep reader to focus on maincontent
(text)
Please consider to make the changesClaude Code didn’t rush to make changes immediately. Instead, it paused and thought with me. It used a brainstorming capability from a plugin called superpowers:brainstorming. I’ll introduce this plugin in more detail in another article, but it’s absolutely worth checking out; it genuinely feels like a superpower: https://github.com/obra/superpowers.
See the answer
I'll help you redesign the color scheme to give your blog a futuristic, AI-themed feel with gradients and galaxy elements while keeping content readable. Let me first explore your
vision with brainstorming.
⏺ Skill(superpowers:brainstorming)
⎿ Successfully loaded skill
⏺ I'll help you create a futuristic AI-themed color scheme with gradients and galaxy elements while keeping the content readable. Let me first understand your current setup and then
explore the design with you.
⏺ Read 1 file (ctrl+o to expand)
⏺ Good! I can see the current color scheme. Now letme check the button styles:
⏺ Searched for1 pattern, read 1 file (ctrl+o to expand)
⏺ Perfect! Now I understand the current setup. Letme ask you some questions to refine the design:
Color Palette Direction
For the AI/futuristic theme with galaxy elements, which color direction appeals to you most?
Option A: Cool Cyberpunk (Recommended)
- Deep blues (#0a0e27) transitioning to purples (#6366f1, #8b5cf6)
- Electric cyan accents (#06b6d4)
- Creates that "neural network" feeling
- Example: Titles in gradient from blue → purple, buttons with cyan → blue gradient
Option B: Warm Neural
- Deep indigo/violet base (#1e1b4b) with warm magenta (#d946ef)
- Orange energy accents (#f97316)
- More vibrant, energetic feel
- Example: Titles in purple → magenta, buttons with orange → pink gradient
Option C: Classic Tech
- Dark navy (#0f172a) with bright teal (#14b8a6)
- Hints of holographic rainbow (subtle iridescent effects)
- Clean, professional but futuristic
- Example: Titles in teal, buttons with teal → emerald gradient
Which direction feels right for your AI engineering blog?Claude responded with several design directions. After reviewing them, I realized something about myself: I love cyberpunk aesthetics. Naturally, I chose Option A.
From there, Claude and I continued brainstorming, this time specifically around color palettes.
Excellent choice! Cool Cyberpunk will give your blog that perfect AI/neural network aesthetic. Now letme refine the gradient intensity:
Gradient Boldness
For the gradient effects (buttons, titles, possible background elements), which intensity feels right?
Option A: Subtle & Sophisticated (Recommended)
- Gradients have gentle transitions (2-3 color stops)
- Buttons: Light blue → purple gradient with20% opacity overlay
- Titles: Deep blue textwith subtle purple shimmer onkey words
- Galaxy effect: Very faint star field in header background only
- Maintains clean, professional feel while adding futuristic touch
Option B: Bold & Vibrant
- Strong gradient transitions with saturated colors
- Buttons: Full cyan → electric blue → purple gradient
- Titles: Animated gradient that shifts slightly
- Galaxy effect: Visible nebula clouds, animated particles
- More eye-catching, gaming/tech startup vibe
Option C: Minimal Accent
- Gradients only on hover states
- Buttons: Solid until hover, then reveal gradient
- Titles: Solid color with gradient underline
- Galaxy effect: Just subtle glow effects, no actual stars
- Preserves minimalist aesthetic with tech hints
Which intensity level matches your vision? Keep in mind you want readers to focus on content.Honestly, I liked all of the proposed options. So instead of forcing a single decision upfront, I decided to branch them out.
Here’s where things get interesting.
This isn’t like ChatGPT’s branching, where you can fork conversations while keeping their internal state. With Claude Code, I had to be more intentional. So I used a small but effective trick: I asked Claude to generate documentation for all suggested styles, as well as for the chosen one.
- The unselected options were saved as
.mdguideline documents for future exploration, each ready to live on its own Git branch.
- The chosen style became a reusable design guideline, not just for this blog, but for future apps as well. I want my products to feel connected: the same visual language, the same vibe, the same persona, almost like an ecosystem.
Ok, let go with Option A: Subtle & Sophisticated (Recommended)
Before start, let document this new UI style in a .md doc, then later I can apply this style to my other app; and one more .md doc for all options that you suggested me (3 options for Color Palette Direction and 3 options follow-up for for Gradient Boldness), then later, if I want to restyle this app, I have a good reference and full guideline to startClaude Code helped write these documents and even committed them automatically.
Perfect idea! Let me create two documentation files:
1. The chosen design spec for implementation
2. A design options reference guide for future restyling
⏺ Bash(mkdir -p docs/plans docs/design-system)
⎿ (No content)
⏺ Write(docs/design-system/color-palette-options.md)
⎿ Wrote 159 lines to docs/design-system/color-palette-options.md
1 # AI Blog Design System - Color Palette Options
2
3 This document catalogs all color palette directions explored for the AI engineering blog, providing a reference for future restyling decisions.
4
5 ## Overview
6
7 The blog requires a futuristic AI theme with:
8 - Gradient effects (especially for buttons)
9 - Colored article titles (not pure black)
10 - Galaxy/space elements (subtle)
… +149 lines (ctrl+o to expand)
⏺ Now let me create the implementation design document:
⏺ Write(docs/plans/2026-02-04-ai-blog-color-scheme-design.md)
⎿ Wrote 322 lines to docs/plans/2026-02-04-ai-blog-color-scheme-design.md
1 # AI Blog Color Scheme Design - Cool Cyberpunk
2
3 **Date:** 2026-02-04
4 **Theme:** Cool Cyberpunk with Subtle & Sophisticated gradients
5 **Goal:** Futuristic AI aesthetic while maintaining content readability
6
7 ---
8
9 ## Design Principles
… +312 lines (ctrl+o to expand)
⏺ Perfect! I've created both documentation files:
1. docs/design-system/color-palette-options.md - Complete reference guide with all 6 options (3 color palettes × 2 intensity levels) for future restyling
2. docs/plans/2026-02-04-ai-blog-color-scheme-design.md - Detailed implementation spec for the chosen Cool Cyberpunk + Subtle & Sophisticated design
Let me commit these to git:
⏺ Bash(git add docs/ && git commit -m "Docs: add Cool Cyberpunk color scheme design documentation…)
⎿ [ft/rework-ui/color-option-1-subtle-sophisticated 387ca65] Docs: add Cool Cyberpunk color scheme design documentation
2 files changed, 479 insertions(+)
create mode 100644 docs/design-system/color-palette-options.md
create mode 100644 docs/plans/2026-02-04-ai-blog-color-scheme-design.md
⏺ Excellent! The design is documented and committed. Now let's implement the Cool Cyberpunk color scheme. I'll update the styles following the design spec.After that, it updated the style files exactly as expected.
⏺Excellent!Thedesignisdocumentedandcommitted.Nowlet'simplementtheCoolCyberpunkcolorscheme.I'llupdatethestylesfollowingthedesignspec.
Let me start by updating the global CSS with the new color palette:
⏺Update(src/styles/global.css)
⎿Added27lines,removed4lines
5*/
6
7:root {
8 - --accent:#2337ff;
9 - --accent-dark:#000d8a;
8+/*Legacyaccentcolors(keepingforcompatibility)*/
9+--accent:#06b6d4;
10+--accent-dark:#0891b2;
11+
12+/*Basecolors(keepingcurrentforbodytext)*/
13 --black:15, 18, 25;
14 --gray:96, 115, 159;
15 --gray-light:229, 233, 240;
16 --gray-dark:34, 41, 57;
17 --gray-gradient:rgba(var(--gray-light), 50%), #fff;
18+
19+/*CoolCyberpunkPalette*/
20+--cyber-blue:#3b82f6;
21+--cyber-purple:#8b5cf6;
22+--cyber-cyan:#06b6d4;
23+--cyber-blue-dark:#1e40af;
24+--cyber-purple-dark:#7c3aed;
25+
26+/*Titlecolors*/
27+--title-primary:#1e40af;
28+
29+/*Gradients*/
30+--gradient-button:linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
31+--gradient-button-hover:linear-gradient(135deg, #0891b2 0%, #2563eb 50%, #7c3aed 100%);
32+--gradient-title:linear-gradient(135deg, #1e40af 0%, #6366f1 100%);
33+--gradient-link:linear-gradient(90deg, #06b6d4 0%, #3b82f6 100%);
34+
35+/*Shadowswithcyan/bluetint*/
36 --box-shadow:
16-02px6pxrgba(var(--gray), 25%), 08px24pxrgba(var(--gray), 33%), 016px32px
17-rgba(var(--gray), 33%);
37+02px8pxrgba(59, 130, 246, 0.15),
38+04px14pxrgba(59, 130, 246, 0.1);
39+--box-shadow-hover:
40+06px20pxrgba(59, 130, 246, 0.4);
41 }
42@font-face {
43 font-family:"Atkinson";
⏺Nowlet'sadd the subtle galaxy background effect:
⏺Update(src/styles/global.css)
⎿Added17lines, removed2lines
58 margin:0;
59 padding:0;
60 text-align:left;
61 - background:linear-gradient(var(--gray-gradient))no-repeat;
62 - background-size:100%600px;
61+background:#ffffff;
62+position:relative;
63 word-wrap:break-word;
64 overflow-wrap:break-word;
65 color:rgb(var(--gray-dark));
66 font-size:20px;
67 line-height:1.7;
68 }
69+
70+/*Subtlegalaxygradientinheaderarea*/
71+body::before {
72+content:'';
73+position:fixed;
74+top:0;
75+left:0;
76+right:0;
77+height:600px;
78+background:radial-gradient(ellipseattopcenter, rgba(59, 130, 246, 0.08)0%, transparent60%),
79+radial-gradient(circleat20%30%, rgba(139, 92, 246, 0.05)0%, transparent40%),
80+radial-gradient(circleat80%20%, rgba(6, 182, 212, 0.05)0%, transparent40%);
81+pointer-events:none;
82+z-index:-1;
83+}
84main {
85 width:720px;
86 max-width:calc(100%-2em);
⏺Now update heading colors:
⏺Update(src/styles/global.css)
⎿Added7lines
99 }
100h1 {
101 font-size:3.052em;
102+/*Gradienteffectformaintitles*/
103+background:var(--gradient-title);
104+-webkit-background-clip:text;
105+-webkit-text-fill-color:transparent;
106+background-clip:text;
107+display:inline-block;
108 }
109h2 {
110 font-size:2.441em;
111+color:var(--title-primary);
112 }
113h3 {
114 font-size:1.953em;
⏺Update link styles with cyan and gradient underline:
⏺Update(src/styles/global.css)
⎿Added7lines, removed2lines
124 font-weight:700;
125 }
126a {
127 - color:var(--accent);
127+color:var(--cyber-cyan);
128+text-decoration:none;
129+position:relative;
130+transition:color0.2sease;
131+border-bottom:1pxsolidtransparent;
132 }
133a:hover {
130 - color:var(--accent);
134+color:var(--accent-dark);
135+border-bottom:1pxsolidvar(--cyber-cyan);
136 }
137p {
138 margin-bottom:1em;
⏺Nowlet'supdate the button styles on the homepage:
⏺Update(src/pages/index.astro)
⎿Added14lines, removed7lines
51 }
52.cta {
53 display:inline-block;
54 - padding:0.6rem0.9rem;
54+padding:0.6rem1.2rem;
55 border-radius:12px;
56 - border:1pxsolidrgba(var(--gray), 0.35);
56+background:var(--gradient-button);
57+background-size:200%100%;
58+background-position:0%0%;
59+border:1pxsolidrgba(59, 130, 246, 0.3);
60+color:#ffffff;
61 text-decoration:none;
58 - color:rgb(var(--black));
59 - transition:0.2sease;
62+font-weight:500;
63+transition:all0.3sease;
64+box-shadow:04px14pxrgba(59, 130, 246, 0.2);
65 }
66.cta:hover {
62 - border-color:rgb(var(--accent));
63 - color:rgb(var(--accent));
64 - box-shadow:var(--box-shadow);
67+background-position:100%0%;
68+box-shadow:var(--box-shadow-hover);
69+transform:translateY(-2px);
70+border-color:rgba(59, 130, 246, 0.5);
71+color:#ffffff;
72 }
73
74.section {
⏺Let me also update buttons on the about page:
⏺Read1file(ctrl+otoexpand)
⏺Update(src/pages/about.astro)
⎿Added14lines, removed7lines
71 }
72.cta {
73 display:inline-block;
74 - padding:0.6rem0.9rem;
74+padding:0.6rem1.2rem;
75 border-radius:12px;
76 - border:1pxsolidrgba(var(--gray), 0.35);
76+background:var(--gradient-button);
77+background-size:200%100%;
78+background-position:0%0%;
79+border:1pxsolidrgba(59, 130, 246, 0.3);
80+color:#ffffff;
81 text-decoration:none;
78 - color:rgb(var(--black));
79 - transition:0.2sease;
82+font-weight:500;
83+transition:all0.3sease;
84+box-shadow:04px14pxrgba(59, 130, 246, 0.2);
85 }
86.cta:hover {
82 - border-color:rgb(var(--accent));
83 - color:rgb(var(--accent));
84 - box-shadow:var(--box-shadow);
87+background-position:100%0%;
88+box-shadow:var(--box-shadow-hover);
89+transform:translateY(-2px);
90+border-color:rgba(59, 130, 246, 0.5);
91+color:#ffffff;
92 }
93
94@media(max-width:720px) {
⏺Let me verify the changes work:
⏺Bash(npmrunbuild2>&1|grep-E"(Complete|error|Error)"|tail-5)
⎿Thecollection"blog"doesnotexistorisempty.Pleasecheckyourcontentconfigfileforerrors.
11:08:52└─/rss.xmlThecollection"blog"doesnotexistorisempty.Pleasecheckyourcontentconfigfileforerrors.
11:08:52✓Completedin53ms.
…+2lines(ctrl+otoexpand)
⏺Excellent!Build successful. Let me commit the styling changes:
⏺Bash(gitadd-A&&gitcommit-m"Feat: implement Cool Cyberpunk color scheme…)
⎿ [ft/rework-ui/color-option-1-subtle-sophisticated 2eb3a56] Feat: implement Cool Cyberpunk color scheme
3 files changed, 86 insertions(+), 22 deletions(-)
⏺ Perfect! I've successfully implemented the Cool Cyberpunk color scheme. Let me show you what's been changed:
⏺ Bash(git log --oneline -3)
⎿ 2eb3a56 Feat: implement Cool Cyberpunk color scheme
387ca65 Docs: add Cool Cyberpunk color scheme design documentation
e7e9f3d Ft: add new post Prompting is Not Magic
⏺ Bash(git branch --show-current)
⎿ ft/rework-ui/color-option-1-subtle-sophisticated
⏺ Great! The implementation is complete and committed to the feature branch ft/rework-ui/color-option-1-subtle-sophisticated. Here's what I've implemented:
Changes Made
...If you’re not into verbose logs, here’s the result of that step: the UI already looked significantly better.
Changes Made
✅ Color Palette
- Gradient buttons: Cyan → Blue → Purple gradient with subtle animation on hover
- H1 titles: Deep blue → Purple gradient (neural network feel)
- H2 headings: Solid deep blue (not black anymore)
- Links: Cyan color with darker hover state and underline effect
- Background: Subtle galaxy gradient in header area (very faint blue/purple radials)
- Shadows: Blue-tinted instead of gray
✅ Documentation
- docs/design-system/color-palette-options.md - All 6 design options for future reference
- docs/plans/2026-02-04-ai-blog-color-scheme-design.md - Implementation spec with CSS code
Files Modified
- src/styles/global.css - Color variables, body background, headings, links
- src/pages/index.astro - Button gradient styles
- src/pages/about.astro - Button gradient styles
You can view the changes by visiting http://localhost:4321 in your browser. The gradient buttons should now have a futuristic cyan-to-purple gradient, and the article titles should have
a subtle blue-purple gradient effect.
Would you like to:
1. See it live - I can help you restart the dev server if needed
2. Make adjustments - Tweak colors, gradients, or effects
3. Merge to master - If you're happy with the design
4. Add more effects - Like the optional subtle star particles mentioned in the design doc
What would you like to do next?It looks really nice now.
There was a small issue at first; pages with heading images threw an error.
But after restarting the dev server, the problem resolved itself automatically.
I reviewed everything again and felt the title color could still be improved.
nice, after review, I think I want the Page title or Post title has this Magenta
(attached image)
Note, only title needs change color, other keep as existing. please do
Magenta color I want
That was just a tiny adjustment: one more prompt, one small change.
Perfect!Icanseetherose/magentacolorfromyourimage.It'sabeautifuldustyrose-magentashade(approximately#c9556d to #d1566d).
Let me update only the h1 titles to use this magenta color while keeping everything else as is:
⏺Update(src/styles/global.css)
⎿Added3lines
26/*Titlecolors*/
27 --title-primary:#1e40af;
28
29+/*Titlemagentacolor*/
30+--magenta-title:#c9556d;
31+
32/*Gradients*/
33 --gradient-button:linear-gradient(135deg,#06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
34 --gradient-button-hover:linear-gradient(135deg,#0891b2 0%, #2563eb 50%, #7c3aed 100%);
⏺Update(src/styles/global.css)
⎿Added2lines,removed5lines
102}
103h1 {
104 font-size:3.052em;
105-/*Gradienteffectformaintitles*/
106 - background:var(--gradient-title);
107 - -webkit-background-clip:text;
108 - -webkit-text-fill-color:transparent;
109 - background-clip:text;
105+/*Magentacolorformaintitles*/
106+color:var(--magenta-title);
107 display:inline-block;
108 }
109h2 {
⏺Perfect!I'veupdatedtheh1titlestouseyourmagentacolor(#c9556d).Let me verify it builds correctly:
⏺Bash(npmrunbuild2>&1|grep-E"(Complete|error)"|tail-3)
⎿11:27:00✓Completedin35ms.
11:27:00✓Completedin1ms.
11:27:00 [build] Complete!
⏺Excellent!Build successful. Now let me commit this change:
⏺Bash(gitaddsrc/styles/global.css&&gitcommit-m"Style: change h1 titles to rose-magenta color…)
⎿ [ft/rework-ui/color-option-1-subtle-sophisticated a5431cd] Style: change h1 titles to rose-magenta color
1 file changed, 5 insertions(+), 5 deletions(-)
⏺ Bash(git log --oneline -3)
⎿ a5431cd Style: change h1 titles to rose-magenta color
2eb3a56 Feat: implement Cool Cyberpunk color scheme
387ca65 Docs: add Cool Cyberpunk color scheme design documentation
⏺ Done! ✅ I've changed the h1 titles (page titles and post titles) to your rose-magenta color (#c9556d).
What Changed
- H1 titles: Now using solid magenta instead of the blue-purple gradient
- Everything else: Unchanged (buttons still have cyan→blue→purple gradient, h2 headings still deep blue, links still cyan)And then… it was perfect.
That’s it for today’s tip. I hope this gives you a glimpse into how powerful - and enjoyable - this kind of “vibe coding” with Claude Code can be.
If you enjoy reading this blog, you can find it here: https://aiblog.mikel-ltd.com/ It’s completely FREE. Thanks for reading.