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.