skills.rest
williamwang25
williamwang25COMMUNITY
Explore all skills by this author →
GitHub

ui-design

Create UI design specifications with color palettes and typography before frontend implementation.

Updated May 14, 2026
Search Tags:#typography#color palette#design specification#ui design#visual hierarchy#mini program#web prototype
One-click install
npx skills add https://github.com/williamwang25/ams-admin --skill ui-design-williamwang25
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/williamwang25/ams-admin/tree/main/.windsurf/skills/cloudbase/references/ui-design
Command: npx skills add https://github.com/williamwang25/ams-admin --skill ui-design-williamwang25

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you quickly turn vague UI requests into a concrete, build-ready interface direction. It prevents wasted engineering effort by forcing visual decisions (layout, typography, spacing, and hierarchy) to be defined before implementation.

Core Features & Use Cases

  • Design specification first: Produces a full UI design spec including purpose, aesthetic direction, color palette, typography, and layout strategy before any code.
  • Prototype-ready output: Guides creation of high-fidelity frontend prototypes for web or mini-program interfaces.
  • Quality and compliance guardrails: Enforces strong visual rules (e.g., banned colors/fonts, professional icon libraries, non-generic layout patterns) and includes a checklist to self-audit design consistency.

Quick Start

Tell an AI: “Design the UI for my AMS asset management admin screen, choose a distinct aesthetic direction, define the color palette and typography, then describe an implementation-ready layout and component structure.”

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 before coding my web application?▼

To create a UI design specification, define the visual hierarchy, aesthetic direction, color palette, typography, and layout strategy for your web interface before writing any frontend code to prevent premature implementation.

What is the best way to plan visual hierarchy and component structure for a mini program?▼

Planning visual hierarchy for a mini program involves establishing a structured design specification that dictates component layout, spacing rules, and typography to ensure a cohesive, prototype-ready interface direction.

How do I turn vague UI requirements into an implementation-ready layout?▼

Transform vague UI requirements into an implementation-ready layout by forcing visual decisions like spacing, typography, and visual hierarchy into a concrete design specification, resolving ambiguity before frontend development begins.

Does UI design planning enforce compliance checks for icons and color palettes?▼

Yes, UI design planning enforces compliance by applying guardrails that restrict banned colors, mandate professional icon libraries, and validate visual rules through a self-audit checklist to ensure design consistency.

Related Skills

Explore More Design & Creative Skills→
X-School-AcademyX-School-Academy
9

dev-swarm-mvp

Define MVP scope, success metrics, and acceptance criteria for early product validation.

Official
Basic
jngong-collabjngong-collab
1

ui-design

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

Community
Advanced
hpurihpuri

Browser Tester

Run E2E visual and interactive tests on ADK agents in a browser.

Community
Advanced
cooopmaccooopmac

brand-guidelines

Apply Anthropic brand colors and typography to documents with Python.

Community
Intermediate