UI Design Skill
Workflow from jony-creative-director: UI Design (Apple HIG) + Design-to-Code
Inputs
| Parameter | Required | Description | | --------------------- | -------- | ------------------------------------------------ | | Platform | Yes | iOS / macOS / web | | App type | Yes | e.g., fintech dashboard, social app, e-commerce | | Primary user persona | Yes | Demographics, goals, context | | Top 3 user goals | Yes | Priority tasks | | Current pain points | Yes | Problems to solve | | Tech stack (for code) | If code | React / Vue / Svelte / Next.js / Tailwind / etc. |
Phase 1: Hierarchy & Layout
- Visual hierarchy strategy (what users see 1st, 2nd, 3rd)
- F-pattern / Z-pattern application
- Content density decisions (breathing room vs information density)
- Liquid Glass principles (iOS 26, if applicable)
Phase 2: Platform Patterns
| Pattern | Specification | | ------------- | ----------------------------------------- | | Navigation | Tab bar / Sidebar / Navigation stack | | Modals | Presentation guidelines | | Gestures | Swipe, pinch, pull-to-refresh definitions | | Context menus | Action sheets, context menus |
Phase 3: Screen Designs (8 key screens)
| # | Screen | Purpose | | --- | ------------------- | -------------------- | | 1 | Onboarding/Welcome | First-run experience | | 2 | Home/Dashboard | Primary landing | | 3 | Primary task | Core user action | | 4 | Detail view | Content deep-dive | | 5 | Settings/Profile | User preferences | | 6 | Search/Filter | Content discovery | | 7 | Checkout/Completion | Action flow end | | 8 | Error/Empty state | Edge cases |
Per Screen Spec
| Aspect | Detail | | ------------ | -------------------------------- | | Wireframe | Layout structure description | | Components | Every element inventory | | Interactions | Tap, swipe, long-press behaviors | | Empty state | What shows with no data | | Error state | Failure handling UI | | Loading | Skeleton screens, indicators |
Phase 4: Component Hierarchy
- Button hierarchy: Primary, Secondary, Tertiary, Destructive
- Form patterns: validation, error messaging, success states
- Card layouts with content prioritization
- Data visualization components (if applicable)
Phase 5: Accessibility (MANDATORY)
| Requirement | Standard | | ---------------- | -------------------------------------------- | | Dynamic Type | Font scaling to 310% | | VoiceOver | Labels + hints for every interactive element | | Color contrast | WCAG AA: 4.5:1 text, 3:1 UI components | | Reduce Motion | Alternatives for all animations | | Focus indicators | Visible keyboard navigation |
Phase 6: Micro-Interactions
| Aspect | Specification | | ----------- | --------------------------------------------- | | Transitions | Duration, easing curves (ease-in-out, spring) | | Haptics | Feedback mapping per interaction type | | Sound | Design guidelines (optional) |
Phase 7: Responsive Behavior
Breakpoint adaptations (mobile → tablet → desktop), orientation handling, foldable device considerations.
Phase 8: Design-to-Code Translation
Component Architecture
- Component hierarchy tree
- Props interface (TypeScript)
- State management strategy
- Data flow diagram
Production Code
Per component: complete copy-paste ready code, responsive (mobile-first), ARIA attributes, error boundaries, loading states, animations.
Styling
| Aspect | Specification | | ------------- | -------------------------------------- | | CSS/Tailwind | Classes mapped to design tokens | | CSS variables | Theming support | | Dark mode | Implementation strategy | | Breakpoints | Responsive rules | | States | hover / focus / active implementations |
Design Token Integration
Map tokens to CSS variables: colors, typography (sizes, weights, line heights), spacing (padding, margin, gap), shadows, border-radius.
Performance
- Code splitting recommendations
- Bundle size optimization
- React.memo / useMemo / useCallback where needed
- Image optimization (next/image or equivalent)
- Lazy loading strategy
Testing
| Type | Scope | | ----------------- | ------------------------------------ | | Unit | React Testing Library, per component | | Visual regression | Snapshot comparison scenarios | | Accessibility | axe-core integration | | Responsive | Breakpoint test cases |
Documentation
JSDoc for all props, 3 usage examples per component, Do's and Don'ts.
Include "Designer's Intent" comments explaining why code decisions preserve design vision.
Outputs
| Deliverable | Format | | --------------- | ----------------------------------- | | Screen designs | 8 detailed screen specs | | Component specs | Hierarchy + interaction definitions | | Accessibility | Full compliance checklist | | Production code | Copy-paste components + styles | | Design tokens | CSS variables / JSON | | Test suite | Unit + visual + a11y tests |
Related
/design-systems (token foundation) | /design-quality (critique + a11y audit) | /brand-identity (visual language)