{ D20 Design Forum }0:00 - 0:20

{ AI Web Design }

Vibe Design

从设计资产到 OPC 商业化。

Design.md Content Assets OPC

Design Asset / Content / OPC

01 / Design.md 风格变成资产 色彩、组件、语气和约束可复用。

02 / Content 内容变成结构 文档、表格、活动沉淀成网页素材。

03 / OPC Demo 进入市场 上线、支付、SEO、GTM 一起进入设计视野。

Prompt Revenue Agent

{ Opening Question }0:20 - 1:00

{ What Changed? }

AI 到底改变了什么

01AI 能画图吗？

02AI 能生成网页吗？

03AI 能写代码吗？

真正的变化发生在设计对象、设计流程和设计师角色上。

AI 不只提高效率，设计师开始同时处理 Prompt、Design.md、组件规则、网站、SEO、商业页面和产品流程。

{ Paradigm 01 }1:00 - 2:30

{ Page → System }

从设计页面，到设计体验和系统

过去常见对象

现在进入设计范围

网页越来越像产品、助手甚至 Agent，用户停留、交互、转化和任务完成都进入设计范围。

{ Paradigm 02 }2:30 - 4:00

{ Design.md / Token }

从设计稿，到 AI 可理解的设计资产

真正重要的资产，正在从图层文件扩展到机器可理解的上下文。

# Design.md
brand_principles:
  - clear, direct, credible
  - community-first

colors:
  background: #0e100f
  text: #fffce1
  accent: #0ae448

layout:
  grid: 16:9 presentation canvas
  radius: 8px
  spacing: 24 / 48 / 72

components:
  cards: flat, no shadow
  buttons: outline pill
  media: complete-fit showcase

interaction_rules:
  motion: slow, readable, demo-first
  content: structured from docs and sheets

{ Learning Method }WaytoAGI Knowledge Base

{ How to Learn / Curated Knowledge }

学习方法：进入 WaytoAGI 知识库

WaytoAGI 知识库我们持续整理和收录 AI、设计、产品、增长相关内容。

从主题索引开始Design Token、AI Web Design、YouTube 课程和工具案例都可以按主题查找。

先建立问题意识知道该查什么、该问什么、该验证什么，跨界学习才会真正发生。

Design Token YouTube 学习资料整理图 — Design Token / YouTube Learning Map

{ Workflow Case 01 }4:00 - 5:20

{ Reference URL / Design.md }

用 Design.md 复用高级设计语言

01输入参考网址

02抽取色彩、排版、间距和组件气质

03复制 Design.md，作为生成上下文

04团队复用、传递和迭代同一套风格

风格从主观感觉变成可以复制、传递和迭代的资产。

Reference → Style Extraction → Design.md · Slow Scroll

{ Workflow }Content Link + Design Context

{ Design.md / Content Assets }

内容资产接入设计上下文，网站开始持续生长

01内容已沉淀活动、文档、视频、表格和案例先进入可复用资产库。

02风格可调用Design.md 提供色彩、排版、组件和品牌语气。

03网站快速生成用内容链接和风格上下文，生成可展示页面。

04持续运营新增内容可以继续进入网页、作品库和传播入口。

核心变化超过页面生成速度，内容、风格和运营流程会一起被结构化。

{ Knowledge Base }3 Years → Vibe Design

{ WaytoAGI / Knowledge / Prompt }

三年知识库，正在变成可生成的网站

上万篇教程AI 学习路径、Prompt、Agent、AI 视频、编程和工具经验持续沉淀

上千场活动共学、训练营、切磋大会和线下现场形成长期社区记忆

大量用户共创内容文档、表格、案例、作品和复盘开始成为网页素材

Prompt + Design.md做一个社区大事件网站，附上 Design.md

WaytoAGI 社区知识库截图 — WaytoAGI Knowledge Base / 2023 → 2026

{ Living Archive }events.waytoagi.com

Case 01

社区大事件：活动资产，成为公开展厅

