Design
Convert HSL color values to LAB for color management with alpha channel support
hsl-to-lab-converterDesign
Convert a Figma px value into iOS pt, Android dp/sp, web rem/vw with a fluid clamp() snippet, a density-bucket render table and a touch-target accessibility audit, as a developer spec card.
figma-ios-android-pt-dp-sp-responsive-design-spec-cardDesign
Inspect TTF/OTF/WOFF/WOFF2 fonts: metadata, glyph counts, metrics, style flags, Unicode coverage heatmap, glyph SVG previews, ligatures, OpenType features and variable-font axes.
font-file-inspectorDesign
Preview a heading and body font pairing with real copy, sizes, weights, line heights, character samples, and CSS stacks.
font-pairing-preview-cardDesign
Paste a Figma / Tokens Studio variables JSON and export to Tailwind, shadcn CSS variables, Style Dictionary, or SCSS. Preserves color, spacing and font tokens with type inference.
figma-tokens-exportDesign
Calculate camera field of view from focal length and sensor size, with scene coverage at distance.
field-of-view-calculatorDesign
Extract design tokens — colors, numbers, font sizes and strings — from an ECharts theme JSON and export them straight into your design system. Paste a theme object (the kind registered via echarts.init(dom, themeName)) and the tool walks every leaf, tagging each color (with optional named/rgb → hex normalization), spacing number, font size and string, then emits clean CSS variables, a Tailwind theme.extend config, Style Dictionary tokens.json, or SCSS variables. Bridges the gap between an ECharts visualization theme and Figma/CSS/Tailwind design tokens without copying each value by hand.
echarts-theme-token-extractorDesign
Generate a clean, copy-paste HTML email signature that renders correctly in Gmail, Outlook, and Apple Mail — with avatar/logo, social icons (auto-detected from your links), accent color, light/dark/auto theme, and a table-based email-safe layout using inline styles. Copy the raw HTML and paste straight into your mail client.
email-signature-html-builderDesign
Add blur effects to images with adjustable blur strength and multiple blur types
image-blurDesign
Adjust image brightness levels with real-time preview and precise control
image-brightnessDesign
Adjust image contrast levels with precise control for enhanced image clarity
image-contrastDesign
Crop images to specific dimensions or aspect ratios with custom positioning
image-cropper