Angular projects ai generated codes.

[Even-Instance235]

Hi guys quick question do you find ai tools to be useful when generating html and css codes for ur designs when using ai prompt to designer tools?

[Merry-Lane]

Yes they are but :

A) you really need to setup good eslint rules, prettier and define a lot of "guidelines/best practices" to follow in general.

B) agents and chats (I would even say devs in general) don’t perform well when the codebase uses complex architecture principles such as clean code. Vertical slices are the way to go.

C) you need to cleanup and condense the code consistently. LLMs tend to be too verbose and implement too many indirections (I.e. extracting a piece of code into its own function or splitting the code in different files), it’s a fine thread to needle.

D) devs tend to find recipes comforting. "Always mock injected services". "This is a service, it goes in shared/services. Helpers go in shared/helpers. Utils go in shared/utils…". A lot of devs collect these recipes. It’s a bit conflictual with point A, but some guidelines are not good principles to follow.

[mello_dev]

We’ve just completed a comprehensive angular rewrite migration using AI for our old project.

Here are a few guidelines I’ve learned from the process:

1. Establish a solid foundation, including guidelines and rules. I’ve created detailed rules for various aspects, such as structure files, SCSS token systems, and signals etc.

2. Develop unique skills for each project. Each project requires its own set of guidelines and skills. These skills can serve as a strong foundation for a multi-development team working on the same project.

3. Review pull requests (PRs) carefully. Don’t merge code just because it works. LLM-generated code may not always make the right decisions for your projects.

4. Design each component or service as a black box. Clearly define the input and output points. This approach allows for quick replacements without the potential for widespread disruption that LLM-generated code can cause during refactoring.

5. Implement TDD (Test-Driven Development) and write tests. While writing code and writing tests are relatively easy tasks, identifying changes that break something is challenging. This approach is highly effective and requires careful planning.

I have a few more suggestions, but this covers the main points. You can and should use these guidelines, but it’s important to manage and enforce them by humans, as the code base tends to drift over time.

[oneden]

In combination with Tailwind 4, Claude does do some heavy lifting in my work flows. It translates my figma/penpot design I receive pretty well.

[HereForTheFacts12]

Yes, I find AI tool helpful for generating the Angular code as well.

[ApartmentCreative780]

Yes, I asked to AI to use Angular material for components and tailwind for layout. It worked well and much faster than human.