Skills

Claude Design

Design one-off HTML artifacts (landing, deck, prototype).

Install

npx skills add mateaix/mateclaw --skill claude-design -g -a claude-code -y
Repository
mateaix/mateclaw1.2k
Category
Design
Updated
5d ago
License
Apache-2.0
Context cost
Mediumabout 3,000 tokens
Runs scripts
No, instructions only

What it does

Design one-off HTML artifacts (landing, deck, prototype).

Claude Design for CLI/API Agents

Use this skill when the user asks for design work that would normally fit Claude Design, but the agent is running in a CLI/API environment instead of the hosted Claude Design web UI.

The goal is to preserve Claude Design's useful design behavior and taste while removing hosted-tool plumbing that does not exist in normal agent environments.

Before starting, check for other web-design skills like popular-web-designs (ready-to-paste design systems for Stripe, Linear, Vercel, Notion, etc.) and design-md (Google's DESIGN.md token spec format). If the user wants a known brand's look, load popular-web-designs alongside this one and let it supply the visual vocabulary. If the deliverable is a token spec file rather than a rendered artifact, use design-md instead. Full decision table below.

When To Use This Skill vs popular-web-designs vs design-md

the agent has three design-related skills under skills/creative/. They do different jobs, load the right one (or combine them):

Read the whole SKILL.md on GitHub

More in Design