If your Claude Code projects look generic, you’re missing the most important step. You’re skipping the research.
Claude Code could be Da Vinci for you. But if you put a blindfold on it, what good is Da Vinci? That’s what happens when we don’t do proper research before building.
I’m Charles Dove, and I run Charlie Automates. At my agency CC Strategic, we build real apps for real clients. And I’ve been building a legal intake SaaS called CaseGate that I’m bringing to market soon. In this video walkthrough, I show you exactly how I used Claude Code, the GSD (Get Stuff Done) plugin, and Anthropic’s front-end design skill to create UIs that don’t look like AI slop.
The solution comes down to three phases: researching, planning, and building. Let me walk you through each one.
Why Most Claude Code Projects Look Like AI Slop
Here’s the truth. Claude Code is very effective at building functional projects. But they end up looking super generic. Even people who know about the front-end design skill are using it without proper research and planning.
That’s the core problem. You’re asking a powerful tool to design something without giving it any visual reference. No context. No inspiration. No direction.
Think about hiring a real designer. You wouldn’t just say “make it look nice” and walk away. You’d show them examples. You’d tell them which competitors you admire. You’d explain the vibe you’re going for.
Same thing applies to Claude Code. The more context you give it, the better the output. Period.
Phase 1: The Research Phase
The first thing I did was use ChatGPT to ask for law-related websites and UIs I could reference. I wanted ten of them relevant to lawyers. These are million-dollar law firm website outlets. Real businesses spending real money on design.
Why ChatGPT for this step? Because I just needed a quick list of URLs. I wasn’t asking it to build anything. I just wanted research targets.
I already had CaseGate built out with four main sections: the landing page, the intake page, the actual intake form, and the attorney dashboard. Using GSD, I came all the way down to the 11th phase, which is the UI polish.
Using the Chrome Extension for Visual Research
Here’s where the secret sauce comes in. I used the Claude Chrome extension in my browser. Once you’re done researching websites, Claude can actually review them. It sees them in real time with you. Take the blindfolds off. Then you can build with a proper foundation.
Here’s what I typed into Claude:
“Here are five websites. I want you to use the Chrome browser extension to review them. Take a look so you have context. And then I want three color palette options and ideas for animations.”
That’s it. One prompt. Claude opened the first website, analyzed it, then moved through the rest. I didn’t have to sit there describing every detail. Claude saw the sites directly and extracted what it needed.
How to Set Up the Chrome Extension
If you don’t have the Chrome extension yet, go to Google and search “Claude Chrome extension.” Then in Claude Code, type in the command to connect, and it’ll pop open and link up.
This is the part most people skip entirely. They jump straight to building without giving Claude any visual context. Don’t do that.
Phase 2: The Planning Phase
After the analysis, Claude gave me clear options. It broke down primary colors, accent colors, and feel. Three color palette options showed up:
- Trust and Authority - Perfect for law firms where credibility matters
- Modern SaaS - Clean and contemporary
- Warm and Bold - Energetic and distinctive
I went with option one. Trust and authority. Because for lawyers and their clients, trust is everything. We aren’t a modern SaaS play. We aren’t trying to be warm and bold. We’re building for an industry where credibility is the product.
The GSD Interactive Step
I made sure GSD knew this was an interactive step. It asked me questions about what I wanted:
- Full overhaul or targeted polish? Targeted polish.
- What’s most important to nail? Consistency everywhere. Dashboard feel. AI credibility. All equally important.
- What’s out of scope? No new features. Mobile optimization can wait. Just the UI, animations, and colors.
- Specific look and feel reference? I like the Cleo vibe.
Notice how specific those answers are. I didn’t say “make it pretty.” I told Claude exactly what mattered and what didn’t. That’s the difference between getting AI slop and getting something that looks like it cost ten thousand dollars.
Installing the Front-End Design Skill
If you don’t have the front-end design skill already installed, just type /plugins in Claude Code and search for it. Once it’s installed, activate it by naturally chatting with Claude: “Hey, I would love to use this front-end design skill for this project.” That’s all it takes.
Context Management with GSD
Here’s why I recommend GSD, especially for beginners. You don’t have to organize things yourself. GSD organized the phases. It put the context markdown in the right folder. And I can clear context every so often so I don’t deal with context window overflow.
Just clear it. Plan the next phase. Boom. It has context. We move on.
The planning created a context document. All the research, all the decisions, all wrapped up so that phase 11 (UI polish) could come out properly.
Phase 3: The Building Phase
The building phase is honestly the boring part. And with GSD, it’s actually very simple. After the research and planning are done, all I’m doing is clearing the context window and pasting in the new prompt that GSD gives me.
I went through each sub-phase one by one. Clear context. Paste prompt. Let it run. Repeat.
First Results and Iteration
Looking at what it produced on the first pass, it changed some animations and the color scheme. We went from a darker gray to a lighter whitish-bluish background. Some color changes showed up. The landing page got animations where there were none before.
But the polish wasn’t really what I expected.
And this is part of the process. I want to be real with you. What you get might not be what you like. So you have to come back and be clear on what you want.
The Premium UI Overhaul
I wasn’t satisfied with just a light polish. I wanted a full overhaul of the dashboard and landing page. So I switched to plan mode and told Claude:
“I specifically want to change the UI on the attorney dashboard, admin portal, and landing page. Let’s keep it clean and simple. Same color scheme, but tell me exactly what we’re going to do before we do it.”
Two key things in that prompt:
- I switched to plan mode first. Always plan before you execute.
- I asked it to tell me the plan before building. This prevents wasted tokens on work you’ll just undo.
Claude created Phase 12: Premium UI Overhaul. I added final notes: “Let’s just make sure it looks like a $10 million edit. Don’t leave it cheap looking like AI slop. Make sure we use the front-end design skill with our plans.”
The Final Result
After the premium overhaul, the difference was night and day. The dashboard was cleaner. The layout was organized. Everything had consistency.
I love how much cleaner it looked than just the general polish. We could add a logo, add more animations, and further iterate. But the foundation was solid. The color consistency was there. The general UI and feel of animations matched across every page.
It’s like a huge breath of relief knowing that Claude did what it needed to do.
The Complete 3-Phase Process (Summary)
Here’s the framework you can steal for any project:
Step 1: Research
- Use ChatGPT (or any AI) to find 5-10 reference websites in your industry
- Open them in your browser with the Claude Chrome extension active
- Ask Claude to review each site and extract design patterns, colors, and animations
Step 2: Plan
- Let GSD organize the phase structure
- Answer the interactive questions with specific, clear direction
- Choose a style reference you like (I picked Cleo’s vibe)
- Define what’s in scope and what’s out of scope
- Switch to plan mode before building anything
Step 3: Build
- Clear context between sub-phases to stay within the window
- Paste the prompts GSD generates for each step
- Review results after each phase
- Iterate if the output doesn’t match your vision
- Don’t be afraid to add a new phase (like my Phase 12 overhaul)
Pro Tips for Better UI Results
Don’t skip the research. This is the number one mistake I see. People jump straight into building without giving Claude any visual context. That’s why everything looks the same.
Use plan mode before executing. I switched to plan mode before asking for the premium overhaul. This lets you review what Claude wants to do before it burns through tokens doing it.
Be specific about what you don’t want. “Don’t leave it cheap looking like AI slop” is just as important as describing what you do want. Give Claude guardrails.
Clear context regularly. Don’t let the context window overflow. GSD makes this easy because it stores progress in markdown files. Clear, paste, continue.
Iterate without guilt. The first output is rarely the final product. That’s normal. Come back, be clear about what you want changed, and run it again.
Consider your logo separately. I mentioned using Nano Banana on Google AI Studio or Higgsfield AI to generate a brand new logo. The logo is a separate step. Get the UI right first, then plug the logo in.
Tools Used in This Tutorial
| Tool | Purpose |
|---|---|
| Claude Code | Core development environment |
| GSD Plugin | Project management with phased builds |
| Front-End Design Skill | Anthropic’s UI generation skill |
| Claude Chrome Extension | Lets Claude see websites in real time |
| ChatGPT | Quick research for reference websites |
| Nano Banana / Higgsfield AI | Logo generation (separate step) |
FAQ
Do I need the GSD plugin to follow this process?
No. The three-phase framework (research, plan, build) works with any Claude Code setup. GSD just makes the phase management automatic. You could do this manually by creating your own markdown files for context.
How do I install the front-end design skill?
Type /plugins in Claude Code and search for “front-end design.” Install it, then tell Claude you want to use it for your project. It’ll activate automatically.
What if I don’t like the first result?
That’s normal. Come back with more specific feedback. Tell Claude exactly what you liked and didn’t like. Add a new phase if you need a bigger overhaul. I went from Phase 11 (light polish) to Phase 12 (premium overhaul) because the first pass wasn’t enough.
Can I use this process for non-legal projects?
Absolutely. The three-phase process works for any industry. Just swap out the reference websites. Building an e-commerce app? Research the best Shopify stores. Building a fitness SaaS? Look at the top fitness platforms. The principle is the same: give Claude visual context before you build.
How much does all of this cost in tokens?
The research phase uses the most tokens because Claude is analyzing multiple websites through the Chrome extension. But you save tokens long-term because you’re not going back and forth fixing ugly designs. Plan once, build once, iterate once. Much cheaper than “just build it” and then spending ten rounds making it look decent.
What’s the Chrome extension and how do I connect it?
Search “Claude Chrome extension” on Google and install it from the Chrome Web Store. Then in Claude Code, type the connection command and it’ll link to your browser. This lets Claude see what you see in your browser tabs in real time.
Why use ChatGPT for research instead of Claude?
No deep reason. I just needed a quick list of reference URLs. You could use Claude for this step too. Use whatever tool is fastest for getting a list of competitor websites in your space.
What’s Next
This process took my CaseGate project from functional-but-generic to looking like a premium product. And I still have room to iterate further with custom images, additional animations, and mobile optimization.
If you want to learn more about building with Claude Code, check out more tutorials on the Charlie Automates YouTube channel. I post walkthroughs like this regularly.
Want hands-on help with your Claude Code projects? Work with me 1-on-1 and I’ll walk you through the exact setup for your use case.
For free templates, prompt libraries, and live sessions twice a week, join CC Strategic AI on Skool. We’ve got an entire classroom of Claude Code content and n8n workflow templates. Come in, ask questions, and connect with the community.
Stop shipping AI slop. Research first. Plan second. Build third. Your projects will thank you for it.