Frontend Design Workflow Guide
Paste the following prompt into your AI chat to install this skill:
Please follow https://skillhub.cn/install/skillhub.md to install @user_e07fe912/frontend-design-v2.
About this skill
Common Challenges in Frontend Design
When building modern web interfaces, teams often struggle with cluttered layouts, hard-to-maintain style systems, and stiff interaction effects. Traditional frontend design lacks structured guidance, leading to inconsistent component styles, code bloat, and poor support for responsiveness and accessibility. For instance, using generic blues like #007bff can make interfaces look outdated, while arbitrary animation durations disrupt user experience fluidity.
Core Workflow of the Skill
This skill provides a complete frontend design methodology from planning to implementation, focusing on four key steps:
1. Layout Design: Sketch component structures in ASCII wireframes before coding to ensure logical clarity.
2. Theme Design: Define colors, fonts, spacing, and shadows. It recommends using oklch() for modern color definitions and semantic variables (e.g., --primary). Fonts are selected from Google Fonts (e.g., Inter, JetBrains Mono), spacing follows a 0.25rem base unit, and shadows are kept subtle.
3. Animation Design: Plan micro-interactions and transitions, such as entry animations (300-500ms, ease-out) and hover states (150-200ms).
4. Implementation: Generate actual code integrating Tailwind CSS for styling, Flowbite component library, Lucide icons, and real placeholder image services like Unsplash.
Additionally, the skill emphasizes responsive design (mobile-first) and accessibility (semantic HTML, ARIA labels, keyboard navigation). Theme patterns like modern dark mode, Neo-Brutalism, and Glassmorphism offer design references, and component design tips (e.g., cards, buttons, tables) ensure attention to UI details.
Application Boundaries and Notes
This skill is primarily suited for frontend design work such as UI components, landing pages, and dashboards. It relies on tools like Tailwind CSS and Flowbite, requiring developers to have foundational knowledge in these technologies. For complex animations or backend integration, additional customization may be needed. The skill does not cover installation commands or commercial promotion, focusing purely on design workflows and implementation standards.
Use Cases
- When developing a new project, planning the layout structure of a landing page using ASCII wireframes to ensure clear component hierarchy.
- Designing a dashboard interface for a SaaS product, requiring a theme color scheme that includes dark mode, using oklch() to avoid generic blues.
- Implementing a mobile-friendly navigation bar, needing to add hover animations and keyboard navigation support for accessibility.
- Building a card component library, requiring guidelines for setting shadows, spacing, and loading states to maintain style consistency.
Best For
- Frontend developers: Need to quickly build interfaces conforming to modern design standards (like Vercel-style dark mode) and avoid style maintenance chaos.
- UI designers: Want to convert design drafts into interactive code, using semantic HTML and Tailwind CSS to implement components.
- Product leads: Require teams to design unified brand themes for multiple pages, including color, font, and animation standards.
- Independent developers: Learning to systematize frontend design workflows, achieving professional-grade UI step-by-step from layout to animation.
Related Skills
Restyle a short video into a new visual style while preserving core elements such as characters, actions, and composition, suitable for various creative conversions like anime, illustration, ink wash, etc.
Create Douyin vertical video covers from topics, hooks, or materials with support for creative generation, image synthesis, and refinement.
An AI tool that transforms real photos into specified illustration styles while preserving subject recognition.
An engineering-driven solution that integrates design styles, UX workflows, design systems, and multi-platform implementation to solve cross-project design consistency.