The Spectrum Diagrams skill streamlines the creation of documentation visuals by bridging Mermaid flowcharts with Figma and FigJam via the Figma MCP server. It transforms technical architecture specs, pipelines, and token hierarchies into diagrams styled specifically to match Adobe's Spectrum design system. Beyond raw diagram generation, the skill applies coordinated FigJam color presets mapped to Spectrum semantic intents, enforces composition standards, normalizes canvas exports using ImageMagick, and automatically embeds the final images into article documentation to replace placeholder comments.
主要功能
01Automated board screenshot capture, cropping, and canvas normalization
02158 GitHub stars
03Tailored layouts for software architecture and conceptual token cascades
04Spectrum semantic color mapping applied across FigJam shapes and connectors
05Mermaid-to-FigJam conversion using Figma MCP generate_diagram workflows
06Seamless replacement of documentation placeholder comments with embedded visuals
使用场景
01Replacing markdown illustration placeholders with production-ready architecture diagrams
02Documenting backend microservice interactions, gateways, and data pipelines
03Visualizing design token tier cascades and design system precedence models