用 AI 将
工作产品化

曦扬：和大家聊聊最近用 AI 的一些思考。

最近用 AI 做了几个小产品

SHOWCASE 01

服务分享页
自定义组件

用 Gemini / Canvas 出 HTML 设计验证想法，自定义组件 AI 助手快速开发上线。

帮我根据这个表格数据，设计一个移动端友好的服务分享页

立即体验查看 demo

最近用 AI 做了几个小产品

SHOWCASE 02

方案架构图
绘制工具

AI 问答式搜集素材，自动整理结构清晰、视觉漂亮的方案架构图，从此告别手动拖拽方块的苦日子。

读取素材

›

提取模块

›

归类精简

›

配色设计

›

生成架构图

立即体验

最近用 AI 做了几个小产品

SHOWCASE 03

表结构
分析工具

把画表结构的知识整理给 AI，通过伙伴云接口拉表格信息，AI 分类分组画表结构图，给出分析建议，生成可视化的表结构图。

立即体验

CORE IDEA

从"对话"进化为"Skills 资产"

把一次性的工作，封装成可复用、可迭代的产品

主文档

skill.md

定义触发条件与完整执行流程的 Prompt

能做什么？何时调用？
如何协调其他文件工作？

代码脚本

scripts/

可运行的代码文件

用代码实现确定性的工作交付，
不依赖 AI 的随机发挥。

参考知识

references/

按需查阅的经验手册

给 AI 提供行业知识与方法论，
让它做出专业判断。

物料库

assets/

可直接调用的规范文件

UI 模板、图标库与品牌资产，
AI 直接取用，保证输出统一。

简单来说：Skills 就是写给 AI 的工作 SOP

CASE STUDY — 方案架构图 Skill

Skill 怎么工作？

先问清楚需求，AI 分析 + 配色选型，你来定方案，代码出图——每步都有文件支撑

人类启动

搜集素材

1

系统定位 / 目标用户 / 解决方案

2

提交参考材料

3

品牌素材（可跳过）

对话式完成内容素材搜集

逐问逐答多格式输入

SKILL.md 触发 & 对话脚本

AI 阶段 1

素材梳理

提取功能模块（版块/模块/功能），按业务流程排序

MECE 验证，消除重叠和遗漏

系统操作/技术语言 → 客户视角改写

一屏裁剪，留下最重要的功能

产出内容大纲供确认

内容梳理内容改写

references/ content-analysis.md

AI 阶段 2

专业设计

提取品牌色（如有）

生成 3 套配色体系和推荐理由

模块语义分析，图标匹配

产出配色规范+图标库

色彩规范图标标准

references/ style-guide.md

你来
选方案

代码阶段 3

HTML 生成

AI 按 Schema 输出 JSON 配置

Python 脚本读取 → 渲染 HTML

支持在线编辑 / 导出 / 重置

单文件可交互 HTML 架构图

自动布局在线编辑

scripts/ generate_arch.py

人类操作

AI 分析

代码执行

人工介入点

不会写 Skill？

没事，AI 时代已经存在
"创建 Skill 的 Skill"

"让 AI 自己设计自己的工作流程"

但你必须先懂原理：

知晓逻辑边界

深刻理解"能做什么"

TOOLBOX

HTML 是个利器！建议学学

重点学 「能做什么」，如何指挥 AI 写 HTML

<header> // 容器

<nav> // 导航

<ul>

DOM：页面骨架

盖房子先搭钢筋，类似零代码中的"表结构"与"页面元素"。

PC

Phone

CSS：元素布局

1. 响应式：宽屏 1 行 4 个，窄屏 1 行 1 个。

2. 盒子模型：定义留白、间隔与厚度。

// 自动化逻辑
if (光线 < 20) {
灯泡.开();
"自动执行动作"
}

JS：业务逻辑

决定产品如何"动起来"，类似零代码自动化。

应用场景

自定义组件

私域站

AI 小工具

工具推荐

Gemini + Canvas

Claude Code

深入拆解 — 表结构分析工具

Skill 的思路，GUI（图形化交互）的实现

用 SKILL 的思路实现 AI 产品

人类操作，AI 分析，数据获取与图形渲染交给代码

人类步骤 1

连接数据源

输入工作区 ID

输入伙伴云 API Key

点击「开始分析」↓

SKILL.md 触发条件 & 输入定义

代码步骤 2

数据拉取

API 拉取所有数据表列表

API 获取每张表的字段结构

过滤系统字段，保留业务字段

整理成结构化 JSON

API：获取表格列表 API：获取表格配置非重点字段过滤 JSON 格式化

scripts/ 数据拉取脚本

AI 步骤 3

理解业务

读取全部表名和字段

识别表的业务身份（主表 / 子表 / 关联表）

按业务流程将表分组

画布出现分组预览

表名语义识别业务角色分类 MECE 分组业务流程排序

references/

可手动
调整分组

AI 步骤 4

判断关系

结合分组读取所有关联字段

识别核心业务主线

判断关联强弱与方向

关系线出现在画布上

主外键识别关联强度评分核心→蓝实线辅助→灰虚线

references/

代码步骤 5

渲染出图

ELK 算法计算节点布局

同组表格自动归拢对齐

可拖拽、筛选、导出分享

完整 ER 图呈现

ELK 布局算法分组对齐 React Flow 可交互导出

scripts/ + assets/

人类操作

AI 判断

代码执行

人工介入点

让工作沉淀为
数字资产

感谢聆听 — 与 AI 共同进步