skills.rest
guccang
guccangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

claude-design

Create high-fidelity HTML design artifacts for digital products and interactive experiences.

3|1|Updated Apr 19, 2024
Search Tags:#design#ui#html#landing page#prototype#ux#artifact
One-click install
npx skills add https://github.com/guccang/blogclaw --skill claude-design-guccang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/guccang/blogclaw/tree/main/cmd/hermes-agent/vendor/hermes_runtime/skills/creative/claude-design
Command: npx skills add https://github.com/guccang/blogclaw --skill claude-design-guccang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps agents create thoughtful, high-fidelity design artifacts without relying on hosted design tools, replacing vague UI generation with a structured design process.

Core Features & Use Cases

  • Design Workflow Guidance: Provides a repeatable process for scoping briefs, gathering context, defining visual systems, and validating artifacts.
  • HTML Artifact Creation: Supports landing pages, prototypes, decks, dashboards, component explorations, and interactive design studies with self-contained deliverables.
  • Use Case: Create a product prototype from a brief by selecting an appropriate format, applying intentional layout and typography choices, and verifying the resulting local HTML artifact.

Quick Start

Use the claude-design skill to create a high-fidelity landing page prototype for my product idea with a complete local HTML artifact.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I create high-fidelity HTML prototypes from a design brief?▼

Creating high-fidelity HTML prototypes from a design brief requires a structured workflow that scopes requirements, defines a visual system, and generates local HTML artifacts. This process replaces vague UI generation with intentional layout and typography choices.

What is the best way to build a landing page artifact without hosted design tools?▼

Building a landing page artifact without hosted design tools involves applying a repeatable design process to generate self-contained local HTML. You gather context, define the visual system, and validate the interactive artifact locally rather than relying on external software.

Can I use this workflow to generate interactive dashboards and component explorations?▼

Yes, you can use this workflow to generate interactive dashboards and component explorations. The structured visual design workflow supports creating self-contained local HTML artifacts for various digital products and interactive experiences.

Do I need external dependencies to generate responsive HTML design artifacts?▼

No, you do not need external dependencies to generate responsive HTML design artifacts. The workflow handles context gathering, design system definition, and responsive implementation directly to produce self-contained local files.

How does a structured design workflow improve UI artifact generation?▼

A structured design workflow improves UI artifact generation by enforcing context gathering, visual system definition, and verification practices. This ensures the resulting local HTML artifacts have intentional layouts rather than vague, unstructured outputs.

Related Skills

Explore More Design & Creative Skills→
dtsongdtsong
1

intake-skill

Transform natural language project descriptions into structured engagement briefs.

Community
Advanced
davpatel605-beepdavpatel605-beep

claude-design

Create high-fidelity HTML design artifacts from design briefs.

Community
Advanced
greencmgreencm
1

design-consultation

Generate a comprehensive design system with typography, color, layout, and motion.

Community
Advanced
narcisolcfnarcisolcf

generative-art-engine

Generate self-contained p5.js HTML art artifacts from an Algorithmic Philosophy.

Community
Advanced