ui-design

Automate frontend UI design specification, color, typography, and layout decisions.

Updated Dec 8, 2025
One-click install
npx skills add https://github.com/sycsky/Soncho --skill ui-design-sycsky
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/sycsky/Soncho/tree/main/.codebuddy/rules/tcb/rules/ui-design-skill
Command: npx skills add https://github.com/sycsky/Soncho --skill ui-design-sycsky

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the creation and governance of distinctive frontend UI designs, eliminating ambiguity and ensuring production-ready guidelines across projects.

Core Features & Use Cases

  • Design specification: Define purpose, aesthetic direction, color palette, typography, and layout strategy before implementation.
  • Aesthetic direction & production readiness: Establish a unique visual language for web pages, mini-program interfaces, and prototypes that are ready for development.
  • Design process guidance: Provides a structured workflow from UX analysis to high-fidelity prototype delivery, with quality checks.

Quick Start

Draft a high-fidelity dashboard UI concept with a defined aesthetic direction and color/typography system.

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 distinctive frontend UI design that is production-ready?▼

Create a distinctive frontend UI design by defining specific aesthetic directions, color palettes, typography, and layout strategies upfront to deliver production-ready concepts for web pages and prototypes.

What is the process for generating UI design specifications for mini-program interfaces?▼

Generating UI design specifications for mini-program interfaces involves a structured workflow from UX analysis to high-fidelity prototype delivery, enforcing explicit color and typography decisions with built-in quality checks.

Can I use this to draft a high-fidelity dashboard UI concept with a defined color and typography system?▼

Yes, you can draft a high-fidelity dashboard UI concept by establishing a unique visual language and applying a predefined aesthetic direction, color palette, and typography system before implementation.

Does this approach work for establishing a unique visual language across multiple web projects?▼

Yes, it streamlines the creation and governance of distinctive frontend UI designs across multiple projects, eliminating ambiguity and ensuring consistent, production-ready design guidelines are applied.

What's the best way to ensure my prototype design has explicit layout and typography decisions?▼

The best way to ensure explicit layout and typography decisions is to enforce design specification rules that define purpose, aesthetic direction, and layout strategy prior to high-fidelity prototype delivery.