Design

Colors, palettes, gradients and icons. 9 tools. Run any of them from the app, as dogubako design <tool>, over the HTTP API or as an MCP tool.

Tool	Id	Needs
Color Palette Generator	design.palette	—
Extract Palette from Image	design.palette_extract	—
Contrast Checker	design.contrast	—
Gradient Generator	design.gradient	—
Aspect Ratio Calculator	design.aspect_ratio	—
Resize Canvas / Pad	design.canvas_resize	—
Overlay Images	design.compose	—
Bulk Image Dimensions	design.image_dimensions	—
Styled QR Code	design.qr_style	—

Color Palette Generator

nativelive swatches

Generate harmonious color palettes from a base color: complementary, analogous, triadic, tetradic, monochromatic, shades, tints and a 50–950 scale.

dogubako design palette <color> [options]

Id design.palette · MCP design_palette · Output: structured data · Timeout 2 min

Also found by: palette, color scheme, complementary, analogous, triadic, monochromatic, shades, tints, harmony

Option	CLI	Type	Default	Description
color (required)	positional	color	#3366ff	Base color.
scheme	--scheme	choice	complementary	One of: complementary, split_complementary (Split complementary), analogous, triadic, tetradic (Tetradic (rectangle)), square, monochromatic, shades (Shades (darker)), tints (Tints (lighter)), tones (Tones (grayer)), scale (50–950 scale).
count	--count	integer 2–20	5	Number of colors for monochromatic/shades/tints/tones.

Extract Palette from Image

nativelive swatches

Extract a color palette from an image, with percentages, CSS variables and a swatch image.

dogubako design palette-extract <file> [options]

Id design.palette_extract · MCP design_palette_extract · Output: structured data · Timeout 2 min

Also found by: palette, extract colors, color picker, image colors, swatches, theme from image

