skills.rest
shaul1991
shaul1991COMMUNITY
Explore all skills by this author →
WebsiteGitHub

04-design

Guide UI/UX design and prototype workflows with Plan, Review, Execute, and Re-verify steps.

Updated Apr 27, 2026
Search Tags:#design#ui#governance#prototype#ux#wireframe#design-systems
One-click install
npx skills add https://github.com/shaul1991/shaul-plugin --skill 04-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 04-design
Source: https://github.com/shaul1991/shaul-plugin/tree/main/claude-code-plugin/project-lifecycle/skills/04-design
Command: npx skills add https://github.com/shaul1991/shaul-plugin --skill 04-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing and prototyping in isolation leads to misalignment, scope creep, and hard-to-track artifacts. This Skill provides a governed, phased approach to plan, validate, and deliver UI/UX outputs with traceable templates and artifacts in the .claude directories.

Core Features & Use Cases

  • End-to-end governance-driven Phase 4: Design / Prototype with explicit Plan, Review, Execute, and Re-verify steps.
  • Template-driven workflows: plan documents, wireframes, interaction specs, and design-system references.
  • Use Case: A design team applies this Skill to produce IA, wireframes, and interactive prototypes while maintaining traceability across branches and artifacts.

Quick Start

Create a design execution plan, obtain explicit approval, execute the plan, and verify artifacts to transition to the next phase.

Frequently Asked Questions about 04-design

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

FAQPage Schema
How do I manage UI/UX design workflows to prevent scope creep and artifact misalignment?▼

Governed UI/UX design workflows prevent scope creep by applying explicit Plan, Review, Execute, and Re-verify steps to produce traceable wireframes and prototypes. This phased approach ensures design artifacts remain aligned with requirements across product branches.

What is the best way to structure an end-to-end prototype workflow for a design team?▼

An end-to-end prototype workflow structures design phases from governance to delivery using template-driven plan documents, interaction specs, and design-system references. Teams create information architecture, wireframes, and interactive prototypes while maintaining artifact traceability throughout execution.

How do I create a design execution plan that requires explicit approval before prototyping?▼

Create a design execution plan by defining IA, wireframes, and interaction specifications in the .claude directories, then obtain explicit approval before executing. This governance step validates requirements and verifies artifacts before transitioning to the next phase.

Can I use a governed design workflow for wireframes and interactive prototypes without external dependencies?▼

Yes, governed design workflows operate without dependencies to guide wireframe and interactive prototype creation. The Skill provides self-contained template references and artifact outputs directly within the .claude directories for design teams.

Why does isolated UI/UX prototyping lead to misalignment and hard-to-track artifacts?▼

Isolated UI/UX prototyping leads to misalignment because it lacks governed Plan, Review, Execute, and Re-verify validation steps. Without traceable templates and artifact outputs in the .claude directories, design teams lose scope control and cross-branch consistency.

Related Skills

Explore More Design & Creative Skills→
HechaoYannetHechaoYannet

create-architecture

Generate a master architecture document from GDDs, ADRs, and governance constraints.

Community
Advanced
carson-sweetcarson-sweet
6

Design Wireframes

Generate self-contained HTML/CSS wireframes from user flow definitions and style specifications.

Community
Advanced
maslennikov-igmaslennikov-ig
243

frontend-aesthetics

Generate actionable frontend design guidance for typography, color, and motion.

Community
Advanced
jeffwweeejeffwweee

ui-designer

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

Community
Intermediate