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

Ready to run

npx skills add https://github.com/skkeoriw/hermes-brain --skill claude-design-skkeoriw

💬 Prompt for ChatGPT / Claude Chat▼

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.