skills.rest
jordanhubbard
jordanhubbardCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

claude-design

Design custom HTML artifacts using a structured design process.

9|3|Updated May 18, 2026
Search Tags:#landing page#design system#prototype#html design#ux ui
One-click install
npx skills add https://github.com/jordanhubbard/mac --skill claude-design-jordanhubbard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/jordanhubbard/mac/tree/main/src/mac/_hermes/skills/creative/claude-design
Command: npx skills add https://github.com/jordanhubbard/mac --skill claude-design-jordanhubbard

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill simplifies the process of creating one-off HTML artifacts, such as landing pages, prototypes, and decks, by providing a structured design process and tooling tailored for CLI/API environments.

Core Features & Use Cases

  • Design Process Guidance: Offers a step-by-step guide to design artifacts from scratch, ensuring a thoughtful and contextually appropriate outcome.
  • Design System Integration: Integrates with existing design systems and tokens, allowing for consistent and brand-aligned designs.
  • Use Case: For a product team looking to create a new landing page, this Skill can help design and generate a high-fidelity HTML file that matches the brand's design language.

Quick Start

To design a landing page, use the claude-design skill with the following command: claude-design create-landing-page

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 from scratch?▼

Generating an HTML prototype involves using a step-by-step design process tailored for CLI/API environments. This approach ensures your prototype is thoughtfully designed and matches your existing design tokens for brand consistency.

Can I integrate my existing design system tokens into the generated HTML?▼

Yes, you can use existing design systems and tokens with this HTML generation process. Integrating your design tokens ensures the final custom HTML artifacts remain perfectly aligned with your established brand guidelines.

Do I need HTML, CSS, and JavaScript knowledge to use this design process?▼

Yes, knowledge of HTML, CSS, and JavaScript is required for implementation. The design process operates within CLI/API environments to generate custom HTML artifacts, requiring you to understand these web technologies to implement the final output.

What is the best way to design one-off HTML artifacts like decks and prototypes?▼

The best way to design one-off HTML artifacts like decks is to use a structured design process that integrates with your existing design systems. This method provides step-by-step guidance to ensure high-fidelity, brand-aligned outputs.

Related Skills

Explore More Design & Creative Skills→
Quill-AgentQuill-Agent
3

claude-design

Design custom HTML artifacts with local HTML, CSS, and JavaScript.

Community
Advanced
Monjyu1101Monjyu1101
1

claude-design

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

Community
Advanced
kentojekentoje
2

ui-skills

Enforce UI constraints for accessible agent interfaces using Tailwind defaults.

Community
Basic
oferhalevioferhalevi
1

web-artifacts-builder

Generate self-contained HTML, CSS, and JavaScript web apps that run in the browser.

Community
Intermediate