ui-design

Generate a UI design specification with typography, color, spacing, and layout patterns.

Updated Mar 18, 2026
One-click install
npx skills add https://github.com/derek2035/talkbook --skill ui-design-derek2035
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/derek2035/talkbook/tree/main/.agents/skills/cloudbase/references/ui-design
Command: npx skills add https://github.com/derek2035/talkbook --skill ui-design-derek2035

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers often lack a clear upfront visual direction, resulting in inconsistent interfaces and stalled development. This skill provides a structured design brief and concrete guidelines to ensure cohesive UI outcomes.

Core Features & Use Cases

  • Establishes aesthetic direction, typography, color palette, layout strategy, and component rules to guide UI implementation.
  • Produces a repeatable design specification workflow that teams can reference before coding for web or mini-programs.
  • Use Case: when starting a new product page, generate a design spec with typography choices, color tokens, spacing, and layout patterns.

Quick Start

Provide a complete UI concept for a new page, including typography, color, spacing, and component hierarchy.

Frequently Asked Questions about ui-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I establish a clear visual direction for frontend interfaces before coding?

To establish a visual direction, you can generate a structured design specification that defines typography, color palette, layout strategy, and component rules upfront to ensure cohesive UI outcomes and prevent stalled development.

What is the best way to create a design spec for a new product page?

The best way to create a design spec is to produce a repeatable design brief that articulates typography choices, color tokens, spacing, layout patterns, and component hierarchy, providing ready-to-implement UI guidelines for your team.

Why does my UI design look inconsistent across different web pages?

Your UI design looks inconsistent because it lacks a clear upfront visual direction; enforcing a structured design specification with defined typography, color, and component systems ensures cohesive outcomes across projects and teams.

Can I use this approach to define component rules for mini-programs?

Yes, you can use this approach to define component rules for mini-programs, as the workflow produces a repeatable design specification that teams can reference before coding for web or mini-program platforms.

How do I generate a UI concept with complete typography and color tokens?

You generate a UI concept by providing a complete page idea, which the system processes to output concrete guidelines including typography choices, color tokens, spacing values, and layout patterns.

Do I need specific design software to articulate aesthetic direction?

No specific design software is needed to articulate aesthetic direction; the process focuses on planning and enforcing design rules to produce ready-to-implement UI guidelines rather than relying on external graphical tools.