Option	CLI	Type	Default	Description
input (required)	positional	file		Image. Accepts image/*, .png .jpg .jpeg .webp .gif .bmp +31 more.
count	--count	integer 2–16	6
sort	--sort	choice	share	One of: share (By share of image), lightness (By lightness), hue (By hue).

Contrast Checker

nativelive swatches

Check WCAG 2.x contrast between text and background colors (AA/AAA, normal and large text) and get passing suggestions.

dogubako design contrast <foreground> --background <background>

Id design.contrast · MCP design_contrast · Output: structured data · Timeout 2 min

Also found by: contrast, wcag, accessibility, a11y, aa, aaa, color contrast, readability

Option	CLI	Type	Default	Description
foreground (required)	positional	color	#777777	Text color.
background (required)	--background	color	#ffffff	Background color.

Gradient Generator

native

Create CSS linear, radial or conic gradients from color stops and render them as PNG.

dogubako design gradient <stops> [options]

Id design.gradient · MCP design_gradient · Output: files, plus text/plain text · Timeout 2 min

Also found by: gradient, css gradient, linear-gradient, radial, background, wallpaper

Option	CLI	Type	Default	Description
stops (required)	positional	text (multi-line)	#ff7e5f, #feb47b	Color stops.
kind	--kind	choice	linear	One of: linear, radial, conic.
angle	--angle	number -360–360	90	Angle (°). Only used when kind is one of linear, conic.
width	--width	integer 1–8000	1200
height	--height	integer 1–8000	630

Aspect Ratio Calculator

nativelive

Calculate the aspect ratio of a size, or the missing width/height for a given ratio.

dogubako design aspect-ratio [options]

Id design.aspect_ratio · MCP design_aspect_ratio · Output: structured data · Timeout 2 min

Also found by: aspect ratio, ratio, 16:9, resolution, dimensions, calculator, scale

Option	CLI	Type	Default	Description
width	--width	integer ≥ 1		Original width.
height	--height	integer ≥ 1		Original height.
ratio	--ratio	text		Use this ratio instead of width × height.
target_width	--target-width	integer ≥ 1		New width → compute height.
target_height	--target-height	integer ≥ 1		New height → compute width.

Resize Canvas / Pad

nativeprogress

Extend or trim the canvas around images to an exact size, an aspect ratio or by padding, with a color or transparent fill.

dogubako design canvas-resize <files…> [options]

Id design.canvas_resize · MCP design_canvas_resize · Output: files · Timeout 2 min

Also found by: canvas, pad, padding, border, extend, letterbox, square, instagram, frame

Option	CLI	Type	Default	Description
input (required)	positional	files		Images. Accepts image/*, .png .jpg .jpeg .webp .gif .bmp +31 more.
mode	--mode	choice	aspect	One of: aspect (To aspect ratio), size (To exact size), padding (Add padding).
aspect	--aspect	text	1:1	Aspect ratio. Only used when mode is aspect.
width	--width	integer ≥ 1		Only used when mode is size.
height	--height	integer ≥ 1		Only used when mode is size.
padding	--padding	integer 0–10000	50	Pixels on every side. Only used when mode is padding.
anchor	--anchor	choice	center	Where the original sits on the new canvas. One of: center, top-left (Top left), top, top-right (Top right), left, right, bottom-left (Bottom left), bottom, bottom-right (Bottom right).
background	--background	color	#ffffff	Fill color (#00000000 = transparent).
format	--format	choice	same	One of: same (Same as input), png, jpg (JPEG), webp. Advanced.

Overlay Images

native

Place one image on top of another with position, scale, opacity and blend mode (multiply, screen, overlay…).

dogubako design compose <file> --overlay <overlay> [options]

Id design.compose · MCP design_compose · Output: files · Timeout 2 min

Also found by: overlay, compose, composite, layer, blend, superimpose, place logo

Option	CLI	Type	Default	Description
input (required)	positional	file		Base image. Accepts image/*, .png .jpg .jpeg .webp .gif .bmp +31 more.
overlay (required)	--overlay	file		Overlay image. Accepts image/*, .png .jpg .jpeg .webp .gif .bmp +31 more.
position	--position	choice	center	One of: center, top-left (Top left), top, top-right (Top right), left, right, bottom-left (Bottom left), bottom, bottom-right (Bottom right), custom (Custom x/y).
x	--x	integer	0	Only used when position is custom.
y	--y	integer	0	Only used when position is custom.
scale	--scale	number 0–400	0	Overlay width (% of base, 0 = original).
opacity	--opacity	number 0–1	1
blend	--blend	choice	normal	One of: normal, multiply, screen, overlay, darken, lighten, difference, add.
margin	--margin	integer 0–10000	0	Advanced.
format	--format	choice	png	One of: png, jpg (JPEG), webp.

Bulk Image Dimensions

nativeprogress

List width, height, aspect ratio, megapixels, DPI and format of many images at once (reads headers only, fast).

dogubako design image-dimensions <files…>

Id design.image_dimensions · MCP design_image_dimensions · Output: structured data · Timeout 2 min

Also found by: dimensions, size, resolution, dpi, batch, list, inventory, audit

Option	CLI	Type	Default	Description
input (required)	positional	files		Images. Accepts image/*, .png .jpg .jpeg .webp .gif .bmp +31 more.

Styled QR Code

nativelive preview

Design branded QR codes: colors, rounded or dot modules, styled eyes and a center logo (uses high error correction).

dogubako design qr-style <text> [options]

Id design.qr_style · MCP design_qr_style · Output: files · Timeout 2 min

Also found by: qr, qr code, logo, branded, custom, styled, dots, rounded

Option	CLI	Type	Default	Description
text (required)	positional	text (multi-line)		Content.
size	--size	integer 64–4096	512	Image size in pixels.
error_correction	--error-correction	choice	M	One of: L (Low (7%)), M (Medium (15%)), Q (Quartile (25%)), H (High (30%)).
margin	--margin	integer 0–20	4	Quiet zone in modules (4 recommended).
foreground	--foreground	color	#000000
background	--background	color	#ffffff
module_style	--module-style	choice	rounded	One of: square, rounded, dots.
eye_style	--eye-style	choice	rounded	One of: square, rounded, dots (Rounded with dot).
logo	--logo	file		Logo (optional). Accepts image/*, .png .jpg .jpeg .webp .gif .bmp +31 more.
logo_size	--logo-size	number 5–30	20	Logo size (% of width).
format	--format	choice	both	One of: both (PNG + SVG), png, svg. Advanced.
file_name	--file-name	text	qr-code	Advanced.