元形 · AI 产品原型工作台

SKILL前端设计
前端设计 未标注权限 许可证不明确
安装这个技能

元形(Yuanxing):用自然语言进行产品需求设计与原型迭代,复用截图与 HTML,组织流程画布、完整原型和可交互需求文档,导出含结构化数据的离线 HTML。适用于新需求规划、旧产品修改与原型评审;纯讨论保持只读,不用于生产应用或外部在线文档编辑。

一句话选型结论

按资料字段整理

元形 · AI 产品原型工作台是前端设计类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类前端设计 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install user_0c128924/yuanxing
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方user_0c128924仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 community
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验2026-11-06上游最后核验时间 · 数据更新 2026-11-06
正文体量7.6 KBSKILL.md 原文大小,越大说明说明书写得越细

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
出页面与组件

按描述生成页面结构和组件草稿。

调整样式与布局

改间距、配色与响应式布局。

生成设计说明

把设计稿整理成开发能接的说明。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在前端设计场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
元形 · AI 产品原型工作台当前 未标注权限 未标注 未标注 未标注 有
前端设计 只读 GitHub 仓库 882.3 万 Codex、Claude、Cursor 有
Vercel 组合模式 联网访问 GitHub 仓库 385.9 万 Codex、Claude、Cursor 有
Vercel React native skills 前端 只读 GitHub 仓库 246.9 万 Codex、Claude、Cursor 有
adapt 搜索 浏览器控制 GitHub 仓库 202.7 万 Codex、Claude、Cursor 有
使用我的浏览器 浏览器控制 GitHub 仓库 184.8 万 Codex、Claude、Cursor 有

SKILL.md 全文

7.6 KB
模型实际读到的说明书原文,来自技能仓库

元形

用户用自然语言表达产品意图,Agent 负责需求设计、页面、交互和交付;工作台支持查看、评审与直接编辑,产品取舍由用户决定。

按当前意图推进

  • 新需求规划或纯讨论:讨论用户、问题与目标、范围、主流程和取舍;信息足够直接给方案,关键缺口才询问,不检测环境、运行检查或写文件。
  • 已有需求或原型修改:定位页面、编辑源与正文段落,只读目标和直接依赖;业务变化同步原型、对应需求及必要画布摘要,查到共享规则影响才扩大范围。
  • 方案明确,要求制作:复用已有组件、风格与项目直接实现;新项目按指定目录,不重复规划或确认。

需要执行时核对 Skill 目录、权限与 Node.js 20+,复用已确认且未变的结果。宿主能力不足或需要接入、分发时再读Agent 接入,不索取模型 API Key。

快速定位

node "<Skill目录>/scripts/yuanxing.mjs" locate --root "<项目目录>" --query "功能名或页面标识"

已知本轮编辑源时直接读取目标段落;来源不明确再用 locate。默认返回页面、去重编辑源与需求行号,不构建页面、不加载图片或布线引擎;需要渲染配置等完整元数据时再加 --json。无查询时给模块概览,结果过多用模块或具体关键词收窄,无匹配再用 rg 搜索本项目。

path 可能是生成预览,sources 才是已声明编辑源;不明确时沿项目 README 与扩展确认。复用会话内已确认的路径、规则与依赖,修改前只重读目标及变化处。大文件先 rg -n 找函数或选择器,再读取相关行;不整份输出编排、长源码、导出 HTML 或图片编码。格式问题才读项目格式对应章节,不一次加载所有参考资料。

编辑与保留

  • 先读目标当前内容,保留无关页面、画布位置、连线、批注及用户改动。人与 Agent 并行编辑编排时保留原始 JSON 基线,用 apply --root <项目目录> --base <修改前JSON> --model <修改后JSON> 合并,同字段冲突保留双方;临时文件收口清理。
  • 修改已有需求或原型后,用 updates add --root <项目目录> --text <变化> [--node <页面>] 把对评审、开发有意义的变化追加到更新说明,默认当天日期;完整规则仍写在 PRD,不记录制作过程。格式见项目格式。
  • 复用已有 HTML、截图、风格与组件;项目外输入复制后使用。页面优先自包含 HTML/CSS/少量 JavaScript;同一页面的流程节点优先共用页面和初始状态配置,表单、Tabs 和辅助弹层留在页内,只为独立任务阶段、主要操作或结果拆节点。
  • 只实现用户要求与已有设计,按用户最新决定替换旧规则,业务内容进入已有正文,不另建过程文档。跨页修改按业务含义定位关联源与交互,不能只改相同标识或同名字面文字;不加共用逻辑管理入口或另一个 AI 输入框。批注用于说明,不自动执行。
  • 多项目仅登记用户指定项目,沿用已有工作区;工作区和私人项目不进入 Skill 发布包。命令见Agent 接入。

