skills.rest
humanerd-drew
humanerd-drewOFFICIAL
Explore all skills by this author →
GitHub

claude-design

Design custom HTML artifacts using brand tokens and system files.

2|7|Updated Jun 19, 2026
Search Tags:#landing page#design system#prototype#html design#ux ui
One-click install
npx skills add https://github.com/humanerd-drew/opencode-drewgent --skill claude-design-humanerd-drew
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/humanerd-drew/opencode-drewgent/tree/main/skills/creative/claude-design
Command: npx skills add https://github.com/humanerd-drew/opencode-drewgent --skill claude-design-humanerd-drew

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the creation of one-off HTML artifacts, like landing pages, prototypes, and decks, by providing a personalized design process and aesthetic.

Core Features & Use Cases

  • Custom HTML Design: Generate unique landing pages, prototypes, and decks tailored to specific needs.
  • Design System Integration: Leverages design tokens and system files to ensure consistent visual elements.
  • Process Flow: Offers a structured design process that includes gathering context, defining design systems, and creating artifacts.

Quick Start

Start the design process for a new landing page by running the claude-design skill command.

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 custom HTML landing page with a structured design process?▼

You can generate a custom HTML landing page by initiating a structured design process that gathers context, defines visual language, and integrates brand tokens to deliver unique UI and UX artifacts.

What is the best way to ensure design consistency across one-off HTML prototypes and decks?▼

Ensuring design consistency across HTML prototypes is achieved by leveraging design system integration, applying specific brand tokens and system files to maintain uniform visual elements throughout each artifact.

Can I define my own design tokens and visual language for HTML UI tasks?▼

Yes, you can define your own design tokens and visual language for HTML UI tasks. The Skill utilizes specific guidelines to define visual language, motion, interaction, and typography for effective communication.

How do I start building a prototype using the claude-design skill command?▼

Start building a prototype by running the `claude-design skill` command, which triggers a personalized design process to gather context and create custom HTML artifacts tailored to your specific needs.

Does this approach work for creating presentation decks in addition to standard web pages?▼

Yes, this approach works for creating presentation decks in addition to standard web pages. It delivers one-off HTML artifacts applicable to various UI and UX tasks, including decks, landing pages, and prototypes.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
heysuhasheysuhas
2

claude-design

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

Community
Advanced
elsolalelsolal
1

high-end-visual-design

Generate UI/UX designs with Double-Bezel nesting and motion choreography.

Community
Advanced
ldzhhxxldzhhxx
1

claude-design

Design custom HTML artifacts for landing pages, prototypes, and presentations.

Community
Advanced