ui-design

Name: ui-design
Rating: 5 (308 reviews)
Author: TencentCloudBase

Professional UI design and frontend interface guidelines. Use this skill when creating web pages, mini-program interfaces, prototypes, or any frontend UI components that require distinctive, production-grade design with exceptional aesthetic quality.

TL;DR

Professional UI design for frontend interfaces with distinctive, production-grade aesthetics.

What Is It

Frontend UI design and interface creation
High-fidelity prototypes with unique visual styles
Design for web, mini-programs, and production-ready interfaces
Mandatory design specification before any code

Key Features

MANDATORY: Complete Design Specification First
FORBIDDEN colors: purple, violet, indigo, fuchsia, blue-purple gradients
FORBIDDEN fonts: Inter, Roboto, Arial, Helvetica, system-ui, -apple-system
FORBIDDEN: emoji icons; use professional icon libraries (FontAwesome, Heroicons)
MUST use professional icon libraries, not emoji
MUST avoid standard centered layouts without creative breaking
MUST follow aesthetic direction with intentionality, not intensity
MUST run self-audit: color, font, icon, layout, specification compliance

How to Use

1.MUST output Design Specification before any code
2.Conduct User Experience Analysis, Product Interface Planning, Aesthetic Direction, High-Fidelity Design, Prototype Implementation, Realism Enhancement
3.Avoid forbidden colors, fonts, and layouts
4.Use professional icon libraries (not emoji)
5.Run self-audit: color, font, icon, layout, specification compliance
6.Choose one aesthetic direction from list (avoid 'modern', 'clean', 'simple')

Guardrails & Gotchas

MUST avoid purple/violet/indigo/fuchsia/blue-purple gradients
MUST avoid Inter, Roboto, Arial, Helvetica, system-ui, -apple-system
MUST avoid emoji as icons
MUST avoid standard centered layouts
MUST avoid 'modern', 'clean', 'simple' without specific style direction
MUST re-read and choose alternative aesthetic if trigger words are used

GitHub Stats

Author

@TencentCloudBase

Repository

TencentCloudBase/awesome-cloud...

Stars

308

Explore More Skills

move-code-quality

@davila7

Analyzes Move language packages against the official Move Book Code Quality Checklist. Use this skill when reviewing Move code, checking Move 2024 Edition compliance, or analyzing Move packages for best practices. Activates automatically when working with .move files or Move.toml manifests.

12.4k

1.1k

1w ago

ui-design

Explore More Skills

move-code-quality

e2e-testing-patterns

testing-anti-patterns