skills.rest
XyHalcyon
XyHalcyonCOMMUNITY
Explore all skills by this author →
GitHub

claude-design

Design and prototype HTML artifacts using a structured design process.

Updated Sep 28, 2021
Search Tags:#landing page#prototyping#prototype#ui design#html design
One-click install
npx skills add https://github.com/XyHalcyon/config-files --skill claude-design-xyhalcyon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/XyHalcyon/config-files/tree/main/hermes/skills/creative/claude-design
Command: npx skills add https://github.com/XyHalcyon/config-files --skill claude-design-xyhalcyon

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the process of creating one-off HTML artifacts, including landing pages, prototypes, and decks, by providing a structured design and prototyping workflow.

Core Features & Use Cases

  • Design Process: Offers a structured approach to design, from understanding the brief to defining the design system and choosing the right format.
  • Formats: Supports various formats such as static HTML, clickable prototypes, and fixed-size HTML decks.
  • Use Case: Ideal for creating custom landing pages, high-fidelity prototypes, and interactive product mockups without specific brand constraints.

Quick Start

Use the claude-design skill to create a landing page for a new product, specifying the target audience and desired style.

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 landing page prototype with HTML, CSS, and JavaScript?▼

To create a landing page prototype, this Skill uses a structured design process to gather context, define design systems, and output static HTML, clickable prototypes, or fixed-size HTML decks. It handles HTML, CSS, and JavaScript implementation.

What is the best way to structure an HTML design workflow for product mockups?▼

The best way to structure an HTML design workflow is to follow a process that moves from understanding the brief to defining the design system and choosing the right format. This approach streamlines creating custom landing pages and interactive product mockups.

Can I use this approach to build high-fidelity UI design without brand constraints?▼

Yes, you can build high-fidelity UI design without specific brand constraints. It is ideal for creating custom landing pages, interactive product mockups, and fixed-size HTML decks using HTML, CSS, and JavaScript.

What formats are supported for clickable HTML prototypes and static HTML design?▼

Supported formats for clickable HTML prototypes and static HTML design include static HTML, clickable prototypes, and fixed-size HTML decks. The system chooses the right format during the design process based on your requirements.

Do I need to provide a design system before generating HTML artifacts?▼

You do not need to provide a design system beforehand. The workflow systematically defines the design system as part of its structured approach before implementing the HTML, CSS, and JavaScript artifacts.

Related Skills

Explore More Design & Creative Skills→
arvindbattulaarvindbattula

design-setup

Define target audience, brand personality, typography, color, spacing, and layout for frontend design.

Community
Advanced
vikrant-projectvikrant-project
2

claude-design

Design one-off HTML artifacts like landing pages, decks, and prototypes.

Community
Advanced
heximaoheximao

claude-design

Design custom HTML landing pages, prototypes, and decks with CSS and JavaScript.

Community
Advanced
boraoztuncboraoztunc
248

app-store-screenshots

Generate and export App Store screenshots from Next.js projects.

Community
Advanced