Builds an animation from scratch the way a design engineer would: it chooses the curve, duration and properties, keeps motion off the main thread where it matters, and explains the choice.
Animate (Emil Kowalski)
25 runs/mo
Design
Canvas Design
Anthropic's canvas-design skill guides Claude to produce finished visual artefacts (posters, covers, social graphics) by composing on an HTML canvas with deliberate typography, grid and colour decisions rather than defaulting to a template.
- 25 free runs a month
- Runs in your agent, private tools on SkillGild
- v1.0.0
- Anthropic
skillgild install canvas-designWorks with
License: Apache-2.0 · Created by Anthropic
What you get
- Anthropic's canvas-design skill guides Claude to produce finished visual artefacts (posters, covers, social graphics) by composing on an HTML canvas with deliberate typography, grid and colour decisions rather than defaulting to a template.
Install the Canvas Design skill
Pick your agent. The wrapper only tells your agent how to start a session. The skill's instructions arrive with each session, after your access is checked.
Sign in once from your terminal.
Terminal skillgild loginInstall this skill for Claude Code.
Terminal skillgild install canvas-design --agent claude-codeRegister the SkillGild MCP server with Claude Code.
Terminal claude mcp add --scope user skillgild -- $(command -v skillgild) mcp
How it runs
- Your agent starts a session. SkillGild checks your access and allowance, counts one run, and sends the skill's instructions for this task.
- Your agent does the work with its own model and tools, in your project. SkillGild makes no AI model call.
Use it from code
Start a session, follow its guide, then end it. Create an API key under Account and pass it as a bearer token.
# Prints the session ID, its tools and the instructions for your agent
skillgild session canvas-design
skillgild end <session-id>Questions
How do I install Canvas Design in Claude Code?
Run skillgild install canvas-design --agent claude-code and connect the SkillGild MCP server (skillgild mcp). When a task matches, your agent starts a session, which uses one of your 25 free runs this month, and follows the skill's instructions. Use --agent codex, cursor or gemini-cli for other clients.
Is Canvas Design free?
Yes. It includes 25 free runs every month on SkillGild. Canvas Design is open source (Apache-2.0) by Anthropic; SkillGild packages it from https://github.com/anthropics/skills at a pinned commit and credits the author.
Does Canvas Design run on SkillGild?
It runs in your coding agent with your own model. SkillGild checks your monthly allowance and delivers the skill's instructions for each session; it makes no model call and never sees your project unless your agent sends it.
Which agents does Canvas Design work with?
The project lists Claude Code, Claude.ai, any Agent Skills host. It is a plain Agent Skills folder (SKILL.md plus supporting files), so any client that reads that format can load it.
Related guides
Setup steps and worked examples for this kind of skill.
- Claude Code frontend design skills: Taste Skill and Logo DesignUse Taste Skill for landing pages and Logo Design for brand marks in Claude Code, with briefs that work and a checklist to review the output.
- Best Claude Code skills in 2026: 27 picks by jobThe best Claude Code skills in 2026, grouped by job: writing, planning, frontend design, testing, research, documents, marketing and video. Community skills from GitHub and hosted skills with free runs, each with its install command.
- How to install Claude Code skills (and skills for Codex, Cursor and Gemini CLI)Install a Claude Code skill from GitHub, a plugin or SkillGild in one command. Folder paths, personal vs project skills, verifying it loaded, troubleshooting, and the same steps for Codex, Cursor and Gemini CLI.
- How to create a Claude skillCreate a Claude skill from scratch: write SKILL.md with a name and description, add scripts and references, test it in Claude Code, make it work in Codex and Cursor, and share it on GitHub, as a plugin or on SkillGild.
More in Design
- FreeDesign
- FreeDesign
Translates Apple's interface and motion principles into web code: spring curves, gesture physics, translucent materials and typography, as explained in Apple's WWDC design sessions.
Apple Design (Emil Kowalski)
25 runs/mo - FreeDesign
Emil Kowalski's design-engineering philosophy as a skill: animation decisions (curves, durations, which properties to animate and which not to), component polish and the invisible details that make software feel right.
Emil Kowalski: design engineering
25 runs/mo - FreeDesign
Figma's official plugin for Claude Code bundles the Figma MCP server with skills for implementing designs from a file (figma-power), extracting design context (figquery), mapping UI recordings to storyboards and turning a PRD into a FigJam plan.
Figma (official plugin)
Open source - FreeDesign
Anthropic's official frontend-design skill, shipped as a plugin in the claude-plugins-official marketplace and as a skill in anthropics/skills.
Frontend Design (Anthropic)
25 runs/mo - FreeDesign
A design language for AI harnesses: 24 commands (craft, audit, polish, harden, animate, colorize, typeset, layout, distill, bolder, quieter and more), 60 deterministic detector rules and a live in-browser mode.
Impeccable
25 runs/mo - FreeDesign
Professional logo and brand-mark design from brief to production files: concepts, clean geometric SVG, optical refinement, tests at 16 px and in one colour, presentation boards and brand guidelines.
Logo Design
25 runs/mo - ProDesign
Included with SkillGild Pro. Checks the colors in your charts, slides or interface against WCAG contrast ratios with SkillGild's palette validator, and suggests passing alternatives. More premium skills will be added as they launch.
Pro Preview
Included with Pro - FreeDesign
Anti-slop frontend skill for landing pages, portfolios and redesigns. Reads the brief, picks the right design direction and ships interfaces that do not look templated.
Taste Skill
25 runs/mo - FreeDesign
The anti-slop frontend skill: a set of SKILL.md files that push an agent toward stronger layout, typography, spacing and motion so generated interfaces stop looking generic.
Taste Skill (design-taste-frontend)
25 runs/mo