# pixiv Charcoal > pixiv's skills for its Charcoal design system: set up @charcoal-ui, pick the right token, and turn a Figma link into a build-ready pack. pixiv's own plugin of Agent Skills for Charcoal, pixiv's design system (@charcoal-ui). pixiv wrote them because Charcoal's docs aren't machine-readable, so agents without them rebuild Charcoal from its package internals or make it up. They teach your agent to set Charcoal up correctly, pick the right design token, and build screens from Figma designs. What its skills teach the agent - choosing-charcoal-styling: choose between the CSS variables, Tailwind and styled-components routes, and spot the setup steps most projects miss - setting-up-charcoal-css-variables, setting-up-charcoal-tailwind and setting-up-charcoal-styled: set up each route, including the Design Token 2.0 opt-in (the theme CSS plus the .ch-token-v2 class) without which components render unstyled, and light and dark theme switching - choosing-charcoal-tokens: pick the one correct color, text style, spacing, radius or border token, using pixiv's design guidelines (written in Japanese) - prepare-figma-design: turn a figma.com link or a local .fig export into three files to commit: the design's structure, its materials named as Charcoal tokens, and its text and images - implement-figma-design: build the screen from those files with no Figma access, then render it and list where it departs from the design How to install it In Claude Code, run /plugin marketplace add pixiv/charcoal, then /plugin install charcoal@charcoal. Codex, Cursor, OpenCode and other agents install the same skills with npx skills add pixiv/charcoal. Good to know - prepare-figma-design reads Figma's REST API with a read-only personal access token set in FIGMA_TOKEN, so no Dev Mode seat is needed; a .fig export needs no token at all. - implement-figma-design's checker needs Playwright installed in the project it checks. - Type: Skill - Made by: pixiv - Category: Design - Formats: Skills, Claude plugins - Version: latest - Source: https://github.com/pixiv/charcoal - Page: https://pluginboard.ai/skills/pixiv-charcoal-pixiv ## Works with - ChatGPT - Claude - Gemini - GitHub Copilot - Cursor - Claude Code - Codex - Antigravity - Gemini CLI - Replit - OpenClaw - OpenCode - Hermes Agent ## Install ### ChatGPT In ChatGPT: Download the charcoal folder and zip it, then Plugins → Skills → Create → Upload from your computer. Business and Enterprise plans. View the skills on GitHub: https://github.com/pixiv/charcoal ### Claude In Claude (web or desktop): Download each skill’s folder and zip it, then upload them one at a time in Customize → Skills. View the skills on GitHub: https://github.com/pixiv/charcoal ### Gemini In Gemini: Download the charcoal folder, then at gemini.google.com click Customize → Skills → Create → Upload and pick the folder (or a .zip of it). View the skills on GitHub: https://github.com/pixiv/charcoal ### GitHub Copilot Copy all 6 skills, in your terminal: ```shell npx -y degit pixiv/charcoal/skills/choosing-charcoal-styling ~/.copilot/skills/choosing-charcoal-styling npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.copilot/skills/choosing-charcoal-tokens npx -y degit pixiv/charcoal/skills/implement-figma-design ~/.copilot/skills/implement-figma-design npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables ~/.copilot/skills/setting-up-charcoal-css-variables npx -y degit pixiv/charcoal/skills/setting-up-charcoal-styled ~/.copilot/skills/setting-up-charcoal-styled npx -y degit pixiv/charcoal/skills/setting-up-charcoal-tailwind ~/.copilot/skills/setting-up-charcoal-tailwind ``` View the skills on GitHub: https://github.com/pixiv/charcoal ### Cursor Copy all 6 skills, in your terminal: ```shell npx -y degit pixiv/charcoal/skills/choosing-charcoal-styling ~/.cursor/skills/choosing-charcoal-styling npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.cursor/skills/choosing-charcoal-tokens npx -y degit pixiv/charcoal/skills/implement-figma-design ~/.cursor/skills/implement-figma-design npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables ~/.cursor/skills/setting-up-charcoal-css-variables npx -y degit pixiv/charcoal/skills/setting-up-charcoal-styled ~/.cursor/skills/setting-up-charcoal-styled npx -y degit pixiv/charcoal/skills/setting-up-charcoal-tailwind ~/.cursor/skills/setting-up-charcoal-tailwind ``` View the skills on GitHub: https://github.com/pixiv/charcoal ### Claude Code In Claude Code, as a plugin: ```text /plugin marketplace add pixiv/charcoal /plugin install charcoal@charcoal ``` Copy all 6 skills, in your terminal: ```shell npx -y degit pixiv/charcoal/skills/choosing-charcoal-styling ~/.claude/skills/choosing-charcoal-styling npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.claude/skills/choosing-charcoal-tokens npx -y degit pixiv/charcoal/skills/implement-figma-design ~/.claude/skills/implement-figma-design npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables ~/.claude/skills/setting-up-charcoal-css-variables npx -y degit pixiv/charcoal/skills/setting-up-charcoal-styled ~/.claude/skills/setting-up-charcoal-styled npx -y degit pixiv/charcoal/skills/setting-up-charcoal-tailwind ~/.claude/skills/setting-up-charcoal-tailwind ``` View the skills on GitHub: https://github.com/pixiv/charcoal ### Codex Copy all 6 skills, in your terminal: ```shell npx -y degit pixiv/charcoal/skills/choosing-charcoal-styling ~/.agents/skills/choosing-charcoal-styling npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.agents/skills/choosing-charcoal-tokens npx -y degit pixiv/charcoal/skills/implement-figma-design ~/.agents/skills/implement-figma-design npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables ~/.agents/skills/setting-up-charcoal-css-variables npx -y degit pixiv/charcoal/skills/setting-up-charcoal-styled ~/.agents/skills/setting-up-charcoal-styled npx -y degit pixiv/charcoal/skills/setting-up-charcoal-tailwind ~/.agents/skills/setting-up-charcoal-tailwind ``` View the skills on GitHub: https://github.com/pixiv/charcoal ### Antigravity In Antigravity: Copy the charcoal folder into ~/.gemini/config/skills (Antigravity app and IDE) or ~/.gemini/antigravity-cli/skills (Antigravity CLI). View the skills on GitHub: https://github.com/pixiv/charcoal ### Gemini CLI Copy all 6 skills, in your terminal: ```shell npx -y degit pixiv/charcoal/skills/choosing-charcoal-styling ~/.gemini/skills/choosing-charcoal-styling npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.gemini/skills/choosing-charcoal-tokens npx -y degit pixiv/charcoal/skills/implement-figma-design ~/.gemini/skills/implement-figma-design npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables ~/.gemini/skills/setting-up-charcoal-css-variables npx -y degit pixiv/charcoal/skills/setting-up-charcoal-styled ~/.gemini/skills/setting-up-charcoal-styled npx -y degit pixiv/charcoal/skills/setting-up-charcoal-tailwind ~/.gemini/skills/setting-up-charcoal-tailwind ``` View the skills on GitHub: https://github.com/pixiv/charcoal ### Replit Copy all 6 skills, in your terminal: ```shell npx -y degit pixiv/charcoal/skills/choosing-charcoal-styling .agents/skills/choosing-charcoal-styling npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens .agents/skills/choosing-charcoal-tokens npx -y degit pixiv/charcoal/skills/implement-figma-design .agents/skills/implement-figma-design npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables .agents/skills/setting-up-charcoal-css-variables npx -y degit pixiv/charcoal/skills/setting-up-charcoal-styled .agents/skills/setting-up-charcoal-styled npx -y degit pixiv/charcoal/skills/setting-up-charcoal-tailwind .agents/skills/setting-up-charcoal-tailwind ``` View the skills on GitHub: https://github.com/pixiv/charcoal ### OpenClaw Copy all 6 skills, in your terminal: ```shell npx -y degit pixiv/charcoal/skills/choosing-charcoal-styling ~/.openclaw/skills/choosing-charcoal-styling npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.openclaw/skills/choosing-charcoal-tokens npx -y degit pixiv/charcoal/skills/implement-figma-design ~/.openclaw/skills/implement-figma-design npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables ~/.openclaw/skills/setting-up-charcoal-css-variables npx -y degit pixiv/charcoal/skills/setting-up-charcoal-styled ~/.openclaw/skills/setting-up-charcoal-styled npx -y degit pixiv/charcoal/skills/setting-up-charcoal-tailwind ~/.openclaw/skills/setting-up-charcoal-tailwind ``` View the skills on GitHub: https://github.com/pixiv/charcoal ### OpenCode Copy all 6 skills, in your terminal: ```shell npx -y degit pixiv/charcoal/skills/choosing-charcoal-styling ~/.config/opencode/skills/choosing-charcoal-styling npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.config/opencode/skills/choosing-charcoal-tokens npx -y degit pixiv/charcoal/skills/implement-figma-design ~/.config/opencode/skills/implement-figma-design npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables ~/.config/opencode/skills/setting-up-charcoal-css-variables npx -y degit pixiv/charcoal/skills/setting-up-charcoal-styled ~/.config/opencode/skills/setting-up-charcoal-styled npx -y degit pixiv/charcoal/skills/setting-up-charcoal-tailwind ~/.config/opencode/skills/setting-up-charcoal-tailwind ``` View the skills on GitHub: https://github.com/pixiv/charcoal ### Hermes Agent Copy all 6 skills, in your terminal: ```shell npx -y degit pixiv/charcoal/skills/choosing-charcoal-styling ~/.hermes/skills/choosing-charcoal-styling npx -y degit pixiv/charcoal/skills/choosing-charcoal-tokens ~/.hermes/skills/choosing-charcoal-tokens npx -y degit pixiv/charcoal/skills/implement-figma-design ~/.hermes/skills/implement-figma-design npx -y degit pixiv/charcoal/skills/setting-up-charcoal-css-variables ~/.hermes/skills/setting-up-charcoal-css-variables npx -y degit pixiv/charcoal/skills/setting-up-charcoal-styled ~/.hermes/skills/setting-up-charcoal-styled npx -y degit pixiv/charcoal/skills/setting-up-charcoal-tailwind ~/.hermes/skills/setting-up-charcoal-tailwind ``` View the skills on GitHub: https://github.com/pixiv/charcoal --- From Pluginboard (https://pluginboard.ai).