skills.rest
skkeoriw
skkeoriwCOMMUNITY
Explore all skills by this author →
GitHub

claude-design

Design self-contained HTML artifacts with embedded CSS and JavaScript.

Updated May 13, 2026
Search Tags:#design#html#ui/ux#cli#artifacts#prototype
One-click install
npx skills add https://github.com/skkeoriw/hermes-brain --skill claude-design-skkeoriw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/skkeoriw/hermes-brain/tree/main/brain/hermes-home/skills/creative/claude-design
Command: npx skills add https://github.com/skkeoriw/hermes-brain --skill claude-design-skkeoriw

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

The skill resolves the challenge of designing high-fidelity HTML artifacts in CLI/API environments, allowing agents to create detailed landing pages, prototypes, and presentations without access to the full Claude Design web UI.

Core Features & Use Cases

  • HTML Artifacts Creation: Develop comprehensive local HTML files with embedded CSS and JavaScript.
  • Design Systems Integration: Incorporate brand or design system elements, providing visual consistency across deliverables.
  • Variants and Prototypes: Explore design options by generating multiple variants, with support for interactions and responsiveness.

Quick Start

Design a new landing page 'Home Page.html' based on the given brand guidelines and source material.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I generate HTML prototypes in a CLI or API environment without a visual editor?▼

You can design high-fidelity HTML artifacts in a CLI or API context by providing a text brief. The skill constructs self-contained local files with embedded CSS, JavaScript, and interactive components without needing a visual design UI.

Can I create interactive landing pages and component libraries from scratch using an automated agent?▼

Yes, you can create landing pages and component libraries from scratch. The skill applies visual vocabularies to build responsive HTML artifacts, supporting multiple design variants with interactions directly from your brief.

What is the best way to maintain brand visual consistency when generating design variants programmatically?▼

The best way to maintain brand consistency is by incorporating design system elements. The skill applies specific visual vocabularies to ensure your generated landing pages and prototypes remain visually consistent across all variants.

Does this approach support building self-contained local HTML files with embedded JavaScript and CSS?▼

Yes, building self-contained local HTML files is supported. The skill constructs complete artifacts from scratch with fully embedded CSS and JavaScript, ensuring your prototypes and presentations function independently.

Are there limitations when designing high-fidelity presentations and decks in an API scenario?▼

The main limitation when designing presentations in an API scenario is the absence of a visual UI for real-time tweaking. The skill relies on precise brief interpretation and internal state handling to maintain consistency across generated decks.

Related Skills

Explore More Design & Creative Skills→
SnatchPlaySnatchPlay

brandkit

Generate brand guidelines and logo systems from user input.

Community
Advanced
lenadlmlenadlm

architecture-diagram

Generate dark-themed SVG architecture diagrams as self-contained HTML files.

Community
Intermediate
juliochwdjuliochwd
1

artifacts-builder

Develops interactive HTML artifacts with React, Tailwind CSS, and shadcn/ui components for claude.ai.

Community
Intermediate
InverterNetworkInverterNetwork

claude-design

Generate self-contained HTML design artifacts and interactive prototypes in CLI or API environments.

Official
Advanced