1 个实体空间线下节点进入同一张社区地图。

6 个训练营活动轨迹长期可见、可检索。

24 场 AI 切磋大会社区历史成为展示资产。

历史材料不再散落在群聊和文件夹里，设计把它组织成观众可以理解的社区记忆。

Open Site

{ Base Table }Lark Base + Design.md

{ Base Link / Design.md / Website }

多维表格，也能生成可视化学习档案

原本是一张多维表格历史共学内容、直播海报、大类别、讲师、简介和纪要都已经字段化

直接给 AI 链接把内容源作为上下文，让 AI 理解主题、分类、时间和详情页结构

再附上 Design.md同一批表格记录可以形成更清晰、更美观、可持续更新的网站

Prompt + Design.md把这张晚 8 点共学表格做成一个可视化学习档案网站

晚 8 点共学多维表格截图 — Lark Base → AI Context → Website

{ Learning Archive }w8study.waytoagi.com

Case 02

晚 8 点共学：表格记录，成为学习档案

388 场记录每晚一个 AI 主题，沉淀为可复用经验。

字段化内容主题、讲者、链接、附件生成网页结构。

持续更新新增一条记录，网站获得新的内容入口。

飞书表格不再只是后台记录，它可以成为网站的信息架构和内容源。

Open Site

{ Before Website }Video Battle Feishu Archive

{ Context / Fast Build }

Video Battle 先有一整套内容上下文

73个飞书文档，按期沉淀主题、规则和作品。

2 年每周一期，形成稳定的活动节奏和内容资产。

1 小时快速呈现可访问网站；上下文越完整，结果越真实。

{ Creator Arena }promptsbattle.waytoagi.com

Case 03

Video Battle：
一次活动，
变成持续运营入口

命题发布每一期主题都有清晰入口。

作品沉淀最终作品、规则、档案长期保留。

创作者网络页面同时承担传播、征集和复盘。

Open Site

{ Field Lab }hackerhouse-dali.waytoagi.com

Case 04

大理 Hacker House：
现场过程，成为品牌叙事

7 天过程、花名册、手册、笔记同步沉淀。

70 人+线下真实协作，生成对外可见内容。

57 张现场图现场状态成为后续传播素材。

网站可以记录活动过程，并让现场持续产生外部表达。

Open Site

{ Community Design }OpenClaw District

{ City Fork / Local Culture }

同一个社区项目，也能长出城市版本

一个主 KV 保证识别，每个城市再用地标、文化符号和活动信息形成自己的特色海报

{ Community Logo System }AGI Builder / Open Structure

{ Foundation / Roof / Blank Space }

AI 时代的 Logo，可以成为共创结构

开放结构左下为基底 Foundation，右上为屋檐 Roof，中间留白等待内容填入

填内容个人数字身份、AI Builder 形象、项目徽标、社群标识、代码、模型、火焰、彩虹都可以进入中间区域

变材质和风格保持基本结构，换颜色、线条质感、字体和表达方式

AGI Builder Logo / Open Structure

社区做 Logo 创意时，核心资产可以从一个固定标识变成可参与的结构

{ AGI Builder }Born to Build

{ Incubation Camp / Founder / Build }

2026 AGI Builder 孵化营开营

新的世界，会从少数真正上场的人开始。这里是从 Idea / Demo 走向真实世界的入口。

第一期 Born to Build 14 天从想法到 Demo

2026 AGI Builder 孵化营开营海报 — 2026 AGI Builder Incubation Camp

{ Community Logo System }Co-created Versions

{ Content / Material / Style }

同一套开放结构，生成很多个人版本

Co-created Logo Wall

内容可以生长猫、人物、像素、火焰、硬件、涂鸦都能进入同一个结构

风格可以分叉毛绒、手绘、赛博、像素、金属、玩具化都能保留识别

Logo 变成入口每个版本都可以连接到一个成员、一段经历或一个项目

共创并不削弱识别，稳定结构让差异变得可管理、可展示、可传播

