skills.rest
tsukhani
tsukhaniCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

claude-designer

Generate slide decks, interactive prototypes, and animated videos with HTML, CSS, and JavaScript.

12|3|Updated Apr 6, 2026
Search Tags:#design#ui#html#frontend#prototyping#animation#ux
One-click install
npx skills add https://github.com/tsukhani/jclaw --skill claude-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-designer
Source: https://github.com/tsukhani/jclaw/tree/main/skills/claude-designer
Command: npx skills add https://github.com/tsukhani/jclaw --skill claude-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This skill solves the gap between generic coding tools and professional design output by providing a structured, aesthetic-first workflow for creating high-fidelity design artifacts directly in HTML/CSS/JS.

Core Features & Use Cases

  • Artifact Generation: Produces slide decks, interactive prototypes, animated videos, and dashboards using a component-based architecture.
  • Design System Integration: Leverages existing brand assets and design tokens to ensure visual consistency across all generated outputs.
  • Use Case: A product manager needs to present a new feature concept to stakeholders; this skill generates a fully interactive, browser-ready prototype with custom animations and responsive layouts in minutes.

Quick Start

Use the claude-designer skill to create a high-fidelity interactive prototype for the new onboarding flow based on the provided design system.

Frequently Asked Questions about claude-designer

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

FAQPage Schema
How do I generate interactive HTML prototypes directly from code?▼

You generate interactive HTML prototypes by using this skill to produce high-fidelity, browser-ready design artifacts with custom animations and responsive layouts using HTML, CSS, and JavaScript.

Can I use existing design tokens to create consistent user interfaces?▼

Yes, you can use existing design tokens and brand assets to ensure visual consistency across all generated user interfaces, dashboards, and prototypes.

What is the best way to build animated slide decks and marketing landing pages?▼

The best way to build animated slide decks and marketing landing pages is using this skill's structured, aesthetic-first workflow to generate professional-grade HTML, CSS, and JavaScript artifacts.

Does this HTML design generation require file system access for asset management?▼

Yes, this HTML design generation requires file system access for asset management and browser-based preview capabilities to iteratively verify the generated outputs.

What types of frontend design artifacts can I produce for stakeholder presentations?▼

You can produce diverse frontend design artifacts for stakeholder presentations, including fully interactive onboarding flow prototypes, complex dashboard mockups, and animated videos.

Related Skills

Explore More Design & Creative Skills→
octavehqoctavehq

octave-get-brand-components

Capture website design systems to generate reusable component kits with CSS and HTML templates.

Official
Advanced
OiAnthonyOiAnthony
8

html-effectiveness

Generate self-contained HTML artifacts with inline CSS and JavaScript.

Community
Advanced
lehuuhau1231lehuuhau1231

tailwind-patterns

Guide Tailwind CSS v4 configuration, responsive design, and modern layout patterns.

Community
Intermediate
heximaoheximao

sketch

Generate disposable HTML mockups with interactive variants for design exploration.

Community
Basic