GENISOURCE VIBE · LEARN BY BUILDING

学会指挥 AI，把想法变成产品

从一门入门课程开始，再用 441 个知识点夯实概念；另有 286 条可直接复制的提示词与设计风格目录，随用随取。

vibe · agent session

❯

0
门课程
0
个知识点
0
条提示词
0
个分类

词条一览 · 点击任意一个直达详解页

FEATURED

精选词条

不是截图，是站点里真实的内容——点开任意一张都能继续深读。

按钮

前端

点击以保存、提交、删除或运行其他操作。

查看详情 →

深色模式

前端

做出真正的深色模式：文字、边框、图表、代码块都要跟着页面一起切换。

查看详情 →

自动补全

前端

用户敲出前几个字母时就给出候选项，让他们点一下就能补完输入。

查看详情 →

弹窗

前端

点击按钮，在屏幕中央弹出一个对话框，并让背景变暗。

查看详情 →

首屏主视觉

前端

网站顶部空空的。放一张大图和一句标语，让人一眼就知道我们是干什么的。

查看详情 →
PROMPT LIBRARY

提示词库

可直接复制给 AI 的界面提示词，每张卡片就是它生成的真实页面。

首屏大图

居中大标题

大标题 + 副文案 + 双按钮

查看提示词
定价页

三档定价（中间高亮）

经典三档，中间档主推

查看提示词
仪表盘

侧边栏 + 指标卡

应用骨架 + 指标行

查看提示词
功能展示

Bento 网格

大小不一的不对称磁贴

查看提示词
认证表单

分屏登录页（带视觉面板）

一侧是表单，另一侧是品牌视觉

查看提示词
行动号召

全宽深色横幅

页尾处醒目的行动号召

查看提示词
导航栏

吸顶导航栏

Logo + 链接 + 按钮

查看提示词
用户评价

三卡片评价墙

带头像底部的评价卡

查看提示词

提示词库 · PROMPT LIBRARY

286

15 个分类的 UI 提示词：首屏、定价、仪表盘、表单……复制即可用。

浏览全部
WORKBENCH SKILLS

行业工作台

每个行业一套 Skill：预览即成品，一句话生成属于你的工作台。

行业工作台

电商运营工作台

GMV、订单、转化与库存，一屏看完。

查看详情
行业工作台

外贸 B2B 工作台

询盘、客户、报价单与订单，跨时区一屏管理。

查看详情
行业工作台

教育培训工作台

课程、学员、排课与续费，培训机构一屏管。

查看详情
行业工作台

新媒体内容工作台

选题、脚本、发布排期与数据复盘，内容团队一屏管。

查看详情

行业工作台 · WORKBENCH SKILLS

11

电商、外贸、教育、新媒体、财务、法律、餐饮、健身——复制提示词，拿回真实可用的工作台页面。

浏览全部
COURSES

课程

系统化的学习路径，从零基础到能独立交付一个小产品。

1
课程 · COURSE32 分钟 · 7 个章节

Vibe Coding 入门指南

序章

什么是 Vibe Coding？

探讨 Vibe Coding 的起源、核心理念以及为什么它正在重塑软件开发。

第 1 章

心态转变：从“码农”到“交响乐指挥”

重新定义开发者的角色，学会如何用直觉、架构思维和品味来驾驭 AI。

第 2 章

工具全景图：挑选你的 AI 编程助手

深度对比当前主流的 AI 编程工具与终端助手，找到最适合你的效率发动机。

7 个章节进入课程
KNOWLEDGE POINTS

知识点

Vibe Coding 常用术语与概念，每条都配一句可以直接发给 AI 的话。

Web 基础

15

前端 · 组件

小程序

6

小程序 · WXML

按钮与链接

2

按钮 · 链接

表单

19

输入框 · 文本域

内容展示

25

表格 · 列表

对话框与反馈

12

警告提示 · 轻提示

导航

9

菜单 · 面包屑

网站分区

10

首屏主视觉 · 行动号召

页面版式

9

顶部导航 · 侧边栏

CSS 布局

11

间距 · 外边距

排版

3

排版 · 衬线与无衬线

视觉风格

12

分隔线 · 圆角

动效

6

过渡 · 动画

指针与交互

7

悬停 · 按下态

网络与地址

12

域名 · DNS

API 与数据

9

API · JSON

数据库

10

浏览器存储 · 数据库

后端开发

14

后端 · 后端框架

账号与权限

6

身份认证 · 授权

发布与排障

23

HTTP 缓存 · SEO

总览

5

用户故事 · 用户场景

产品规划

11

PRD · 产品探索

产品分析

9

启发式评估 · A/B 测试

测试

14

验收标准 · 测试用例

开发工具

11

终端 · 浏览器开发者工具

技术栈

1

技术栈

编程语言

5

JavaScript · TypeScript

前端框架

3

React · Vue

CSS 与组件

2

Tailwind CSS · shadcn/ui

总览

9

AI 应用基础 · AI 幻觉

上下文

9

上下文工程 · Token

请求与输出

4

无状态请求 · 结构化输出

智能体与工具

7

AI Agent · 工程脚手架

连接与配置

7

Provider · Base URL

规则与扩展

6

项目规则 · AGENTS.md

权限与运行时

3

权限模式 · 沙箱

性能与成本

3

TTFT / TPS · Token 用量与成本

Git

15

Git · Commit

核心概念

2

大语言模型 (LLM) · 提示词工程

模型架构

3

Transformer · 注意力机制

训练与微调

3

预训练 · 低秩适配 (LoRA)

推理与部署

3

量化 · Top-k 与 Top-p 采样

评估与基准

3

困惑度 · 大规模多任务语言理解 (MMLU)

应用与用例

3

函数调用 / 工具调用 · 智能体 (Agents)

核心概念

9

智能体 AI (Agentic AI) · 自主性

记忆与知识

7

记忆 · 短期记忆

模型、提示与工具

5

基础模型 · API 集成

编排、可靠性与扩展

10

编排 · 并发

治理、安全与合规

9

护栏 · 人在环上

评估与学习

10

可观测性 · 遥测

客户体验与自动化

10

对话式 AI · 自然语言理解 (NLU)

平台与企业就绪

10

智能体框架 · 平台化路线

高级智能体能力

10

主动性 · 推荐引擎

设计风格

118

118 种界面风格各自带实时预览——对 AI 说出风格名，它就知道你要的观感。

浏览设计风格
COMING SOON

即将推出

站点正在持续生长，更多板块已在规划中。

小工具

即将推出

提升 Vibe Coding 效率的在线小工具，随用随走。

行业工作台提示词联系我们
© 2026 Genisource Vibe · 保留所有权利