{ Community Logo System }Identity / Motion

{ Identity / Role / Motion }

个人数字身份，也能从 Logo 里长出来

Mentor / Founder / Staff

Personal Digital Identity Wall

Foundation 和 Roof 保持基本结构，中间内容可以循环变化，继续发展成 GIF 或小动图

{ AGI Builder Cohort }Founder Wall / 14-Day Incubation Camp

14 天孵化营 AGI Builder Founder 墙 — AGI Builder Founder Wall / 14-Day Incubation Camp

{ OPC Builder }MIRA Light / Young Builders

{ OPC / Builder / Physical AI }

MIRA Light 一个“活过来”的台灯

OPC 们正在做什么把 AI、硬件、情绪陪伴和桌面场景组合成真实产品

年轻人正在 Build 的设计从页面美感扩展到行为、反馈、空间和日常使用

Builder 介绍王俊凯与王健乐共同完成 MIRA Light 的产品叙事、交互想象和视觉表达

这里的设计对象已经包含产品性格、使用姿态和线下陪伴感

{ OPC Cases }AI Experience in Physical Space

{ Interface / Behavior / Presence }

AI 产品正在从屏幕界面，进入物理体验

会回应人的台灯

进入真实桌面场景

陪伴阅读和休息

重点从界面观感转为产品行为：感知人、回应环境、融入日常动作

{ OPC Case }Jiligugua / Printable Interaction

{ AI Physical Interaction / Printable App / Hardware }

小鹅：叽里呱呱 AI 打印桌宠

Founder：王心怡（小鹅）北师大未来设计学院硕士，江南大学整合创新设计背景，长期实践 AI 产品、硬件交互、品牌视觉、实体造物和内容体系

创新型 AI 交互设计可打印互动应用 / 硬件，让 AI 生成内容进入纸张、桌面和线下互动场景

从说出来到吐出纸条用户按一下、说一句，AI 自动理解、整理、生成内容并排版

轻量应用打印硬件桌面交互

这里的设计对象从屏幕界面继续扩展为轻量应用、打印硬件和可收藏纸面作品

{ OPC Case }Jiligugua / Brand Surface

{ Brand / Paper Output / ToB }

叽里呱呱：纸张、桌面和线下互动入口

品牌表达型 Founder小鹅拥有 50+ 国内外设计奖项、8 次参展经历，以及央视、浙江卫视、人民日报等媒体关注

生活入口灵感卡、情绪小票、学习复盘卡、今日任务条、封印手机符，都可以变成纸面作品

商业进展项目已有 ToB 沟通和合作收入或意向，适合线下场景、品牌活动和内容服务

50+ 设计奖项 8 次参展 ToB 意向

AI 内容生成可执行、可收藏、可分享的纸面作品

AI 生成内容获得了可触摸、可保存、可分享的实体表达

{ OPC Case }MEOWSTER / AI Lifeform

{ AI Companion / Japan / Lifeform }

MEOWSTER AI 生命体应用

自我介绍Founder 于昊任（安），曾做科技早期股权投资，运营过日本大型二次元社区

项目介绍面向日本年轻都市用户的 AI 陪伴产品

设计目标把聊天对象发展成有长期生命感的关系系统

设计对象从一次聊天延展为身份、记忆、成长和线下触点

{ OPC Case }MEOWSTER / Product Demo

{ App / Companion / Public Touchpoint }

从 App 陪伴，到城市触点

AI 生命体应用

线下传播与现实场景

陪伴产品的设计包含角色关系、情绪反馈、留存机制和外部传播场景

{ OPC Cases }Commercial Path

{ Market / Revenue }

真正的分水岭，是从 Demo 进入真实市场

OPC 的关键在 Demo 之后，继续完成上线、获客、支付、SEO、GTM 和持续运营。

{ SEO Skill }Open Knowledge → Distilled Workflow

{ SEO / Skill / Playbook }

生成网站时，顺手接入 SEO Skill

