skills.rest
lance-donif
lance-donifCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Create visual interface design specifications and prototypes for web or mini-program projects.

Updated Apr 13, 2026
Search Tags:#typography#layout#UI#visual design#aesthetic#prototype#styles
One-click install
npx skills add https://github.com/lance-donif/xionghaizi --skill ui-design-lance-donif
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/lance-donif/xionghaizi/tree/main/.trae/skills/ui-design
Command: npx skills add https://github.com/lance-donif/xionghaizi --skill ui-design-lance-donif

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps designers and developers create compelling visual directions, prototypes, and style specifications for user interfaces before implementation, ensuring aesthetic consistency and alignment with user needs.

Core Features & Use Cases

  • Design Specification Output: Craft detailed design specs including purpose, aesthetics, colors, typography, and layout strategies.
  • Prototype Conceptualization: Develop high-fidelity UI concepts reflecting specific aesthetic styles and platform requirements.
  • Use Case: A product team wants a visually stunning webpage with asymmetric layout, distinctive fonts, and atmospheric textures. This skill helps define the visual language and layout principles first.

Quick Start

Input involves defining the visual aesthetic and technical constraints to generate a complete UI design specification suitable for development.

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 visual interface design specification for a web project?▼

To create a visual interface design specification, define your aesthetic style, color palette, typography, and layout preferences upfront. This process generates a detailed UI spec and high-fidelity prototype concepts ensuring cohesive visual language development before implementation.

Why do my UI prototypes look inconsistent across different web pages?▼

UI prototypes look inconsistent when lacking a unified visual design specification. Defining precise layout principles, typography, and aesthetic directions before generating visual assets ensures high-quality, cohesive UI development that aligns with platform constraints.

Can I use this to generate mini-program UI concepts with specific aesthetic styles?▼

Yes, you can generate mini-program UI concepts by defining specific aesthetic styles and platform constraints. The process develops high-fidelity visual interface prototypes reflecting your distinct artistic directions and layout requirements.

What do I need to define before generating UI design specifications and prototypes?▼

Before generating UI design specifications, you must define precise style, font, color, and layout preferences. Inputting these visual aesthetic and technical constraints yields a complete design specification suitable for development.

What is the best way to establish a visual language for an asymmetric web layout?▼

The best way to establish a visual language for an asymmetric web layout is to define layout principles and typography first. Crafting detailed design specifications ensures the distinctive fonts and atmospheric textures align cohesively.

Does this approach work for both web and mini-program visual design projects?▼

Yes, this approach works for both web and mini-program projects. It guides the overall visual language and creates detailed visual interface design specifications tailored to the specific platform constraints and aesthetic requirements.

Related Skills

Explore More Design & Creative Skills→
AesopScottAesopScott
1

design-experience-plus-plus

Generate website and product surface designs using MAPS M8 Experience Design.

Community
Advanced
oxieoxie

ui-ux-design

Generate grayscale UI variants, functional prototypes, and polished designs with accessibility tests.

Community
Intermediate
AdobeDocsAdobeDocs

industry-use-case-builder

Automate Adobe Experience Platform Blueprints use-case creation across industries.

Official
Advanced
dachentdachent
18

canvas-design-codex

Verify canvas, SVG, and WebGL rendering via screenshot analysis.

Community
Advanced