prd-to-uiux-rd-spec
PRD → UI/UX 研发规格(复刻级)交付流程
目标:把“产品 PRD(总纲)”转化为前端可复刻实现的 UI/UX 研发规格文档包(UI 行为、状态机、数据/事件契约、A11y、验收与测试计划),并让目录结构本身就能传达“做到了什么/没做到什么”。
本 skill 的原则:
- 文档先行:先冻结“壳层/公共基座/契约”,再写模块页面细节。
- 目录即证据:打开文件夹即可判断覆盖度与可落地程度(不是散文集)。
- 可演进:对“未来会增减的内容版块”,用契约/模型承接(前端不写死章节)。
- 安全默认:本 skill 默认不改业务代码;若用户要求写代码,先把规格与契约写清,再另起任务实现。
0) 你需要向用户确认的输入(最少集)
- PRD 路径/链接(或最小 PRD 框架)
- 是否存在只读参考基座(例如旧 UI/UX spec、设计系统、竞品稿件);如果有,路径在哪里、是否允许改动
- 前端关键约束(至少选 1 套):
- 图表库(如 ECharts)
- 图标库(如 lucide-react)
More from okwinds/miscellany
prd-to-engineering-spec
Transform PRD (Product Requirements Document) into actionable engineering specifications. Creates detailed technical specs that developers can implement step-by-step without ambiguity. Covers data modeling, API design, business logic, security architecture, deployment, and agent system design. Use when: converting product requirements to technical specs, validating PRD completeness, planning technical implementation, creating task breakdowns, or defining test specifications. Triggers: 'PRD to spec', 'convert requirements', 'technical spec from PRD', 'engineering doc from requirements', 'validate PRD'.
48headless-web-viewer
Render and view webpages using a headless browser (Playwright) to fetch JS-rendered HTML, extract visible text, and optionally save full-page screenshots. Use when a user asks to “无头浏览器打开/查看网页”, needs the rendered DOM instead of raw curl HTML, or wants a screenshot of a page.
33prd-writing-guide
Write complete, unambiguous PRDs that development teams can implement without guesswork. Includes requirement discovery framework, structured documentation methodology, completeness checklists, and common pitfall avoidance. Use when: writing new PRDs, reviewing PRD drafts, validating requirement completeness, preparing for engineering handoff. Triggers: 'write PRD', '写PRD', '产品需求文档', '需求文档', '需求规格', '需求评审', '完善需求', 'create requirements doc', 'product requirements', 'feature spec', 'requirements document'. Anti-triggers: 'technical design doc', 'architecture design', 'implementation plan', 'API design', '架构设计', '技术方案', '实现方案', '接口设计'.
25codebase-spec-extractor
Extract complete, replicable engineering specifications from existing codebases. Produces documentation detailed enough to fully replicate a project without seeing the original source code—even using a different tech stack. Use when: analyzing existing projects, documenting legacy systems, creating technical specs from code, preparing for system migration, or onboarding new teams. Triggers: 'extract spec from code', 'document codebase', 'analyze project architecture', 'create spec from existing system'.
16pptx-offline
PPTX 文档离线读写:解析/替换/重排/缩略图、OOXML 解包编辑回包,以及 html2pptx(HTML→PPT)工作流。适用于生成与维护演示文稿(依赖安装可能需要网络)。
14ui-ux-spec-genome
A portable, reproducible UI/UX spec standard: scan a frontend repo for UI sources and scaffold a ui-ux-spec documentation bundle (tokens, global styles, components, patterns, pages, a11y). Also supports plan-driven UI-only refactors based on an existing ui-ux-spec. Excludes business logic and domain workflows.
13