skills.rest
kngender5
kngender5COMMUNITY
Explore all skills by this author →
GitHub

claude-design

Guide HTML artifact design with UX/UI principles and in-browser previews.

Updated Jun 4, 2026
Search Tags:#design#ui#html#web design#prototype#html artifact#ux
One-click install
npx skills add https://github.com/kngender5/hermes --skill claude-design-kngender5
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/kngender5/hermes/tree/main/skills/creative/claude-design
Command: npx skills add https://github.com/kngender5/hermes --skill claude-design-kngender5

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps to design one-off HTML artifacts, focusing on the design process and taste, providing the user with the tools to create custom, high-quality designs for landing pages, prototypes, decks, and more.

Core Features & Use Cases

  • Custom HTML Artifacts: Design custom HTML designs such as landing pages, prototypes, decks, and component labs.
  • Design System Integration: Incorporate design systems for a consistent visual language.
  • Multi-Platform Support: Compatible with Linux, MacOS, and Windows platforms.
  • Use Case: For instance, if a user requires a new landing page design, the claude-design skill can assist in creating a professional and cohesive design, ensuring that the layout, typography, colors, and interactions are optimized for a great user experience.

Quick Start

Create a design for a landing page using the claude-design skill.

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 with good UX and visual design?▼

To create a custom HTML landing page with good UX, this skill provides design process and taste guidance, ensuring layout, typography, colors, and interactions are optimized for a high-quality user experience.

Can I integrate an existing design system into my HTML artifacts?▼

Yes, you can incorporate existing design systems into your HTML artifacts. This integration ensures a consistent visual language across landing pages, prototypes, and presentation decks.

Does this HTML design approach work on Linux, MacOS, and Windows?▼

Yes, this HTML design approach offers multi-platform support and is fully compatible with Linux, MacOS, and Windows environments for creating local artifacts.

What is the best way to design one-off HTML presentations or component labs?▼

The best way to design one-off HTML presentations or component labs is using a CLI or API environment that emphasizes UX/UI design principles, utilizing local file handling and in-browser previewing for refinement.

Why do my locally developed HTML prototypes lack visual consistency and polish?▼

Your HTML prototypes may lack polish due to missing taste guidance. This skill solves that by offering design process guidance and optimizing layout, typography, and interactions for local artifacts.

Related Skills

Explore More Design & Creative Skills→
tyk-labtyk-lab

using-git-worktrees

Create an isolated git worktree for feature development with safety checks.

Community
Advanced
www-zaq-aiwww-zaq-ai
66

extract

Extracts UI slices from HTML and generates reusable components for ZaqWeb.

Official
Advanced
JZKK720JZKK720

redesign-existing-projects

Audit and redesign existing websites and applications while maintaining functionality.

Community
Advanced
zunyiqingfeng-codezunyiqingfeng-code
2

web-design-engineer

Create HTML/CSS/JavaScript/React web artifacts with design-system coherence.

Community
Advanced