文档

• 市场分五个层级：整站模板、设计风格、页面区块、功能组件、视觉效果。先选层级，再按分类筛选。
• 搜索同时匹配名称、分类和标签，按 / 聚焦搜索框。筛选条件写在链接里，复制地址就能分享。
• 卡片上的「复制 Skill」复制这个条目的 SKILL.md；筛选栏的「通用 Skill」是按当前分类挑好的设计规范。

• 数值变成橙色，说明离开了推荐区间，效果可能不如默认值。
• 双击参数名恢复这一项的默认值；「重置」恢复全部。
• 改过的参数写在地址栏（#v=…）。「复制链接」分享出去，对方看到的就是同样的效果。
• 只播一次的入场动画，用预览右下角的按钮重播。

三种方式拿到的代码都带着你调好的参数：写在组件开头的 defaults 里，之后可以直接改，或者用 props 覆盖。

• 下载项目

  Vite + React + Tailwind v4，npm install && npm run dev 就能跑，附带对应的 Skill。

• shadcn 安装

  运行「安装」页的命令，组件装到 components/motif/<条目名>/。

• 手动复制

  按「安装」页列出的路径复制文件，再装上依赖。

在工作台里用一句话描述效果，agent 写好组件、参数和预设，边改边预览。条目页的「在工作台里改」会带着你调好的参数进来。

• agent 的每次修改都过一遍和市场相同的检查和编译，出错它会自己修。
• 「应用为默认值」把预览里调好的参数写回组件。
• 想自己改：在「代码」里编辑，Ctrl / ⌘ + S 保存并编译。
• 做好后和市场条目一样导出（shadcn 地址是 /r/s/<会话>.json），或者一键投稿到社区。

会话链接就是工作区的钥匙：拿到链接的人都能继续改，只分享给信任的人。

Skill 是写给 agent 的说明：什么时候用、怎么装、你调好的参数和不能破坏的规则。放进项目后，Claude Code、Codex、Cursor 等 agent 就能在你的代码里做出同样的效果。

• Claude Code 读 .claude/skills/<名字>/；Codex、Cursor、Gemini CLI 读 .agents/skills/<名字>/。
• 条目页的「Skill」标签可以下载完整的 Skill 文件夹，也可以只复制 SKILL.md：agent 会按说明用 npx skills add 取回组件。

通用 Skill 讲动效、排版、着色器这些方向的做法，可以和条目 Skill 一起用：

Motif 也是给 agent 用的商店：你的 agent 可以自己搜索条目、看预览、按参数取回代码，找不到合适的就下定制单。

1. 1

   找search_ui 按需求搜索，get_ui 看参数和预设。

2. 2

   看preview_ui 用指定参数截图。

3. 3

   取place_order 下单，立即交付全部文件、安装命令和 Skill；list_skills、get_skill 取 Skill。用 API 密钥对应账号的积分付款，买过的以后再取不重复扣。

4. 4

   定制没有合适的就带上需求下定制单，用 get_order 查进度。交付的条目过同样的检查。

不用 MCP 的 agent 读 llms.txt，或者直接 POST /api/agent/<工具名>。

搜索、详情、截图预览、报价都免费，不需要密钥。拿代码、拿 Skill 和定制单要在 API 密钥 页建一个密钥，按 积分价格 扣积分。

市场的代码只来自允许再分发的许可证：MIT、Apache-2.0、ISC、BSD、Zlib、Unlicense、CC0。条目页的「来源与许可证」写着上游仓库、固定的提交和 Motif 的改动。

用进自己的项目时，请保留文件开头的版权注释。Motif 自己的代码使用 MIT 许可证。

任何人都可以投稿：押上 MOTIF 押金，审核员投票通过后进入市场，作者得到奖励和声誉。链上记录内容哈希、许可证和来源；条目页的「链上已验证」是你的浏览器重算哈希后和链上比对的结果。

1. 1

   准备在工作台里做一个，或者用 pnpm item:pack <slug> 打包成 .motif.json。

2. 2

   投稿在社区 → 投稿拖入文件，检查和预览通过后签名提交。

3. 3

   审核先达到法定票数的一方决定结果。质量问题退回押金；抄袭、伪造许可证、恶意代码罚没押金。

4. 4

   治理委托 MOTIF 投票权后，在社区 → 治理发起和表决提案。

本地试用：运行 pnpm dev:chain 启动本地链并导入条目，连上钱包后领取测试币。合约设计见 docs/decisions/0005-decentralized-community.md。

仓库在 GitHub 上公开，本地开发需要 Node 22 和 pnpm：

pnpm dev 同时启动站点和预览沙箱，提交前运行 pnpm verify。新增条目的写法和质量要求见 编写市场条目。