kurniacf

Claude Design — Design skill for Claude Code

Design community

Skill — Claude Design (wraps Anthropic's built-in design skills).

How to install Claude Design

Installs to ~/.claude/skills/kurniacf-lontar-method-ai-agent-claude-design/SKILL.md

Terminal

mkdir -p ~/.claude/skills/kurniacf-lontar-method-ai-agent-claude-design && curl -fsSL https://raw.githubusercontent.com/kurniacf/lontar-method-ai-agent/HEAD/skills/claude-design.md -o ~/.claude/skills/kurniacf-lontar-method-ai-agent-claude-design/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Claude Design does

Skill — Claude Design (wraps Anthropic's built-in design skills)

**This skill wraps Anthropic's built-in `canvas-design` and `frontend-design` skills.**

When to invoke

Any task that touches visual design:

New UI component for your project (shadcn/ui spec).
Landing-page hero section or promotional banner.
Brand-aligned graphic (poster, social image, illustration).
Design tokens extension (colours, spacing, typography).
Figma → code flow (the user shares a Figma URL or screens

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Od Contribute — Open a first-contribution PR (or bug issue) on nexu-io/open-design — works for non-coders too 91.8k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★