登录

AI MAKING FIELD · OPEN EDITION S01

把正在发生的
创造，带回下一次行动。

VIBE FRONTIER 是 AI 造物社的公开共学与 Build 媒介。每一期只选少量真实作品，核对作者与来源，拆清楚它为什么成立，再把判断变成可以继续做的下一步。

看本期精选 了解共学方法
  • — 公开期
  • — 深度拆解
  • — 研究线索
ISSUE S01 / PUBLIC TRIALSOURCE → JUDGMENT → NEXT BUILD
KASANE 几何图像案例预览 GEOMETRIC IMAGEKASANE FIELD NOTE / JUDGMENT EVIDENCE
BEFORE
AESTHETICS. TURN A REFERENCE INTO A NEXT STEP ↗ Why Zero 网站案例预览 SCROLL NARRATIVEWHY ZERO
01 / SEE02 / DISSECT03 / REFRAME OPEN THIS EDITION ↗

正在读取本期数据

CASE LAB

本期深度拆解

案例会从本期真实数据读取，并保留作者、原作、实现和证据边界。

SELECTED CASE01 / —

OPEN METHOD / FOUR MOVES

从一个作品，
走到下一次 Build

不把参考当皮肤，也不把好看当结论。沿着作品、来源、判断与行动四步，把观看真正带回自己的项目。

  1. 01看作品

    先看真实体验，只保留一个真正改变观看或使用方式的机制。

    OUTPUT / 现场记录
  2. 02查来源

    核对作者、原作、素材与证据边界，把事实和视觉推断分开。

    OUTPUT / 来源账本
  3. 03拆判断

    分开目标、内容、视觉、动效、工程和验收，不把皮肤误当方法。

    OUTPUT / 判断结构
  4. 04做下一步

    替换成自己的问题与限制，做一个可打开、可验证的小实验。

    OUTPUT / NEXT BUILD

公开层：本期案例、方法、Prompt 小样与工具地图都可以直接使用；作者与来源始终跟着内容走。

进入公开 Prompt 库 ↘

TOOLKITS / OPTIONAL DEPTH

先用公开内容，
确认需要哪种支持

共学内容始终在前。只有当你需要完整规格、可安装 Skill 或针对真实项目的校准时，才进入更深一层的工具与服务。

FREE / 01永久免费
4STEP
METHOD

个人网站公开课

灵感迁移方法

四步方法、六层结构、公开案例和基础 Prompt。先做出第一版，再决定要不要买。

¥0开始学习 ↗
VFP-001 / PROMPT首发验证
6LAYER
SYSTEM

原创 Prompt 商品

个人网站灵感迁移系统

完整主 Prompt、变量采集表、三种网站方向、四个修正 Prompt 和桌面 / 手机验收表。

¥99购买 / 登录 ↗
VMD-001 / AGENT SKILL可安装 ZIP
1SIGNATURE
MOMENT

动效设计师能力

VIBE Motion Director

Agent 先看真实页面，再选一个标志性动效，完成方向、实现、移动端、减弱动效与性能验收。

¥299申请内测 ↗
MOTION CLINIC / CASE人工校准
1:1CASE
REVIEW

Case-by-case 服务

网站动效校准

针对一个真实页面，由动效设计师校准标志性时刻、动效地图和实现优先级。Skill 不替代这一步判断。

¥999 起
三档信息密度

公开：方法和小样。付费：完整 Prompt / Skill 与验收。私有：参考评分、失败样本、组合矩阵和逐案判断，不作为商品直接公开。

REFERENCE INPUTS

这些站，用来研究，不是拿来换皮

按整站、组件和设计系统标出用途。公开 Prompt 可以学习，但商品必须经过来源记录、六层拆解、变量替换、重新组合和真实验收。

使用边界

可以学习公开 Prompt 的规格方法；不能把别人的付费库、品牌资产、动效序列或整站作品改名出售。本站商品只交付重新定义并验证过的原创系统。

WHY

好看不是终点，
能解释、能复用、能验收才是。

很多 Vibe Coding 教程停在“生成一个很酷的页面”。VIBE FRONTIER 把学习继续往下推：找到机制，拆出组件，建立设计语言，选择合适的动效层级，并在移动端、无障碍和性能约束下完成验收。

LEARNING PATHS

四条路径，完成一个真实作品

建议顺序：组件 → 系统 → 动效 → Vibe 工作流。每一条都以“可交付的产出”结束。

COMPONENT WORKSHOP

先把一个按钮讲清楚

组件不是一张静态截图。调节尺寸、语气和状态，观察视觉规则如何跟着变化。

SIZE / 尺寸
TONE / 语气
STATE / 状态
PREVIEW / 01
01 / TOKEN

尺寸来自空间刻度，颜色来自语义 Token，不在组件里写随机值。

02 / STATE

Default、Hover、Focus、Loading、Disabled 都要被单独设计与测试。

03 / ACCEPTANCE

键盘可达、焦点可见、文案不抖动、移动端触控目标不小于 44px。

SYSTEM BLUEPRINT

设计系统不是组件仓库

它是一条从原始视觉值到产品决策，再到代码与验收的可追踪链路。

  1. 01AUDIT

    盘点真实界面与重复问题

  2. 02PRIMITIVE

    颜色、字号、间距、圆角

  3. 03SEMANTIC

    把数值改写成用途与语气

  4. 04COMPONENT

    行为、状态、组合与边界

  5. 05DOCS + QA

    示例、禁用方式与自动测试

一条判断原则

如果一个规则不能解释“何时用、何时不用、怎么验收”，它还不是系统。

CURATED TOOL MAP

工具不是越多越好，选对层级

只收录官方入口。每个资源都有适用场景、使用判断与边界说明。

PROMPT LIBRARY

不是魔法咒语，是可执行 Brief

原创教学模板负责讲方法；你已保存的 MotionSites 免费样例负责展示一份完整生成规格可以细到什么程度。

目标 OBJECTIVE输入 INPUT结构 STRUCTURE视觉 VISUAL约束 CONSTRAINT验收 ACCEPTANCE
REFERENCE STRUCTURE / ATTRIBUTED

两份参考 Prompt 的结构观察

这里只展示它们为什么完整，不再把原文当作本站商品。来源、品牌和内容仍属于原作者；本站付费内容从新的任务和变量重新生成。

FREE SAMPLE 01REACT / 3D / PORTFOLIO

Jack — 3D Creator Portfolio

完整到区块顺序、响应式字号、磁吸人物、双向滚动 Marquee、粘性卡片、依赖与动效参数。适合学习“如何把视觉稿写成工程规格”。

看本站如何重写 ↗查看公开来源 ↗
FREE SAMPLE 02STUDIO / MARQUEE / INTERACTION

Viktor Oddy — Studio Landing

从字体、按钮阴影到无限画廊、视差、轮播、鼠标尾迹与固定底栏，展示复杂单页如何被拆成模块、数据与交互约束。

看本站如何重写 ↗查看公开来源 ↗

FULL REFERENCE INDEX

全部候选网站 —

按标题、作者、平台和机制搜索。点「加入候选」会保存在当前浏览器，方便你逐个筛。

正在读取候选资料历史研究库 · 原作状态可能变化

BUILD IN PUBLIC

带着正在做的东西，
进入一次共同拆解。

VIBE FRONTIER 是 AI 造物社的公开共学现场：真实项目诊断、组件共建、动效实验与公开复盘都从一个具体问题开始。

不接收“帮我做得高级一点”这类空泛需求；请带上链接、目标用户、当前问题与限制条件。