skills.rest
MarbleSodas
MarbleSodasCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

claude-design

Generate self-contained HTML artifacts from design briefs with local design systems.

Updated Apr 9, 2026
Search Tags:#design#design system#ui/ux#artifact generation#creative direction#cli workflow#html prototype
One-click install
npx skills add https://github.com/MarbleSodas/Mavis --skill claude-design-marblesodas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/MarbleSodas/Mavis/tree/main/skills/creative/claude-design
Command: npx skills add https://github.com/MarbleSodas/Mavis --skill claude-design-marblesodas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It turns design briefs into high-quality, Claude Design–style HTML artifacts while avoiding hosted UI tooling that doesn’t exist in CLI/API environments.

Core Features & Use Cases

  • Brief-to-artifact design process: Scopes, gathers context, defines a coherent local design system for the deliverable, and produces refined outputs instead of generic layouts.
  • Variant-driven creative exploration: Creates conservative, strong-fit, and divergent options to discover and converge on the best direction.
  • Environment-safe runtime adaptation: Ignores hosted Claude Design-only plumbing and instead generates complete local HTML/CSS/JS files that can be opened and verified in a normal agent environment.

Quick Start

Use this skill to design a landing page prototype from my brief, using local HTML output and producing 3 visual variations.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I generate HTML prototypes from a design brief in a CLI workflow?▼

To generate HTML prototypes from a design brief in a CLI workflow, you provide the brief and the tool scopes context, defines a local design system, and produces self-contained HTML files with responsive behavior ready for local verification.

Can I create UI/UX design variations for landing pages without hosted tool callbacks?▼

Yes, you can create UI/UX design variations for landing pages without hosted tool callbacks by generating conservative, strong-fit, and divergent HTML variants locally, allowing you to discover and converge on the best visual direction.

What is the best way to build local HTML artifacts with a coherent design system?▼

The best way to build local HTML artifacts with a coherent design system is using a context-first workflow that gathers sources, defines a local design system, produces variants, and outputs complete, self-contained files for practical verification.

Does this approach support generating component explorations and motion studies in HTML?▼

Yes, this approach supports generating component explorations and motion studies in HTML by translating hosted-tool workflows into local deliverable production, outputting complete files that can be opened and verified in a normal agent environment.

Why do my generated HTML artifacts lack strong design taste when using a CLI environment?▼

Generated HTML artifacts may lack strong design taste in a CLI environment if the process skips defining a coherent local design system, which is necessary to produce refined, Claude Design-style outputs instead of generic layouts.

Related Skills

Explore More Design & Creative Skills→
kireevkit15-syskireevkit15-sys

shape

Run a structured discovery interview and generate a design brief.

Community
Advanced
TaylorHustonTaylorHuston
69

ui-design

Generate HTML UI design variants stored in ideas/[project]/docs/ui-designs/.

Community
Basic
nadicodeainadicodeai

claude-design

Generate self-contained HTML design artifacts from design briefs.

Official
Advanced
kevinnftkevinnft
13

claude-design

Generate self-contained HTML landing pages and prototypes with embedded CSS/JS for CLI/API agents.

Community
Advanced