Fundy

Task-first tool directory

Free Design Tools

Use this page as a route chooser. Pick one tool first, then move to a related guide, Photoshop resource, or archive entry only when your workflow needs a handoff.

All tools are browser-based and client-side by default. Preview-only helpers are clearly marked so you can decide if you need a stronger offline process after initial results.

Start with a common task

Open the tool that matches your immediate search intent

Compress an imageReduce file size, compare output, and download the compressed image. Resize an imageSet exact pixels or use social, blog, and product presets. Convert SVG to PNGExport a transparent or solid-background PNG from SVG artwork. Remove EXIF metadataCreate clean image copies before uploading or sharing. Extract image colorsGenerate HEX, CSS variables, or JSON from a source image. Check color contrastValidate text and background colors against WCAG thresholds. Create an imageOpen the free image generator hub, then choose a scene-specific maker when the destination is clear.

If your task is not in the top row, open Guides only after you confirm scope. Example: use the resizer when you have final source files, then open guide pages for export formats, naming standards, and delivery checklists.

Route first, then act

Choose your next page in 3 steps

  1. Step 1. Define your expected output. If you need a file ready to use, use a tool that exports. If you need a decision or a draft, use a planning or preview tool and stop there.
  2. Step 2. Set the success condition before opening a tool. For example, a social image must be under a specific size, a CSS block must match a token standard, or alt text must describe function and context.
  3. Step 3. If the result is not enough, hand off only to the next relevant surface: download workflow, Photoshop shortcut support, or an archive/guide page.

Hard stop rules: stop when target file quality drops below your threshold, when color contrast fails required tests, or when prompt drafts no longer match the final style brief.

Decision rules

Use this chooser map before you click

Need a single reusable web asset Go Image Preparation if you need export files. Stop when size, dimension, and format match target platform rules. Handoff to Downloads if packaging or naming requires staging. PREFERRED
Need WCAG, brand, or CSS tokens Go Color and CSS tools for measurable outputs. Stop after copyable CSS is valid in your own project. Handoff to archive for style references if you need repeatable project snapshots. PREFERRED
Need a brief, checklist, or spec before external AI use Use Prompting and Plans for clear instructions. Stop at prompt-ready drafts. If implementation needs coding or plugin packaging, switch to dedicated dev tooling after export. PREFERRED
Need shortcut discovery or local command validation Use Photoshop Workflow tools. Stop when you have repeatable command lists and platform-specific mapping. Handoff to Photoshop hub if your task is batch or production-level edit prep. PREFERRED

Image Preparation

Resize, compress, convert, crop, clean, rename, and package images for web or social publishing.

13 tools

Use this group when your output is a final media file. Decision rule: if the work has a target size, resolution, or channel requirement, complete it here first. If you find yourself doing repeated manual checks, move to Downloads for final file staging after preparation.

Image CompressorCompress images locally with quality controls and size comparison.LOCAL Image ResizerResize images to custom or social presets while preserving aspect ratio.CANVAS Image ConverterConvert between JPG, PNG, and WebP locally.LOCAL SVG to PNG ConverterConvert SVG files to PNG with size and background controls.SVG EXIF Metadata RemoverStrip image metadata by redrawing files in the browser.CLEAN Social Image CropperCrop images for common social ratios and export the final PNG.EXPORT Favicon GeneratorCreate common favicon PNG sizes from one image.ICON Batch Image RenamerPlan clean file names for image sets and export the rename list.PLAN Flat Background RemoverThreshold-based transparent background helper for simple, flat backgrounds.LOCAL Canvas Image UpscalerCanvas upscaler with smooth and pixel-art modes.CANVAS YouTube Thumbnail AnalyzerCheck brightness, contrast, safe-area guides, and dominant colors.REPORT Mockup MakerPlace uploaded artwork into simple browser mockup frames.MOCKUP Moodboard MakerArrange local images into a simple exportable moodboard.BOARD

Template Image Makers

Create text-and-image layouts for publishing surfaces where the page intent matters as much as the export size.

16 tools

Start with Image Generator for the generic editor, then switch to a scene-specific maker when the destination is LinkedIn, Instagram, Pinterest, newsletter, product launch, event, website banner, YouTube, OG, WordPress, or a blog hero.

