skills.rest
julianobarbosa
julianobarbosaCOMMUNITY
Explore all skills by this author →
Website𝕏@julianobarbosaGitHub

Webdesign

Orchestrate Claude Design via Interceptor to generate web UI prototypes and integration-ready diffs.

Updated Aug 23, 2026
Search Tags:#design tokens#web design#ui integration#claude design#accessibility verification#code handoff
One-click install
npx skills add https://github.com/julianobarbosa/.claude --skill webdesign
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Webdesign
Source: https://github.com/julianobarbosa/.claude/tree/main/skills/Webdesign
Command: npx skills add https://github.com/julianobarbosa/.claude --skill webdesign

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Webdesign removes the gap between visual design exploration and real, integration-ready changes inside an existing codebase, so you can land UI work without rebuilding from scratch.

Core Features & Use Cases

  • Claude Design orchestration: Drives claude.ai/design through the Interceptor skill to generate prototypes and design-system-aware outputs.
  • Integration-aware diffs: Produces patches against an existing app (not isolated HTML), reusing app tokens and component patterns.
  • Production handoff: Exports a Claude Design handoff bundle for downstream code generation via the frontend-design plugin, then verifies results.
  • Verification & deployment: Screenshots and a11y-probes designs, then optionally deploys to common hosts (Cloudflare Pages, Vercel, Netlify, GitHub Pages, S3).

Quick Start

Run Webdesign to integrate a redesigned pricing page into your Astro app by asking to land the prototype into your target route in the existing codebase.

Frequently Asked Questions about Webdesign

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate web UI prototypes into existing application code?▼

To integrate web UI prototypes into existing application code, this Skill generates framework-aware diffs against your app, reusing existing design tokens and component patterns rather than producing isolated HTML. It parses handoff bundles to apply production-ready patches directly to your target routes.

Do I need Claude Design access and Interceptor to generate web UI prototypes?▼

Yes, you need Claude Design access and the Interceptor to generate web UI prototypes. The Skill enforces these prerequisites along with authentication before running Claude Design automation to create prototypes, extract design systems, and produce integration-ready handoff bundles.

Can I deploy generated web UI designs to Cloudflare Pages or Vercel?▼

Yes, you can deploy generated web UI designs to Cloudflare Pages, Vercel, Netlify, GitHub Pages, or S3. After integrating the design diffs and verifying results via screenshots and a11y probes, the Skill optionally deploys the production-ready exports to your selected hosting platform.

How does web design integration handle existing component patterns?▼

Web design integration handles existing component patterns by producing patches that reuse your app's established tokens and component structures. Instead of isolated HTML, it generates framework-aware diffs that align with your current application architecture, ensuring seamless integration of new UI prototypes into existing code.

Related Skills

Explore More Design & Creative Skills→
davduncdavdunc

Webdesign

Drive Claude Design workflows to create and export web UI prototypes.

Community
Advanced
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate
starlink-awakenstarlink-awaken

Webdesign

Design web interfaces with Claude Design and export code bundles.

Community
Advanced
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-html-to-react-native-ds-code-gen

Convert HTML prototypes into Expo-compatible React Native components with TypeScript.

Community
Advanced