What is a skill?

---

The webdesign skill

This skill takes you from a vague idea ("I need a site for my coffee brand") to a live deployed website on Vercel — through a structured creative pipeline in 4 phases.

It orchestrates several specialised tools:

• UI UX Pro Max — design intelligence with 161 industry-specific style rules
• 21st.dev Magic MCP — AI-generated React UI components
• Nano Banana 2 — custom image generation via Google Gemini 3.1 Flash (inference.sh CLI)
• Frontend Design Skill — steers Claude toward a distinctive, non-generic aesthetic
• Vercel MCP — one-click deployment

Installation

Option 1: install from GitHub

claude install github:3xLABS/skills/webdesign

Option 2: install from .skill file

If you have the packaged .skill file:

claude install /path/to/webdesign.skill

Prerequisites

Make sure the following is set up in your environment:

1. UI UX Pro Max — install with npm install -g uipro-cli, then uipro init --ai claude
2. Nano Banana 2 — install the inference.sh CLI: npx skills add inference-sh/skills@agent-tools, then infsh login
3. 21st DEV (optional) — pick favourites among the components
4. Vercel MCP — create an account and connect with Claude via Claude's MCP settings
5. Frontend Design Skill — should be pre-installed with Claude (official Anthropic skill)

How it works

The skill runs through 4 phases, each building on the previous one. Checkpoints between phases keep you in control.

Phase 1: UX discovery & briefing

Claude starts by asking questions about your project — who it's for, how it should feel, which websites you like. It searches for real-world sites that match your vibe, then uses UI UX Pro Max to assemble a design system (colours, typography, UI style, anti-patterns). Everything is summarised in a UX brief that you approve before continuing.

Phase 2: UI component selection

Based on the brief, Claude plans the page sections (hero, features, testimonials, etc.) and either picks components from 21st.dev or builds custom ones. The Frontend Design Skill keeps the result distinctive — not generic. You review a Component Manifest before moving on.

Phase 3: Image generation

Claude identifies every spot that needs a custom image (hero, icons, backgrounds, product shots) and generates them with Nano Banana 2 (via the infsh CLI), prompted to match your colour palette and style. You review and iterate until the images land.

Phase 4: Build & deployment

Claude scaffolds a Next.js project, implements the design system, builds every section, runs quality checks (responsiveness, accessibility, SEO), and deploys to Vercel. You get a live URL.

Example prompts

A few prompts that trigger the skill:

"Build me a landing page for my AI startup. We do document processing for law firms. I like the look of Linear's site — clean, dark, subtle animations. Deploy it on Vercel."

Claude asks follow-ups on your startup name, features, audience, and CTA, then walks you through all 4 phases.

"I need a site for my coffee roastery called Ember & Bloom. We target millennials who care about sustainability. I want something warm and earthy, but modern."

Claude explores your aesthetic preferences, recommends terracotta/sage/cream palettes, generates artisanal product photography, and builds a full landing page.

"Design a portfolio site for my photography business. Black & white, minimal — let the photos speak."

Claude asks about your photography niche, builds a minimal B&W design system, and produces an image-led layout.

"I want to redesign my SaaS landing page. Here's the current site: [url]. Make it more modern and conversion-focused."

Claude analyses the current site, asks about weak points, and proposes a redesign through the full pipeline.

Tips for the best results

• Be specific about what you like and don't like. "I like Stripe's site because they make complex things feel simple" is more useful than "I like Stripe."
• Share reference sites. The more examples you give, the closer Claude can hit your taste.
• Don't skip the briefing. Phase 1 is the heart of the whole thing — a good brief leads to a great site.
• Iterate on images. Nano Banana 2 usually needs 2–3 rounds for hero images. Be specific about what to change.
• Deploy early, iterate often. Vercel makes redeployment trivial. Get something live and refine it from there.

Source

github.com/3xLABS/skills/tree/main/webdesign