第一天课程笔记

认知同频 → 工具掌握 → 落地应用 — 人人可学、必知、必会

HTML + JSAnt DesignGitSkills部署

HTML + JS 实战

官网开发

通过自然语言描述需求，AI 即可生成完整的企业官网落地页。

提示词
请帮我开发一个官网，我们是一家做儿童夏令营的企业
主做 8~12 岁，请根据该领域的最佳实践帮我设置 3~5 个栏目
配色主题请采用同行业的主流搭配
请采用 HTML 加 JS 技术，不要采用其他任何技术

PPT 课件制作

利用 AI 生成包含丰富图表和卡片式交互的演示课件。

  • 16:9 尺寸，每页有全屏按钮
  • 上一页/下一页切换按钮，支持放映笔播放
  • 采用 HTML + JS 技术，吸引眼球的动态效果
  • 字体要匹配，不要太小（PPT 课件用于演示）

Ant Design 工程化开发

生产线管理系统 Demo

采用 Ant Design 成熟组件生态，快速搭建企业级管理系统原型。

提示词
请帮我安装一下 Ant Design，并把开发端口设置成为 20030
请帮我生成一个 demo 系统，数据请采用 Mock 数据
我们是汽车生产线，请根据行业最佳实践帮我实现一个生产线管理系统 Demo
包含两到三个典型模块即可，请启用多子智能体并行开发
核心思想：站在巨人肩膀之上工程化组件开发又快又省 Token

扩展技术生态

  • Three.js — 3D 游戏与可视化
  • ECharts — 更丰富的 BI 图表与数据可视化

Git 版本控制

常见问题与解决方案

  1. 未安装 Git

    告诉 AI："请帮我安装一下 Git"

  2. 暂存文件数量异常（几千/1万+）

    告诉 AI："请帮我初始化一下 Git 忽略文件"

  3. 配置 Username 和 Email
    提示词
    git config --global user.name "your name"
git config --global user.email "your email"

推送代码到 GitHub 全流程

  1. 获取本机 SSH 公钥 → 配置到 GitHub (Settings → SSH and GPG keys)
  2. 在 GitHub 新建仓库，设置名称，可见范围设为私有
  3. 拷贝 SSH 地址，告诉 AI："请帮我把本地代码推送到这个仓库"

Skills 工作流

什么是 Skills？

需要重复执行、精炼的执行过程 SOP 的场景下可以采用 Skills。

  • 可以用自然语言文本方式对接 API、MCP、CLI
  • 可以写脚本、写程序、执行工作流
  • 分为项目级 Skills 和系统级 Skills

Skills 的生命周期

  • 创建 — 用自然语言描述 SOP 流程
  • 使用 — 通过特定指令唤起执行
  • 更新迭代 — 持续优化流程和内容
  • 迁移 — 兼容 Cursor、Claude Code、Workbuddy 等工具

服务器部署