skills.rest
anxiety135790
anxiety135790COMMUNITY
Explore all skills by this author →
GitHub

claude-design

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Claude Design helps you create high-quality one-off design artifacts in environments where the hosted Claude Design app is unavailable, so you can still produce thoughtful HTML-based mockups, prototypes, decks, and visual explorations from a plain agent workflow.

Core Features & Use Cases

  • Design process guidance: It helps scope the brief, gather context, choose the right format, and avoid generic AI-generated design output.
  • Artifact creation: It is suited for landing pages, prototypes, slide decks, motion studies, component explorations, and design-system previews.
  • Repo-aware execution: When an existing repository is provided, it encourages reading the actual source files, theme tokens, styles, and components before designing.
  • Use case: A product team needs a polished interactive prototype for a new onboarding flow, and this Skill can guide the agent to build a self-contained HTML artifact with strong hierarchy, responsive behavior, and verification.

Quick Start

Use the claude-design skill to create a self-contained HTML prototype for a new product landing page based on the repository’s existing styles and components.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I turn a brief into a polished HTML prototype?▼

To turn a brief into a polished HTML prototype, provide your project context, brand guidelines, or repository details. The Skill scopes the brief, gathers visual context, and generates self-contained, responsive HTML/CSS/JS artifacts.

Can I generate a landing page design that matches my existing repository styles?▼

Yes, you can generate a landing page design matching existing repository styles. The Skill reads your actual source files, theme tokens, and components before designing to ensure the output is repo-aware and visually consistent.

What is the best way to create self-contained HTML design artifacts in a CLI environment?▼

The best way to create self-contained HTML design artifacts in a CLI environment is using an agent-driven workflow that scopes the brief and outputs responsive HTML/CSS/JS, which bypasses the need for a hosted visual design app.

Does this approach support creating slide decks and motion studies in HTML?▼

Yes, this approach supports creating slide decks and motion studies in HTML. It is suited for one-off design artifacts including interactive prototypes, component explorations, and design-system previews with responsive behavior.

How does the design process avoid generic AI-generated visual output?▼

It avoids generic AI-generated visual output by enforcing a structured design process that gathers specific context, scopes the brief, chooses the right format, and verifies hierarchy and responsive behavior before delivering the final HTML artifact.

Do I need to provide a full repository to build a design-system preview?▼

No, you do not need to provide a full repository to build a design-system preview, but providing one is encouraged. Supplying source files and theme tokens allows the agent to read existing styles and generate more accurate, context-aware HTML.

Related Skills

Explore More Design & Creative Skills→
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-brand-demo-gen

Convert Brand Guideline Markdown into standalone HTML demos with inline CSS.

Community
Advanced
Monjyu1101Monjyu1101
1

claude-design

Translate Claude Design prompts into self-contained HTML prototypes for CLI/API workflows.

Community
Advanced
ShubhamX-AIShubhamX-AI

ui-ux-premium

Apply premium UI/UX guidelines to existing components and pages.

Community
Intermediate
davpatel605-beepdavpatel605-beep

claude-design

Create high-fidelity HTML design artifacts from design briefs.

Community
Advanced