skills.rest
heysuhas
heysuhasCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

claude-design

Generate self-contained HTML design artifacts for landing pages and prototypes.

2|1|Updated Jul 14, 2026
Search Tags:#design#ui#html#prototype#creative#ux#artifact
One-click install
npx skills add https://github.com/heysuhas/hermes_cli --skill claude-design-heysuhas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/heysuhas/hermes_cli/tree/main/skills/creative/claude-design
Command: npx skills add https://github.com/heysuhas/hermes_cli --skill claude-design-heysuhas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the challenge of producing high-quality, professional design artifacts like landing pages, prototypes, and decks within a CLI or API-based agent environment, avoiding the generic AI design slop often produced by default.

Core Features & Use Cases

  • Surface-First Design: Forces a commitment to a specific UI archetype (Monitor, Operate, Compare, etc.) to ensure compositional integrity before styling.
  • Local Artifact Generation: Produces self-contained, portable HTML/CSS/JS files that are ready for immediate browser review.
  • Slop Diagnostic: Includes a built-in self-audit mechanism to identify and remove common AI design patterns like unearned blurs, generic gradients, and feature-tile grids.

Quick Start

Use the claude-design skill to create a responsive landing page prototype for a new product dashboard using a Monitor surface composition.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I generate high-fidelity HTML prototypes in a CLI environment?▼

Generate high-fidelity HTML prototypes in a CLI environment by using surface-first composition principles to commit to a UI archetype, producing self-contained HTML/CSS/JS files ready for immediate browser review.

What is surface-first composition for UI/UX design tasks?▼

Surface-first composition is a design approach that forces commitment to a specific UI archetype, such as Monitor or Compare, ensuring compositional integrity and professional visual hierarchy before applying any styling.

How can I avoid generic AI design patterns when creating landing pages?▼

Avoid generic AI design patterns when creating landing pages by applying a built-in slop diagnostic mechanism, which identifies and removes common AI design artifacts like unearned blurs, generic gradients, and feature-tile grids.

Can I create self-contained HTML design artifacts for decks and prototypes locally?▼

Yes, you can create self-contained HTML design artifacts for decks and prototypes locally, generating portable HTML/CSS/JS files that require no external dependencies and are ready for immediate browser review.

Does the generated HTML for product dashboards require external dependencies to render?▼

No, the generated HTML for product dashboards requires no external dependencies to render, as the artifact generation process produces self-contained, portable HTML, CSS, and JavaScript files for local verification.

What is the best way to explore UI components for interactive mockups?▼

The best way to explore UI components for interactive mockups is using a structured design process that enforces professional visual hierarchy through surface-first composition before generating local, self-contained HTML artifacts.

Related Skills

Explore More Design & Creative Skills→
majesticlabs-devmajesticlabs-dev
47

win-back

Design win-back campaigns with segmentation, email sequences, and automation triggers.

Official
Advanced
zivtechzivtech

graphic-design-critic

Audit graphic assets for brand consistency and production readiness.

Official
Advanced
ghufronbagaskaraghufronbagaskara

claude-design

Generate self-contained HTML design artifacts for CLI and API environments.

Community
Advanced
pinion05pinion05
3

frontend-design

Generate production-ready HTML/CSS/JS or framework-specific frontend components with cohesive typography, color, and motion.

Community
Advanced