Agent Skills
返回列表
AI+原型设计

AI+原型设计

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_7e8319e3/ai-prototype-design。

技能介绍

要解决的问题

当产品想法还停留在描述阶段，静态截图和 Figma 往往难以快速验证交互路径、反馈节奏与页面结构。AI+原型设计把自然语言直接转成可运行、可点击的 HTML/CSS/JS 单文件原型，让工程师、产品和非技术 stakeholder 用同一个 artifact 讨论流程。

技能如何工作

  • 明确交付目标：识别类型（落地页、仪表盘、移动端、后台、线框图）、保真度、平台、关键页面、交互和视觉风格；描述模糊时最多问 1-2 个澄清问题。
  • 可选模板加速：匹配常见模式时读取 dashboard.html、landing-page.html、mobile-app.html、admin-panel.html，再基于 CSS variables 定制；不匹配则按 design guidelines 从零构建。
  • 生成可交互单文件：语义化 HTML、内联 CSS/JS、responsive breakpoints、hover/focus states、modals、tabs、200-300ms transitions，并用真实感 placeholder data 而非泛泛 Lorem Ipsum。
  • 验证后交付：检查 offline、responsive、clickable、accessible、vanilla JS performance，保存为 prototype-{type}-{date}.html 并在预览中迭代。

适用边界

适合快速验证概念、页面结构和交互闭环，不适合替代正式设计系统、复杂状态管理、后端集成或生产级组件库。若需要真实鉴权、复杂图表、多语言、主题工程化或可维护前端代码，应把它当作原型输出，再迁移到正式技术栈。

使用场景

  • 产品经理需要在评审前快速验证一个 SaaS 落地页的主视觉、功能区和定价区结构。
  • 工程师要用自然语言先搭出后台仪表盘原型，检查侧边栏、KPI 卡片、图表和表格布局。
  • 独立开发者向投资人演示移动端登录与 onboarding 流程，需要可点击原型而不是静态图。
  • 设计师做低保真线框图，用灰阶布局快速确认博客平台的页面层级与导航结构。

适合人员

  • 要验证产品流程和页面结构，但暂时不想搭正式前端工程的产品经理。
  • 需要向客户或评审展示可点击 Demo 的独立开发者。
  • 要做低保真线框或中保真交互稿的界面设计师。
  • 需要先检查 Dashboard、Landing Page、Admin Panel 布局的前端工程师。