prd-to-prototype从产品需求到可交互原型的完整工作流。当用户表达产品想法（如'我想做一个...'、'帮我设计...'）时触发。支持：1) 零提问直出PRD 2) 平台选择确认 3) 生成Awwwards级别的高保真HTML/Tailwind原型（移动端/PC端）。端到端产品设计流程。
Install via ClawdBot CLI:
clawdbot install zengxming45/prd-to-prototypeGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=croAudited Apr 17, 2026 · audit v1.0
Generated May 9, 2026
用户说'我想做一个卖手工艺品的商城'，技能自动生成包含商品首页、分类、详情、购物车和个人中心的PRD，并输出移动端或PC端高保真HTML原型。适合验证商品展示与购买流程。
用户需求如'帮我设计一个员工考勤看板'，技能直出PRD（含用户角色、打卡流程、数据报表），然后生成B端风格的PC端原型，带侧边栏、表格、图表等。
用户提出'我要做一个类似Tinder的约会应用'，技能自动补全功能如匹配、聊天、个人资料，生成iOS 18风格的移动端原型，用于向投资人展示。
用户要求'做一个在线课程平台'，技能输出PRD涵盖课程列表、播放页、学习进度，并生成响应式PC端原型，适合教育机构快速搭建Demo。
为企业和个人提供原型设计工具即服务，按项目或座位收费。技能可嵌入SaaS平台，作为增值功能快速产出高保真原型。
使用该技能为客户快速生成PRD和原型，提升咨询效率。按项目收费，适合设计工作室或自由设计师。
将技能核心逻辑开源吸引用户，但高级模板库、企业级SSO集成等需付费商业授权。
💬 Integration Tip
可将该技能直接集成到对话式AI平台或低代码工具中，作为'从需求到原型'的一站式模块，外部通过API触发工作流。
Scored May 9, 2026
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Searchable UI/UX design databases: 50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types. CLI generates design systems from natural language. Data-driven complement to ui-design.
Extract a color palette from an image and return HEX/RGB values with optional swatch image.
Design, preview, and generate UI code using Google Stitch (via MCP). Helps developers choose the best UI by generating previews first, allowing iteration, and then exporting code.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Extract design systems, architecture patterns, and methodology from codebases into reusable skills and documentation. Use when analyzing a project to capture patterns, creating skills from existing code, extracting design tokens, or documenting how a project was built. Triggers on "extract patterns", "extract from this repo", "analyze this codebase", "create skills from this project", "extract design system".