frontend-design-zh

Community

Craft beautiful, modern UIs.

AuthorL-LesterYu
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: frontend-design-zh
Download link: https://github.com/L-LesterYu/OpenClaw-hot-skills-zh/archive/main.zip#frontend-design-zh

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.