wilwaldon writes a curated toolkit of 70+ tools'' skills, plugins, MCP servers, and CLAUDE.md config snippets'' organized by use case to help Claude Code produce better-looking frontend output, covering everything from aesthetic direction and site-wide theming through animation, Figma-to-code pipelines, browser automation testing, and deployment.
- The "essentials" stack for any project is just three commands: the official frontend-design skill, Context7 (live docs), and Playwright MCP
- MCP servers consume ~55k tokens at session start; skills load only ~100 tokens, making them a cheaper way to inject specialized knowledge
- Figma's MCP server now supports "Code to Canvas" (Feb 2026), pushing a running UI back into Figma as editable layers
- The Design Tokens skill derives an entire OKLCH color palette from a single `--brand-hue` number
- The "essentials" stack for any project is just three commands: the official frontend-design skill, Context7 (live docs), and Playwright MCP
- MCP servers consume ~55k tokens at session start; skills load only ~100 tokens, making them a cheaper way to inject specialized knowledge
- Figma's MCP server now supports "Code to Canvas" (Feb 2026), pushing a running UI back into Figma as editable layers
- The Design Tokens skill derives an entire OKLCH color palette from a single `--brand-hue` number
Designlang is a powerful tool designed to extract complete design systems from any live URL using a headless browser. It goes beyond simple color picking by analyzing layout architectures, responsive behaviors across breakpoints, interaction states like hover and focus, and motion languages such as easing and spring physics. The tool generates over 17 different file types including W3C DTCG tokens, Tailwind configurations, shadcn themes, Figma variables, and typed React component stubs to bridge the gap between live websites and development environments.
Key features include:
- Automated extraction of design tokens (primitive, semantic, and composite layers)
- Responsive analysis across multiple viewports
- Interaction state capture for hover, focus, and active transitions
- WCAG accessibility scoring with color remediation suggestions
- Multi-platform support for iOS, Android, Flutter, and WordPress
- Integration as an MCP server for AI coding agents like Cursor and Claude Code
- Design drift detection and visual diffing capabilities
Key features include:
- Automated extraction of design tokens (primitive, semantic, and composite layers)
- Responsive analysis across multiple viewports
- Interaction state capture for hover, focus, and active transitions
- WCAG accessibility scoring with color remediation suggestions
- Multi-platform support for iOS, Android, Flutter, and WordPress
- Integration as an MCP server for AI coding agents like Cursor and Claude Code
- Design drift detection and visual diffing capabilities
