skills.rest
lxb031018
lxb031018COMMUNITY
Explore all skills by this author →
GitHub

ui-design

Generate frontend UI design specifications with layout, typography, and color constraints.

2|1|Updated Apr 3, 2026
Search Tags:#typography#color palette#design specification#ui design#interface guidelines#layout strategy#front-end prototype
One-click install
npx skills add https://github.com/lxb031018/qintu --skill ui-design-lxb031018
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/lxb031018/qintu/tree/main/.codebuddy/skills/ui-design
Command: npx skills add https://github.com/lxb031018/qintu --skill ui-design-lxb031018

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI design requests often get stuck between vague ideas and implementation, causing inconsistent aesthetics and rework across screens and platforms. This Skill helps you turn interface needs into a concrete, buildable design specification before any UI code is written.

Core Features & Use Cases

  • Deliberate visual direction: Defines purpose, aesthetic style, color palette, typography, and layout strategy so the result doesn’t default to generic patterns.
  • Prototype-ready specs: Guides high-fidelity interface planning and prepares UI decisions for frontend implementation across surfaces.
  • Design guardrails: Enforces constraints like forbidden colors/fonts, discourages premature code, and includes a self-audit checklist to prevent aesthetic drift.

Quick Start

Use the ui-design skill to produce a complete design specification for a Flutter app’s “Route Sharing Start Navigation” card UI before writing any interface code.

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 writing frontend code?▼

A UI design specification defines visual direction, color palette, typography, and layout strategy before coding. It aligns aesthetic decisions with product requirements to prevent inconsistent interfaces and rework across web and mini-program surfaces.

What is included in a frontend interface design specification for web and mini-programs?▼

A frontend interface design specification covers layout decisions, typography, color palettes, visual hierarchy, and component planning for web and mini-program surfaces, ensuring the interface prototype adheres to constrained design rules and visual guardrails.

How do I plan layout strategy and typography for a high-fidelity UI prototype?▼

Plan layout strategy and typography by establishing a constrained visual hierarchy and explicit design rules, ensuring your high-fidelity UI prototype maintains a deliberate aesthetic direction and avoids generic interface patterns during component planning.

Does a UI design specification help with mini-program interface planning?▼

Yes, a UI design specification supports mini-program interface planning by defining component structures and visual hierarchy, preparing interface decisions specifically for mini-program surfaces to ensure aesthetic consistency before frontend prototype implementation.

How do I prevent aesthetic drift when building frontend prototypes?▼

Prevent aesthetic drift in frontend prototypes by enforcing a constrained color palette and typography rules, applying a pre-implementation checklist and design guardrails to ensure the visual hierarchy remains consistent with the initial design specification.

Related Skills

Explore More Design & Creative Skills→
manutejmanutej
61

wireframing

Create low- and high-fidelity wireframes with annotations for web and mobile interfaces.

Community
Intermediate
uni-helperuni-helper
95

uni-app

Develop Vue.js applications for iOS, Android, Web, and mini-programs.

Official
Advanced
neitui-coderneitui-coder

ui-design

Create high-fidelity frontend UI prototypes with typography, color, and motion design rules.

Community
Advanced
yashs33244yashs33244
1

canvas-design

Generate a visual philosophy manifesto and render it as a single-page PDF or PNG poster.

Community
Advanced