Toolverse
All skills

ui-design

by 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.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Category
UX / Design
Views
2

About this skill

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.

How to use

  1. Aktywuj umiejętność ui-design w Claude lub Copilot, gdy pracujesz nad interfejsem użytkownika — stroną internetową, mini-aplikacją, komponentem frontendowym lub prototypem.

  2. Przed napisaniem jakiegokolwiek kodu (JSX, WXML, CSS) poproś umiejętność o wygenerowanie specyfikacji designu. Specyfikacja powinna zawierać: cel interfejsu, kierunek estetyczny, paletę kolorów, typografię, odstępy i zachowanie wizualne.

  3. Zdefiniuj wyraźny kierunek estetyczny zamiast polegać na generycznych szablonach AI. Opisz, jaki styl wizualny chcesz osiągnąć — minimalistyczny, nowoczesny, klasyczny lub inny.

  4. Sprawdź ograniczenia platformy docelowej (web, mini-program) i upewnij się, że specyfikacja designu jest z nimi zgodna. W razie potrzeby odwołaj się do umiejętności web-development lub miniprogram-development.

  5. Dopiero po zatwierdzeniu specyfikacji designu pozwól umiejętności napisać kod interfejsu z uwzględnieniem wszystkich wcześniej zdefiniowanych decyzji wizualnych.

  6. Nie używaj tej umiejętności do zadań backendowych, projektowania baz danych ani czystej logiki biznesowej bez komponentów UI.

Related skills

cold-email

by alirezarezvani

When the user wants to write, improve, or build a sequence of B2B cold outreach emails to prospects who haven't asked to hear from them. Use when the user mentions 'cold email,' 'cold outreach,' 'prospecting emails,' 'SDR emails,' 'sales emails,' 'first touch email,' 'follow-up

UX / Design
2359

content-trend-researcher

by alirezarezvani

Advanced content and topic research skill that analyzes trends across Google Analytics, Google Trends, Substack, Medium, Reddit, LinkedIn, X, blogs, podcasts, and YouTube to generate data-driven article outlines based on user intent analysis

UX / Design
20116

competitive-landscape

by wshobson

This skill should be used when the user asks to \

UX / Design
1457

stitch-ui-design

by sickn33

Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, generate mobile/web designs, or needs help crafting Stitch prompts. Covers prompt structure, specificity techniques, iteration

UX / Design
1670

software-architecture

by davila7

Guide for quality focused software architecture. This skill should be used when users want to write code, design architecture, analyze code, in any case that relates to software development.

UX / Design
66205

mermaid

by iOfficeAI

Render Mermaid diagrams as SVG or ASCII art using beautiful-mermaid. Use when users need to create flowcharts, sequence diagrams, state diagrams, class diagrams, or ER diagrams. Supports both graphical SVG output and terminal-friendly ASCII/Unicode output.

UX / Design
1881