企业官网建设流程全解析

mcp ：

playwright：

就是把 Playwright 封装成 MCP 标准工具，供 AI 调用浏览器。
它不靠截图 / 视觉大模型看图，而是读取浏览器无障碍树（Accessibility Tree），返回结构化文本快照，页面每个按钮 / 输入框会分配唯一元素 ID（ref=e5这种标记）。LLM 直接通过 ref 去点击、输入，稳定、token 消耗更低，不会像截图识别那样容易识别错元素

context7：

：专门给 AI 代码助手实时拉取【指定版本】的第三方库官方文档，用来解决大模型知识库过时、API 幻觉问题。
核心解决痛点
大模型有知识截止日期，写新框架新版本代码时，经常编造不存在 API、给出已经废弃的旧写法。
Context7 预先索引上万开源库文档，AI 可以按需检索，拿到对应版本官方文档 + 可运行代码示例再写代码，减少幻觉。

Firecrawl

AI Agent 用的「网页检索 + 爬虫 MCP 服务」，把网页自动清洗成干净 Markdown/JSON，专门用来让 AI 实时上网读网页、爬网站、提取结构化数据

skills

frontend-design

它修改 AI 思考流程，强制 AI 先做设计规划，再写前端代码，解决 AI 生成页面千篇一律的 “AI 流水线 UI” 问题。

ui-ux-pro-max

：比 frontend-design 更强、带本地检索设计素材库的 Claude Code Skill，给 AI 内置海量 UI/UX 素材库，自动生成完整设计系统，产出专业 B 端 / SaaS 界面代码，大幅减少 AI 生成的廉价流水线 UI

grill-me

在动手写代码前，把你的方案 / 架构 / 产品方案做压力测试，AI 化身面试官，层层拷问，挖出隐藏假设、边界条件、取舍权衡，把模糊想法打磨成严谨可落地方案

find-skills

一句话：帮你在 Skill 生态市场搜索、发现、推荐现成 Claude Skill，并直接给出一键安装命令

skill-creator｜技能生成器

一句话：交互式引导你从零编写、打包自定义 Claude Skill（SKILL.md），没有现成 skill 的时候，自己造一个
工作流程
引导你描述目标场景、触发条件、执行步骤、输出格式
一步步收集规则、边界 case、反模式
自动生成完整 SKILL.md 模板（带 yaml 头部元信息）
生成后可以直接安装到本地 Claude Code，支持测试、微调
产出的 skill 可以自己用，也可以开源分享

trae 自带技能

1. TRAE-generate-mini-app

描述：当用户意图涉及小程序、Taro、微信小程序、跨端小程序等任何包含小程序的意图时，用于生成基于 Taro 框架的高质量、可运行的多端小程序代码。
触发条件：只要提到微信小程序 / Taro / 跨端小程序，自动激活
能力：输出 Taro 完整可运行代码，兼顾多端（微信、H5 等），不是零散代码片段
适合：快速生成小程序页面、组件、Taro 工程脚手架

. ### TRAE-debugger

描述：用于调试需要收集运行时证据的复杂问题。它会启动一个调试服务器通过 HTTP 收集日志，然后遵循科学的调试流程（假设 → 插桩 → 复现 → 分析 → 修复 → 验证）。适用于仅通过静态代码分析无法诊断的问题。
核心亮点：不只看源码，支持采集运行时日志
标准调试流水线：
假设问题根因
插入日志 / 埋点（插桩）
复现问题
分析日志证据
给出修复代码
验证修复是否生效
适用场景：偶发 bug、并发问题、运行时报错（静态代码看不出来的问题

3. TRAE-code-review

描述：用于执行代码审查任务。适用于审查合并请求、代码差异，并提供关于代码质量、正确性和最佳实践的结构化反馈。
用途：Code Review，读 git diff、PR/MR 变更
输出结构化评审报告：
潜在 bug
安全风险
性能隐患
编码规范、最佳实践
修改建议 + 修复示例代码

OpenSpec

OpenSpec 是一个轻量开发框架，是规范驱动开发（spec-driven development）的 MCP 服务，专门给 AI 编程助手（Trae / Cursor / Claude Code）用，强制 AI先写设计方案（spec），再写代码，避免 AI 直接上手写代码、需求跑偏、一次性爆大量 token。

✅ 核心作用

它会在你的项目里自动生成一套固定目录：

• spec.md：需求、设计、接口、约束的规范文档
• tasks.md：拆分成可跟踪的任务清单
• 变更提案、评审记录文件夹

MCP 提供的工具能力：

1. 创建 / 更新项目 spec 规范文档
2. 拆解需求到 tasks 任务，标记任务完成状态
3. 创建变更提案（change proposal），支持评审、评论、审批
4. 校验 spec 文件格式、归档已完成需求
5. 配套网页看板，可视化看项目任务进度

工作流（和 Trae 搭配）

你提需求 → OpenSpec 先产出 spec.md 设计文档 → 拆 tasks 任务 → AI 按任务逐个编码 → 每完成一项标记 task 完成
不再是直接让 AI 一次性写全部代码，天然减少超大上下文，刚好解决你 Trae 额度快用完的痛点

OpenSpec 一共 5 个核心 Skill（工作流技能）GitHub：

安装和初始化

npminstall-g@fission-ai/openspec@latest openspec init--toolsgithub-copilot