Resources / AI skill
best-webdev: agency-grade websites with Claude Code
A Claude Code skill and 8 subagents that plan, write, illustrate, build, test and ship a Next.js 16 marketing site, or crawl and rebuild an existing one.
27 steps · 5 in parallel · 4 quality gates
Watch it run- Built by Prasad Iyer, who has written 100+ AI skills and 40+ MCP servers
- Pay by UPI, card or netbanking. Instant download, also sent by email.
Questions first? Ask Prasad.
How it works
Watch the job run itself.
Every box is a real step in the skill. Press run to see the order, or tap a step to see what it does.
- Start: Input, A brief, or the URL of a site to redesign. Brand inputs help: logo, brand deck, real photos, competitors, product screenshots. Skill, /best-webdev. The main Claude Code session becomes the orchestrator and owns taste, shared files and approvals.
- Crawl (redesigns only): Agent, webdev-site-analyst. Crawls the current site and looks at every screenshot and image contact sheet before deciding what to keep. Script, crawl_site.py. crawl4ai crawl: copy, structure, contacts, fonts, colours, screenshots, every image with an auto verdict, baseline metrics. Script, reuse_assets.py. Imports approved real assets as WebP with provenance and lists originals to request. Output, SITE-TEARDOWN.md. Keep, kill or fix per dimension with a numeric target, facts found, and the 301 redirect seed.
- Intake and scaffold: You approve, One batch of questions. Scope, conversion, sector rules, launch date, and approval for the GitHub repo, Vercel team and domain. Script, scaffold.sh. Copies the Next.js 16 boilerplate and templates, runs git init and npm install, opens the cost window.
- Strategy: Agent, webdev-strategist. Picks the archetype, studies competitors, and justifies every page by a query, a buyer question or a conversion job. Tool, Keyword data (optional). Measured volumes and live SERPs from a connected tool such as DataForSEO. Without one, volumes are marked not measured. Output, SITEMAP, PAGE-SPECS, KEYWORDS. A sitemap with a cut list and a job for every section on every page.
- Design direction: Skill, Orchestrator writes DESIGN.md. One concept from the business, palette, type, layout moves, motion tier, and the art direction lines. Output, Tokens and a reference hero. Built and screenshotted by the orchestrator. Every builder copies its patterns.
- Parallel production: Agent, webdev-copywriter. Voice guide, then typed copy for every page. Unknown facts become client questions. Agent, webdev-svg-artist. Seeded, token-coloured SVG hero art, plates, glyphs and dividers, each previewed as PNG. Agent, webdev-image-director. Prompt plan locked to the palette, Gemini generation by tier, visual review, WebP processing. Agent, webdev-video-producer. Optional storyboarded product explainer rendered to 1080p MP4 with poster and captions. Agent, webdev-section-builder x2-4. Server-component pages from the specs, each instance owning its own routes.
- Assemble: Skill, Orchestrator wires and reviews. Final copy, images, art and video wired in, then every page read at 390px and 1440px.
- Quality gates: Agent, webdev-qa. Runs every gate on a production build and returns evidence plus an ordered fix list. Loops until clean. Check, Build, lint, typecheck. Zero errors required. Check, seo_check.py with Lighthouse. SEO and accessibility crawl of the sitemap plus mobile Lighthouse, measured in the session. Check, audit_copy.py and svg_check.py. No placeholders or AI tells in the copy; every SVG linted and looked at. Check, Keyboard, reduced motion, no-JS. Behaviour checks with screenshots and a truth audit of every claim.
- Ship and report: Script, ship.sh. Secret scan, build, private GitHub repo, Vercel production deploy, live SEO check, DEPLOY.md. Script, cost_report.py. Claude Code tokens by model and agent plus Gemini images by tier, in USD. Output, Live site and handoff files. Live URL, repo, cost report, client questions, real-photo shot list, and a before and after table for redesigns.
What you get
Everything in the box.
best-webdev turns Claude Code into a small web studio. You describe a business, or point it at a site that needs a redesign, answer one batch of questions, and it runs a pipeline of specialist subagents to produce a complete Next.js 16 marketing site.
The pipeline is written down, not improvised. A strategist writes a sitemap where every page has a job and a cut list for the pages that do not. The main session sets one design concept, a palette, a type pair and the art direction, and builds the hero itself so every page follows it. Then a copywriter, an SVG artist, an image director, a video producer and two to four section builders work in parallel, each owning its own files. A QA agent runs build, lint, typecheck, an SEO crawl, Lighthouse, a copy audit, an SVG check and keyboard, reduced-motion and no-JS checks, and the loop continues until they pass.
Redesigns start with a crawl of the current site using crawl4ai: every page's copy and structure, brand fonts and colours, screenshots, and every image with a reuse verdict. Real photos and the logo carry into the new build, every old URL is kept or redirected, and at the end the live site is crawled again and compared with the old one.
The art is made, not found. Generative SVG plates, glyphs and a signature hero piece come from a seeded toolkit coloured by the site's own CSS tokens. Raster images come from Gemini (Nano Banana) through a saved prompt plan, with each image routed to a draft, standard, pro or ultra model by its role. Product sites can get a deterministic 1080p explainer video rendered from HTML, with a poster and captions.
It is strict about truth. Anything it cannot verify becomes a visible [CLIENT-INPUT-NEEDED] question instead of an invented testimonial, logo, metric or award. It never generates fake staff, customers or premises, and it never reports a score it did not measure in the session.
When the gates pass, and only with the approval you gave at intake, it creates a private GitHub repo, deploys to Vercel production, checks the live site, and writes a cost report covering Claude Code tokens by model and agent and Gemini images by tier.
This is a Claude Code skill. The orchestration needs Claude Code's subagents and skills. Other coding agents can still read the reference docs and run the scripts by hand. Running it uses your own Claude plan or API usage, and a paid Gemini key if you want generated images.
- 8 specialist subagents run in parallel waves, each owning its own files, so they never overwrite each other
- Redesign mode crawls the current site first: copy, fonts, colours, screenshots and a reuse verdict for every image
- One design concept, palette and art direction shared by the UI, the SVG art and the generated images
- Gemini image generation with automatic model routing by role, a dry-run cost estimate and a cost ledger
- Generative SVG art toolkit: seeded, token-coloured, previewed as PNG before it ships
- Optional 1080p product explainer video rendered deterministically from HTML, with poster and captions
- Next.js 16 boilerplate with metadata, JSON-LD, sitemap, robots, llms.txt and a no-JS-safe motion layer
- QA gates: build, lint, typecheck, SEO crawl, Lighthouse, copy audit, SVG check, keyboard and reduced motion
- Truth rules: unknown facts become client questions, never invented testimonials, metrics or people
- Ships to a private GitHub repo and Vercel production only with your approval, then checks the live site
- Cost report in USD: Claude Code tokens by model and agent, Gemini images by tier
Done with you
- One-command installer for macOS, Linux and Windows (WSL 2)
- Install, usage and requirements guides with a troubleshooting table
- Next.js 16 + React 19 + Tailwind 4 site boilerplate
- Planning templates: brief, sitemap, page specs, design direction, image plan
- GSAP motion drop-in and a video explainer template
- 13 reference docs on strategy, copy, design, SVG, images, motion, SEO and QA
Who built it
Prasad Iyer Co-founder and CTO, TechDevs
Applications developer at Oracle for two and a half years, then full time on TechDevs, where he has built more than 100 AI skills and 40+ MCP servers for his own team and clients. The ones in this store are the ones he would hand to a client.
More about PrasadFAQ
Questions about this ai skill.
Does it work without Claude Code?
Not as a pipeline. The orchestration relies on Claude Code's skills, subagents and question tool. Other coding agents such as Cursor or Codex can still read the reference docs, use the Next.js boilerplate and run every script from a terminal, but they will not run the phases for you.
What does a build cost to run?
Claude Code usage is billed by your Claude plan or API account, and a full build with several subagents is token-heavy. Generated images are billed by Google per image; list prices on 2026-10-03 ranged from about $0.03 for a draft to $0.24 for a 4K image. The skill's cost report measures what your build actually used, so you can price future work from real numbers.
Do I need a Gemini key?
Only for generated images. Without one, the pipeline still produces generative SVG art, typography-led design and a shot list for real photography. Gemini's image models are not on the free tier, so the key needs billing enabled.
Can I use it for client work?
Yes. One licence covers you or your team on unlimited projects, your own and your clients'. The sites you build are yours and your clients' to keep and sell. You may not resell or redistribute the skill itself.
Will it redesign an existing website?
Yes. Give it the current URL. It crawls the site, reviews every image for reuse, keeps or redirects every old URL, and compares the new live site with the old one at the end.
Does it publish anything without asking?
No. It asks for the GitHub repo, Vercel team and domain during the first round of questions and only ships with that approval. It never logs in for you, never edits DNS, and refuses to ship if a secret is staged.
Does it invent testimonials or statistics?
No. Anything it cannot verify becomes a [CLIENT-INPUT-NEEDED] question on the page and in a client questions file, and a copy audit blocks launch until they are answered.
How do I get updates?
Download the new version from techdevs.in and run install.sh again with the same options. It replaces the skill files and keeps your Python environment and your sites.
What is the refund policy?
Email prasad@techdevs.in.
What is an AI skill?
A folder of instructions, scripts and reference files that an AI agent loads when a task calls for it. It turns a general assistant into one that follows a proven process for a specific job, every time.
Do they work with ChatGPT and Gemini, or only Claude?
They work across AI agents. Skills use the open Agent Skills format (a folder with a SKILL.md file), which Claude, OpenAI Codex, Gemini CLI, Cursor and GitHub Copilot can load directly. In ChatGPT or Gemini chat, add the instructions to a custom GPT or Gem and attach the reference files. Each product page lists its own requirements, such as an API key a script needs.
How were the time and quality numbers measured?
With a benchmark harness Prasad built: the same task runs several times with a basic prompt and with the skill, on the same model, in clean folders. The outputs are graded blind against a rubric. The method, model and date sit under every comparison; results on a different model will differ.
Run it on your next job.
Or have Prasad wire it into your systems with review gates and a runbook. Book a call with Prasad