Anatomy Isometric Figures
Security scan passedHas your agent explain a technical idea as an interactive isometric figure of a real machine, built from many small shaded parts.
Loading listing…
pixiv Charcoal
Security scan passedpixiv'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.
Pack · 6 skillsby pixiv· DesignUnclaimed · Yours? Claim it
What pixiv Charcoal does
About
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.
More from Design
Skills people install alongside pixiv Charcoal.
