skills.rest
TaylorHuston
TaylorHustonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design

Generate HTML UI design variants stored in ideas/[project]/docs/ui-designs/.

69|7|Updated Jan 19, 2026
Search Tags:#HTML#ui-design#mockups#ideas#ui-designs#variant-exploration#design-templates
One-click install
npx skills add https://github.com/TaylorHuston/local-life-manager --skill ui-design-taylorhuston
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/TaylorHuston/local-life-manager/tree/main/.claude/skills/ui-design
Command: npx skills add https://github.com/TaylorHuston/local-life-manager --skill ui-design-taylorhuston

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly generate HTML UI mockups and iterate designs for projects, storing them in ideas/[project]/docs/ui-designs/ for organized planning and review.

Core Features & Use Cases

  • Variant exploration: Generate multiple UI design variants in parallel to compare layouts and aesthetics.
  • Self-contained outputs: Produces standalone HTML/CSS/JS mockups that can be viewed without additional tooling.
  • Design planning artifacts: Keeps designs in ideas/[project]/docs/ui-designs/ to support planning, briefs, and handoffs.

Quick Start

Use the ui-design skill to generate a login screen mockup for yourbench, with up to 3 variants: /ui-design yourbench "login screen" --variants 3

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I generate HTML UI mockups for design exploration?▼

Generate HTML UI mockups by automating design creation and storing variants in ideas/[project]/docs/ui-designs/ for organized planning and review. You can produce a single design or multiple variants in parallel to compare layouts and aesthetics.

Can I create multiple UI design variants in parallel?▼

Yes, you can create multiple UI design variants in parallel. This allows you to quickly compare different layouts and aesthetics side-by-side, with optional tech variants like vanilla, shadcn, or chakra, stored in dedicated directories.

Do I need additional tooling to view the generated UI mockups?▼

No, you do not need additional tooling to view the UI mockups. The process requires self-contained HTML/CSS/JS outputs, producing standalone files that can be viewed directly in any web browser.

How should I organize UI design files for project planning and handoffs?▼

Organize UI design files by saving them in ideas/[project]/docs/ui-designs/. This structure supports design planning, briefs, and handoffs by keeping all mockups and variants in a dedicated project directory.

Does UI generation work with shadcn or chakra variants?▼

Yes, UI generation supports optional tech variants including vanilla, shadcn, and chakra. You can generate designs using these specific tech stacks and save them in dedicated directories for comparison.

Related Skills

Explore More Design & Creative Skills→
lxh755818-botlxh755818-bot

sketch

Generate disposable HTML mockups for comparing UI/UX design variants.

Community
Intermediate
mulyovedmulyoved

design-html

Convert approved UI mockups into responsive HTML/CSS using DESIGN.md tokens.

Community
Advanced
drt0927drt0927
5

plan-design-review

Generate visual mockups and design critique from PLAN documents.

Community
Advanced
tunneleventunneleven

c4flow:design

Generate design systems and UI mockups for specified features.

Community
Basic