skills.rest
lenadlm
lenadlmCOMMUNITY
Explore all skills by this author →
𝕏@lenadlmGitHub

claude-design

Design custom HTML artifacts with embedded CSS and JavaScript.

Updated Oct 23, 2024
Search Tags:#design#ui#html#prototype#creative#ux#artifact
One-click install
npx skills add https://github.com/lenadlm/docker --skill claude-design-lenadlm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/lenadlm/docker/tree/main/hermes-skills/skills/creative/claude-design
Command: npx skills add https://github.com/lenadlm/docker --skill claude-design-lenadlm

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps users design one-off HTML artifacts like landing pages, prototypes, and decks, providing a design process and taste without the need for a hosted web UI.

Core Features & Use Cases

  • Design Process: Offers a structured approach to design, including gathering context, defining the design system, and choosing the right format.
  • HTML Artifacts: Generates self-contained HTML files with embedded CSS and JavaScript, suitable for various design tasks.
  • Use Case: If you need a custom landing page or a high-fidelity prototype, this Skill can help you create it with the right design considerations.

Quick Start

Use the claude-design skill to create a landing page for a new product.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I design custom HTML artifacts without a hosted web UI?▼

You can design custom HTML artifacts by generating self-contained HTML files with embedded CSS and JavaScript, using a structured design process that focuses on user experience and visual taste without needing a hosted web UI.

What is the best way to create a high-fidelity landing page prototype?▼

The best way to create a high-fidelity landing page prototype is to follow a structured design process that gathers context, defines the design system, and generates self-contained HTML with responsive design and interactive elements.

Does this HTML artifact design approach support responsive design and interactive elements?▼

Yes, designing HTML artifacts supports embedding interactive elements and responsive design by generating local HTML, CSS, and JavaScript within a single self-contained file for landing pages and prototypes.

Can I use this process to design decks and presentations, or is it only for landing pages?▼

Yes, you can use this design process for decks and presentations. It is suitable for designing one-off HTML artifacts including landing pages, prototypes, and decks, providing design taste and structure for various formats.

Do I need any external dependencies to generate self-contained HTML files?▼

No external dependencies are required. The design process generates self-contained HTML files with embedded CSS and JavaScript, allowing you to create custom artifacts directly without relying on external libraries or frameworks.

When should I not use a self-contained HTML artifact for prototyping?▼

You should avoid using self-contained HTML artifacts when your project requires a hosted web UI, server-side rendering, or dynamic database integration, as this approach focuses on one-off local files with embedded code.

Related Skills

Explore More Design & Creative Skills→
JuanMS20JuanMS20

claude-design

Translates design briefs into self-contained HTML artifacts for CLI/API environments.

Community
Advanced
taracodlabstaracodlabs
779

p5js

Create self-contained p5.js sketches as standalone HTML files.

Official
Intermediate
JZKK720JZKK720

redesign-existing-projects

Audit and redesign existing websites and applications while maintaining functionality.

Community
Advanced
freedomw1987freedomw1987
2

claude-design

Generate self-contained HTML design artifacts in CLI or API environments.

Community
Intermediate