skills.rest
srivtx
srivtxCOMMUNITY
Explore all skills by this author →
Website𝕏@srivtxGitHub

claude-design

Create HTML artifacts through a structured design process with iterative refinement.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides expert design guidance and process for creating HTML artifacts, including landing pages, prototypes, and decks, without the need for a hosted web UI.

Core Features & Use Cases

  • Design Process Guidance: Offers a structured approach to design, including context gathering, system definition, and artifact creation.
  • HTML Artifacts: Generates HTML files for landing pages, prototypes, decks, and more.
  • Use Case: When you need to create a high-fidelity design for a landing page or a product prototype, this Skill can help you through the entire process.

Quick Start

Run the 'claude-design' skill to start the design process. Follow the prompts to provide context and receive feedback on your design ideas.

Frequently Asked Questions about claude-design

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

FAQPage Schema
What is the best way to create HTML prototypes without a hosted web UI?▼

Yes, you can generate HTML landing pages locally in a CLI or API environment. This skill outputs high-fidelity HTML files by guiding you through context gathering, system definition, and iterative refinement without requiring a hosted web interface.

How do I start designing HTML artifacts through a structured UI/UX process?▼

To start designing HTML artifacts, run the skill in your local environment and follow the prompts to provide context. It will guide you step-by-step through system definition, UI/UX design implementation, and iterative refinement to produce the final output.

Does this design process integrate with my existing design system?▼

Yes, the design process explicitly incorporates design system integration. It defines your design system during the creation phase to ensure the generated HTML/CSS/JS artifacts align with your established UI/UX components and guidelines.

Do I need local tools and environment setup to generate HTML design files?▼

Yes, you need local tools and environment setup to generate HTML design files. This skill is designed for CLI/API environments, requiring local configuration to handle the HTML/CSS/JS implementation and artifact creation process.

What types of HTML artifacts can I create with this design process?▼

You can create HTML artifacts including landing pages, interactive prototypes, and presentation decks. The process focuses on UI/UX design and HTML/CSS/JS implementation to produce high-fidelity designs for various digital formats.

Related Skills

Explore More Design & Creative Skills→
NITISH-gitbitNITISH-gitbit

claude-design

Generate custom HTML artifacts with embedded CSS and JavaScript.

Community
Intermediate
jazzenchenjazzenchen
511

va-preview

Create live preview URLs for local development servers and static HTML files.

Community
Intermediate
JZKK720JZKK720

redesign-existing-projects

Audit and redesign existing websites and applications while maintaining functionality.

Community
Advanced
oferhalevioferhalevi
1

web-artifacts-builder

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

Community
Intermediate