claude-design

Generate custom HTML artifacts for UX/UI design and web prototypes.

1|Updated Feb 17, 2026
One-click install
npx skills add https://github.com/brittaniebuffiecsu/zerogravityclaw --skill claude-design-brittaniebuffiecsu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/brittaniebuffiecsu/zerogravityclaw/tree/main/src/hermes-core/skills/creative/claude-design
Command: npx skills add https://github.com/brittaniebuffiecsu/zerogravityclaw --skill claude-design-brittaniebuffiecsu

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of designing and generating high-quality HTML artifacts, such as landing pages, prototypes, and design systems, with a focus on precision and customization.

Core Features & Use Cases

  • Custom HTML Design: Create tailored HTML artifacts for various needs, including landing pages, prototypes, and design systems.
  • Platform Support: Compatibility with Linux, MacOS, and Windows.
  • Design Principles: Follows design principles like starting from context, not vibes, and focusing on surface archetypes for effective design.
  • Delivery Options: Offers local HTML files, self-contained CSS and JavaScript, and verification using local methods.

Quick Start

Use the claude-design skill to create a design for a new product feature by providing context, desired functionality, and specifying any design systems or brand guidelines to follow.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I generate custom HTML artifacts for web prototypes?

To generate custom HTML artifacts, provide design context, desired functionality, and any specific design systems to follow. The skill outputs self-contained local HTML files with embedded CSS and JavaScript, ready for immediate verification.

What is the process for building a design system from context?

Building a design system starts from gathering design context rather than vibes, focusing on surface archetypes to ensure effective and precise UX/UI design. This approach generates structured HTML artifacts tailored to your specific brand guidelines and functional requirements.

Can I use this to create HTML landing pages on Windows?

Yes, you can create custom HTML landing pages on Windows, as well as Linux and MacOS. The skill operates primarily in CLI/API environments to generate and deliver self-contained HTML files locally across all three platforms.

What's the best way to design UX/UI prototypes with local file delivery?

The best way to design local UX/UI prototypes is using a CLI/API environment that generates self-contained HTML files with embedded CSS and JavaScript. This allows for local file delivery and immediate verification without external dependencies.

Do I need specific design systems to generate custom HTML artifacts?

You do not need specific design systems to generate custom HTML artifacts, but specifying existing brand guidelines helps tailor the output. The skill can choose the right design system based on the context and surface archetypes you provide.