skills.rest
rickyananda
rickyanandaCOMMUNITY
Explore all skills by this author →
GitHub

claude-design

Design local HTML artifacts with embedded CSS and JavaScript from briefs or screenshots.

1|Updated May 18, 2026
Search Tags:#design#html#landing page#visual design#prototype#deck
One-click install
npx skills add https://github.com/rickyananda/hermes-skills --skill claude-design-rickyananda
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/rickyananda/hermes-skills/tree/main/creative/claude-design
Command: npx skills add https://github.com/rickyananda/hermes-skills --skill claude-design-rickyananda

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you create high-quality one-off design artifacts in a CLI or API environment, preserving strong taste and structure without relying on hosted design tooling.

Core Features & Use Cases

  • Artifact Design: Build landing pages, prototypes, component explorations, motion studies, and slide decks as local HTML deliverables.
  • Context-Aware Design: Read repo files, brand docs, screenshots, tokens, and UI kits before designing so the result fits the real product context.
  • Variation and Verification: Explore multiple directions when needed, then verify the output locally before reporting it as complete.

Quick Start

Create a polished local HTML artifact for my brief, using the repository context and a thoughtful design system.

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 landing pages from a design brief?▼

Generating HTML landing pages from a brief involves reading context like brand docs and repository files, making context-aware design decisions, and producing a single local HTML file with embedded CSS and JavaScript.

Can I create interactive prototypes and motion studies as local HTML files?▼

Yes, you can create interactive prototypes and motion studies as local HTML files. The process embeds CSS and JavaScript directly into the artifact to ensure high visual taste and interaction fidelity without relying on hosted design tooling.

How do I build slide decks using HTML and CSS?▼

Building slide decks using HTML and CSS requires creating a one-off local artifact. The design process reads existing UI kits and tokens to ensure the final HTML deliverable matches your real product context before verification.

What is the best way to design HTML components that match my existing brand context?▼

The best way to design matching HTML components is to feed brand documents, screenshots, and design tokens into the design process. This context-aware approach ensures the generated HTML artifact fits seamlessly into your established product environment.

Do I need hosted design tools to create high-fidelity visual prototypes?▼

No, you do not need hosted design tools to create high-fidelity visual prototypes. You can generate polished HTML artifacts locally by embedding CSS and JavaScript, preserving strong visual taste and structure entirely within your CLI or API environment.

Related Skills

Explore More Design & Creative Skills→
anxiety135790anxiety135790

claude-design

Create responsive HTML/CSS/JS design artifacts from briefs and repositories.

Community
Advanced
paxlabs-incpaxlabs-inc
7

claude-design

Generate self-contained HTML design artifacts with CSS and JavaScript.

Community
Advanced
AlvaroBianoAlvaroBiano

claude-design

Convert design briefs into self-contained HTML artifacts with embedded CSS and JavaScript.

Community
Advanced
ChangZhou-xjChangZhou-xj

claude-design

Transform a design brief into a self-contained local HTML artifact.

Community
Intermediate