ui-expert

Translate UI decisions into deterministic, pixel-perfect prompts for AI code generators.

6|1|Updated Feb 26, 2026
One-click install
npx skills add https://github.com/Clemens865/My-Claude-Skills --skill ui-expert-clemens865
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-expert
Source: https://github.com/Clemens865/My-Claude-Skills/tree/main/skills/ui-expert
Command: npx skills add https://github.com/Clemens865/My-Claude-Skills --skill ui-expert-clemens865

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designing UI prompts that are precise, repeatable, and easy to hand off to AI code generators is hard. ui-expert provides a guided, interactive workflow that translates design intent into exact, executable prompts, reducing ambiguity and back-and-forth.

Core Features & Use Cases

  • Interactive 6-phase design loop (Discovery, Design System, Architecture, Section Spec, Assembly, Review) that converts decisions into concrete numeric specs.
  • Image reference support to extract colors, typography, layout, and effects for seed values in the design system.
  • Per-section pixel-spec drafting with gated approvals to produce production-ready prompts for AI code generators.
  • Broad applicability: design pages, sections, or components and export a single, deterministic prompt.

Quick Start

Design a UI page by starting Phase 1 (Discovery) and let ui-expert guide you through all 6 phases to produce a pixel-perfect prompt.

Frequently Asked Questions about ui-expert

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

FAQPage Schema
How do I generate deterministic UI design prompts for AI code generators?▼

To generate deterministic UI design prompts, use an interactive 6-phase workflow that translates design intent into exact, executable prompts by enforcing explicit numeric values and CSS-native language. This reduces ambiguity and back-and-forth.

What is the best way to convert an image reference into a production-ready UI prompt?▼

The best way to convert an image reference into a UI prompt is to extract colors, typography, layout, and effects as seed values during the Design System phase, then apply them to draft per-section pixel-specs with gated approvals.

How does a guided design workflow help create pixel-perfect prompts?▼

A guided design workflow creates pixel-perfect prompts by processing Discovery, Architecture, and Section Spec phases sequentially, ensuring every decision translates into concrete numeric specs within a top-down, reusable template.

Can I design individual UI components using a deterministic prompt workflow?▼

Yes, you can design individual UI components using this workflow. The process applies broadly to pages, sections, or components, allowing you to export a single, deterministic prompt for any targeted UI element.

What's the best way to structure UI prompts for AI code generation without ambiguity?▼

The best way to structure UI prompts without ambiguity is to enforce explicit numeric values and CSS-native language within a top-down, reusable template, ensuring the output is production-ready for AI code generators.