If you’re working locally with VS Code, you have access to AI coding assistants that can help you customize your site. These tools can translate what you want (“make the spacing bigger”) into the actual code changes needed. You don’t need to know CSS or HTML—you just need to describe what you want to change.
AI coding assistants like GitHub Copilot, Cursor, or Claude can:
Think of them as a knowledgeable colleague looking over your shoulder, ready to help when you need it.
Open your project in VS Code (see Working Locally guide)
The key is being specific about what you want to change and where. Here are effective ways to communicate with AI assistants:
Open the CSS file you want to modify (like assets/css/base.css) and write a comment describing what you want:
/* Make the spacing between list items larger */
The AI will suggest code to add below your comment. Press Tab to accept the suggestion.
Most AI assistants have a chat panel. You can ask questions like:
Select existing code and ask the AI to modify it:
Here are actual requests you can make and what happens:
What to say:
“Make the spacing between list items larger”
What the AI does:
Opens assets/css/typography.css and modifies:
.container li {
margin: 0 0 var(--spacing-md) 0; /* AI changes var(--spacing-xs) to var(--spacing-md) */
}
What to say:
“Make all h1 headings green”
What the AI does:
In assets/css/typography.css:
h1 {
color: #228B22; /* AI adds or modifies the color property */
}
What to say:
“Make the base font size slightly larger”
What the AI does:
In assets/css/typography.css:
html, body {
font-size: 1.1rem; /* AI changes from 1.05rem to 1.1rem */
}
What to say:
“What does this code do?” (after selecting some CSS)
What the AI explains:
“This CSS rule sets the base font size to 1.05rem (slightly larger than the browser default of 16px) and uses the Source Sans 3 font family for all body text. The line-height of 1.6 creates comfortable spacing between lines.”
Instead of: “Make text bigger” Try: “Make paragraph text bigger in the main content area”
Instead of: “Change the color” Try: “Change the navigation bar background color to dark blue”
If you see something you like on your site:
Don’t just accept code blindly. Ask:
Understanding helps you make better decisions and learn as you go.
After the AI suggests changes:
Xanthan uses CSS variables (like var(--spacing-md)) for consistent design. When asking for changes, you can:
Reference existing variables:
“Use the accent-primary color for all buttons”
Ask about the system:
“What color variables are available?” “What spacing sizes can I use?”
Request system-aware changes:
“Increase spacing but stay consistent with the design system”
The AI understands Xanthan’s structure and will suggest changes that fit the existing patterns.
Once you’re comfortable, try these common requests:
If the AI’s suggestion doesn’t do what you want:
Be more specific: “That’s not quite right. I want the spacing between paragraphs, not inside them”
Describe what’s wrong: “The color is too dark, can you make it lighter?”
Ask for alternatives: “What are other ways to achieve this effect?”
Request an explanation: “Why isn’t this working the way I expected?”
Undo and try again: In VS Code, press Ctrl+Z (or Cmd+Z on Mac) to undo changes
Start small. Make one simple change, like adjusting a color or spacing value. See it work. Make another change. Each small success builds your understanding and confidence.
You don’t need to become a CSS expert. You just need to know what you want your site to look like, and the AI can help you get there. The code is just a tool—your vision and judgment about what looks good are what matter.
Even when using AI assistance, you’re learning:
These skills transfer. What feels unfamiliar now will become routine.
When using AI assistants:
Ready to try it?
assets/css/base.css)The tools are here to help you. You’re not cheating by using them—you’re working efficiently and learning along the way.