skills.rest
pillip
pillipCOMMUNITY
Explore all skills by this author →
GitHub

uiux

Generates UI/UX design system, wireframes, and HTML prototype from kickoff outputs.

11|Updated Feb 18, 2026
Search Tags:#design#documentation#prototype#wireframes#design-system#uiux#kickoff
One-click install
npx skills add https://github.com/pillip/claude-dev-kit --skill uiux-pillip
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uiux
Source: https://github.com/pillip/claude-dev-kit/tree/main/skills/uiux
Command: npx skills add https://github.com/pillip/claude-dev-kit --skill uiux-pillip

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI/UX teams often struggle to translate kickoff outputs into a cohesive, scalable design system and a functional prototype. This skill automates the process of turning requirements, IA, and UX specs into a living design system, wireframes, and an HTML prototype.

Core Features & Use Cases

  • Establishes a design philosophy from kickoff outputs and generates a complete design system (colors, typography, spacing, components) and a wireframes set.
  • Produces an HTML prototype wired to the design system, enabling quick validation with stakeholders and developers.
  • Supports a recommended workflow: /prd → /kickoff → /uiux to align requirements with implementation.

Quick Start

Run /kickoff to generate kickoff artifacts for UI/UX, then run /uiux to build the design philosophy, design system, wireframes, and prototype.

Frequently Asked Questions about uiux

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

FAQPage Schema
How do I turn PRD and UX specs into a cohesive design system and prototype?▼

This skill converts kickoff-driven outputs into a cohesive UI/UX design system, wireframes, and a ready-to-view HTML prototype. It establishes a design philosophy from your requirements and generates complete documentation and interactive files.

How do I generate wireframes and a design system from product requirements?▼

Run the /kickoff command to generate initial UX artifacts, then execute /uiux to build the design philosophy, design system, wireframes, and prototype. This workflow aligns requirements directly with visual implementation.

What documentation files are needed for a complete UI/UX design system?▼

A complete UI/UX design system requires formal documentation including design philosophy, component tokens, and interaction specs. This skill generates these as docs/design_philosophy.md, docs/design_system.md, docs/wireframes.md, and docs/interactions.md.

Can I generate an HTML prototype wired directly to my design system components?▼

Yes, you can generate an HTML prototype wired directly to your design system components. This skill produces a ready-to-view prototype under the prototype/ directory, connecting visual tokens to interactive HTML for stakeholder validation.

Do I need a PRD before starting the UI/UX design system generation process?▼

Yes, you need a PRD before starting the UI/UX design system generation process. The recommended workflow is /prd followed by /kickoff to generate artifacts, ensuring requirements and UX specs align before generating the prototype.

Related Skills

Explore More Design & Creative Skills→
scanadyscanady

design-research-ux-artifacts

Translate user evidence into structured Markdown UX artifacts in docs/product/ux/.

Community
Intermediate
ArieGoldkinArieGoldkin
10

prototype-to-production

Convert HTML and Figma prototypes into typed React components with Tailwind.

Community
Advanced
CrashBytesCrashBytes
6

product-owner

Manage product backlogs, write user stories, and prioritize with RICE.

Community
Advanced
spuneiarturspuneiartur
1

canvas-design

Generate single-page PDF or PNG visual artifacts with formal design philosophy.

Community
Advanced