skills.rest
ShaheerKhawaja
ShaheerKhawajaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

designer-upgrade

Orchestrate UI/UX redesign workflows producing HTML mockups and design tokens.

8|Updated Mar 17, 2026
Search Tags:#design#ui#interactive#ux#design-system#mockups#tokenization
One-click install
npx skills add https://github.com/ShaheerKhawaja/ProductionOS --skill designer-upgrade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designer-upgrade
Source: https://github.com/ShaheerKhawaja/ProductionOS/tree/main/skills/designer-upgrade
Command: npx skills add https://github.com/ShaheerKhawaja/ProductionOS --skill designer-upgrade

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The designer-upgrade skill orchestrates a structured, end-to-end UI/UX redesign workflow that turns design concepts into concrete, testable mockups and a design system, accelerating design-driven upgrades.

Core Features & Use Cases

  • Phase-driven design audit to identify usability and visual inconsistencies, with output artifacts like AUDIT-SYNTHESIS.md and DESIGN-SYSTEM.md.
  • Design system creation and tokenization, including tokens.css and COMPONENT-INVENTORY.md.
  • Interactive HTML mockups generation with inline CSS, annotations, and a comparison gallery, plus an implementation plan with prioritized fixes.
  • Optional parallel execution via /omni-plan-nth and /auto-swarm-nth to scale across large codebases.

Quick Start

Run the designer-upgrade workflow on your project to begin generating interactive UI mockups and a design system.

Frequently Asked Questions about designer-upgrade

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

FAQPage Schema
How do I orchestrate an end-to-end UI/UX redesign for a web project?▼

Orchestrate a UI/UX redesign by running a structured 5-phase pipeline that covers design audit, system tokenization, HTML mockup generation, interactive review, and implementation planning to produce testable assets.

What is design tokenization and how does it fit into a UI redesign workflow?▼

Design tokenization converts visual attributes into reusable variables during a UI redesign, generating a tokens.css file and component inventory to enforce visual consistency across interactive HTML mockups.

How do I generate interactive HTML mockups with inline CSS for user testing?▼

Generate interactive HTML mockups by creating self-contained files with inline CSS and annotations, outputting a comparison gallery to review UI changes and prioritize concrete implementation fixes.

Can I scale a design system audit across a large codebase?▼

Scale a design system audit across large codebases using parallel execution workflows like omni-plan-nth and auto-swarm-nth to process usability inconsistencies and generate mockups efficiently.

What artifacts are produced when auditing UI inconsistencies?▼

Auditing UI inconsistencies produces structured artifacts including AUDIT-SYNTHESIS.md for usability findings, DESIGN-SYSTEM.md for guidelines, and COMPONENT-INVENTORY.md for tracking.

Related Skills

Explore More Design & Creative Skills→
refactory-langrefactory-lang

speckit-workflows.baseline

Generate baseline-spec.md and current-state.md from codebase and git history.

Official
Advanced
LiinkiingLiinkiing
6

panda-css

Enforce Panda CSS styling conventions in TypeScript/TSX frontend projects.

Community
Intermediate
ShaheerKhawajaShaheerKhawaja
8

auto-mode

Orchestrate a 10-phase software pipeline with stateful resume and gate-driven decisions.

Community
Advanced
bikeshavingbikeshaving
2.8k

crank-component-authoring

Author interactive Crank.js components in single-file HTML without a build step.

Official
Intermediate