原型与需求文档

  • 同一产品的模块共用完整原型,不同产品或平台才分 experiences。Agent 选择真实入口,保留打开、取消、确认、返回及上下文,不要求用户重新配置。
  • 画布节点表达页面的初始状态;打开节点后应保留页面已有交互和后续状态变化,流程连线不限定其他操作。HTML 用真实 DOM 交互,截图用热点;保留控件响应、输入、悬浮、滚动及锚定菜单,不用透明替身、空点击或统一 Toast 冒充功能,也不补造未设计功能。跨页绑定稳定选择器或截图区域,diagram: true 只表达画布关系。数据与扩展见项目格式,交互见手册。
  • 文档沿用认可写法,无既定结构时用背景与目标、功能清单、功能详情;长说明上下阅读,短说明按需对照,不逐页套表或补造内容。原型、组件和规则同源,Markdown 按章节引用并回写,画布 summary 仅留核心。人可修订文字,章节编排交给 Agent;无顶部工具栏、插入、标题样式或正文块拖拽。原型外框右下角可等比调整,内部内容适应,本地保存比例,离线仅调整查看状态。
  • 文档沿用认可写法,无既定结构时用背景与目标、功能清单、功能详情;长说明上下阅读,短说明按需对照,不逐页套表或补造内容。原型、组件和规则同源,Markdown 按章节引用并回写,画布 summary 仅留核心。用户只直接修订文字,增减内容与章节编排由 Agent 通过 apply 修改 document。
  • Agent 选择页面/组件范围并适配显示,保留真实交互;用户不填选择器、模式或像素尺寸。文档编排、嵌入原型和 HTML 协议按需读文档与交付格式,用户操作工作台界面的问题才读工作台手册;保留复杂绑定的原生语义,不以字段可解析声称研发已接入。

检查与交付

本轮修改 检查范围
需求、画布或原型内容 业务一致性、受影响文件的语法与引用;不跑元形完整测试库,不为简单页面补测试
元形源码:CLI、运行时、数据协议或分发 在源码仓库运行 npm test(约 2 秒);新增行为补对应用例
分享或发布交付 导出自带结构与资源检查,无需先重复 check;修改结束后统一生成所需产物,核对后未变化不重跑
  • 按影响同步已有分享,覆盖前确认是本项目生成物;普通迭代不自动生成三视图、三渠道包或发布 GitHub。仅用户要求打开时启动工作台,不默认服务、浏览器、截图或自动验收。
  • CLI 命令按需查 help;三视图可导出离线单 HTML,分享接收者可离线再次导出三种视图,日常改源。交付入口、检查及未验证部分,原型注明待用户验收;推送和市场发布须有用户授权。
  • 默认导出无损压缩并核对最终 HTML 的实际字节数,保留原图、全部页面和交互。用于 WorkBuddy 的 50 MB 预览时须小于 50,000,000 字节并留余量;超限先查重复资源与编码,不以降画质、删内容或 ZIP 体积冒充达标。数据读取见交付格式。
  • 检查成功只读摘要,失败再看报错;交付说明实际证据,不以用例数量代表质量。更新已安装的元形先用 install.mjs --check 核对差异,再 --update 备份后替换,见分发与版本。

常见问题

5 问
答案由本站依据条目字段整理
元形 · AI 产品原型工作台怎么安装?

在支持 Skills 的客户端里执行:skillhub install user_0c128924/yuanxing。安装方式为未标注。装完刷新技能列表或重开客户端。

元形 · AI 产品原型工作台支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

元形 · AI 产品原型工作台权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

元形 · AI 产品原型工作台收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

元形 · AI 产品原型工作台用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 2026-11-06。