ui-expert

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

6|1|Updated Feb 26, 2026

Search Tags:#workflow #design #ui #interactive #prompt-engineering #ai-code #pixel-spec

Ready to run

npx skills add https://github.com/Clemens865/My-Claude-Skills --skill ui-expert-clemens865

💬 Prompt for ChatGPT / Claude Chat▼

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.