Image GeneratorCreate a template image in the browser with editable text, size presets, curated backgrounds, optional Unsplash search, and PNG export.HUB Featured Image MakerCreate a WordPress or blog featured image in the browser with a readable title layout and a 1200 x 630 export.CANVAS YouTube Thumbnail MakerCreate a YouTube thumbnail in the browser with a readable title block, strong focal area, and 1280 x 720 export.VIDEO OG Image GeneratorCreate an Open Graph preview image in the browser with clean title hierarchy and a 1200 x 630 export.OG Social Post MakerCreate a social post graphic in the browser and switch between square, story, and landscape presets.SOCIAL Blog Hero Image MakerCreate a wide blog or article hero image in the browser before making smaller share variants.WIDE LinkedIn Post Image MakerCreate a LinkedIn post image in the browser with professional layouts and 1200 x 627 or square export.CANVAS Facebook Post Image MakerCreate a Facebook post image in the browser for page updates, events, workshops, and local campaigns.CANVAS Instagram Post MakerCreate Instagram post images in the browser with square, portrait, and story presets.SOCIAL Twitter Post Image MakerCreate an X or Twitter post image in the browser with 1200 x 675 and 1200 x 628 presets.CANVAS Pinterest Pin MakerCreate a Pinterest pin image in the browser with vertical presets and caption-led layouts.PIN Newsletter Header MakerCreate a newsletter header image in the browser with email masthead presets and PNG export.CANVAS Product Launch Image MakerCreate a product launch image in the browser with launch cards and social-ready presets.CANVAS Quote Image MakerCreate a quote image in the browser with minimal layouts and social-ready export sizes.SOCIAL Event Banner MakerCreate an event banner image in the browser with event-ready presets and PNG export.CANVAS Website Banner MakerCreate a website banner image in the browser with wide header presets and PNG export.WIDE

Color and CSS

Extract palettes, check accessibility, convert tokens, preview type, and generate copyable CSS.

9 tools

Use this group when design tokens must be reusable across files. Stop rule: no handoff if contrast passes and tokens can paste into your target stylesheet. If your team needs review history, hand off to Archive for reference versions.

Color Palette ExtractorExtract dominant colors and export palette formats.HEX Contrast CheckerCheck text colors against WCAG contrast thresholds.WCAG Color Accessibility AuditorAudit multiple colors for pairwise contrast issues.WCAG Gradient GeneratorCreate CSS linear gradients with preview and copyable output.CSS Design Token ConverterConvert JSON design tokens into CSS variables and Tailwind config snippets.JSON Box Shadow GeneratorBuild CSS shadow styles with a live preview.CSS Glassmorphism GeneratorCreate frosted UI layer CSS for mockups and prototypes.CSS Font Pairing PreviewerPreview heading and body type pairings with sample copy.TYPE Brand Kit GeneratorGenerate a lightweight brand palette, CSS variables, and usage notes.KIT

Prompting and Plans

Structured prompt helpers, alt text drafting, and scope generators with clear browser-only boundaries.

5 tools

Use these tools at the planning stage, especially before commercial production or external model calls. Stop when the brief is complete and consistent. Handoff to actual model platforms only after your own governance review.

AI Image Prompt BuilderGenerate structured prompts for image tools without calling an AI API.PROMPT Product Photo Prompt StudioRule-based prompt templates for product photography concepts.PROMPT Alt Text GeneratorDraft accessible image descriptions from filenames, context, and visible color cues.A11Y Figma Plugin Scope GeneratorGenerate a local manifest-style planning draft. No package is released yet.SCOPE Chrome Extension Scope GeneratorGenerate a local Manifest V3 planning draft. No package is released yet.SCOPE

Photoshop Workflow

Shortcut lookup, printable references, and local keyboard shortcut file inspection.

3 tools

Open this section when work moves from browser prep into day to day composition in Photoshop. Stop when commands are documented and mapped to platform. Use Photoshop for deeper workflow hubs if you need context around tasks.

Photoshop Shortcut FinderSearch commands by shortcut, menu path, platform, or workflow category.LOCAL Shortcut Cheat Sheet BuilderBuild printable shortcut sheets and export CSV or Markdown.EXPORT KYS File ViewerInspect local Photoshop keyboard shortcut files and export a simple report.FILE

Suggested handoff paths

Use one of these after completion to avoid duplicate work.

  • If the project now has upload-ready media, continue to Downloads for packaging and local handoff steps.
  • If you discovered useful settings, archive the pattern for future reuse in Archive.
  • If a process depends on Photoshop commands or onboarding, open Photoshop and attach the generated plan.

If a single task requires both design and accessibility validation, run one image or color action first, then immediately validate against contrast and export constraints. Stop at first unresolved failure and avoid looping with repeated edits unless constraints change.