claude-design

Design local HTML artifacts for prototypes, decks, and UI modifications.

Updated May 14, 2026
One-click install
npx skills add https://github.com/SethyPagna/Secretary-Jarvis --skill claude-design-sethypagna
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/SethyPagna/Secretary-Jarvis/tree/main/src/capabilities/skills/creative/claude-design
Command: npx skills add https://github.com/SethyPagna/Secretary-Jarvis --skill claude-design-sethypagna

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps create high-quality design artifacts in CLI or API environments when hosted design tools are unavailable. It preserves thoughtful design process, taste, and verification while removing platform-specific plumbing.

Core Features & Use Cases

  • From-scratch artifact design: Build landing pages, prototypes, decks, component explorations, and motion studies as local HTML files.
  • Context-driven UI work: Read repo files, brand cues, tokens, and assets before designing so the result matches the product's real visual language.
  • Variant exploration and verification: Produce multiple directions, add small tweak controls when useful, and confirm the saved artifact works locally.

Quick Start

Create a self-contained HTML prototype for my brief with three strong design variants and a small Tweaks panel.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I create an HTML prototype from a design brief without hosted design tools?

To create an HTML prototype from a brief without hosted tools, generate self-contained local HTML files with embedded CSS and JavaScript. This approach builds landing pages, interactive mockups, and slide decks directly within CLI or API workflows.

Can I build a slide deck or landing page using local HTML files?

Yes, you can build a slide deck or landing page using local HTML files. The process outputs polished, self-contained artifacts featuring embedded styles and scripts, ensuring interactive mockups and motion studies function locally without external dependencies.

How does context-driven UI design work when modifying repo-based components?

Context-driven UI design works by reading existing repository files, brand cues, and design tokens before generating HTML. This ensures the resulting local artifacts and component explorations match the product's established visual language and layout requirements.

What is the best way to explore design variants for a landing page mockup?

The best way to explore design variants for a landing page mockup is generating multiple strong directions in a single local HTML file. Adding a small Tweaks panel allows interactive adjustments, enabling local verification of layout and motion states.

Do I need external dependencies to verify interactive motion states in an HTML prototype?

No, you do not need external dependencies to verify interactive motion states in an HTML prototype. The artifact is self-contained with embedded JavaScript and CSS, allowing local verification of accessibility-minded interactions and tweak controls.

Why use local HTML files for component explorations instead of platform-specific design tools?

Use local HTML files for component explorations to remove platform-specific plumbing while preserving a thoughtful design process. This method allows direct repo-based UI modifications and variant verification in environments where hosted design tools are unavailable.