ui-design
npx machina-cli add skill Roberdan/MyConvergio/ui-design --openclawUI 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)
Source
git clone https://github.com/Roberdan/MyConvergio/blob/master/.claude/skills/ui-design/SKILL.mdView on GitHub Overview
Guides UI design aligned with Apple HIG and translates visuals into production-ready code. It covers hierarchy and layout, platform patterns, eight key screens, accessibility, and responsive behavior for iOS, macOS, and web.
How This Skill Works
Begin with inputs (Platform, App type, persona, goals, pain points, and code stack). Apply Phases 1-8 to define hierarchy, patterns, screen specs, component structure, accessibility, micro-interactions, and responsive behavior. Finally, translate designs into code for React, Vue, Svelte, Next.js, Tailwind, and validate across platforms.
When to Use It
- Starting a new iOS/macOS/web app and aligning UI with Apple HIG
- Designing a fintech dashboard or e-commerce flow with onboarding, home, task, detail, settings, and checkout screens
- Ensuring accessibility by including Dynamic Type, VoiceOver labels, color contrast, and motion reduction from the start
- Translating design specs into production-ready code in your chosen stack (React, Vue, Svelte, Next.js, Tailwind)
- Building responsive interfaces that adapt from mobile to tablet and desktop
Quick Start
- Step 1: Define inputs (Platform, App type, primary persona, top goals, pain points, and tech stack)
- Step 2: Complete Phase 1-8 design work to generate screens, components, and accessibility specs
- Step 3: Translate designs into code (React/Vue/Svelte/Next.js/Tailwind) and validate across breakpoints
Best Practices
- Start with Apple HIG alignment for platform patterns
- Define the 8 screens and per-screen specs before coding
- Prioritize accessibility across Dynamic Type, VoiceOver, color contrast, and motion
- Maintain a clear component hierarchy and consistent button patterns
- Test responsiveness early with mobile, tablet, and desktop breakpoints
Example Use Cases
- Onboarding/Welcome screen for a fintech app
- Home/Dashboard for a productivity app
- Primary task screen for core user action
- Checkout/Completion flow in an e-commerce app
- Error/Empty state handling in a content app
