skills.rest
l395624064
l395624064COMMUNITY
Explore all skills by this author →
GitHub

ui-design

Standardize frontend UI design with structured guidance for web, apps, and mini-programs.

Updated Mar 27, 2026
Search Tags:#typography#frontend#prototyping#ui-design#color-palette#aesthetic-direction#design-spec
One-click install
npx skills add https://github.com/l395624064/plantCard_Demo01 --skill ui-design-l395624064
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/l395624064/plantCard_Demo01/tree/main/.trae/skills/cloudbase/references/ui-design
Command: npx skills add https://github.com/l395624064/plantCard_Demo01 --skill ui-design-l395624064

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides structured, production-grade UI design guidance to help teams create cohesive frontend interfaces quickly with strong aesthetics and consistent design systems.

Core Features & Use Cases

  • Define a design direction and produce high-fidelity UI prototypes for web pages, apps, and mini-program interfaces.
  • Establish typography, color palettes, spacing, and layout strategies aligned with a chosen aesthetic direction.
  • Generate implementation-ready UI guidelines that integrate with design systems and professional icon libraries.

Quick Start

Define the design direction, then create a high-fidelity prototype adhering to the guide.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I establish a cohesive frontend UI design system for web and app interfaces?▼

Define a structured aesthetic direction, apply mandatory design pre-checks, and set constraints for color palettes and typography to establish a cohesive frontend UI design system for web and app interfaces.

What is the best way to generate implementation-ready UI guidelines for mini-programs?▼

Generate implementation-ready UI guidelines for mini-programs by outlining mandatory design pre-checks and aesthetic directions that integrate seamlessly with existing design systems and professional icon libraries.

How do I choose the right typography and color palette for my frontend UI aesthetic direction?▼

Apply structured design constraints aligned with your chosen aesthetic direction to select typography and color palettes, ensuring visual identity consistency across all frontend UI components.

Can I use this structured UI design framework for both high-fidelity prototypes and production-grade components?▼

Yes, you can use this structured framework for both high-fidelity prototypes and production-grade components because it standardizes visual identity, spacing, and layout strategies into implementation-ready guidelines.

Does this UI design guidance require any specific frontend frameworks or component libraries to function?▼

No, this UI design guidance does not require specific frontend frameworks or component libraries, as it provides a standalone, production-grade framework applicable across web pages, apps, and mini-programs.

Related Skills

Explore More Design & Creative Skills→
pingmepipingmepi

pm-stage-04-design-spec

Generate design specifications with traceability to PRD user stories.

Community
Advanced
johnnyelwailerjohnnyelwailer

figma-to-code

Convert Figma designs into React components with token-based styling.

Community
Intermediate
zangjeicyzangjeicy

claude-design

Generate high-fidelity HTML design artifacts in CLI or API environments.

Community
Advanced
dawsonblockdawsonblock

frontend-design

Design and implement responsive UI interfaces for web applications using React and CSS frameworks.

Community
Advanced