ui-ux-designer

Start with aesthetic discovery: define your industry niche, three personality adjectives, and 2-3 reference websites. Then build tokens in order—colors with contrast ratios, typography scale, 8px-grid spacing, shadows, and animations—before defining component patterns like buttons and cards.

Base the choice on content structure: use full-width spotlight sections for unique, high-value, content-rich items, and card grids for repeated, scannable items with identical structure. Hybrid layouts combine both when a page has unique sections containing repeated sub-items.

The workflow covers Ptah Native image generation via the ptah_generate_image MCP tool for quick assets, Midjourney or DALL-E for hero illustrations, Canva for marketing graphics, and Three.js or Spline for interactive 3D elements. Prompts follow the Subject-Context-Style-Modifiers formula.

Yes, it defines separate token sets for light and dark modes and requires WCAG 2.1 AA validation. Body text must meet a 4.5:1 contrast ratio, body text must be at least 16-18px, and animations must respect prefers-reduced-motion.

The handoff document contains design system token references, component structure specifications, responsive breakpoint transformations, motion and interaction specifications, asset URLs, and an implementation checklist. It is saved alongside a visual design specification and asset inventory in the task folder.