先有高质量经验子木老师公开分享了 AI 工具站 SEO 的完整经验和说明书

再蒸馏成 Skill搜索意图、页面结构、On-page SEO、技术检查进入可复用流程

生成时一起完成做网站的同时补齐标题、描述、内容结构、索引和基础检查

做网站时可以同时补齐 SEO 基础项，关键是知道调用哪类 Skill、检查哪些结构、交付哪些结果

AI 工具站 SEO 小册子截图 — SEO Playbook → SEO Skill

{ Cross-functional Awareness }SEO / Data / Payment / Trust

{ Awareness / Infrastructure }

AI 顺手补齐，
关键是知道
要补什么

以前分工很细的增长与运营环节，现在会更早出现在设计讨论里。

SEO / GEO标题结构、搜索意图、索引、结构化数据。

Analytics事件埋点、漏斗、转化归因、实验指标。

Payment价格页、订阅、支付链路、退款与发票。

Conversion落地页文案、CTA、表单、信任背书。

Content OpsCMS、更新节奏、分发渠道、内容回收。

Performance加载速度、移动端体验、可访问性。

Lifecycle留资、邮件、用户分层、复访路径。

Trust隐私、条款、品牌可信度、风险提示。

{ New Role }Workflow Organizer

{ Text / UI / GSAP }

设计师的新边界，是组织审美、资产和商业流程

01定义风格把审美判断写成规则、组件和上下文。

02整理资产把文档、表格、活动和案例变成内容系统。

03生成界面官网、活动页、作品库和商业页面快速成型。

04验证结果用搜索、转化、留存和营收反馈修正设计。

{ Closing }Design Value Upgrade

{ Design Value Upgrade }

AI 时代的设计价值，
正在从漂亮画面，扩展为审美、资产、流程和商业结果的组织能力

接下来和刘飞一起讨论 大厂、社区和 OPC 的设计角色会如何变化？

打造原生AI社区，让更多人因AI而强大

D20 Online 线上查看演讲与案例 D20.waytoagi.com

WaytoAGI 关注 WaytoAGI 公众号 获取社区活动与参与入口

Vibe Design

AI 到底改变了什么

从设计页面，到设计体验和系统

过去常见对象

现在进入设计范围

从设计稿，到 AI 可理解的设计资产

学习方法：进入 WaytoAGI 知识库

用 Design.md 复用高级设计语言

内容资产接入设计上下文，网站开始持续生长

三年知识库，正在变成可生成的网站

社区大事件：活动资产，成为公开展厅

多维表格，也能生成可视化学习档案

晚 8 点共学：表格记录，成为学习档案

Video Battle 先有一整套内容上下文

Video Battle：一次活动，变成持续运营入口

大理 Hacker House：现场过程，成为品牌叙事

同一个社区项目，也能长出城市版本

AI 时代的 Logo，可以成为共创结构

2026 AGI Builder 孵化营开营

同一套开放结构，生成很多个人版本

个人数字身份，也能从 Logo 里长出来

MIRA Light 一个“活过来”的台灯

AI 产品正在从屏幕界面，进入物理体验

小鹅：叽里呱呱 AI 打印桌宠

叽里呱呱：纸张、桌面和线下互动入口

MEOWSTER AI 生命体应用

从 App 陪伴，到城市触点

真正的分水岭，是从 Demo 进入真实市场

生成网站时，顺手接入 SEO Skill

AI 顺手补齐，关键是知道要补什么

设计师的新边界，是组织审美、资产和商业流程

AI 时代的设计价值，正在从漂亮画面，扩展为审美、资产、流程和商业结果的组织能力

打造原生AI社区，让更多人因AI而强大

Video Battle：
一次活动，
变成持续运营入口

大理 Hacker House：
现场过程，成为品牌叙事

AI 顺手补齐，
关键是知道
要补什么

AI 时代的设计价值，
正在从漂亮画面，扩展为审美、资产、流程和商业结果的组织能力