skills.rest
ohmyhotelco
ohmyhotelcoOFFICIAL
Explore all skills by this author →
GitHub

pp-design

Generates UI DSL JSON and Stitch wireframes from finalized functional specifications.

1|Updated Feb 19, 2026
Search Tags:#specification#design tokens#prototype#ui design#wireframes#google stitch#ui dsl
One-click install
npx skills add https://github.com/ohmyhotelco/hare-cc-plugins --skill pp-design-ohmyhotelco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pp-design
Source: https://github.com/ohmyhotelco/hare-cc-plugins/tree/main/planning-plugin/skills/pp-design
Command: npx skills add https://github.com/ohmyhotelco/hare-cc-plugins --skill pp-design-ohmyhotelco

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? After a functional specification is finalized, teams still need concrete UI design artifacts before implementation can begin. This Skill bridges that gap by converting spec screen definitions into structured UI DSL JSON files and Google Stitch wireframes, with progress tracking and review gates. ## Core Features & Use Cases - UI DSL Generation: Launches a dsl-generator agent that reads screens.md and the feature spec to produce structured screen JSON files under docs/specs/{feature}/ui-dsl/. - Stitch Wireframe Generation: Uses Google Stitch MCP tools to create visual wireframes, extract design tokens into a DESIGN.md file, and produce shadcn/ui mapping hints. - Design System Integration: Optionally consumes design-system reference files (components, icons, patterns, colors, typography) to improve DSL accuracy and wireframe theming. - Use Case: A product team finalizes a hotel booking spec, runs the design pipeline, reviews the generated Stitch wireframes in the browser, syncs edits, and then hands off to prototype generation. ## Quick Start Run the design pipeline for the checkout feature by asking to generate UI DSL and Stitch wireframes from its finalized specification.

Frequently Asked Questions about pp-design

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

FAQPage Schema
How do I generate wireframes from a functional specification?▼

Run the design pipeline after your spec reaches reviewing or finalized status. It reads screens.md from the spec directory, generates UI DSL JSON files, then creates Stitch wireframes with design tokens and shadcn/ui mapping hints.

What is a UI DSL and how is it generated?▼

A UI DSL is a structured JSON representation of screens derived from spec definitions. The dsl-generator agent reads screens.md and the feature spec, then writes screen JSON files to docs/specs/{feature}/ui-dsl/ following a schema template.

Can I run only the DSL or only the Stitch wireframe stage?▼

Yes, use the --stage flag with dsl or stitch to run a single stage. The stitch stage requires an existing ui-dsl/manifest.json, so the DSL stage must complete first.

What happens if Google Stitch MCP is not configured?▼

The stitch stage is skipped gracefully and marked as skipped in the progress file. You receive a setup command to add the Stitch MCP server, and the DSL output remains usable.

Why does the design pipeline stop with a spec status error?▼

The pipeline requires the spec status to be reviewing or finalized. If the spec is still drafting or analyzing, complete the spec review cycle first before generating design artifacts.

Related Skills

Explore More Product & Management Skills→
ArMaTeCArMaTeC

pandaos-design-prototype

Create interactive click-through HTML prototypes on the PandaOS Design canvas.

Community
Advanced
coreyonecoreyone
1

design-rapid-prototype-facade

Build clickable wireframe and high-fidelity UI prototype facades for design sprint user testing.

Community
Advanced
lemulemu

visual-design-foundations

Standardize typography, color, spacing, and iconography into design tokens and guidelines.

Community
Intermediate
OmexITOmexIT
13

ui-design

Convert specification documents into UI/UX design artifacts with wireframes and design tokens.

Community
Advanced