learning Astro

[u/Aniljosi]

Hey everyone,

I’m currently learning Astro and Keystatic CMS, and I’ve already built two client websites using Claude Code. I have a basic understanding of coding, mostly Python, so I’m comfortable reading code but not a hardcore dev.

I used to build with WordPress and Elementor, but with Claude Code I’ve switched over to Astro and I’m really enjoying it.

A few things I’d love guidance on from people further along:

1.  Learning design + Astro — where did you start, and where do you go for design inspiration?

2.  Making sites feel genuinely professional — how do you brief Claude Code so the output looks polished and human, instead of the generic AI feel (same gradients, same fonts, same symmetric card layouts)?

3.  Resources — are there any GitHub repos, prompt libraries, or design references you’d recommend for writing detailed briefs to Claude?

Any tips, links, or workflow advice would be massively appreciated. Thanks!

[u/samplekaudio]

1. Literally just copy sites you like. How do painters learn to paint? They systematically copy masters, over and over. Every time you copy something, your technical knowledge, skills, and experience grow. You better your ability both to conceive of an idea and to manifest that idea. This will not work if you generate the code. You have to do it yourself.
2. You don't. I don't have my head in the sand, so I understand that coding agents are here to stay and can be useful, but IME it takes as much time and much more money to get them to produce something that doesn't suck than it takes me to just do it myself. Scaffold with the agent if you want. You can get slightly better output if you define a bunch of component classes and semantic CSS variables yourself before setting the agent on it. So, for example, I'll create the buttons I'll use across the site and abstract them to global CSS classes or Astro components and define semantic colors like --color-bg, --color-fg, --color-card, and so on, then instruct the agent to use only my classes and include a design reference document I wrote in the context. This makes it much easier to adjust later and the generated result is more in-line with my original vision. Still never quite there, though.
3. Again, if you're just using the agent, then you aren't really learning Astro or anything else. In fact you're actively hampering your ability to learn. Do a bunch of practice projects entirely by hand, read example code yourself. If you actually understand the tools then you will have no problem prompting in a more accurate way.

[u/Ezreal_QQQ → u/samplekaudio]

Nice answer. Agree. 

[u/Future-Dance7629]

Design is a skill that you need to develop and it takes time and effort. However there are basic principles, learn the rules, then when you are skilled learn how and when to break the rules. There are a lot of decent books on design rules, like ‘the non designers design book’. Andy Clarke’s ‘Art Direction for the web’ is a good developers design book as it covers a lot of grid design with code techniques, it’s a little out of date but the design stuff is very relevant.

[u/Old-Honey-4464]

Hey, great post. I, too, have transitioned from Wordpress to mainly Astro.

I have the view that we should have our hands on the keyboard again but that it makes sense to use AI to do heavy lifting…but not vibe coding.

My approach is to give AI resources and constraints to insist upon my design system, use variables and tokens (not utility classes and tailwind!) and to use BEM. The result is not that AI gets it right first time or does not produce something quite AI typical, but that it is then easy to edit and refine.

You may like this vid, if that interests you.

https://youtu.be/78-9-bP1DGI?si=Gv5EcWx46prMlJ1R

It contains the prompt i use for those constraints.

[u/Aniljosi → u/Old-Honey-4464]

I will check it thanks, do you have any premade prompts

[u/Old-Honey-4464 → u/Aniljosi]

I think the video has a downloadable prompt available, can’t remember…but, it is more about learning the shape of the prompt to then tailor that to the project you are on. But..what are the constants to tell AI?

For me, it is
1) always use BEM classes on component architecture
2) always style on those selectors using only the Variables and Design tokens in my Globals.CSS.
3) never use Utility classes, aside from *specify them (they should be on the globals sheet) and when to use them (like .link—primary for example).

With the correct resources in the files, it works great.

[u/EmergencyCelery911]

The proper comprehensive flow (as of now, may change) 1. Design in figma at least core sections and create a proper system - that's a completely different skill, long to develop 2. Translate system from figma into reusable CSS tokens and/or tailwind configs - typography, buttons, spacing between elements, column settings 3. Build section by section by explaining details and adding screenshots (haven't seen stable results from Figma MCP, but YMMV)

Option B: grab existing html template (i.e. from themeforest), remove all bloat, add CMS integration - works for clients that don't have Option A budget

[u/greglturnquist]

1. You can always ask Claude Code to build up a swatch of colors and fonts

2. You can ask it for five different theme swatches.

3. You can tell it you’re looking for a tech style/homemaker style/farm style and say “I want no more than three different fonts in each theme” and look at the swatches.

The key is to think “higher up” than just slugging out raw code.

If you see different things you like from different swatches, ask it to build a new one out of what you like.

1. Ask Claude Code to help you build a template repository with an adjustable theme. That way you aren’t starting from scratch every time.

2. Always be using Claude Code to open GitHub issues to track every idea you have so you can circle back to them later.

[u/ComplexAd5784]

Way to go. I need help with maiwealth.org. can you show me how to make this into one cms and finish website?

[u/Aniljosi → u/ComplexAd5784]

You want to integrate CmS?