claude-design

Design custom HTML artifacts with embedded CSS and JavaScript.

Updated Apr 15, 2026
One-click install
npx skills add https://github.com/juliuss1907/knowledge-base --skill claude-design-juliuss1907
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/juliuss1907/knowledge-base/tree/main/.hermes/skills/creative/claude-design
Command: npx skills add https://github.com/juliuss1907/knowledge-base --skill claude-design-juliuss1907

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the design process for one-off HTML artifacts, such as landing pages, prototypes, and decks, providing a structured approach to design creation.

Core Features & Use Cases

  • Design Process Guidance: Offers a step-by-step guide for designing from scratch, focusing on context, system definition, and format selection.
  • Artifact Creation: Generates complete local HTML files with embedded CSS and JavaScript, suitable for various design deliverables.
  • Use Case: For a user needing a custom landing page for a new product, this Skill can assist in creating a high-fidelity, interactive prototype with design-system consistency.

Quick Start

Use the claude-design skill to create a landing page for a new product concept.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I design a custom HTML landing page from scratch?

To design a custom HTML landing page, this Skill employs a structured approach focusing on context gathering, system definition, and format selection. It outputs a complete local HTML file with embedded CSS and JavaScript suitable for high-fidelity prototypes.

Can I generate interactive HTML prototypes with embedded CSS and JavaScript?

Yes, you can generate interactive HTML prototypes that include embedded CSS and JavaScript. The Skill creates complete local HTML files designed with process and taste, ensuring design-system consistency for one-off deliverables like decks and prototypes.

What is the best way to structure UI/UX design for one-off HTML artifacts?

The best way to structure UI/UX design for one-off HTML artifacts is through a step-by-step process covering context, system definition, and format selection. This approach ensures design-system consistency when creating custom landing pages or interactive decks.

Do I need external libraries to create local HTML files with this design process?

No external libraries are needed to create local HTML files. The Skill outputs complete local HTML files with embedded CSS and JavaScript, operating independently without any dependencies to streamline the design creation process.

When should I use a structured design process for HTML artifact creation?

You should use a structured design process for HTML artifact creation when you need custom landing pages, prototypes, or decks. This ensures expert taste and design-system consistency rather than generating unstructured or disconnected code.