skills.rest
L-LesterYu
L-LesterYuCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design-zh

Design frontend UI layouts, themes, and animations with Tailwind CSS and Flowbite.

51|8|Updated Feb 24, 2026
Search Tags:#frontend#css#web design#ui design#tailwind#ux
One-click install
npx skills add https://github.com/L-LesterYu/OpenClaw-hot-skills-zh --skill frontend-design-zh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-zh
Source: https://github.com/L-LesterYu/OpenClaw-hot-skills-zh/tree/main/skills/SuperDesign-zh
Command: npx skills add https://github.com/L-LesterYu/OpenClaw-hot-skills-zh --skill frontend-design-zh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and best practices for creating aesthetically pleasing and modern user interfaces, streamlining the design process for various frontend projects.

Core Features & Use Cases

  • Layout Design: Structure UI components using ASCII wireframes.
  • Theme Design: Define modern color palettes (using oklch()), typography, spacing, and shadows.
  • Animation Design: Plan micro-interactions and transitions.
  • Implementation: Generate code snippets and guidance for frameworks like Tailwind CSS and libraries like Flowbite.
  • Use Case: Design a landing page for a new SaaS product, ensuring a modern look, intuitive layout, and smooth user experience.

Quick Start

Use the frontend-design-zh skill to create a modern dark mode theme for a dashboard UI.

Frequently Asked Questions about frontend-design-zh

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a modern UI for a SaaS landing page?▼

Designing a modern SaaS landing page UI involves structuring layouts with ASCII wireframes and defining visual themes using oklch(). This skill provides guidelines to ensure an intuitive layout and smooth user experience.

What is the best way to create a dark mode theme for a dashboard UI?▼

Creating a dark mode theme for a dashboard UI requires defining modern color palettes, typography, and shadows. You can use this skill to quickly generate theme guidelines ensuring visual appeal and component styling consistency.

Can I use Tailwind CSS and Flowbite for frontend component styling?▼

Yes, Tailwind CSS and Flowbite are supported for frontend component styling. The skill generates implementation code snippets and provides guidance for these frameworks to ensure responsive design and accessibility best practices.

How do you plan micro-interactions and animations for web design?▼

Planning micro-interactions and animations for web design involves defining transitions that enhance user experience. This skill provides specific animation design guidelines to facilitate smooth interactions within modern user interfaces.

Does this frontend UI design skill support responsive design and accessibility?▼

Yes, the frontend UI design skill adheres to best practices for responsive design and accessibility. It ensures that visually appealing user interfaces for landing pages and dashboards remain accessible across various devices.

Related Skills

Explore More Design & Creative Skills→
JangidVishJangidVish

uiux-wireframe-ia

Convert UX Strategy documents into text-based wireframes and validated information architecture.

Community
Intermediate
darblexdarblex

frontend-design

Provide frontend design guidelines for layouts, theming, and animations using Tailwind CSS and Flowbite.

Community
Intermediate
jamesgirouxjamesgiroux
3

ux-designer

Guide user interface and user experience design decisions for user-first outcomes.

Community
Intermediate
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate