企业官网建设流程全解析

seo网站代码优化,外卖网站建设的策划,wordpress主题设计师导航,网页设计网站怎么放到域名里你是小阿巴#xff0c;正在用 AI 开发网站。 为了让 AI 生成的效果更好#xff0c;你告诉 AI#xff1a; 界面不要使用蓝紫渐变色不要生成一大堆没用的文档你要遵循公司的代码规范 阿巴阿巴#xff0c;洋洋洒洒几百字。 之后每次开发网站时#xff0c;你都要写这么一段…你是小阿巴正在用 AI 开发网站。为了让 AI 生成的效果更好你告诉 AI界面不要使用蓝紫渐变色不要生成一大堆没用的文档你要遵循公司的代码规范阿巴阿巴洋洋洒洒几百字。之后每次开发网站时你都要写这么一段又臭又长的提示词太麻烦了于是聪明的你开始想办法。先把常用的提示词保存到单独的文件比如prompts.md每次手动投喂给 AI。然后创建了资源文件夹把公司的代码规范、设计素材都塞进去告诉 AI 参考这些写。接着你还写了一些脚本让 AI 生成代码后自动执行格式化、运行测试、提交代码到 Git。最后我再写个AGENTS.md文件把所有规范和工作流程都写进去让 AI 自动读取。你沾沾自喜嘿嘿俺这套工作流堪称完美但很快你发现了问题随着规范越写越多文档越来越臃肿每次对话都要占用很多 AI 上下文空间浪费 tokens。于是你找到号称 “没有人比他更不懂 AI” 的鱼皮求助阿巴阿巴俺还能咋办啊……鱼皮不是有 Agent Skills 么为啥不直接用你一脸懵啥玩意儿鱼皮这可是最近 AI 圈儿爆火的技术下面我来带你玩转 Agent Skills让你知道它是什么、怎么用、有什么魔力、怎么自己开发。点个收藏我们开始~⭐️ 推荐观看视频动画版更通俗易懂https://bilibili.com/video/BV1T7zzBQEaA什么是 Agent SkillsAgent Skills 是 Anthropic 推出的 一套开放标准目的是让 AI 能够学习使用各种专业技能而不用每次都重复输入提示词。简单来说它就是给 AI 装备的技能包。技能包里有精心设计的提示词、代码脚本、还有各种资源文件。把 AI 想象成一个职场小白给他装上文档处理技能它就立刻知道怎么生成 PPT、处理 Excel 表格装上代码规范技能它就知道怎么按照公司标准写代码。你挠挠头等等…… 这不就是俺在做的事吗把教 AI 做事的文档和 AI 要用到的文件打包成文件夹鱼皮差不多但 Anthropic 把它做成了一个通用标准而且在实现原理上有一些新花样……你捶胸顿足可恶啊俺差点就改变世界了这能有什么新花样鱼皮我先来带你用一下 Agent Skills再跟你说说其中的奥秘。Agent Skills 入门实战目前对 Agent Skills 支持最完善的工具是 Anthropic 官方的 Claude Code我们就以此为例安装并使用 Skills。1、安装 Skills 技能先打开 Claude Code 并输入命令添加官方技能市场/plugin marketplace add anthropics/skills这就像是在你的 AI 助手里开通了一个技能商店接下来你就可以从商店中获取技能了。在 Claude Code 中输入命令安装官方提供的技能包/plugin install example-skillsanthropic-agent-skills这个 example-skills 包含了一堆官方示例技能包括前端设计、网页测试、动图制作等等。装完之后你就可以直接让 AI 使用这些技能了。2、前端设计技能比如你要做一个网站以前没装技能的时候AI 生成的代码又是那个熟悉的蓝紫渐变色千篇一律的 AI 审美。现在安装了 frontend-design 这个教 AI 生成专业设计感网站的技能后你输入“帮我开发个人作品集网站”。AI 会主动问你我发现你安装了前端设计技能需要用它来生成更具设计感的页面吗确认之后AI 会利用技能生成代码告别蓝紫渐变生成独特风格的精美页面。我们不用每次都给 AI 输入一大堆相同的提示词装一次技能就行了。3、文档处理技能除了代码相关的技能官方还提供了文档处理技能包。同样在 Claude Code 中输入一行命令安装/plugin install document-skillsanthropic-agent-skills这个技能包里有 PPT 制作、Word 文档生成、Excel 数据分析、PDF 解析等技能。接下来如果你让 AI 做个 PPT它会自动调用 PPT 制作技能直接生成排版好的 PPT 文件帮你节省几个小时。揭秘 Agent Skills 内部原理你好奇道咦为什么 Skills 能做到安装即用技能包里面到底有啥AI 又是怎么知道该用哪个技能的鱼皮好问题。技能 其实就是一个包含SKILL.md技能说明文件的文件夹还可以包含可执行脚本、资源和参考文档。my-skill/ ├── SKILL.md # 必需指令和元数据 ├── scripts/ # 可选可执行脚本 ├── references/ # 可选参考文档 └── assets/ # 可选模板和资源由于每个技能的复杂度不同结构也会存在区别。我们可以在本地目录中找到已安装的技能文件夹。以官方的 PPT 制作技能为例它的结构是这样的skills/pptx/ ├── SKILL.md # 技能说明书必需 ├── ooxml/ # OOXML 相关资源 ├── scripts/ # 处理脚本 ├── html2pptx.md # HTML 转 PPT 说明 ├── ooxml.md # OOXML 格式说明 └── LICENSE.txt # 许可证包含一个核心的技能说明文档SKILL.md还有脚本、参考文档和各种资源文件。而 frontend-design 前端设计技能只有一个SKILL.md文件。SKILL.md文件是每个技能的核心它包含两个关键部分。第一部分是元数据用 YAML 格式写在文件开头---name:frontend-designdescription:生成具有专业设计感的前端代码避免千篇一律的 AI 审美---其中name是技能的名字。description是技能的描述告诉 AI 什么时候应该使用这个技能。描述写得越清晰AI 就越容易在合适的时机调用它。第二部分是指令内容就是一套经过精心设计的提示词指导 AI 具体怎么做。以 frontend-design 技能为例它的指令内容包括设计思考在写代码前先分析产品目的、用户群体、技术约束然后选择一个大胆的美学方向极简、复古未来、工业风、有机自然、奢华精致等前端美学指南包括字体选择避免 Arial、Inter 等烂大街字体选择有个性的组合、配色主题主色调配鲜明点缀色、动效设计、空间构成、背景和视觉细节避坑指南明确禁止紫色渐变、系统字体、千篇一律的布局等 AI 审美陷阱你挠了挠头如果有多个 SKillsAI 怎么知道该用哪个技能呢如果把每个技能说明文档都塞给 AI不是很占用上下文么鱼皮这就要说到渐进式披露Progressive Disclosure这个核心机制了。当你让 AI 执行任务时它会先扫描技能目录但不会把所有内容都加载到上下文中。而是只读取每个技能的元数据名字和描述发现描述和任务相关就知道该用这个技能了。然后才把完整的技能说明文档读进来按照里面的指令执行并根据需要加载技能包中的其他资源用到哪个查哪个既精准匹配又节省上下文这就是渐进式披露的精髓。所以 Agent Skills 的本质就是把专业知识打包成一个文件夹让 AI 按需读取并使用。跨工具的 Agent Skills你问除了 Claude Code 之外其他 AI 工具支持 Agent Skills 么俺平时用 Cursor 比较多……鱼皮当然能Agent Skills 已经成为通用标准Cursor、VS Code、Codex 等工具都支持。Skills 的社区也非常活跃你可以在 Claude Skills Hub 市场、开源的 Awesome Claude Skills 等地方找到很多现成的技能。比如有个叫 UI UX Pro MAX 的技能特别火专门用于提升 AI 的设计能力。用法很简单首先按照 开源仓库文档 的指引安装官方提供的命令行工具npminstall-g uipro-cli然后进入到你的项目目录下根据使用的 AI 工具执行对应的命令。比如我这里用 Cursoruipro init --ai cursor它会自动把技能安装到 Cursor 的配置目录里。安装完成后可以看到它的文件结构接下来当你让 AI 开发一个网站时可以使用斜杠命令手动触发技能或者让 AI 自动识别技能。1AI 会根据你的需求识别出产品类型和需要的页面类型2然后调用search.py搜索脚本在 data 目录里进行多维度搜索找到适合的配色、字体、布局风格3综合搜索结果生成完整的设计方案主色调、字体组合、间距规范等4最后再按照设计方案生成代码这样一来生成的界面既专业又有设计感。AI 不需要把所有规则都背下来而是用到哪个查哪个这就是 Agent Skills 的精髓。创建自己的 Agent Skills用了很多别人的技能后你产生了一个大胆的想法俺能不能把公司的周报格式封装成一个技能以后推荐给新来的同事还能卖个几块钱嘿嘿嘿~鱼皮笑道有点儿东西你打算怎么做呢你会心一笑当然是发挥程序员最擅长的事情 —— 复制粘贴俺先复制一个官方的技能包修改目录名称为自己的。然后修改技能说明文档SKILL.md的元数据、指令内容这些关键部分。示例SKILL.md文件--- name: company-weekly-report description: 生成符合公司规范的项目周报包含进度汇总、问题跟踪和下周计划 --- # 公司周报生成技能 当用户要求生成周报时请按以下步骤执行 ## 1. 收集信息 - 询问本周完成的主要工作 - 询问遇到的问题和解决方案 - 询问下周计划 ## 2. 格式规范 - 使用公司蓝色主题 - 标题使用微软雅黑加粗 - 每个模块不超过 5 个要点 ## 3. 输出格式 - 默认输出 Markdown - 如需 PPT调用 pptx 技能最后把公司的 Logo、PPT 模板、报告样例放在子文件夹里就行了。妈妈再也不用担心我的周报了~鱼皮不错不错但其实有更简单规范的方法。在前面安装的 example-skills 官方示例技能包里有一个叫Skill Creator的技能专门用来帮你创建新技能。你只需要跟 AI 说“帮我创建一个专门生成公司周报的技能”接下来 AI 会问你几个问题一步一步回答就好你希望周报包含哪些主要部分你希望周报以什么格式输出?你通常会如何使用这个周报技能?希望周报的语言风格是什么?很快一个完整的技能包就生成了你会看到一个.skill为后缀的文件本质上是一个 zip 压缩包。你可以把它解压到你的个人技能目录~/.claude/skills/下你的所有项目都能用。如果你想让这个技能只在某个项目生效可以把它放到项目的.claude/skills/目录下并且利用 Git 同步给项目组其他成员。测试没问题后你还可以把它开源到 GitHub或者上传到 Claude Skills Hub 这样的社区平台让所有用户都能用。Skills / MCP / 斜杠命令的区别你开心极了原来开发一个 Skills 这么简单但是这玩意儿跟之前火爆的 MCP 和斜杠命令有啥区别鱼皮好问题MCP 就像给 AI 装上了 “手和眼睛”让 AI 能够连接外部工具和数据源比如搜索网页、读取代码仓库、查询数据库。适合需要获取数据或操作外部系统的场景。而 Agent Skills 更像是给 AI 发了一本 “工作手册”把专业知识和工作流程打包起来教 AI 在特定领域该怎么做。至于斜杠命令它就像是快捷键是需要你手动输入/command命令来触发的固定操作而 Skills 的特点是 AI 可以自动识别该用什么技能不需要你显式调用。对了其实 MCP 和 Skills 是可以结合起来的。举个例子如果你想让 AI 帮你发周报MCP 负责获取数据从任务管理数据库拉取这周的任务列表Skills 负责加工数据把获取到的原始数据整理成老板爱看的格式一个提供食材一个提供配方。Agent Skills 凭什么大火你看着技能文件夹的结构突然怪叫一声等等俺突然意识到一个问题…… 这不就是我们程序员玩烂的 “封装、复用、模块化、懒加载” 那一套吗写几个代码文件、打个包、发到网上让其他程序员下载下来用不是一回事儿么为什么 Agent Skills 能突然让整个 AI 圈为之疯狂鱼皮好问题从技术的角度来看它并没有发明什么惊天动地的算法。在我看来它能火主要是 2 个原因。第一它是开放标准封装一次技能包后就能在各种 AI 工具里复用还能通过社区共享。更重要的是Skills 能立刻让 AI 的工作更专业可靠让普通人 “无感” 地享受技术带来的价值。以前想让 AI 变聪明你得学提示词工程、配置各种工具链。现在只需要像装 APP 一样安装技能包AI 就立刻变专业了。一项技术的成功不在于它有多复杂而在于它能让普通用户不关注技术细节的情况下感受到技术的价值。结尾你点点头学会了学废了降低门槛才是技术走向大众的钥匙。鱼皮没错Agent Skills 不仅仅是个技术概念更是一种新的工作方式。你可以把它融入到自己的日常工作中比如把重复的任务封装成技能、把团队的最佳实践固化成技能让 AI 真正成为你的得力助手。在这个 Vibe Coding 盛行的年代技术的门槛正在崩塌而想象力的边界正在无限扩张。你可以在我免费开源的《AI 编程零基础入门教程》中学到更多 AI 编程技巧也欢迎关注我的账号学习更多 AI 和编程的技巧。开源指路https://github.com/liyupi/ai-guide那么问题来了你最想让 AI 学会什么技能呢更多编程学习资源Java前端程序员必做项目实战教程毕设网站程序员免费编程学习交流社区自学必备程序员保姆级求职写简历指南找工作必备程序员免费面试刷题网站工具找工作必备最新Java零基础入门学习路线 Java教程最新Python零基础入门学习路线 Python教程最新前端零基础入门学习路线 前端教程最新数据结构和算法零基础入门学习路线 算法教程最新C零基础入门学习路线、C教程最新数据库零基础入门学习路线 数据库教程最新Redis零基础入门学习路线 Redis教程最新计算机基础入门学习路线 计算机基础教程最新小程序入门学习路线 小程序开发教程最新SQL零基础入门学习路线 SQL教程最新Linux零基础入门学习路线 Linux教程最新Git/GitHub零基础入门学习路线 Git教程最新操作系统零基础入门学习路线 操作系统教程最新计算机网络零基础入门学习路线 计算机网络教程最新设计模式零基础入门学习路线 设计模式教程最新软件工程零基础入门学习路线 软件工程教程