create-yss-spec 1.1.2 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/template/.codex/skills/data-analytics/.app.json +84 -0
- package/template/.codex/skills/data-analytics/.codex-plugin/plugin.json +66 -0
- package/template/.codex/skills/data-analytics/.mcp.json +30 -0
- package/template/.codex/skills/data-analytics/AGENTS.md +20 -0
- package/template/.codex/skills/data-analytics/DEPENDENCIES.MD +27 -0
- package/template/.codex/skills/data-analytics/README.md +60 -0
- package/template/.codex/skills/data-analytics/assets/datascience-artifact-widget.html +16 -0
- package/template/.codex/skills/data-analytics/assets/datascience-artifact-widget.html.gz.b64.part001 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-artifact-widget.html.gz.b64.part002 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-artifact-widget.html.gz.b64.part003 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-artifact-widget.html.gz.b64.part004 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-artifact-widget.html.gz.b64.part005 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-artifact-widget.html.gz.b64.part006 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html +16 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html.gz.b64.part001 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html.gz.b64.part002 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html.gz.b64.part003 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html.gz.b64.part004 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html.gz.b64.part005 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html.gz.b64.part006 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html.gz.b64.part007 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-small.svg +5 -0
- package/template/.codex/skills/data-analytics/assets/datascience-table-widget.html +16 -0
- package/template/.codex/skills/data-analytics/assets/datascience-table-widget.html.gz.b64.part001 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-table-widget.html.gz.b64.part002 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-table-widget.html.gz.b64.part003 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-table-widget.html.gz.b64.part004 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience.png +0 -0
- package/template/.codex/skills/data-analytics/assets/datascience.svg +10 -0
- package/template/.codex/skills/data-analytics/mcp/server.cjs +2963 -0
- package/template/.codex/skills/data-analytics/package-lock.json +3048 -0
- package/template/.codex/skills/data-analytics/package.json +43 -0
- package/template/.codex/skills/data-analytics/scripts/normalize-widget-assets.mjs +75 -0
- package/template/.codex/skills/data-analytics/skills/analyze-data-quality/SKILL.md +160 -0
- package/template/.codex/skills/data-analytics/skills/analyze-data-quality/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/build-dashboard/SKILL.md +148 -0
- package/template/.codex/skills/data-analytics/skills/build-dashboard/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/build-dashboard/specifications/bi-platform-dashboard.md +18 -0
- package/template/.codex/skills/data-analytics/skills/build-dashboard/specifications/html-dashboard.md +24 -0
- package/template/.codex/skills/data-analytics/skills/build-dashboard/specifications/mcp-artifact-dashboard.md +71 -0
- package/template/.codex/skills/data-analytics/skills/build-dashboard/specifications/streamlit-dashboard.md +85 -0
- package/template/.codex/skills/data-analytics/skills/build-report/SKILL.md +207 -0
- package/template/.codex/skills/data-analytics/skills/build-report/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/build-report/assets/executive-report-shell.html +70 -0
- package/template/.codex/skills/data-analytics/skills/build-report/assets/technical-report-shell.html +66 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/SKILL.md +118 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/__init__.py +1 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/cli.py +57 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/constants.py +61 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/docx_writer.py +362 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/html_parser.py +829 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/model.py +30 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/plan.py +129 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/quality.py +374 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/rendering.py +613 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/table_utils.py +54 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/utils.py +16 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc_plan.py +9 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-slides/SKILL.md +78 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-slides/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-slides/scripts/report_to_google_slides.py +2379 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-pdf/SKILL.md +88 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-pdf/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/build-report/specifications/executive-report.md +97 -0
- package/template/.codex/skills/data-analytics/skills/build-report/specifications/mcp-app-report.md +59 -0
- package/template/.codex/skills/data-analytics/skills/build-report/specifications/technical-report.md +75 -0
- package/template/.codex/skills/data-analytics/skills/design-kpis/SKILL.md +103 -0
- package/template/.codex/skills/data-analytics/skills/design-kpis/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/gather-business-context/SKILL.md +68 -0
- package/template/.codex/skills/data-analytics/skills/gather-business-context/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/index/SKILL.md +251 -0
- package/template/.codex/skills/data-analytics/skills/index/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/jupyter-notebooks/SKILL.md +131 -0
- package/template/.codex/skills/data-analytics/skills/jupyter-notebooks/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/kpi-reporting/SKILL.md +141 -0
- package/template/.codex/skills/data-analytics/skills/kpi-reporting/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/kpi-reporting/references/report-templates.md +32 -0
- package/template/.codex/skills/data-analytics/skills/market-sizing/SKILL.md +106 -0
- package/template/.codex/skills/data-analytics/skills/market-sizing/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/metric-diagnostics/SKILL.md +130 -0
- package/template/.codex/skills/data-analytics/skills/metric-diagnostics/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/product-business-analysis/SKILL.md +141 -0
- package/template/.codex/skills/data-analytics/skills/product-business-analysis/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/spreadsheets/SKILL.md +178 -0
- package/template/.codex/skills/data-analytics/skills/spreadsheets/agents/openai.yaml +9 -0
- package/template/.codex/skills/data-analytics/skills/spreadsheets/assets/file-spreadsheet.png +0 -0
- package/template/.codex/skills/data-analytics/skills/spreadsheets/charts.md +31 -0
- package/template/.codex/skills/data-analytics/skills/spreadsheets/references/artifact_tool_api.md +466 -0
- package/template/.codex/skills/data-analytics/skills/spreadsheets/style_guidelines.md +99 -0
- package/template/.codex/skills/data-analytics/skills/user-context/SKILL.md +195 -0
- package/template/.codex/skills/data-analytics/skills/user-context/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/user-context/plugin-author-config/automation-config.md +26 -0
- package/template/.codex/skills/data-analytics/skills/user-context/plugin-author-config/source-category-config.json +51 -0
- package/template/.codex/skills/data-analytics/skills/user-context/plugin-author-config/user-context-config.md +66 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/automation.md +69 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/onboarding-examples.md +204 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/onboarding-state-template.json +87 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/onboarding.md +497 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/semantic-layer/connector-playbook.md +74 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/semantic-layer/setup.md +65 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/semantic-layer/skill-template.md +160 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/semantic-layer/source-intake.md +75 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/semantic-layer/weekly-polling-automation.md +96 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/source-category-runtime.md +263 -0
- package/template/.codex/skills/data-analytics/skills/user-context/scripts/data_analytics_preflight.py +1460 -0
- package/template/.codex/skills/data-analytics/skills/user-context/scripts/init_user_context_state.py +128 -0
- package/template/.codex/skills/data-analytics/skills/user-context/scripts/reset_user_context_state.py +101 -0
- package/template/.codex/skills/data-analytics/skills/user-context/scripts/validate_user_context_preflight.py +499 -0
- package/template/.codex/skills/data-analytics/skills/user-context/tests/test_state_helpers.py +978 -0
- package/template/.codex/skills/data-analytics/skills/validate-data/SKILL.md +190 -0
- package/template/.codex/skills/data-analytics/skills/validate-data/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/visualize-data/SKILL.md +157 -0
- package/template/.codex/skills/data-analytics/skills/visualize-data/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/visualize-data/references/seaborn-templates.md +774 -0
- package/template/.codex/skills/data-analytics/src/DESIGN.md +222 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/App.tsx +3666 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/analytics-layout.test.mjs +136 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/ChartFrame.tsx +54 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/ChartLegend.tsx +96 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/ChartRenderer.tsx +1647 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/ChartTooltip.tsx +245 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/chart-app-helpers.tsx +462 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/chart-capabilities.ts +107 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/chart-compatibility.ts +164 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/chart-contract.ts +192 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/chart-theme.ts +203 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/chart-tokens.css +619 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/chart-transforms.ts +402 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/fonts/SystemSansVariableVF.woff2 +0 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/imageExport.ts +370 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/layout/AnalyticsLayoutCanvas.tsx +536 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/layout/RichMarkdown.tsx +681 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/layout/analyticsLayoutCore.ts +164 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/main.tsx +21 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/scripts/chart_contract.py +472 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/scripts/check_analytics_app_runtime_links.py +75 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/scripts/design_contract.py +142 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/scripts/package_utils.py +142 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/scripts/tests/test_package_utils.py +377 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/styles.css +3468 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/tables/DataTable.d.ts +44 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/tables/DataTable.jsx +639 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/tables/data-table.css +327 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/tokens.css +225 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/types.ts +204 -0
- package/template/.codex/skills/data-analytics/src/analytics-app-core.md +85 -0
- package/template/.codex/skills/data-analytics/src/codex-style-contract.md +30 -0
- package/template/.codex/skills/data-analytics/src/datascience-artifact-widget.html +12 -0
- package/template/.codex/skills/data-analytics/src/datascience-artifact-widget.jsx +1008 -0
- package/template/.codex/skills/data-analytics/src/datascience-chart-widget.css +2117 -0
- package/template/.codex/skills/data-analytics/src/datascience-chart-widget.html +122 -0
- package/template/.codex/skills/data-analytics/src/datascience-chart-widget.js +3588 -0
- package/template/.codex/skills/data-analytics/src/datascience-table-widget.css +483 -0
- package/template/.codex/skills/data-analytics/src/datascience-table-widget.html +32 -0
- package/template/.codex/skills/data-analytics/src/datascience-table-widget.js +333 -0
- package/template/.codex/skills/data-analytics/src/mcp-host.js +153 -0
- package/template/.codex/skills/data-analytics/src/recharts-config.js +315 -0
- package/template/.codex/skills/data-analytics/src/recharts-renderer.jsx +294 -0
- package/template/.codex/skills/data-analytics/src/sql-source-view.css +33 -0
- package/template/.codex/skills/data-analytics/src/sql-source-view.js +157 -0
- package/template/.codex/skills/data-analytics/src/styles/codex-theme.css +121 -0
- package/template/.codex/skills/data-analytics/src/table-renderer.jsx +28 -0
- package/template/.codex/skills/data-analytics/tests/chart-transforms.test.mjs +87 -0
- package/template/.codex/skills/data-analytics/tests/funnel-smoke.html +105 -0
- package/template/.codex/skills/data-analytics/tests/inline-widget-compare.html +233 -0
- package/template/.codex/skills/data-analytics/tests/mcp-server.test.mjs +1500 -0
- package/template/.codex/skills/data-analytics/tests/native-style-contract.test.mjs +219 -0
- package/template/.codex/skills/data-analytics/tests/recharts-config.test.mjs +144 -0
- package/template/.codex/skills/data-analytics/tests/recharts-renderer.test.mjs +11 -0
- package/template/.codex/skills/data-analytics/tests/rich-markdown.test.mjs +54 -0
- package/template/.codex/skills/data-analytics/tests/widget-render-harness.html +321 -0
- package/template/.codex/skills/data-analytics/tsconfig.json +19 -0
- package/template/.codex/skills/data-analytics/vite.config.ts +46 -0
- package/template/.codex/skills/product-design/.app.json +7 -0
- package/template/.codex/skills/product-design/.codex-plugin/plugin.json +50 -0
- package/template/.codex/skills/product-design/README.md +50 -0
- package/template/.codex/skills/product-design/agents/openai.yaml +4 -0
- package/template/.codex/skills/product-design/assets/composerIcon.svg +9 -0
- package/template/.codex/skills/product-design/assets/logo.png +0 -0
- package/template/.codex/skills/product-design/package.json +11 -0
- package/template/.codex/skills/product-design/references/browser-order.md +9 -0
- package/template/.codex/skills/product-design/references/communication-protocol.md +45 -0
- package/template/.codex/skills/product-design/references/critical-overrides.md +58 -0
- package/template/.codex/skills/product-design/references/local-prototype-preflight.md +16 -0
- package/template/.codex/skills/product-design/scripts/bootstrap-prototype.mjs +147 -0
- package/template/.codex/skills/product-design/skills/audit/SKILL.md +159 -0
- package/template/.codex/skills/product-design/skills/audit/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/audit/references/design-audit-framework.md +73 -0
- package/template/.codex/skills/product-design/skills/design-qa/SKILL.md +133 -0
- package/template/.codex/skills/product-design/skills/design-qa/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/design-qa/references/qa-rubric.md +61 -0
- package/template/.codex/skills/product-design/skills/get-context/SKILL.md +81 -0
- package/template/.codex/skills/product-design/skills/get-context/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/ideate/SKILL.md +179 -0
- package/template/.codex/skills/product-design/skills/ideate/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/image-to-code/SKILL.md +105 -0
- package/template/.codex/skills/product-design/skills/image-to-code/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/index/SKILL.md +126 -0
- package/template/.codex/skills/product-design/skills/index/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/prototype/SKILL.md +128 -0
- package/template/.codex/skills/product-design/skills/prototype/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/prototype/references/existing-codebase-edits.md +18 -0
- package/template/.codex/skills/product-design/skills/research/SKILL.md +92 -0
- package/template/.codex/skills/product-design/skills/research/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/share/SKILL.md +41 -0
- package/template/.codex/skills/product-design/skills/share/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/url-to-code/SKILL.md +124 -0
- package/template/.codex/skills/product-design/skills/url-to-code/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/user-context/SKILL.md +147 -0
- package/template/.codex/skills/product-design/skills/user-context/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/user-context/plugin-author-config/user-context-template.md +63 -0
- package/template/.codex/skills/product-design/skills/user-context/references/onboarding.md +66 -0
- package/template/.codex/skills/product-design/skills/user-context/scripts/init_user_context.py +86 -0
- package/template/.codex/skills/product-design/skills/user-context/scripts/user_context_preflight.py +204 -0
- package/template/.codex/skills/product-design/templates/prototype/AGENTS.md +7 -0
- package/template/.codex/skills/product-design/templates/prototype/index.html +12 -0
- package/template/.codex/skills/product-design/templates/prototype/package.json +18 -0
- package/template/.codex/skills/product-design/templates/prototype/src/App.jsx +5 -0
- package/template/.codex/skills/product-design/templates/prototype/src/main.jsx +10 -0
- package/template/.codex/skills/product-design/templates/prototype/src/styles.css +13 -0
- package/template/.codex/skills/product-design/templates/prototype/vite.config.mjs +14 -0
- package/template/.codex/skills/yss-product-lifecycle/SKILL.md +3 -3
- package/template/AGENTS.md +3 -3
- package/template/docs/adr/adr-product-design-prototype-entrypoint.md +54 -0
- package/template/docs/api/templates/openapi-draft-review-checklist.md +4 -2
- package/template/docs/design/README.md +8 -4
- package/template/docs/design/templates/interaction-spec-template.md +4 -1
- package/template/docs/design/templates/prototype-confirmation-template.md +57 -0
- package/template/docs/design/templates/prototype-review-checklist.md +6 -2
- package/template/docs/design/templates/state-matrix-template.md +1 -1
- package/template/docs/process/harness-executive-blueprint.md +2 -1
- package/template/docs/process/harness-process-tailoring.md +1 -1
- package/template/docs/process/harness-work-unit-map.md +1 -1
- package/template/docs/process/lifecycle-artifact-map.md +4 -3
- package/template/docs/process/product-prototype-workflow.md +82 -0
- package/template/docs/user-guide/product-lifecycle-workflow.md +2 -2
- package/template/docs/user-guide/product-rd-lifecycle-best-practices.md +15 -10
|
@@ -0,0 +1,321 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>Data Analytics widget render harness</title>
|
|
7
|
+
<style>
|
|
8
|
+
:root {
|
|
9
|
+
color-scheme: light dark;
|
|
10
|
+
--background: #f8fafc;
|
|
11
|
+
--foreground: #111827;
|
|
12
|
+
--muted: #64748b;
|
|
13
|
+
--border: #d8dee8;
|
|
14
|
+
--card: #ffffff;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@media (prefers-color-scheme: dark) {
|
|
18
|
+
:root {
|
|
19
|
+
--background: #101318;
|
|
20
|
+
--foreground: #f8fafc;
|
|
21
|
+
--muted: #94a3b8;
|
|
22
|
+
--border: #2f3745;
|
|
23
|
+
--card: #151a22;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
* {
|
|
28
|
+
box-sizing: border-box;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
body {
|
|
32
|
+
margin: 0;
|
|
33
|
+
padding: 28px;
|
|
34
|
+
background: var(--background);
|
|
35
|
+
color: var(--foreground);
|
|
36
|
+
font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
header {
|
|
40
|
+
margin: 0 0 18px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
h1 {
|
|
44
|
+
margin: 0 0 6px;
|
|
45
|
+
font-size: 24px;
|
|
46
|
+
line-height: 1.15;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
p {
|
|
50
|
+
margin: 0;
|
|
51
|
+
color: var(--muted);
|
|
52
|
+
font-size: 13px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.actions {
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-wrap: wrap;
|
|
58
|
+
gap: 8px;
|
|
59
|
+
margin: 16px 0 18px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
button {
|
|
63
|
+
min-height: 30px;
|
|
64
|
+
border: 1px solid var(--border);
|
|
65
|
+
border-radius: 6px;
|
|
66
|
+
padding: 0 10px;
|
|
67
|
+
background: var(--card);
|
|
68
|
+
color: var(--foreground);
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
font: inherit;
|
|
71
|
+
font-size: 13px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.grid {
|
|
75
|
+
display: grid;
|
|
76
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
77
|
+
gap: 18px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@media (max-width: 900px) {
|
|
81
|
+
.grid {
|
|
82
|
+
grid-template-columns: minmax(0, 1fr);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
iframe {
|
|
87
|
+
display: block;
|
|
88
|
+
width: 100%;
|
|
89
|
+
height: 520px;
|
|
90
|
+
border: 1px solid var(--border);
|
|
91
|
+
border-radius: 8px;
|
|
92
|
+
background: transparent;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
#status {
|
|
96
|
+
margin-top: 14px;
|
|
97
|
+
}
|
|
98
|
+
</style>
|
|
99
|
+
</head>
|
|
100
|
+
<body>
|
|
101
|
+
<header>
|
|
102
|
+
<h1>Data Analytics widget render smoke</h1>
|
|
103
|
+
<p>Loads two chart widget instances and sends targeted host updates to check that payloads and display modes stay separate.</p>
|
|
104
|
+
</header>
|
|
105
|
+
|
|
106
|
+
<div class="actions" aria-label="Harness actions">
|
|
107
|
+
<button type="button" data-expand="chart-a">Expand first chart</button>
|
|
108
|
+
<button type="button" data-expand="chart-b">Expand second chart</button>
|
|
109
|
+
<button type="button" id="reset">Reset inline</button>
|
|
110
|
+
<button type="button" id="cross-talk">Send cross-talk probe</button>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<main class="grid">
|
|
114
|
+
<iframe
|
|
115
|
+
id="chart-a"
|
|
116
|
+
title="Data Analytics chart widget A"
|
|
117
|
+
src="../src/datascience-chart-widget.html?widgetInstanceId=chart-a"
|
|
118
|
+
></iframe>
|
|
119
|
+
<iframe
|
|
120
|
+
id="chart-b"
|
|
121
|
+
title="Data Analytics chart widget B"
|
|
122
|
+
src="../src/datascience-chart-widget.html?widgetInstanceId=chart-b"
|
|
123
|
+
></iframe>
|
|
124
|
+
</main>
|
|
125
|
+
|
|
126
|
+
<p id="status" role="status">Loading widgets.</p>
|
|
127
|
+
|
|
128
|
+
<script>
|
|
129
|
+
const widgetUri = "ui://widget/datascience-chart.html";
|
|
130
|
+
const payloads = {
|
|
131
|
+
"chart-a": {
|
|
132
|
+
ok: true,
|
|
133
|
+
widget_type: "chart",
|
|
134
|
+
title: "Activation by Segment",
|
|
135
|
+
source: {
|
|
136
|
+
query: {
|
|
137
|
+
engine: "databricks",
|
|
138
|
+
id: "activation-query",
|
|
139
|
+
executed_at: "2026-05-01T03:30:00Z",
|
|
140
|
+
text: "SELECT segment, activation_rate FROM harness.activation_by_segment",
|
|
141
|
+
},
|
|
142
|
+
},
|
|
143
|
+
table: {
|
|
144
|
+
columns: [
|
|
145
|
+
{ key: "segment", label: "Segment", type: "text" },
|
|
146
|
+
{ key: "activation_rate", label: "Activation", type: "number", unit: "%" },
|
|
147
|
+
],
|
|
148
|
+
rows: [
|
|
149
|
+
{ segment: "Free", activation_rate: 19 },
|
|
150
|
+
{ segment: "Team", activation_rate: 33 },
|
|
151
|
+
{ segment: "Enterprise", activation_rate: 48 },
|
|
152
|
+
],
|
|
153
|
+
row_count: 3,
|
|
154
|
+
truncated: false,
|
|
155
|
+
},
|
|
156
|
+
chart: {
|
|
157
|
+
type: "bar",
|
|
158
|
+
fields: {
|
|
159
|
+
x: { field: "segment", type: "nominal" },
|
|
160
|
+
y: { field: "activation_rate", type: "quantitative", aggregate: "sum", unit: "%" },
|
|
161
|
+
},
|
|
162
|
+
},
|
|
163
|
+
display: {
|
|
164
|
+
unit: "%",
|
|
165
|
+
controls: true,
|
|
166
|
+
},
|
|
167
|
+
},
|
|
168
|
+
"chart-b": {
|
|
169
|
+
ok: true,
|
|
170
|
+
widget_type: "chart",
|
|
171
|
+
title: "Revenue by Region",
|
|
172
|
+
source: {
|
|
173
|
+
query: {
|
|
174
|
+
engine: "trino",
|
|
175
|
+
id: "revenue-query",
|
|
176
|
+
text: "SELECT region, motion, revenue_m FROM harness.revenue_by_region",
|
|
177
|
+
},
|
|
178
|
+
},
|
|
179
|
+
table: {
|
|
180
|
+
columns: [
|
|
181
|
+
{ key: "region", label: "Region", type: "text" },
|
|
182
|
+
{ key: "motion", label: "Motion", type: "text" },
|
|
183
|
+
{ key: "revenue_m", label: "Revenue", type: "number", unit: "$M" },
|
|
184
|
+
],
|
|
185
|
+
rows: [
|
|
186
|
+
{ region: "North America", motion: "Self-serve", revenue_m: 62 },
|
|
187
|
+
{ region: "North America", motion: "Sales-led", revenue_m: 38 },
|
|
188
|
+
{ region: "EMEA", motion: "Self-serve", revenue_m: 46 },
|
|
189
|
+
{ region: "EMEA", motion: "Sales-led", revenue_m: 54 },
|
|
190
|
+
{ region: "APAC", motion: "Self-serve", revenue_m: 57 },
|
|
191
|
+
{ region: "APAC", motion: "Sales-led", revenue_m: 43 },
|
|
192
|
+
],
|
|
193
|
+
row_count: 6,
|
|
194
|
+
truncated: false,
|
|
195
|
+
},
|
|
196
|
+
chart: {
|
|
197
|
+
type: "bar",
|
|
198
|
+
fields: {
|
|
199
|
+
x: { field: "region", type: "nominal" },
|
|
200
|
+
y: { field: "revenue_m", type: "quantitative", aggregate: "sum", unit: "$M" },
|
|
201
|
+
color: { field: "motion", type: "nominal" },
|
|
202
|
+
},
|
|
203
|
+
options: {
|
|
204
|
+
orientation: "horizontal",
|
|
205
|
+
grouping: "stacked100",
|
|
206
|
+
},
|
|
207
|
+
},
|
|
208
|
+
display: {
|
|
209
|
+
unit: "$M",
|
|
210
|
+
controls: true,
|
|
211
|
+
},
|
|
212
|
+
notes: ["Harness payload B."],
|
|
213
|
+
},
|
|
214
|
+
};
|
|
215
|
+
|
|
216
|
+
|
|
217
|
+
function asToolResult(payload, targetWidgetId) {
|
|
218
|
+
return {
|
|
219
|
+
content: [{ type: "text", text: JSON.stringify(payload) }],
|
|
220
|
+
structuredContent: payload,
|
|
221
|
+
isError: false,
|
|
222
|
+
_meta: {
|
|
223
|
+
"ui/resourceUri": widgetUri,
|
|
224
|
+
["openai/outputTemplate"]: widgetUri,
|
|
225
|
+
targetWidgetId,
|
|
226
|
+
},
|
|
227
|
+
};
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
function frameWindow(id) {
|
|
231
|
+
return document.getElementById(id).contentWindow;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
function installHost(id) {
|
|
235
|
+
const win = frameWindow(id);
|
|
236
|
+
if (!win) return;
|
|
237
|
+
win.openai = {
|
|
238
|
+
widgetInstanceId: id,
|
|
239
|
+
displayMode: "inline",
|
|
240
|
+
availableDisplayModes: ["inline", "fullscreen"],
|
|
241
|
+
toolOutput: asToolResult(payloads[id], id),
|
|
242
|
+
async requestDisplayMode({ mode }) {
|
|
243
|
+
this.displayMode = mode;
|
|
244
|
+
win.postMessage({ targetWidgetId: id, displayMode: mode }, "*");
|
|
245
|
+
return { mode };
|
|
246
|
+
},
|
|
247
|
+
};
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
function sendPayload(id) {
|
|
251
|
+
const win = frameWindow(id);
|
|
252
|
+
if (!win) return;
|
|
253
|
+
const toolResult = asToolResult(payloads[id], id);
|
|
254
|
+
if (win.openai) win.openai.toolOutput = toolResult;
|
|
255
|
+
win.dispatchEvent(
|
|
256
|
+
new win.CustomEvent("openai:set_globals", {
|
|
257
|
+
detail: { globals: { targetWidgetId: id, toolOutput: toolResult } },
|
|
258
|
+
}),
|
|
259
|
+
);
|
|
260
|
+
win.postMessage(toolResult, "*");
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
function sendDisplayMode(id, mode) {
|
|
264
|
+
const win = frameWindow(id);
|
|
265
|
+
if (!win) return;
|
|
266
|
+
if (win.openai) win.openai.displayMode = mode;
|
|
267
|
+
win.postMessage({ targetWidgetId: id, displayMode: mode }, "*");
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
function loadFrame(id) {
|
|
271
|
+
const frame = document.getElementById(id);
|
|
272
|
+
const send = () => {
|
|
273
|
+
installHost(id);
|
|
274
|
+
sendPayload(id);
|
|
275
|
+
};
|
|
276
|
+
frame.addEventListener("load", () => {
|
|
277
|
+
send();
|
|
278
|
+
window.setTimeout(send, 100);
|
|
279
|
+
});
|
|
280
|
+
window.setTimeout(send, 100);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
function sendCrossTalkProbe() {
|
|
284
|
+
for (const id of Object.keys(payloads)) {
|
|
285
|
+
const win = frameWindow(id);
|
|
286
|
+
if (!win) continue;
|
|
287
|
+
const otherId = id === "chart-a" ? "chart-b" : "chart-a";
|
|
288
|
+
const wrongTargetResult = asToolResult({ ...payloads[otherId], title: "Wrong target" }, otherId);
|
|
289
|
+
if (win.openai) win.openai.toolOutput = wrongTargetResult;
|
|
290
|
+
win.postMessage(wrongTargetResult, "*");
|
|
291
|
+
win.postMessage(
|
|
292
|
+
asToolResult({ ...payloads[id], subtitle: "Accepted targeted payload." }, id),
|
|
293
|
+
"*",
|
|
294
|
+
);
|
|
295
|
+
win.postMessage({ targetWidgetId: otherId, displayMode: "fullscreen" }, "*");
|
|
296
|
+
}
|
|
297
|
+
document.getElementById("status").textContent =
|
|
298
|
+
"Cross-talk probe sent. Each frame should reject the wrong target and accept its own targeted payload.";
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
loadFrame("chart-a");
|
|
302
|
+
loadFrame("chart-b");
|
|
303
|
+
|
|
304
|
+
document.querySelectorAll("[data-expand]").forEach((button) => {
|
|
305
|
+
button.addEventListener("click", () => {
|
|
306
|
+
sendDisplayMode(button.dataset.expand, "fullscreen");
|
|
307
|
+
document.getElementById("status").textContent = `${button.dataset.expand} requested fullscreen.`;
|
|
308
|
+
});
|
|
309
|
+
});
|
|
310
|
+
document.getElementById("reset").addEventListener("click", () => {
|
|
311
|
+
sendDisplayMode("chart-a", "inline");
|
|
312
|
+
sendDisplayMode("chart-b", "inline");
|
|
313
|
+
document.getElementById("status").textContent = "Both charts reset inline.";
|
|
314
|
+
});
|
|
315
|
+
document.getElementById("cross-talk").addEventListener("click", sendCrossTalkProbe);
|
|
316
|
+
window.setTimeout(() => {
|
|
317
|
+
document.getElementById("status").textContent = "Harness ready.";
|
|
318
|
+
}, 600);
|
|
319
|
+
</script>
|
|
320
|
+
</body>
|
|
321
|
+
</html>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2022",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"module": "ESNext",
|
|
6
|
+
"moduleResolution": "Bundler",
|
|
7
|
+
"strict": true,
|
|
8
|
+
"allowSyntheticDefaultImports": true,
|
|
9
|
+
"esModuleInterop": true,
|
|
10
|
+
"forceConsistentCasingInFileNames": true,
|
|
11
|
+
"isolatedModules": true,
|
|
12
|
+
"resolveJsonModule": true,
|
|
13
|
+
"skipLibCheck": true,
|
|
14
|
+
"noUncheckedIndexedAccess": true,
|
|
15
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
16
|
+
"types": ["node"]
|
|
17
|
+
},
|
|
18
|
+
"include": ["vite.config.ts"]
|
|
19
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import path from "node:path";
|
|
2
|
+
import { fileURLToPath } from "node:url";
|
|
3
|
+
|
|
4
|
+
import { defineConfig } from "vite";
|
|
5
|
+
import { viteSingleFile } from "vite-plugin-singlefile";
|
|
6
|
+
|
|
7
|
+
const input = process.env.INPUT ?? "datascience-chart-widget.html";
|
|
8
|
+
const isArtifactWidget = input.includes("datascience-artifact-widget");
|
|
9
|
+
const pluginRoot = fileURLToPath(new URL(".", import.meta.url));
|
|
10
|
+
const reactAliases = isArtifactWidget
|
|
11
|
+
? [
|
|
12
|
+
{ find: /^react$/, replacement: path.join(pluginRoot, "node_modules/react/index.js") },
|
|
13
|
+
{
|
|
14
|
+
find: /^react\/jsx-runtime$/,
|
|
15
|
+
replacement: path.join(pluginRoot, "node_modules/react/jsx-runtime.js"),
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
find: /^react\/jsx-dev-runtime$/,
|
|
19
|
+
replacement: path.join(pluginRoot, "node_modules/react/jsx-dev-runtime.js"),
|
|
20
|
+
},
|
|
21
|
+
{ find: /^react-dom$/, replacement: path.join(pluginRoot, "node_modules/react-dom/index.js") },
|
|
22
|
+
{
|
|
23
|
+
find: /^react-dom\/client$/,
|
|
24
|
+
replacement: path.join(pluginRoot, "node_modules/react-dom/client.js"),
|
|
25
|
+
},
|
|
26
|
+
]
|
|
27
|
+
: [];
|
|
28
|
+
|
|
29
|
+
export default defineConfig({
|
|
30
|
+
root: "src",
|
|
31
|
+
plugins: [viteSingleFile()],
|
|
32
|
+
resolve: {
|
|
33
|
+
alias: reactAliases,
|
|
34
|
+
dedupe: ["react", "react-dom"],
|
|
35
|
+
preserveSymlinks: true
|
|
36
|
+
},
|
|
37
|
+
build: {
|
|
38
|
+
outDir: "../assets",
|
|
39
|
+
emptyOutDir: false,
|
|
40
|
+
minify: isArtifactWidget ? "oxc" : false,
|
|
41
|
+
cssMinify: false,
|
|
42
|
+
rollupOptions: {
|
|
43
|
+
input
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
});
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "product-design",
|
|
3
|
+
"version": "0.1.41",
|
|
4
|
+
"description": "The Product Design plugin is built for turning early ideas into prototypes teams can review. It starts design and build work by confirming the brief, then helps teams explore product directions, audit user flows, prototype from a live URL, and make static screenshots interactive.",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "OpenAI",
|
|
7
|
+
"url": "https://openai.com/"
|
|
8
|
+
},
|
|
9
|
+
"homepage": "https://github.com/openai/role-specific-plugins",
|
|
10
|
+
"repository": "https://github.com/openai/role-specific-plugins/tree/main/plugins/product-design",
|
|
11
|
+
"license": "MIT",
|
|
12
|
+
"keywords": [
|
|
13
|
+
"prototype",
|
|
14
|
+
"frontend",
|
|
15
|
+
"ux-research",
|
|
16
|
+
"ux-audit",
|
|
17
|
+
"accessibility-audit",
|
|
18
|
+
"research",
|
|
19
|
+
"context-gathering",
|
|
20
|
+
"ideation",
|
|
21
|
+
"image-generation",
|
|
22
|
+
"prototype"
|
|
23
|
+
],
|
|
24
|
+
"skills": "./skills/",
|
|
25
|
+
"apps": "./.app.json",
|
|
26
|
+
"interface": {
|
|
27
|
+
"displayName": "Product Design",
|
|
28
|
+
"shortDescription": "Explore and prototype ideas",
|
|
29
|
+
"longDescription": "Turn early ideas into prototypes teams can review. Explore product directions, audit user flows, research user friction, prototype from a live URL, and make static screenshots interactive. Start with a written brief, URL, screenshot, or existing design, then compare visual directions before building.\n\nUse available browser, Figma, Canva, image generation, and hosting tools to gather references, create concepts, review the result, and carry the work forward with your team.",
|
|
30
|
+
"developerName": "OpenAI",
|
|
31
|
+
"category": "Design",
|
|
32
|
+
"capabilities": [
|
|
33
|
+
"Interactive",
|
|
34
|
+
"Read",
|
|
35
|
+
"Write"
|
|
36
|
+
],
|
|
37
|
+
"websiteURL": "https://openai.com/",
|
|
38
|
+
"privacyPolicyURL": "https://openai.com/policies/privacy-policy/",
|
|
39
|
+
"termsOfServiceURL": "https://openai.com/policies/terms-of-use/",
|
|
40
|
+
"defaultPrompt": [
|
|
41
|
+
"Help me get started",
|
|
42
|
+
"Turn this product idea into three visual directions",
|
|
43
|
+
"Clone this URL into an editable prototype"
|
|
44
|
+
],
|
|
45
|
+
"composerIcon": "./assets/composerIcon.svg",
|
|
46
|
+
"logo": "./assets/logo.png",
|
|
47
|
+
"brandColor": "#FF66AD",
|
|
48
|
+
"screenshots": []
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# Product Design
|
|
2
|
+
|
|
3
|
+
Turn early product ideas, live URLs, and static screenshots into prototypes teams can review, refine, and carry forward.
|
|
4
|
+
|
|
5
|
+
## When to use this plugin
|
|
6
|
+
|
|
7
|
+
Use Product Design when you want to understand an existing experience, explore a new direction, or create a prototype that people can interact with and review. You can start from a written brief, screenshots, a design image, a live URL, an existing prototype, or product references you have saved for future work, such as product URLs, Figma files, screenshots, codebase paths, or design tokens.
|
|
8
|
+
|
|
9
|
+
## Optional setup
|
|
10
|
+
|
|
11
|
+
Ask Codex:
|
|
12
|
+
|
|
13
|
+
`@Product Design Help me get started`
|
|
14
|
+
|
|
15
|
+
Product Design has a short optional setup flow that helps save useful product context such as product URLs, relevant Figma files, screenshots, codebase paths, Storybook links, tokens, and brand assets.
|
|
16
|
+
|
|
17
|
+
Already have a task in mind? Skip setup and ask for the workflow you need directly.
|
|
18
|
+
|
|
19
|
+
## Example workflows
|
|
20
|
+
|
|
21
|
+
Hero workflows are bolded.
|
|
22
|
+
|
|
23
|
+
| Workflow | Try this | Skill | Result |
|
|
24
|
+
| --- | --- | --- | --- |
|
|
25
|
+
| **Prototype a new idea** | `Build a clickable prototype for this product idea` | `prototype` | Three visual directions to choose from, followed by a runnable prototype based on your selection |
|
|
26
|
+
| **Recreate a live surface** | `Clone this URL into an editable prototype` | `url-to-code` | An editable local prototype grounded in the visible source |
|
|
27
|
+
| Implement a selected design | `Turn this selected mockup into a responsive prototype` | `image-to-code` | A faithful, interactive implementation of the design you selected |
|
|
28
|
+
| Explore visual directions | `Turn this product idea into three visual directions` | `ideate` | Distinct concepts you can compare before choosing what to build |
|
|
29
|
+
| Redesign an existing screen | `Redesign this settings screen and show me three directions before building` | `prototype` | Three grounded redesign options, followed by a prototype only after you choose a direction |
|
|
30
|
+
| **Audit a product flow** | `Audit this onboarding flow and identify the highest-impact UX and accessibility issues` | `audit` | Screenshot-backed findings tied to the steps in the experience |
|
|
31
|
+
| Research user friction | `Research the biggest UX problems users are reporting for this product` | `research` | A source-grounded view of user pain, severity, confidence, and product opportunities |
|
|
32
|
+
| Critique a prototype | `Critique this prototype and identify the highest-impact design issues` | `audit` | An evidence-grounded UX, design, and accessibility review |
|
|
33
|
+
| Share a prototype | `Share this prototype with the team` | `share` | A working shareable URL after you choose a hosting target |
|
|
34
|
+
|
|
35
|
+
### Tip: Refine a prototype with Annotations
|
|
36
|
+
|
|
37
|
+
When editing a prototype in the in-app browser, you can use the Annotations tool to point at the exact elements you want to change. Add comments on the UI or adjust CSS values directly, then send the annotations back to Codex for fast, focused edits.
|
|
38
|
+
|
|
39
|
+
## Integrations
|
|
40
|
+
|
|
41
|
+
Product Design can use available tools when they are connected:
|
|
42
|
+
|
|
43
|
+
| Tool | What it unlocks |
|
|
44
|
+
| --- | --- |
|
|
45
|
+
| Browser, Chrome, or Playwright | Capturing and inspecting live product surfaces for audits, cloning, and prototype QA |
|
|
46
|
+
| Figma or Canva | Carrying prototype work into a reviewable design workspace and using existing design context |
|
|
47
|
+
| Image generation | Exploring visual alternatives and producing assets for selected directions |
|
|
48
|
+
| Sites, Vercel, or another available hosting tool | Publishing runnable prototypes after you choose a deployment target |
|
|
49
|
+
|
|
50
|
+
You can still begin with a written brief, screenshots, image files, URLs, local prototypes, or saved design context when a connected tool is not needed.
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
interface:
|
|
2
|
+
display_name: "Product Design"
|
|
3
|
+
short_description: "Product Design audits, research, brief confirmation, ideation, prototypes, and visual QA"
|
|
4
|
+
default_prompt: "For designing, building, or extending UI work, start by confirming the design brief. Help with product-flow audits, design research, ideation, prototyping, or prototype QA."
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect x="9.5" y="4" width="5" height="5" rx="1" fill="#FF66AD" stroke="#FF66AD" stroke-width="1.8" stroke-linecap="round"/>
|
|
3
|
+
<path d="M15.5 16.6C15.5 16.0399 15.5 15.7599 15.609 15.546C15.7049 15.3578 15.8578 15.2049 16.046 15.109C16.2599 15 16.5399 15 17.1 15H18.9C19.4601 15 19.7401 15 19.954 15.109C20.1422 15.2049 20.2951 15.3578 20.391 15.546C20.5 15.7599 20.5 16.0399 20.5 16.6V18.4C20.5 18.9601 20.5 19.2401 20.391 19.454C20.2951 19.6422 20.1422 19.7951 19.954 19.891C19.7401 20 19.4601 20 18.9 20H17.1C16.5399 20 16.2599 20 16.046 19.891C15.8578 19.7951 15.7049 19.6422 15.609 19.454C15.5 19.2401 15.5 18.9601 15.5 18.4V16.6Z" fill="#FF66AD" stroke="#FF66AD" stroke-width="1.8" stroke-linecap="round"/>
|
|
4
|
+
<path d="M3.5 16.6C3.5 16.0399 3.5 15.7599 3.60899 15.546C3.70487 15.3578 3.85785 15.2049 4.04601 15.109C4.25992 15 4.53995 15 5.1 15H6.9C7.46005 15 7.74008 15 7.95399 15.109C8.14215 15.2049 8.29513 15.3578 8.39101 15.546C8.5 15.7599 8.5 16.0399 8.5 16.6V18.4C8.5 18.9601 8.5 19.2401 8.39101 19.454C8.29513 19.6422 8.14215 19.7951 7.95399 19.891C7.74008 20 7.46005 20 6.9 20H5.1C4.53995 20 4.25992 20 4.04601 19.891C3.85785 19.7951 3.70487 19.6422 3.60899 19.454C3.5 19.2401 3.5 18.9601 3.5 18.4V16.6Z" fill="#FF66AD" stroke="#FF66AD" stroke-width="1.8" stroke-linecap="round"/>
|
|
5
|
+
<circle cx="2.76152" cy="5.9998" r="1.7" fill="#FF66AD" stroke="#FF66AD" stroke-width="1.8" stroke-linecap="round"/>
|
|
6
|
+
<circle cx="21.2815" cy="5.9998" r="1.7" fill="#FF66AD" stroke="#FF66AD" stroke-width="1.8" stroke-linecap="round"/>
|
|
7
|
+
<path d="M15.0352 5.09961H19.5002V6.90039H16.4416C17.1636 7.48718 17.7855 8.21825 18.2629 9.13574C18.9414 10.4398 19.3009 12.0661 19.301 14.0908V14.7812H17.5002V14.0908C17.5001 12.2749 17.1783 10.9512 16.6662 9.9668C16.2553 9.17704 15.7035 8.57058 15.0352 8.09036V5.09961Z" fill="#FF66AD" fill-opacity="0.5"/>
|
|
8
|
+
<path d="M9.36816 5.09961H4.90314V6.90039H7.96173C7.23976 7.48718 6.61786 8.21825 6.14044 9.13574C5.46193 10.4398 5.10241 12.0661 5.10236 14.0908V14.7812H6.90314V14.0908C6.90319 12.2749 7.22497 10.9512 7.73712 9.9668C8.14807 9.17704 8.69981 8.57058 9.36816 8.09036V5.09961Z" fill="#FF66AD" fill-opacity="0.5"/>
|
|
9
|
+
</svg>
|
|
Binary file
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "product-design",
|
|
3
|
+
"version": "0.1.41",
|
|
4
|
+
"private": true,
|
|
5
|
+
"type": "module",
|
|
6
|
+
"description": "The Product Design plugin is built for turning early ideas into prototypes teams can review. It starts design and build work by confirming the brief, then helps teams explore product directions, audit user flows, prototype from a live URL, and make static screenshots interactive.",
|
|
7
|
+
"repository": "https://github.com/openai/role-specific-plugins/tree/main/plugins/product-design",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"prototype:bootstrap": "node scripts/bootstrap-prototype.mjs"
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
# Browser Order
|
|
2
|
+
|
|
3
|
+
Use the first available browser in this order unless the user names a preferred browser to use:
|
|
4
|
+
|
|
5
|
+
1. Browser skill.
|
|
6
|
+
2. Chrome skill.
|
|
7
|
+
3. Playwright, only after asking the user.
|
|
8
|
+
|
|
9
|
+
Use the selected browser for source capture, local preview, screenshots, DOM, styles, layout, assets, and verification. Explore the tools and what they provide if you're not familiar with them.
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
# Communication Protocol
|
|
2
|
+
|
|
3
|
+
This applies to every Product Design skill.
|
|
4
|
+
|
|
5
|
+
Talk to the user like a design partner, not a debugger.
|
|
6
|
+
|
|
7
|
+
Default response shape:
|
|
8
|
+
|
|
9
|
+
- Lead with the visible result, decision, or blocker.
|
|
10
|
+
- Keep progress updates short, warm, and non-technical.
|
|
11
|
+
- Explain what changed in plain product or design language.
|
|
12
|
+
- Give the clickable preview URL when there is one.
|
|
13
|
+
- Name trade-offs or misses plainly.
|
|
14
|
+
- End with one concise suggested next step for the user's current task or goal.
|
|
15
|
+
- Avoid walls of bullets and overwhelming the user.
|
|
16
|
+
- Prioritize pithy, explicit prose that is helpful and minimizes jargon.
|
|
17
|
+
|
|
18
|
+
Do not lead with:
|
|
19
|
+
|
|
20
|
+
- Tool names
|
|
21
|
+
- File paths
|
|
22
|
+
- Package commands
|
|
23
|
+
- Trace or debug details
|
|
24
|
+
- Internal workflow names
|
|
25
|
+
- Verification mechanics
|
|
26
|
+
|
|
27
|
+
Use technical detail only when:
|
|
28
|
+
|
|
29
|
+
- The user asks for it
|
|
30
|
+
- Something is blocked
|
|
31
|
+
- The detail changes what the user should do next
|
|
32
|
+
|
|
33
|
+
Final response continuation:
|
|
34
|
+
|
|
35
|
+
- Every final response should end with exactly one useful next action, phrased as a natural sentence or question in the ordinary prose of the response.
|
|
36
|
+
- Make the next step specific to the active Product Design goal, such as reviewing a preview, choosing a direction, approving an implementation pass, tightening one screen, or sharing a target route or reference.
|
|
37
|
+
- If the response is blocked on missing input, make the unresolved question the final next step.
|
|
38
|
+
- Do not end with only a bare confirmation, file path, preview link, or "done" message while a concrete Product Design next step remains.
|
|
39
|
+
- Skip the next step only when the user explicitly asks for no follow-up, clearly closes the task, or another active workflow already owns the final next action.
|
|
40
|
+
|
|
41
|
+
When providing commentary and in-progress updates:
|
|
42
|
+
|
|
43
|
+
- Speak with the user like a teammate.
|
|
44
|
+
- Keep them updated with pithy, high-signal updates about the task at hand.
|
|
45
|
+
- Briefly explain important decisions and context.
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# Critical Overrides
|
|
2
|
+
|
|
3
|
+
These rules override generic assistant defaults for Product Design work.
|
|
4
|
+
|
|
5
|
+
## Context
|
|
6
|
+
|
|
7
|
+
- When working inside an existing project or product, find similar flows, screens, components, and UX patterns first. Build on the product's existing design system. Do not reinvent the wheel. Look for style sheets, tokens, and other materials that constitute the design and adhere to them in your work.
|
|
8
|
+
|
|
9
|
+
## Saved User Context
|
|
10
|
+
|
|
11
|
+
- If `user-context.md` exists, use it by default.
|
|
12
|
+
- Use saved product URLs, Figma files, screenshots, reference images, codebase paths, Storybook, tokens, design systems, brand assets, component refs, browser preferences, and share targets to ground Product Design work.
|
|
13
|
+
- Ideation, prototypes, audits, clones, and critiques should match the saved product context unless the user asks for something different.
|
|
14
|
+
- When a workflow needs visual grounding, attach or include relevant saved screenshots, reference images, tokens, design language, and component references in ImageGen, ideation, prototype, audit, and critique work.
|
|
15
|
+
|
|
16
|
+
## Design Brief Gate
|
|
17
|
+
|
|
18
|
+
- For Product Design requests that design, build, prototype, clone, redesign, extend, or generate product UI directions, run `$get-context` before `$ideate`, `$prototype`, `$url-to-code`, or `$image-to-code`.
|
|
19
|
+
- `$get-context` can run in question mode or playback mode. If required product, visual, or interactivity details are missing, ask for them. If those details are already present, play back the brief in a pithy format before moving to the next workflow.
|
|
20
|
+
- Do not proceed to ideation or implementation until the brief has been played back and either confirmed by the user or already confirmed earlier in the thread.
|
|
21
|
+
- A confirmed design brief is not a visual target. Use the confirmed brief as input to `$ideate` unless the user has already provided a concrete visual source such as a URL, screenshot, image, mockup, or Figma frame.
|
|
22
|
+
- After the user approves the design brief and the next step is an involved app, prototype, clone, redesign, or build, send one short expectation-setting note before starting work. Say that involved builds often take about 10-15 minutes, ambitious builds can take longer, and invite the user to grab coffee or tend to other work while Product Design keeps moving. Simpler static prototypes can be faster, often 5-10 minutes. Keep it warm and lightly playful, not apologetic or over-explanatory. Skip this note for tiny static changes, quick audits, simple research, setup-only, or share-only requests.
|
|
23
|
+
|
|
24
|
+
## How to communicate
|
|
25
|
+
|
|
26
|
+
- Follow [communication-protocol](communication-protocol.md)
|
|
27
|
+
|
|
28
|
+
## Build Handoff
|
|
29
|
+
|
|
30
|
+
- After a successful app, prototype, clone, redesign, or image-to-code build, return the prototype link first. This handoff is not blocked by sharing setup.
|
|
31
|
+
- Add one short iteration nudge: ask the user what they want changed next, and mention that annotations are useful for pointed edits.
|
|
32
|
+
- Add one short share nudge. Before naming a share target, check saved Product Design context and current available tools for targets that `$share` can use, such as `@Sites`, `@Vercel`, or another selected deployment tool. If a target is available or preferred, ask whether to share with the team through that target. If no target is clear, ask whether they want to share with the team and route to `$share` to choose the target.
|
|
33
|
+
- Keep the wording plain and human. Example: `Tell me what you'd like to change and we'll iterate. Annotations are great for pointed edits too. Want to share this with your team via @Sites?`
|
|
34
|
+
|
|
35
|
+
## Re-read this file
|
|
36
|
+
|
|
37
|
+
- Before every second user-facing assistant message, read this file, reminding of these principles.
|
|
38
|
+
- A user-facing assistant message is any message sent in `commentary` or `final`.
|
|
39
|
+
|
|
40
|
+
## Explore vs. Design vs. Build
|
|
41
|
+
|
|
42
|
+
- Do not build from under-specified product context alone.
|
|
43
|
+
- Do not treat "try to fulfill first" as permission to skip source capture or design mock creation. Follow the workflows prescribed in this plugin as contracts.
|
|
44
|
+
- For URLs, capture and open a screenshot first. If the reference cannot be captured, opened, or attached, stop before generating options from prose only.
|
|
45
|
+
- Never invent a better first screen, landing page, hero, card style, icon set, image style, color palette, radius, spacing, or typography when cloning or matching a provided source. Match the source.
|
|
46
|
+
- Check the work like a senior designer. Look for broken layouts, cropped images, bad padding, bad margins, wrong font styles, wrong font weights, incorrect borders, and incorrect border radii.
|
|
47
|
+
- Screenshots are not QA by themselves. Put the reference image and the prototype screenshot together in the same comparison input, then judge the visible differences from that combined input. Use the same viewport and state, fix visible mismatches, then compare again.
|
|
48
|
+
- Build the current screen's interactions. Sidebars, menus, navs, forms, inputs, buttons, tabs, dropdowns, drawers, modals, popovers, carousels, tooltips, filters, toggles, and first-screen controls must be functional and populated with realistic mock data. Do not build new pages or routes unless the user asks for them.
|
|
49
|
+
|
|
50
|
+
## Browser user
|
|
51
|
+
|
|
52
|
+
- Only use the user's chosen browser. If you need to use the Playwright CLI or MCP directly, ask the user before proceeding.
|
|
53
|
+
- Provide URLs, screenshots, mocks, Figma files, or other visual sources, including detailed art direction to ImageGen when generating designs and assets.
|
|
54
|
+
|
|
55
|
+
## Working with and making assets
|
|
56
|
+
|
|
57
|
+
- Never fake visible assets with ASCII, prose, text symbols, emoji, placeholder boxes, CSS art, div art, handcrafted SVGs, inline SVGs, or approximate code drawings. Use real source assets when available. Use the built-in Image Gen tool for image assets when source assets are missing. Use the closest matching icon library for icons.
|
|
58
|
+
- Work like a designer. Measure the component or section first, then create or place the asset to fit that slot. Match the needed dimensions, crop, subject, palette, and density. Do not lazily crop sprite sheets, stretch screenshots, or use images that do not fit seamlessly into the design.
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# Local Prototype Preflight
|
|
2
|
+
|
|
3
|
+
Use this before creating a new local prototype.
|
|
4
|
+
|
|
5
|
+
- Keep the work self-contained in the new project folder.
|
|
6
|
+
- Plugin UI icons live in `../assets/`. Do not put prototype starter code or generated app assets there.
|
|
7
|
+
- The bundled Product Design starter lives in `../templates/prototype/`.
|
|
8
|
+
- Create the app with the bootstrap script. Resolve the script path relative to this file, then run it with an absolute path:
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
node /absolute/path/to/plugins/product-design/scripts/bootstrap-prototype.mjs --dest /absolute/path/to/new-prototype
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
- Run `npm install` from the generated project root. The generated app includes its own `.npmrc`.
|
|
15
|
+
- Do not replace the starter with static HTML because package install is slow. If install is genuinely blocked, report the blocker.
|
|
16
|
+
- Do not start a server until the route is ready to build.
|