AI Workflow

Claude Code UI/UX Pro Max: how we ship agency-grade sites for the price of an API bill

Four moving parts - Claude Code, the UI/UX Pro Max skill, Framer Motion and 21st.dev - now do the bulk of what marketing-site design agencies used to charge lakhs for.

Published 18/07/2026 | TS BLACK

The gap that closed

For a long time, the honest answer to "how much does a nice marketing site cost" was: a lot, and a while. A design agency, a developer, three review cycles, a launch date that slipped twice. That default has quietly stopped being true for a large class of projects.

The stack we describe below produces sites that would have been quoted at agency rates a year ago. It is not magic and it is not universal. It is a specific combination of tools that happens to be very good at one thing: turning a paragraph of English into a designed, animated, responsive page that ships.

The four-part stack

1. Claude Code as the engine

Claude Code is an agentic coding tool that lives in your terminal. Two things matter about it here. First, it reads the entire project, not one file at a time, so it can make changes that respect the code that already exists. Second, it runs, tests and self-corrects, so the loop between "here is an idea" and "here is a working page" is measured in seconds, not minutes.

npm install -g @anthropic-ai/claude-code
claude   # start it inside your project

2. Framer Motion for the polish layer

The difference between a template and something that feels expensive is almost always motion: how elements enter, how a card responds to a cursor, how the hero unfolds on load. Framer Motion is the React library that gives Claude a rich vocabulary for those effects without hand-tuning transitions. On non-React projects we reproduce the same easing curves with plain CSS and IntersectionObserver.

npm install framer-motion

3. UI/UX Pro Max as taste-in-a-skill

Skills are reusable instruction packs that Claude Code loads on demand. UI/UX Pro Max is one focused on design craft: type scale, spacing rhythm, colour discipline, contrast and accessibility defaults, and rules for when motion helps a user versus when it shows off. Without a skill like this you get pages that work; with it you get pages that read as designed.

uipro init --ai antigravity

4. 21st.dev as the parts bin

21st.dev is a catalogue of polished component prompts - buttons, cards, heroes, scroll effects, backgrounds. Instead of describing a hero from scratch, you point Claude at a specific 21st.dev component and ask it to integrate that pattern into the project you are building. Every prompt in our own library on this site is a purchased 21st.dev component ready to paste into a Claude Code session.

The build loop

1. Open the project and start Claude Code.
2. Type the brief in plain English: audience, pages, tone, references.
3. Paste any 21st.dev prompts you already know you want (hero, buttons, cards).
4. Read what came out, correct in one line: "tighten the hero spacing", "make the cards stagger in on scroll", "switch the palette to our brand indigo".
5. Ship: push to a private repo, let Cloudflare Pages deploy, point a subdomain at it.

The work becomes direction rather than typing, and the fastest iterations are seconds long.

What actually lands in the repo

• Responsive layouts across mobile, tablet and desktop without babysitting breakpoints.
• Motion - scroll reveals, hover states, page transitions, all coherent rather than random.
• Typography with a real hierarchy and matched pairings, not defaults.
• Dark and light themes that share consistent tokens.
• Semantic markup with ARIA basics and keyboard navigation.
• Deployable code, not a prototype dressed up as one.

A worked example

A typical brief we might type in:

Build a consulting services landing page. Dark, cinematic hero with
the TS BLACK wordmark and a subtitle "Engineering & Automation
Studio". Below it, four service cards - AI Integration, Kubernetes,
Automation, Performance - each with an icon, each staggered on
scroll. Then a testimonial band and a booking CTA.

What lands, in about five minutes: a full-bleed hero with an animated headline, four cards that reveal in sequence as you scroll, a smooth testimonial carousel, and a CTA button with a subtle pulse wired to a booking tool. Responsive, animated, ready to deploy.

Where the fit is great

Landing pages. SaaS, consulting, product launches, portfolios. One-page designs with clear hierarchy and tasteful motion are where this stack is at its best.

Small marketing sites. A handful of pages with consistent branding. The design skill keeps decisions coherent across pages instead of drifting.

Prototypes and MVPs. A stakeholder-ready visual in an afternoon instead of a sprint. Even when you rebuild it properly later, the head start is real.

Personal presence. Blogs, portfolios, speaker pages, small business sites. Professional quality without hiring anyone.

Where it stops

Real applications. Dashboards, data-heavy UIs, anything with meaningful state and business logic still needs architectural decisions that go beyond visual design. Claude Code can scaffold them, but you will steer.

Mature brand systems. If you have a design system with specific tokens and component libraries the team must stick to, the output will need alignment. What comes out is good design; making it exactly your design is manual work.

Deep accessibility. The basics are handled. WCAG AAA, screen-reader flows, complex interactive widgets - human review, not just generation.

Long-term maintenance. Generated code works but may not match every convention your team follows. Plan a refactor pass if the project has legs.

The economics, honestly

For known patterns - the marketing site, the SaaS landing page, the portfolio, the launch page - the quality gap between the cheapest and most expensive rows has effectively collapsed. Agencies still win where strategy, research and deep application design are the deliverable. For execution of solved problems, the ratio has tipped hard.

Setup in ten minutes

# 1. Install Claude Code
npm install -g @anthropic-ai/claude-code

# 2. Create a project
npx create-next-app@latest my-site --typescript --tailwind
cd my-site

# 3. Motion library
npm install framer-motion

# 4. Design skill
uipro init --ai antigravity

# 5. Start the loop
claude

# 6. First brief - keep it specific
# "Build a dark-themed SaaS landing page with an animated hero,
#  feature grid, pricing table and contact form."

Our take

We have shipped a lot of sites under the TS BLACK umbrella and adjacent projects. The shift is real: the execution layer of web design is being commoditised. What used to need a small team can now be produced by one person with taste and clear direction.

This does not put designers out of work. It compresses the distance between having an idea and having a working implementation. The people who benefit most in the short term are the ones who kept getting stuck at that step:

• Consultants and freelancers who need a professional presence without an agency budget.
• Founders who need to put a landing page in front of customers this week.
• Backend engineers who can build anything but freeze at "make it look good".
• Marketers who cannot wait in the dev queue for another campaign page.

If you are still paying agency rates for a standard landing page in 2026, you are overpaying for a problem that has been solved. Our prompt library on this site exists to make that solution one click faster.

Related resources

• Claude Code on GitHub
• Framer Motion documentation
• 21st.dev component library
• The TS BLACK prompt library

claude-code ai-development ui-ux framer-motion web-design 21st-dev

Back to the blog