skills.rest
timzaak
timzaakCOMMUNITY
Explore all skills by this author →
GitHub

t-ui-design

Generate HTML UI variants and a spec from PRD inputs.

64|6|Updated Apr 17, 2026
Search Tags:#frontend#iteration#ui-design#mockups#design-exploration#decision-board
One-click install
npx skills add https://github.com/timzaak/web-dev-skills --skill t-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: t-ui-design
Source: https://github.com/timzaak/web-dev-skills/tree/main/skills/t-ui-design
Command: npx skills add https://github.com/timzaak/web-dev-skills --skill t-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

After PRD check, teams often struggle to compare frontend UI directions and converge on a final design. This skill automates UI exploration by producing multiple HTML mockups, a design board, feedback history, and a final winner spec to enable auditable and repeatable UI decisions.

Core Features & Use Cases

  • Generate multiple standalone HTML mockups (variants) to compare UI directions without relying on design tools.
  • Produce a design board (board.html) that records decisions and links to the winner and UI spec.
  • Iterate on feedback to converge on a final winner with a published ui-spec for handoff.

Quick Start

Use the t-ui-design feature to generate UI exploration artifacts after PRD check.

Frequently Asked Questions about t-ui-design

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

FAQPage Schema
How do I generate multiple UI mockups from a PRD for frontend design exploration?▼

You generate UI mockups by inputting a checked PRD, which triggers the creation of multiple standalone HTML variants and a design decision board under .ai/design-ui/<feature>/ for visual comparison.

What is the best way to compare frontend UI directions without using dedicated design software?▼

The best way to compare UI directions without design software is generating standalone HTML mockups. This skill outputs a board.html linking to multiple variants, enabling teams to review and iterate on frontend designs directly in the browser.

How do I document UI design decisions and feedback for frontend handoff?▼

You document UI design decisions by using a workflow that generates a feedback.md history and a final winner.html. It outputs a published ui-spec.md to ensure auditable and repeatable UI decisions for design handoff.

Does UI design exploration require a PRD check before generating HTML mockups?▼

Yes, UI design exploration requires a passed PRD check before initiating. The skill applies specifically when frontend UI exploration is needed post-PRD validation, using the PRD inputs to drive the mockup generation process.

What files are output when iterating on frontend UI variants?▼

When iterating on frontend UI variants, the outputs include board.html, multiple variant files, feedback.md, winner.html, and ui-spec.md. These are organized under the .ai/design-ui/<feature>/ directory structure.

Related Skills

Explore More Design & Creative Skills→
0furkancolak0furkancolak

frontend-ui-prototype

Generate single-file HTML prototypes from product ideas or design references.

Community
Advanced
LikheetLikheet

frontend-design

Generate production-grade HTML/CSS/JS, React, or Vue interfaces with distinctive aesthetics.

Community
Basic
gvinokurgvinokur

ui-ux-designer

Generate standalone HTML mockups with React and MUI v7 components.

Community
Intermediate
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate