# Claude Design

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

- Repository: https://github.com/mateaix/mateclaw (1176 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-10-30
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add mateaix/mateclaw --skill claude-design -g -a claude-code -y`
Codex: `npx skills add mateaix/mateclaw --skill claude-design -g -a codex -y`
Cursor: `npx skills add mateaix/mateclaw --skill claude-design -g -a cursor -y`
Gemini CLI: `npx skills add mateaix/mateclaw --skill claude-design -g -a gemini-cli -y`

## Description

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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):

The rest: https://github.com/mateaix/mateclaw/blob/HEAD/mateclaw-server/src/main/resources/skills/claude-design/SKILL.md