SuperAPI AI 工具集

wireframe-to-spec

前端与建站

查看项目

更新于 10-15 21:35

技能介绍

用途:把线框图、草图或线框工具导出的图片转换为结构化 UI 设计规格,衔接设计与实现。

主要能力:识别输入类型(手绘草图、数字线框图、Excalidraw/Balsamiq/MockFlow 导出);用 ai-multimodal 做布局提取与组件识别;按 ui-wireframe-protocol.md 生成 ASCII 线框图、组件清单(Common/Domain-Shared/Page 分层)、状态表(Default/Loading/Empty/Error)、组件分解树与响应式建议;输出 PBI 兼容的 ## UI Layout 段落或独立规格文件 team-artifacts/design-specs/{YYMMDD}-wireframe-spec-{slug}.md;并生成交互组件与业务操作/规则(OP-/BR-/FR- 逻辑 ID)的映射表。

使用方式:在 Codex 中用 $wireframe-to-spec 调用;执行前先建立任务跟踪;按协议逐步执行并报告证据。Figma URL 应改用 $figma-design,应用截图应改用 $design-screenshot。涉及前端/UI 时需先读 docs/project-reference/frontend-patterns-reference.md、scss-styling-guide.md、design-system/README.md。

限制:线框分析准确率约 70-80%,必须人工复核;置信度低于 70% 时应向用户提问澄清;规格正文须用业务/UX 术语描述组件与状态,不得写框架类名、库导入或 CSS 类,源码标识仅可出现在 Evidence、frontmatter 与 Mermaid 中;无法在环境中运行的步骤需先停下询问用户。具体项目路径与命令以 docs/project-config.json 为准,资料未提供更多细节。