Creates production-grade UI layouts and components with deliberate spacing, typography hierarchy, color application, and motion design so the interface communicates structure and state clearly. This skill is applied when building new UI sections, redesigning existing pages, or establishing component patterns that need to feel intentional and cohesive rather than defaults from a component library.
Use cases
- Redesigning a marketing site or landing page where visual differentiation matters for brand perception
- Building a new feature page from scratch and wanting to establish a coherent visual direction before implementation
- Creating a design system component that needs to handle multiple states (default, hover, focus, disabled, loading) consistently
- Polishing an existing interface that has accumulated visual debt and feels generic or inconsistent
- Prototyping a new interaction pattern that involves animation or motion and needs to be validated with stakeholders
Key features
- Define the visual direction by choosing a mood board, typographic scale, and color system before touching layout
- Establish content hierarchy and visual rhythm using whitespace, scale contrast, and alignment rather than decorative elements
- Implement the layout using a systematic spacing scale (4px or 8px base) so elements feel related and intentional
- Design all interactive states—hover, focus, active, disabled, error, loading—so transitions between them feel smooth and purposeful
- Verify accessibility: color contrast ratios, keyboard navigability, and screen reader labels before considering the design complete
When to Use This Skill
- When building new UI sections where the visual direction is not yet established
- When an existing interface feels generic or inconsistent with the broader product brand
- When creating reusable components that need to handle all states and interactions predictably
Expected Output
A complete, implemented UI layout with a defined visual system (spacing, typography, color), all component states handled, and verified accessibility compliance.
Frequently Asked Questions
- Should I design mobile-first or desktop-first?
- Design mobile-first for consumer products where mobile traffic dominates. For enterprise tools where users are primarily on desktop, start with the desktop layout and scale down. In both cases, define the breakpoints before writing CSS.
- How do I maintain consistency without a full design system?
- Extract shared values into CSS custom properties (colors, spacing, font scale) even before building a formal design system. This forces early decisions about consistency and makes global changes tractable.
- When should I use CSS animations versus JavaScript-driven animations?
- Use CSS for simple transitions (hover states, focus indicators, micro-interactions) where browser compositing is efficient. Reserve JavaScript animations for complex, interruptible, or physics-based sequences.
Related
Related
3 Indexed items
Image generation
Creates or edits bitmap artwork for covers, concept mockups, and rapid visual exploration when the deliverable requires photographic quality, complex textures, or artistic styles that are impractical to hand-code in SVG or CSS. Image generation accelerates the early design phase by producing concrete visual references before committing to a final style.
Agentic workflow design
Structures multi-step agent tasks with explicit inputs, outputs, fallback behavior, and handoff protocols so agents reliably complete complex workflows instead of stopping at the first blocker. Agentic workflow design applies software engineering discipline to AI agent pipelines, treating each step as a function with typed inputs and outputs.
API design and versioning
Shapes REST or RPC API surfaces with consistent resource modeling, predictable error responses, paginated list endpoints, and an explicit deprecation policy before implementation locks you into contracts that are costly to change. Good API design prevents client breakage, reduces support burden, and makes feature additions less disruptive.