Claude Web Builder workflow
Claude Web Builder takes a newcomer from a few business questions to a Next.js landing page with a Vercel URL, no code to write.
- 295 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent creates a project, installs dependencies and can publish the page to Vercel.
- Design choices stay with the agent when you answer "you decide".
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add workflows/claude-web-builderDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent creates a project, installs dependencies and can publish the page to Vercel.
- Design choices stay with the agent when you answer "you decide".
This is third-party code. Review the repository files before installing.
What it does
Claude Web Builder is a project you open in Claude Code and answer business questions in four short rounds: basics, look, content and technical details. From the answers the agent builds a one-page site with Next.js, Tailwind CSS and shadcn/ui. The project bundles 21 skills for animation, design and accessibility that keep pages from looking templated. Responsive layout and SEO meta tags are part of the result. After you approve the plan the agent builds sections, shows a preview and can optionally publish the page to Vercel. Answer in Spanish and the whole process runs in Spanish.
Who it is for. Small business owners and freelancers with no programming background who need a landing page with a live link.
Good fit when
- A bakery or studio needs a contact page with a form by evening.
- A product idea has to be shown to investors on a real site.
- A freelancer wants a quick first version for a client to refine.
- The page must be responsive and have search meta tags.
Not a fit when
- You need an online store with cart and payment: the project builds landing pages.
- A site exists and you must change its large codebase.
- A content management system for editors is required.
Example request
Build a landing page for my bakery: dark palette, menu, order form and publishing to Vercel.Limitations
The project targets one-page sites. Claude Code, Node.js 18 or newer and a Vercel account for publishing are required. The agent makes choices itself when you answer "you decide", so review the result by eye. Design skills come from other projects with sources listed in `ATTRIBUTION.md`. The free Vercel plan has its own build limits. The last commit is from October 2026.
How to disable. Delete the cloned folder. Remove the published page in the Vercel dashboard.
FAQ
Do I need to know how to code?
No. The project guides step by step and explains how to install Node.js and Claude Code while the agent writes the code.
What stack does the page use?
Next.js, Tailwind CSS and shadcn/ui. The layout is responsive and search meta tags are added.
What does "you decide" mean?
The agent picks colors, style and structure. The result appears in the preview and can be adjusted.
How do I publish the page?
Choose publishing in the last question round. The agent deploys to Vercel and returns a link.
Is there a Spanish version?
Yes. Reply in Spanish and the agent switches to Spanish. The repository has `README.es.md`.
Discussion
No questions or reviews yet.
Related
WorkflowsNext.js 16 starter for animated landing sites: an Obsidian rules vault, Claude Code hooks and agents for sections, SEO and motion
A free Claude skill that writes a build spec, picks cinematic media, builds a landing page and checks it with screenshots
A web-design skill for Claude Code: a DESIGN.md spec first, then code that follows it
A workspace for Claude Code: ten commands lead from a product idea to React screens and a handoff package with ready prompts for implementation
A kit of skills, tokens and rules that turns Claude into a design architect: DTCG tokens, components, accessibility and objective quality gates
ai-site-cloner turns Claude Code or Cursor into a pipeline that clones a site to Next.js with measured styles and pixel checks.
README in short
The README is written for beginners: steps from installing Claude Code to publishing, a list of 21 skills and a description of six phases.