Using AI Assistance for Customization

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. To start with AI assistance, we recommend using it to change styling on the site, such as typography and colors. The examples we created will show you how an AI assistant can edit CSS for you. CSS stands for Cascading Style Sheets and the CSS files control the visual design of all the pages on your website. As you get comfortable making changes to Xanthan’s CSS, you can then experiment with its overall design system. All that said, when you use AI assistance, you don’t need to know CSS or HTML—you just need to describe what you want to change.

Building Confidence

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.

What AI Assistants Can Do

AI coding assistants like GitHub Copilot, Cursor, or Claude can:

• Modify colors, fonts, and spacing based on plain language requests
• Explain what existing code does
• Suggest fixes when something isn’t working
• Help you understand error messages
• Generate code snippets for new features

Think of them as a knowledgeable colleague looking over your shoulder, ready to help when you need it.

What You Will Learn

Even when using AI assistance, you’re learning:

• How CSS files are organized
• Which files control which aspects of your site
• How to describe visual changes clearly
• How to test and iterate on changes
• The relationship between code and visual output

These skills transfer. What feels unfamiliar now will become routine.

Before You Begin

As you start working with AI to change the styling on your website, keep in mind the following:

• Starting with very small changes will give you important practice
• Making changes in your CSS files affects all the pages on the website
• Previewing locally allows for a faster process
• To revert to an earlier version of a file after multiple Commits, you will need to copy-paste from the record of that earlier Commit in your GitHub repository on the web

Privacy Note

When using AI assistants:

• Your code is sent to the AI service for processing
• Don’t include sensitive information (passwords, API keys) in files where you’re using AI
• Review suggested changes before accepting them
• Most educational licenses and free tiers are appropriate for personal/academic sites

Next Steps

Ready to try it? Here is a short version of the instructions.

1. Set up your local development environment (Working Locally)
2. Install an AI assistant in VS Code
3. Open a CSS file (like assets/css/base.css)
4. Try asking for one simple change
5. Watch it work

To get a further breakdown of these steps and additional tips, go to our page on AI Tips

The tools are here to help you. You’re not cheating by using them—you’re working efficiently and learning along the way.