skills.rest
davdunc
davduncCOMMUNITY
Explore all skills by this author →
Website𝕏@davduncGitHub

Webdesign

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

1|Updated Apr 16, 2026
Search Tags:#deployment#ui design#design-to-code#app integration#accessibility verification#design system tokens#web prototyping
One-click install
npx skills add https://github.com/davdunc/pai-framework --skill webdesign-davdunc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Webdesign
Source: https://github.com/davdunc/pai-framework/tree/main/skills/Webdesign
Command: npx skills add https://github.com/davdunc/pai-framework --skill webdesign-davdunc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Webdesign bridges the gap between Claude Design’s interactive, browser-only visual workflow and a developer’s need to turn those designs into real, integration-ready changes inside an existing codebase.

Core Features & Use Cases

  • Claude Design orchestration via Interceptor: drives the claude.ai/design session programmatically and captures screenshots and exports reliably.
  • Integration-aware delivery: produces diffs/patches that respect an existing app’s tokens, component patterns, and routing conventions rather than overwriting everything as greenfield HTML.
  • Design-to-code handoff pipeline: exports Claude Design handoff bundles and delegates production code generation to the frontend-design plugin, followed by verification and deploy workflows.

Quick Start

Ask: "Integrate this prototype into ~/projects/landing — it’s an Astro app and keep existing tokens and components."

Frequently Asked Questions about Webdesign

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

FAQPage Schema
How do I export web UI prototypes into existing app codebases without overwriting design tokens?▼

Web UI prototype export produces framework-aware diffs that respect existing app tokens, component patterns, and routing conventions. It generates integration-ready patches rather than overwriting your codebase with greenfield HTML, preserving your current design system.

Do I need an authenticated Interceptor session to use the Claude Design workflow for web prototyping?▼

Yes, an authenticated Interceptor session and Claude Design access are required. The Skill drives the claude.ai/design session programmatically through the Interceptor to capture screenshots, export bundles, and control the web prototyping workflow reliably.

What's the best way to keep existing components intact when integrating a new UI design into my application?▼

The best way to preserve existing components during UI design integration is using a pipeline that enforces token and component preservation constraints while applying framework-aware diffs, ensuring your new design adapts to your architecture rather than replacing it.

Can I deploy production-ready artifacts directly from a web prototyping and design system extraction workflow?▼

Yes, the workflow supports production deployment from a single routing surface. After prototype creation and design-system extraction, it generates deployment-ready artifacts and enforces post-export verification to ensure the output is production-ready.

Why does my UI design integration require post-export verification after generating code from a prototype?▼

Post-export verification is required to enforce integration constraints such as token and component preservation. It validates that the generated code correctly maps the design system tokens and maintains compatibility with your existing application architecture.

Related Skills

Explore More Design & Creative Skills→
danielmiesslerdanielmiessler
17.4k

Webdesign

Integrates Claude Design web interfaces into existing applications via three workflow paths.

Community
Advanced
matteotittamatteotitta
29

site-export-to-react

Migrate Webflow or Framer exports into a TanStack Start React codebase.

Community
Advanced
Eigo-Mt-FujiEigo-Mt-Fuji

ui-ux-designer

Generate wireframes, prototypes, and design system assets for web, mobile, and desktop projects.

Community
Basic
oakossoakoss
14

figma-developer

Extract design tokens, icons, and components from Figma via REST API.

Official
Advanced