design

name	Design
slug	design
version	1.0.3
changelog	Display name shown correctly
description	Executes and critiques visual design with quantified rules for hierarchy, spacing, type scale, color, and layout. Use when designing UI screens, landing pages, slides, posters, social graphics, emails, charts, or PDFs, when a design looks off, cluttered, amateur, or flat and the user cannot say why, when nothing stands out or text is hard to read, when choosing fonts, pairing typefaces, or building a palette without a design system, when adapting a screen to dark mode or mobile, or when reviewing generated HTML/CSS before delivery. Not for design tokens and component libraries (design-system) or brand strategy (branding).
homepage	https://clawic.com/skills/design
metadata	{"clawdbot":{"emoji":"🎨","displayName":"Design","configPaths":["~/Clawic/data/design/","~/design/","~/clawic/design/"]},"openclaw":{"requires":{"config":"[Truncated]"}}}

User preferences and memory live in ~/Clawic/data/design/ (see setup.md on first use, memory-template.md for the file format). If you have data at an old location (~/design/ or ~/clawic/design/), move it to ~/Clawic/data/design/, and say in one line that you moved it and from where.

Configuration

User-dependent variables. Defaults apply until the user states a preference; store them in ~/Clawic/data/design/config.yaml.

Variable	Type	Default	Effect
type_scale_ratio	number (1.125-1.5)	1.25	Regenerates the size ladder in Core Rule 4 (1.25 → 16/20/25/31/39); 1.333 for editorial and marketing pages
base_unit	4 | 8 (px)	8	Every spacing value becomes a multiple of this; 4 for dense pro tools, 8 everywhere else
accessibility_target	AA | AAA	AA	AA floors are 4.5:1 body and 3:1 large text; AAA raises them to 7:1 and 4.5:1 across all checks
platform	web | ios | android | print	web	Switches units (px/pt/dp), touch-target minimums (44pt HIG / 48dp Material), and platform conventions in ui-screens.md and documents.md
brand_file	path	none	Palette, typefaces, and logo rules read from ~/Clawic/data/design/brand.md; overrides the derivation procedures in palettes.md and fonts.md

Preference areas to record as the user reveals them:

• output medium — HTML/CSS vs image render vs written spec; framework in use (Tailwind, vanilla CSS) — affects what the deliverable looks like
• aesthetic register — minimal, dense, editorial, playful — shifts spacing generosity, type choices, and decoration tolerance
• motion posture — full motion vs reduced by default — gates Core Rule 8 and all transition suggestions
• language and script — RTL layouts mirror scan order; CJK needs looser line-height and no italic emphasis — affects layout.md and fonts.md guidance
• critique style — ranked punch-list vs annotated walkthrough — affects how findings are delivered