skills.rest
aivos-xie
aivos-xieCOMMUNITY
Explore all skills by this author →
GitHub

claude-design

Create custom HTML artifacts like landing pages, prototypes, and decks.

1|Updated Jun 9, 2026
Search Tags:#design#ui#html#landing page#prototyping#prototype#ux
One-click install
npx skills add https://github.com/aivos-xie/hermes-skills --skill claude-design-aivos-xie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/aivos-xie/hermes-skills/tree/main/creative/claude-design
Command: npx skills add https://github.com/aivos-xie/hermes-skills --skill claude-design-aivos-xie

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the process of designing one-off HTML artifacts, such as landing pages, prototypes, and decks, providing a seamless design experience regardless of the environment.

Core Features & Use Cases

  • Design Process and Taste: Offers guidance on scoping briefs, gathering context, and producing thoughtful HTML artifacts.
  • Design Systems: Integrates with design-md and popular-web-designs for consistent design systems and brand looks.
  • Use Case: Ideal for creating custom landing pages, interactive prototypes, or HTML presentations without relying on hosted tools.

Quick Start

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

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I create a custom HTML landing page without relying on hosted design tools?▼

To create a custom HTML landing page without hosted tools, you can use this Skill to generate design artifacts directly. It provides guidance on scoping briefs and producing thoughtful HTML, CSS, and JavaScript implementations.

What is the best way to build interactive HTML prototypes in a CLI or API environment?▼

Building interactive HTML prototypes in a CLI or API environment is supported by this Skill. It streamlines the creation of one-off HTML artifacts, seamlessly integrating design guidance into your development workflow.

Do I need prior knowledge of HTML, CSS, and JavaScript to use this design Skill?▼

Yes, you need knowledge of HTML, CSS, and JavaScript to use this design Skill. It provides design guidance and tools for creating custom artifacts, but requires you to implement the final code.

Can I integrate design systems and brand looks when generating HTML artifacts?▼

Yes, you can integrate design systems and brand looks when generating HTML artifacts. The Skill integrates with design-md and popular-web-designs to ensure consistent visual systems across your landing pages and prototypes.

How does this approach compare to using standard web design platforms for one-off HTML decks?▼

Unlike standard web design platforms, this approach generates one-off HTML decks directly within your CLI or API environment. It provides design process guidance and taste without relying on external hosted tools.

What types of HTML artifacts can I generate using this custom design workflow?▼

You can generate custom HTML artifacts such as landing pages, interactive prototypes, and HTML presentation decks. The workflow supports creating these design artifacts with integrated brand and system consistency.

Related Skills

Explore More Design & Creative Skills→
CyapstayeCyapstaye
9

popular-web-designs

Generate HTML and CSS using design tokens from 54 real-world web design systems.

Community
Intermediate
yolo-labs-hqyolo-labs-hq

frontend-design

Generate production-ready frontend components and pages with HTML/CSS/JS.

Official
Advanced
LutimiLutimi

ckm:ui-styling

Integrate shadcn/ui, Radix primitives, and Tailwind CSS into React interfaces.

Community
Advanced
zli5460zli5460
2

claude-design

Generate self-contained HTML prototypes with embedded CSS and JS.

Community
Intermediate