UI Redesign & Enhancement Project
Budget: $50 – $500 USD
Objective
Redesign and implement a series of interface modules (including but not limited to the homepage) to improve visual consistency and user engagement across the system. All designs are finalized in Figma and ready for implementation.
Technical Requirements
▸ Core Stack:
Nuxt.js 3.7+ (Vue 3 Composition API)
TypeScript 5.0+ with strict type checking
Tailwind CSS 3.4+ with JIT compiler
State Management: Pinia (Vuex alternative)
Package Manager: pnpm 8.6+
▸ Mandatory Skills:
Pixel-perfect implementation from Figma (auto-layout/constraints mastery)
Responsive breakpoints handling (mobile/tablet/desktop)
SVG optimization & icon system implementation
Cross-browser compatibility (Chrome/Safari/Firefox latest 3 versions)
Performance optimization (Lighthouse score >90)
Trial Task Specifications
▶ Scope: Homepage（all loading page） Revamp
- Rebuild header/navigation （all loading page）with sticky behavior
- Implement hero section with Lottie animations
- Card grid system with hover interactions
- Dynamic data loading skeleton screens
- Mobile menu implementation
▶ Deliverables Checklist:
1. 100% matched Figma implementation (version 2.3)
2. Responsive test reports (3 device types)
3. Lighthouse performance audit
4. Clean component-based architecture
5. Documentation of key technical decisions
▶ Evaluation Criteria:
• Design Accuracy: 95%+ match with Figma specs
• Code Quality: ESLint+Prettier compliance
• Performance: <200ms CLS, <1s LCP
• Deadline Adherence: 48h from task assignment
Compensation Structure
Phase 1 - Trial:
$50 USD (Homepage) | 2-day deadline( Hosting another 50USD after completion)
Phase 2 - Full Project:
$400 Base + $100 Bonus (7-day completion)
= $500 Total Potential + $100 Bonus (7-day completion)
Developer Requirements
ESSENTIALS:
✓ 3+ commercial Nuxt.js projects shipped
✓ Figma-to-code workflow expertise
✓ TypeScript advanced patterns mastery
✓ Tailwind responsive design system experience
✓ Real-world performance optimization cases
NICE-TO-HAVE:
● PM2/Nginx deployment experience
● CI/CD pipeline configuration
● Component library creation
● A11y compliance knowledge
SOFT SKILLS:
★ Clear daily progress reporting
★ Design QA collaboration ability
★ Deadline risk communication
★ Technical debt documentation
Application Package
Technical CV (highlight Nuxt.js experience)
Portfolio with live demos (Github/GitLab/Bitbucket)
200-word implementation strategy covering:
Figma design analysis approach
Component architecture plan
Performance optimization tactics
Redesign and implement a series of interface modules (including but not limited to the homepage) to improve visual consistency and user engagement across the system. All designs are finalized in Figma and ready for implementation.
Technical Requirements
▸ Core Stack:
Nuxt.js 3.7+ (Vue 3 Composition API)
TypeScript 5.0+ with strict type checking
Tailwind CSS 3.4+ with JIT compiler
State Management: Pinia (Vuex alternative)
Package Manager: pnpm 8.6+
▸ Mandatory Skills:
Pixel-perfect implementation from Figma (auto-layout/constraints mastery)
Responsive breakpoints handling (mobile/tablet/desktop)
SVG optimization & icon system implementation
Cross-browser compatibility (Chrome/Safari/Firefox latest 3 versions)
Performance optimization (Lighthouse score >90)
Trial Task Specifications
▶ Scope: Homepage（all loading page） Revamp
- Rebuild header/navigation （all loading page）with sticky behavior
- Implement hero section with Lottie animations
- Card grid system with hover interactions
- Dynamic data loading skeleton screens
- Mobile menu implementation
▶ Deliverables Checklist:
1. 100% matched Figma implementation (version 2.3)
2. Responsive test reports (3 device types)
3. Lighthouse performance audit
4. Clean component-based architecture
5. Documentation of key technical decisions
▶ Evaluation Criteria:
• Design Accuracy: 95%+ match with Figma specs
• Code Quality: ESLint+Prettier compliance
• Performance: <200ms CLS, <1s LCP
• Deadline Adherence: 48h from task assignment
Compensation Structure
Phase 1 - Trial:
$50 USD (Homepage) | 2-day deadline( Hosting another 50USD after completion)
Phase 2 - Full Project:
$400 Base + $100 Bonus (7-day completion)
= $500 Total Potential + $100 Bonus (7-day completion)
Developer Requirements
ESSENTIALS:
✓ 3+ commercial Nuxt.js projects shipped
✓ Figma-to-code workflow expertise
✓ TypeScript advanced patterns mastery
✓ Tailwind responsive design system experience
✓ Real-world performance optimization cases
NICE-TO-HAVE:
● PM2/Nginx deployment experience
● CI/CD pipeline configuration
● Component library creation
● A11y compliance knowledge
SOFT SKILLS:
★ Clear daily progress reporting
★ Design QA collaboration ability
★ Deadline risk communication
★ Technical debt documentation
Application Package
Technical CV (highlight Nuxt.js experience)
Portfolio with live demos (Github/GitLab/Bitbucket)
200-word implementation strategy covering:
Figma design analysis approach
Component architecture plan
Performance optimization tactics