skills.rest
hungthinh04
hungthinh04COMMUNITY
Explore all skills by this author →
GitHub

claude-design

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create high-quality one-off design artifacts in environments where the hosted Claude Design web UI is unavailable, so you can still produce polished, usable HTML deliverables from a brief.

Core Features & Use Cases

  • Design Process Guidance: Shapes a thoughtful workflow from brief intake to context gathering, system definition, build, and verification.
  • Artifact Creation: Produces self-contained HTML for landing pages, prototypes, decks, motion studies, component explorations, and design-system previews.
  • Repo-Aware Design Work: Adapts to existing repositories by reading source files, matching the current visual vocabulary, and implementing changes in the repo's real stack when needed.

Quick Start

Create a self-contained HTML artifact for my brief and save it as a local file with embedded styles and scripts if needed.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I generate a polished HTML landing page from a brief?▼

Generating a polished HTML landing page from a brief involves a workflow of context gathering, system definition, building, and verification. The resulting self-contained HTML file includes embedded styles and scripts for local delivery.

Can I create HTML prototypes that match my existing repository's visual vocabulary?▼

Yes, you can create HTML prototypes that match your existing repository by reading source files and adapting to the current visual vocabulary. The workflow can implement changes directly in the repository's real stack when needed, ensuring brand-sensitive visual direction.

What is the best way to build self-contained HTML design artifacts without a web UI?▼

The best way to build self-contained HTML design artifacts without a web UI is through a structured workflow in CLI or API environments. This process covers brief intake, context gathering, system definition, building, and verification to deliver standalone files.

Does this design workflow support creating motion studies and component explorations?▼

Yes, this design workflow supports creating motion studies and component explorations. It produces self-contained HTML artifacts with responsive CSS and optional embedded scripts, delivering polished visual direction for these explorations.

How do I hand off design tokens and specifications for a design-system preview?▼

To hand off design tokens for a design-system preview, you generate self-contained HTML artifacts that establish brand-sensitive visual direction. The workflow optionally coordinates with related design skills for precise design-system specification and token handoff.

When should I not use a one-off HTML artifact approach for UI design?▼

You should not use a one-off HTML artifact approach for UI design when your project requires multi-page application architecture or complex state management. This workflow is optimized for single-file outputs like landing pages, decks, and component explorations.

Related Skills

Explore More Design & Creative Skills→
SL-A-SHSL-A-SH

teach-impeccable

Scan repository files and write a Design Context to impeccable.md.

Community
Intermediate
hotriluanhotriluan

ck:stitch

Generate UI designs from natural language prompts and export Tailwind/HTML with DESIGN.md.

Community
Advanced
andrewle9510andrewle9510

fd-design-philosophy

Define visual identity, design principles, and aesthetic direction for branding systems.

Community
Basic
jaredcroxtonjaredcroxton

claude-design

Generate standalone HTML design artifacts for CLI/API agents.

Community
Advanced