uiux-react-jsx-packager
uiux-react-jsx-packager
Output Contract
- Create one new
*.jsxfile (do not overwrite existing files unless explicitly requested). - Export the root component via
export default. - Keep runtime dependencies to React only (no
react-router,lucide-react,echarts,classnames,zustand, etc.). - Keep styles in-file via
<style>injection and/or inlinestyle={{...}}. - Replace icon libraries with inline SVG components.
- Replace images with base64-inlined data URLs or deterministic placeholders.
- Implement navigation via component state (optionally sync to
location.hashfor shareable URLs). - Preserve all interactions/animations/state logic; do not simplify behavior.
- Prefer embedding the compiled CSS (if available) to preserve spacing/colors/shadows.
关于“像素级一致”(可选增强,不是默认门禁)
“像素级一致 / pixel-perfect”在工程上必须限定条件,否则不可验证。只有当你要对外宣称 pixel-perfect 时,才需要做像素 diff 验收:
- 同一台机器、同一 OS 与同一浏览器版本(建议固定 Chrome 版本)
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'.
16prd-to-uiux-rd-spec
从产品 PRD 产出“复刻级可落地”的 UI/UX 研发规格文档包(目录同构骨架、公共基座、组件/页面契约、覆盖映射、索引与 worklog)。适用于需要把 PRD 转成前端可复刻实现的规格文档、UI/UX 研发规格、界面契约与验收标准的场景;避免用于只要视觉灵感/纯 UI 赏析或直接写代码实现的请求。
15pptx-offline
PPTX 文档离线读写:解析/替换/重排/缩略图、OOXML 解包编辑回包,以及 html2pptx(HTML→PPT)工作流。适用于生成与维护演示文稿(依赖安装可能需要网络)。
14