# Frontend Design > Web UI design workflow with strong visual direction Use when this capability is needed. - Skill: `tomevault-io/frontend-design-130` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/frontend-design-130` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend-design-130/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/frontend-design-130 --- # Frontend Design Skill Use this for UI layout, styling, and interaction design tasks. ## Workflow 1. Define a clear visual direction (theme, typography, color palette). 2. Build structure with intentional spacing and hierarchy. 3. Add atmosphere with gradients, shapes, or subtle patterns. 4. Use meaningful animations for key transitions. 5. Validate layout on desktop and mobile. ## Design prompts to answer - What is the visual story? - Which typefaces reinforce the brand? - How does the UI communicate hierarchy at a glance? - What motion supports comprehension (not noise)? --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/nathandcornell) — claim your Tome and manage your conversions.