Kayungko/dsh-plugin-product-design

---

What is this

One entry point — /product-design — and every design-flavored request is routed through a disciplined workflow:

/product-design I need an onboarding flow for a habit-tracking app

What happens behind the scenes: the entry skill analyzes the request and routes it to one of nine focused pd-* sub-skills — a minimum design brief, three distinct visual directions, evidence-grounded research and audits, faithful URL cloning, responsive frontend builds, and a blocking design-QA gate before anything may be called "done".

• A skill-only DSH plugin: no model tools, no client modules — the entire surface is ten skills on an isolated provider;
• Skills hot-reload on edit, never shadow project/user skills, and disappear together with the plugin on uninstall;
• Evidence-driven by contract: screenshots are inspected before adoption, fake assets are forbidden;
• One prerequisite: DSH Desktop is installed and starts (the plugin never launches the host for you).

📌 Host contract verified on DSH 0.1.2-alpha.1; 13 unit tests plus an installed-location integration check pass (criteria in Host contract).

📌 This plugin is an original rewrite of the workflow methodology popularized by Codex's official Product Design plugin (whose source is OpenAI Proprietary; no text or code copied). No affiliation with OpenAI — see License & provenance.

Quick start

Prerequisites

• DSH Desktop (contract verified on 0.1.2-alpha.1);
• Node.js ^22.19.0 || >=24 (the host runtime usually satisfies this already);
• PowerShell (the deploy script is .ps1).

Install (one command)

git clone https://github.com/Kayungko/dsh-plugin-product-design.git
cd dsh-plugin-product-design
pwsh install.ps1

The script copies the plugin into the profile's node_modules/ (no pnpm install, the lockfile stays untouched) and registers the dependency + bundle in the profile manifest — everything is backed up first into backups/<timestamp>/.

Restart DSH Desktop afterwards — the ten skills are then visible in every session.

💡 Re-running is safe: file copies are idempotent and manifest registration de-duplicates.

Verify

After the restart, send this to any session:

/product-design sketch a settings page for a desktop pet app

The router acknowledges, runs the brief gate (asks the minimum design questions) and — once a visual target exists — proposes three directions instead of jumping to code ✅

Uninstall: pwsh install.ps1 -Uninstall (also takes effect after restart).

The ten skills

Skill	Role
product-design	The single user entry (/product-design): analyzes and routes; routes only, never executes; "No Visual Target, No Build"
pd-get-context	Minimum design-brief gate
pd-user-context	Persistent product/design context (~/.dsh/product-design/)
pd-research	Evidence-grounded UX desktop research
pd-ideate	Three distinct visual directions (images when a generation tool is available, structured text otherwise)
pd-image-to-code	Chosen visual target → faithful interactive frontend
pd-url-to-code	Live URL → local frontend clone (evidence first)
pd-audit	Product-flow audit (user-facing, screenshot evidence)
pd-design-qa	Internal QA gate (passed / blocked)
pd-share	Deploy/share (only after the user picks a target)

The nine pd-* sub-skills are model-visible but hidden from the user command list (user-invocable: false) — the model routes to them automatically.

The workflow gates (the important part)

explicit invoke / design-flavored request
  → pd-user-context preflight
  ├─ audit / critique: pd-audit directly (no brief gate; screenshot evidence inlined in the report)
  └─ design / build / clone / redesign / research:
      → pd-get-context (minimum brief: design goal + expected user outcome)
        ├─ no visual target: pd-ideate → 3 directions → user picks 1 → pd-image-to-code
        ├─ clone a live page: pd-url-to-code (evidence first, build only on evidence)
        ├─ redesign ("Like <URL>"): screenshot evidence → pd-ideate
        └─ user-pain research: pd-research
  before handoff: pd-design-qa hard gate (design-qa.md: only `passed` may ship)
  share: pd-share (only after the user selects a target)

• No Visual Target, No Build — no code without a visual target; "go for it / just assume" does not waive the three-direction flow;
• design-qa hard gate — if design-qa.md is missing or final result is not passed, the work may not be delivered as "done";
• No fake assets — div art / CSS art / hand-written SVG / emoji may never stand in for real icons or images;
• Evidence rule — audits use only evidence collected in the same turn; screenshots are inspected before adoption.

Communication protocol

Every final reply: result first, non-technical language, and exactly one next step at the end. Full rules in references/communication-protocol.md.

Capability boundaries (DSH adaptation)

Capability	Status
Browser evidence	Playwright by default (via shell; first use prompts to install), or a user-supplied browser MCP; if neither is available, report honestly — never fabricate evidence
Image generation	Uses the session's image tool when present; otherwise pd-ideate emits structured text directions and states the degradation
Preview	Starts npm run dev locally and hands http://127.0.0.1:<port> to the user (the DSH Web GUI renders no preview)
Hosted sharing	Deploys only after the user selects a target (an authenticated static-hosting CLI on this machine, etc.)

Configuration (cordis.yml / patch)

- id: product-design-runtime
  name: 'dsh-plugin-product-design'
  config:
    enabled: true

enabled: false skips the skill mount while the bundle still provides its productDesign descriptor. See Architecture.

Skill state directory: ~/.dsh/product-design/user-context.md + assets/ ($DSH_HOME/product-design/, overridable with --state-dir).

---

For developers

Module layering, mount topology and the degradation strategy live in docs/ARCHITECTURE.md. Quick reference only here.

Development & tests

npm run check                        # node --check every script
npm test                             # 13 unit tests (mocked host)
# after installing into a profile (see Quick start):
node verify-installed.mjs            # installed-location integration check: real host provider discovers 10 skills

Directory

dsh-plugin-product-design/
├── index.mjs               cordis entry · wiring (fire-and-forget skill mount)
├── skills.mjs              isolated skill provider (dynamic import, degrades to warning)
├── skills/                 10 skills: 1 entry + 9 pd-* (SKILL.md each; some with references/scripts)
├── references/             4 plugin-wide shared rules
├── scripts/bootstrap-prototype.mjs  create a new prototype from the template
├── templates/prototype/    original minimal Vite + React starter
├── cordis.patch.yml        isolated plugin-group mount descriptor
├── install.ps1             deploy script (copy-based install + automatic backups)
├── verify-installed.mjs    installed-location integration check
├── test/smoke.test.mjs     13 unit tests
├── assets/                 brand banners (light/dark)
└── docs/                   ARCHITECTURE.md · PROTOCOL.md · SKILLS.md · INSTALLATION.md

Documentation

• docs/ARCHITECTURE.md — architecture: why skill-only, mount topology, degradation strategy
• docs/PROTOCOL.md — workflow gates & host contract, field-tested (injection surface, skill-mount contract, capability boundaries, verification records)
• docs/SKILLS.md — skill reference: catalog, routing rules, typical chains, per-skill contracts, shared rule index
• docs/INSTALLATION.md — installation guide: installer behavior, verification criteria, uninstall semantics, installed layout, troubleshooting
• CHANGELOG.md — release history
• references/ — the four shared rule files the skills actually load

License & provenance

This plugin is MIT. The workflow methodology (brief gate → three directions → build → QA gate, evidence-grounded audits) is inspired by Codex's official Product Design plugin; all text, scripts and templates in this repository are an original rewrite — no OpenAI proprietary content copied (their source is unpublished, licensed Proprietary). No affiliation with OpenAI.

The @deepseek-ai/* host packages it runs against belong to and are licensed by DeepSeek Harness; they are not covered by this repository's license.