skills.rest
mbpz
mbpzCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Create UI/UX design specifications and prototypes for web and mini programs.

Updated Jul 9, 2026
Search Tags:#web development#ux design#design specification#ui design#mini program development
One-click install
npx skills add https://github.com/mbpz/poetry-atlas-mp --skill ui-design-mbpz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/mbpz/poetry-atlas-mp/tree/main/.agents/skills/cloudbase/references/ui-design
Command: npx skills add https://github.com/mbpz/poetry-atlas-mp --skill ui-design-mbpz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, FontAwesome, Heroicons, Material Icons, Feather Icons, Lucide Icons, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill assists with UI/UX design for web and mini programs, providing direction, specifications, and prototypes before implementation.

Core Features & Use Cases

  • Visual Direction & Specifications: Offers guidelines for visual hierarchy, layout decisions, and design specifications.
  • Prototyping: Assists in creating visual prototypes for interfaces.
  • Use Case: For a new mini program, use this Skill to create a design specification that outlines the aesthetics, typography, color palette, and layout strategy before development begins.

Quick Start

Use the ui-design skill to generate a UI/UX design specification for a new mini program project.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I create a UI design specification for a mini program before development?▼

To create a UI design specification for a mini program, outline the visual hierarchy, typography, color palette, and layout strategy. This ensures interface aesthetics and structural guidelines are established before implementation begins.

What is included in UI/UX design guidance for web development?▼

UI/UX design guidance for web development includes visual direction, layout decisions, and design specifications. It provides the aesthetic framework and prototype creation needed to align interface designers and developers before coding.

Can I use Tailwind CSS and icon libraries like FontAwesome for web interface prototyping?▼

Yes, you can use Tailwind CSS alongside icon libraries like FontAwesome, Heroicons, and Material Icons for web interface prototyping. These dependencies help establish visual direction and detailed design specifications.

What's the best way to establish visual hierarchy and layout for a new web project?▼

The best way to establish visual hierarchy and layout for a new web project is by generating a comprehensive UI design specification. This defines the aesthetics, typography, and layout strategy prior to development.

Does UI design guidance work for both web and mini program development?▼

Yes, UI design guidance works for both web and mini program development. It delivers tailored visual direction, design specifications, and prototype creation to support interface designers across both platforms.

Why do I need a design specification before starting mini program development?▼

You need a design specification before mini program development to define the visual hierarchy, typography, and color palette. This prevents misalignment between interface aesthetics and the final coded implementation.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
jngong-collabjngong-collab
1

ui-design

Generate high-fidelity UI design instructions for web and mini-program interfaces.

Community
Advanced
BinkyTwinBinkyTwin
1

ui-theme

Enforce token-based Tailwind theming with CSS variables for UI colors.

Community
Intermediate
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate