init: sxbh.ltd 官网初始提交
- nginx 安全加固 (CSP, HSTS, 缓存策略) - 共享 style.css - 138个页面全部接入 Co-authored-by: Hermes AI <agent@hermes>
This commit is contained in:
Hermes CI Fix
Hermes AI
@@ -0,0 +1,492 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Codex + Figma MCP 深度分析 | 博海技术管理</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--card: #1e293b;
|
||||
--card-hover: #263548;
|
||||
--border: #334155;
|
||||
--text: #e2e8f0;
|
||||
--text-muted: #94a3b8;
|
||||
--accent: #38bdf8;
|
||||
--accent2: #818cf8;
|
||||
--accent3: #34d399;
|
||||
--warn: #fbbf24;
|
||||
--danger: #f87171;
|
||||
--gradient: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #34d399 100%);
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Noto Sans CJK', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.7;
|
||||
}
|
||||
.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background: var(--card);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 40px 0;
|
||||
}
|
||||
.header .meta {
|
||||
display: flex; gap: 12px; flex-wrap: wrap;
|
||||
font-size: 13px; color: var(--text-muted); margin-top: 12px;
|
||||
}
|
||||
.header .meta span { background: rgba(56,189,248,0.1); padding: 2px 10px; border-radius: 4px; }
|
||||
.header h1 { font-size: 28px; font-weight: 700; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
.header .subtitle { color: var(--text-muted); margin-top: 8px; font-size: 15px; }
|
||||
.source-badge {
|
||||
display: inline-block; background: rgba(251,191,36,0.15); color: var(--warn);
|
||||
padding: 2px 10px; border-radius: 4px; font-size: 12px; margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
section { padding: 32px 0; border-bottom: 1px solid rgba(51,65,85,0.5); }
|
||||
section:last-child { border-bottom: none; }
|
||||
h2 {
|
||||
font-size: 22px; font-weight: 700; margin-bottom: 16px;
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
h2 .num {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 32px; height: 32px; border-radius: 8px;
|
||||
background: var(--gradient); color: #fff; font-size: 14px; font-weight: 700;
|
||||
}
|
||||
h3 { font-size: 17px; font-weight: 600; margin: 20px 0 8px; color: var(--accent); }
|
||||
|
||||
/* Cards */
|
||||
.card-grid { display: grid; gap: 16px; margin: 16px 0; }
|
||||
.card-grid.two { grid-template-columns: 1fr 1fr; }
|
||||
.card-grid.three { grid-template-columns: 1fr 1fr 1fr; }
|
||||
.card {
|
||||
background: var(--card); border: 1px solid var(--border); border-radius: 12px;
|
||||
padding: 20px; transition: all 0.2s;
|
||||
}
|
||||
.card:hover { border-color: var(--accent); background: var(--card-hover); }
|
||||
.card .title { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
|
||||
.card .title .tag {
|
||||
display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 3px;
|
||||
margin-left: 6px; vertical-align: middle;
|
||||
}
|
||||
.tag-green { background: rgba(52,211,153,0.2); color: var(--accent3); }
|
||||
.tag-yellow { background: rgba(251,191,36,0.2); color: var(--warn); }
|
||||
.tag-red { background: rgba(248,113,113,0.2); color: var(--danger); }
|
||||
.card p, .card ul { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
|
||||
.card ul { padding-left: 16px; }
|
||||
.card ul li { margin-bottom: 4px; }
|
||||
|
||||
/* Case studies */
|
||||
.case {
|
||||
background: var(--card); border-left: 3px solid var(--accent);
|
||||
border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 12px 0;
|
||||
}
|
||||
.case h4 { font-size: 15px; margin-bottom: 6px; }
|
||||
.case .flow {
|
||||
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
|
||||
font-size: 13px; margin-top: 8px;
|
||||
}
|
||||
.case .flow .step {
|
||||
background: rgba(56,189,248,0.1); padding: 3px 10px; border-radius: 4px;
|
||||
}
|
||||
.case .flow .arrow { color: var(--accent); font-size: 16px; }
|
||||
|
||||
/* Table */
|
||||
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
|
||||
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
|
||||
th { background: rgba(56,189,248,0.08); font-weight: 600; color: var(--accent); }
|
||||
td { color: var(--text-muted); }
|
||||
tr:hover td { background: rgba(56,189,248,0.03); }
|
||||
|
||||
/* Badge */
|
||||
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
|
||||
.badge-ok { background: rgba(52,211,153,0.15); color: var(--accent3); }
|
||||
.badge-half { background: rgba(251,191,36,0.15); color: var(--warn); }
|
||||
.badge-miss { background: rgba(248,113,113,0.15); color: var(--danger); }
|
||||
|
||||
/* Timeline */
|
||||
.timeline { position: relative; padding-left: 28px; margin: 16px 0; }
|
||||
.timeline::before {
|
||||
content: ''; position: absolute; left: 8px; top: 0; bottom: 0;
|
||||
width: 2px; background: var(--border);
|
||||
}
|
||||
.timeline-item { position: relative; margin-bottom: 20px; }
|
||||
.timeline-item::before {
|
||||
content: ''; position: absolute; left: -24px; top: 6px;
|
||||
width: 12px; height: 12px; border-radius: 50%; background: var(--accent);
|
||||
border: 2px solid var(--bg);
|
||||
}
|
||||
.timeline-item .tl-title { font-weight: 600; font-size: 15px; }
|
||||
.timeline-item .tl-desc { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
|
||||
|
||||
/* Code block */
|
||||
.code-block {
|
||||
background: #1a1a2e; border: 1px solid var(--border); border-radius: 8px;
|
||||
padding: 16px; margin: 12px 0; font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
font-size: 13px; overflow-x: auto; line-height: 1.5;
|
||||
}
|
||||
.code-block .comment { color: #6b7280; }
|
||||
.code-block .keyword { color: #818cf8; }
|
||||
.code-block .string { color: #34d399; }
|
||||
|
||||
/* Arrow box */
|
||||
.arch-flow {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
gap: 16px; flex-wrap: wrap; padding: 24px 0;
|
||||
}
|
||||
.arch-box {
|
||||
background: var(--card); border: 1px solid var(--border); border-radius: 10px;
|
||||
padding: 14px 20px; text-align: center; min-width: 120px;
|
||||
}
|
||||
.arch-box .label { font-size: 13px; font-weight: 600; }
|
||||
.arch-box .sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
|
||||
.arch-arrow { color: var(--accent); font-size: 20px; }
|
||||
|
||||
.footer {
|
||||
padding: 24px 0; text-align: center; font-size: 13px; color: var(--text-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.card-grid.two, .card-grid.three { grid-template-columns: 1fr; }
|
||||
.header h1 { font-size: 22px; }
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div class="container">
|
||||
<h1>Codex + Figma：2026 AI 编程设计最强组合技术分析</h1>
|
||||
<div class="subtitle">从"想法到产品"的全自动化管线，MCP 协议如何打通设计与开发之间的语义断层</div>
|
||||
<div class="meta">
|
||||
<span>📅 2026-06-26</span>
|
||||
<span>🏷️ AI 工程化</span>
|
||||
<span>📊 技术分析</span>
|
||||
<span>👤 博海技术管理</span>
|
||||
</div>
|
||||
<div class="source-badge">📌 分析来源：今日头条·AI小助手《2026最强AI组合之一：Codex+Figma》</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- 1. 背景 -->
|
||||
<section>
|
||||
<h2><span class="num">1</span> 文章背景与定位</h2>
|
||||
<p style="color:var(--text-muted);">
|
||||
今日头条号"AI小助手"发布了一篇AI生成内容，聚焦 <strong style="color:var(--text)">OpenAI Codex</strong>（编程 Agent）+ <strong style="color:var(--text)">Figma</strong>（设计工具，通过 MCP 协议连接）的组合能力。文章列举5个典型场景，从"一句话生成网站"到"PRD 直接生成页面"，展示了当前 AI 工具链如何把从想法到产品上线的门槛大幅降低。
|
||||
</p>
|
||||
<div style="background:rgba(251,191,36,0.08); border-left:3px solid var(--warn); padding:12px 16px; border-radius:0 8px 8px 0; margin-top:12px;">
|
||||
<strong style="color:var(--warn);">⚠️ 定性：</strong>
|
||||
<span style="font-size:14px;color:var(--text-muted);">文章本身是 AI 生成的"轻科普"内容，信息密度一般。但背后涉及的技术堆栈——<strong style="color:var(--text);">Codex（编程Agent）、Figma MCP（设计桥接）、MCP 协议（标准化工具连接）</strong>——值得深挖，对理解2026年AI工程化趋势有参考价值。</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. 核心技术栈拆解 -->
|
||||
<section>
|
||||
<h2><span class="num">2</span> 核心技术栈拆解</h2>
|
||||
|
||||
<h3>2.1 Codex — OpenAI 的编程 Agent</h3>
|
||||
<p style="color:var(--text-muted); margin-bottom:12px;">
|
||||
Codex 是 OpenAI 推出的终端编程辅助工具，与 Claude Code、Cursor Agent 处于同一赛道。它运行在终端中，能够：
|
||||
</p>
|
||||
<div class="card-grid two">
|
||||
<div class="card"><div class="title">📂 代码理解</div><p>读取项目文件、理解目录结构、分析依赖关系</p></div>
|
||||
<div class="card"><div class="title">✏️ 代码编辑</div><p>多文件编辑、批量替换、重构</p></div>
|
||||
<div class="card"><div class="title">⚡ 命令执行</div><p>运行测试、构建、部署，读取输出判断下一步</p></div>
|
||||
<div class="card"><div class="title">🧩 MCP 集成</div><p>通过 MCP 协议连接外部工具（Figma/数据库/API）</p></div>
|
||||
</div>
|
||||
|
||||
<h3>2.2 Figma MCP — 设计工具的 AI 桥接层</h3>
|
||||
<p style="color:var(--text-muted); margin-bottom:8px;">
|
||||
<a href="https://github.com/glipsn/Figma-MCP" style="color:var(--accent);" target="_blank">Figma MCP server</a> 是一个开源项目，通过 <strong style="color:var(--text);">Model Context Protocol（MCP）</strong> 让 AI 工具直接读写 Figma 设计文件。这是整个"设计→代码"自动化的关键桥接层。
|
||||
</p>
|
||||
<table>
|
||||
<tr><th width="220">MCP 功能</th><th>说明</th><th width="100">用途阶段</th></tr>
|
||||
<tr><td><code>figma_get_image</code></td><td>获取设计稿截图(Render)</td><td>视觉理解</td></tr>
|
||||
<tr><td><code>figma_get_node_info</code></td><td>读取图层结构、组件属性</td><td>结构分析</td></tr>
|
||||
<tr><td><code>figma_get_component_info</code></td><td>读取组件库与设计系统</td><td>样式复用</td></tr>
|
||||
<tr><td><code>figma_get_styles</code></td><td>获取颜色/字体/间距等 Design Token</td><td>代码生成</td></tr>
|
||||
<tr><td><code>figma_update_node</code></td><td>修改设计稿内容</td><td>设计迭代</td></tr>
|
||||
</table>
|
||||
|
||||
<h3>2.3 MCP 协议 — 标准化工具互连</h3>
|
||||
<p style="color:var(--text-muted);">
|
||||
MCP（Model Context Protocol）由 Anthropic 提出，本质是 <strong style="color:var(--text);">AI 工具操作的"USB 接口"</strong>——让任何 AI 用同一套协议连接任何外部系统。Codex 通过 MCP 连 Figma，就像你的 Hermes 通过 Skills/Plugin 连各种系统。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 3. 架构分析 -->
|
||||
<section>
|
||||
<h2><span class="num">3</span> 架构分析：语义断层被填平</h2>
|
||||
|
||||
<h3>3.1 传统流程</h3>
|
||||
<div class="code-block">
|
||||
<span class="comment">// 设计→开发链条，每次传递都丢失信息</span><br>
|
||||
PRD(文字) <span class="keyword">→</span> 设计师理解 <span class="keyword">→</span> Figma 设计稿 <span class="keyword">→</span> 开发读图 <span class="keyword">→</span> 手写代码<br>
|
||||
<span class="comment">// 信息损失：需求模糊 → 设计稿偏差 → 实现走样</span>
|
||||
</div>
|
||||
|
||||
<h3>3.2 Codex + Figma MCP 流程</h3>
|
||||
<div class="code-block">
|
||||
<span class="comment">// 同一 AI 理解上下文，语义无损传递</span><br>
|
||||
PRD(文字) <span class="keyword">→</span> Codex 拆解需求 <span class="keyword">→</span> Figma MCP 生成设计稿 <span class="keyword">→</span> Codex 读取设计(tokens) <span class="keyword">→</span> 自动生成前端代码 <span class="keyword">→</span> 部署上线<br>
|
||||
<span class="comment">// 信息保留：需求 → 设计规格 → 代码实现，一路结构化</span>
|
||||
</div>
|
||||
|
||||
<div class="arch-flow">
|
||||
<div class="arch-box"><div class="label">🧠 用户想法</div><div class="sub">自然语言/PRD</div></div>
|
||||
<div class="arch-arrow">→</div>
|
||||
<div class="arch-box" style="border-color:var(--accent);"><div class="label">🤖 Codex</div><div class="sub">需求拆解+规划</div></div>
|
||||
<div class="arch-arrow">→</div>
|
||||
<div class="arch-box" style="border-color:var(--accent2);"><div class="label">🎨 Figma</div><div class="sub">MCP 生成 UI</div></div>
|
||||
<div class="arch-arrow">→</div>
|
||||
<div class="arch-box" style="border-color:var(--accent);"><div class="label">🤖 Codex</div><div class="sub">读取设计生成代码</div></div>
|
||||
<div class="arch-arrow">→</div>
|
||||
<div class="arch-box" style="border-color:var(--accent3);"><div class="label">🚀 产品上线</div><div class="sub">部署</div></div>
|
||||
</div>
|
||||
|
||||
<div style="background:rgba(56,189,248,0.06); border-radius:12px; padding:20px; margin-top:16px;">
|
||||
<strong style="color:var(--accent);">🔑 关键洞察：</strong>
|
||||
<p style="color:var(--text-muted); margin-top:8px; font-size:14px;">
|
||||
这个组合的真正价值不在于"AI 写代码"或"AI 做设计"的单个环节，而在于<strong style="color:var(--text);">设计规格以结构化数据（Design Token、图层树、样式表）的形式在 AI 之间传递</strong>，不再靠人眼看图猜像素。这是"语义断层被填平"的底层逻辑。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. 5个场景深度分析 -->
|
||||
<section>
|
||||
<h2><span class="num">4</span> 5个场景的技术验证</h2>
|
||||
<p style="color:var(--text-muted); margin-bottom:8px;">逐个评估每个场景的实际可行性与瓶颈：</p>
|
||||
|
||||
<div class="case">
|
||||
<h4>① 一句话生成网站</h4>
|
||||
<p style="font-size:14px;color:var(--text-muted);">输入"帮我做一个宠物用品官网"→全自动出站</p>
|
||||
<div class="flow">
|
||||
<span class="step">自然语言</span><span class="arrow">→</span>
|
||||
<span class="step">Codex 拆需求</span><span class="arrow">→</span>
|
||||
<span class="step">Figma 生成UI</span><span class="arrow">→</span>
|
||||
<span class="step">Codex 开发</span><span class="arrow">→</span>
|
||||
<span class="step">部署</span>
|
||||
</div>
|
||||
<p style="font-size:13px;color:var(--text-muted);margin-top:8px;">
|
||||
<span class="badge badge-half">部分可行</span>
|
||||
简单的展示型页面（Landing Page）已经可以做到。复杂交互（购物车、支付、后台管理）仍需要人工介入。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="case" style="border-left-color:var(--accent3);">
|
||||
<h4>② 截图变产品</h4>
|
||||
<p style="font-size:14px;color:var(--text-muted);">上传截图 → AI 分析结构 → 还原设计 → 生成代码</p>
|
||||
<div class="flow">
|
||||
<span class="step">截图上传</span><span class="arrow">→</span>
|
||||
<span class="step">视觉识别</span><span class="arrow">→</span>
|
||||
<span class="step">Figma 还原</span><span class="arrow">→</span>
|
||||
<span class="step">代码生成</span>
|
||||
</div>
|
||||
<p style="font-size:13px;color:var(--text-muted);margin-top:8px;">
|
||||
<span class="badge badge-half">部分可行</span>
|
||||
静态页面还原度较高，但动效、交互逻辑、响应式布局需要大量调整。适合"快速原型"而非"直接上线"。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="case" style="border-left-color:var(--warn);">
|
||||
<h4>③ 想法变 App</h4>
|
||||
<p style="font-size:14px;color:var(--text-muted);">习惯养成/记账/待办/打卡 → App 界面 + 打包</p>
|
||||
<div class="flow">
|
||||
<span class="step">Codex 拆功能</span><span class="arrow">→</span>
|
||||
<span class="step">Figma UI</span><span class="arrow">→</span>
|
||||
<span class="step">代码+打包</span>
|
||||
</div>
|
||||
<p style="font-size:13px;color:var(--text-muted);margin-top:8px;">
|
||||
<span class="badge badge-half">半成品级</span>
|
||||
能生成静态界面和基础功能逻辑。但数据持久化、状态管理、多端适配、App Store 发布等环节仍需要大量人工。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="case" style="border-left-color:var(--accent2);">
|
||||
<h4>④ 快速制作数据看板</h4>
|
||||
<p style="font-size:14px;color:var(--text-muted);">运营后台/销售看板/数据仪表盘</p>
|
||||
<p style="font-size:13px;color:var(--text-muted);margin-top:8px;">
|
||||
<span class="badge badge-ok">高可行性</span>
|
||||
这是目前<strong style="color:var(--text);">最成熟的场景</strong>——看板 UI 有固定模式（表格、图表、卡片），Figma 模板丰富，代码生成准确率高。且在你有 Grafana 的情况下，Grafana Dashboard JSON + AI 生成前端看板是一个有意义的组合。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="case" style="border-left-color:var(--accent);">
|
||||
<h4>⑤ PRD 直接生成页面</h4>
|
||||
<p style="font-size:14px;color:var(--text-muted);">产品需求文档 → 自动出页面</p>
|
||||
<p style="font-size:13px;color:var(--text-muted);margin-top:8px;">
|
||||
<span class="badge badge-half">原型级</span>
|
||||
适合快速原型验证（低保真 → 高保真），但正式产品的 PRD 通常包含大量隐性信息（业务规则、异常处理、权限体系），AI 无法仅从 PRD 文本完整捕获。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. 与你现有体系对比 -->
|
||||
<section>
|
||||
<h2><span class="num">5</span> 与博海现有技术体系的映射</h2>
|
||||
|
||||
<table>
|
||||
<tr><th>概念</th><th>博海现有等价物</th><th>状态</th><th>差距说明</th></tr>
|
||||
<tr>
|
||||
<td>Codex（编程Agent）</td>
|
||||
<td>Hermes Agent（delegate_task/terminal）</td>
|
||||
<td><span class="badge badge-ok">✅ 已有</span></td>
|
||||
<td>Hermes 具备同等的 Agent 能力，多 Profile 体系更丰富</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Figma 连接</td>
|
||||
<td>无</td>
|
||||
<td><span class="badge badge-miss">❌ 缺失</span></td>
|
||||
<td>Hermes 目前没有 Figma MCP Client 集成</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>MCP 协议</td>
|
||||
<td>Hermes Skills + Plugin 体系</td>
|
||||
<td><span class="badge badge-half">⚡ 部分</span></td>
|
||||
<td>架构思路类似（工具抽象层），但 MCP 是标准化协议，Hermes 是自有体系</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>设计→代码管线</td>
|
||||
<td>无前端设计需求</td>
|
||||
<td><span class="badge badge-miss">❌ 无需求</span></td>
|
||||
<td>你的基础设施偏后端/运维/Grafana，前端UI设计不在当前能力圈</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>MCP Server 部署</td>
|
||||
<td>Hermes 多服务/多端口架构</td>
|
||||
<td><span class="badge badge-half">⚡ 可扩展</span></td>
|
||||
<td>你的 API Server 架构可以承载 MCP Server，但需要新增</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>定时自动化</td>
|
||||
<td>Hermes cronjob 系统</td>
|
||||
<td><span class="badge badge-ok">✅ 已有</span></td>
|
||||
<td>可以调度 AI→设计→代码的自动化管道</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div style="background:rgba(56,189,248,0.06); border-radius:12px; padding:20px; margin-top:16px;">
|
||||
<strong style="color:var(--accent);">📊 整体评估：</strong>
|
||||
<p style="color:var(--text-muted); margin-top:8px; font-size:14px;">
|
||||
你的 Hermes 体系在 <strong style="color:var(--text);">Agent 能力、自动化调度、多服务管理</strong> 上已经覆盖了 Codex 的核心能力。差距在于<strong style="color:var(--text);">前端设计域</strong>（Figma）和<strong style="color:var(--text);">标准化工具协议</strong>（MCP Client）。如果你有前端 UI 产出的需求，接入 Figma MCP 是一个合理的方向。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. MCP 协议深度解读 -->
|
||||
<section>
|
||||
<h2><span class="num">6</span> MCP 协议：比 Codex+Figma 更值得关注的架构资产</h2>
|
||||
<p style="color:var(--text-muted); margin-bottom:12px;">
|
||||
MCP（Model Context Protocol）正在成为 AI 连接外部系统的行业标准。它的意义远超"某个工具组合"。
|
||||
</p>
|
||||
|
||||
<h3>MCP 的核心概念</h3>
|
||||
<div class="card-grid three">
|
||||
<div class="card">
|
||||
<div class="title">📋 Resources <span class="tag tag-green">数据</span></div>
|
||||
<p>AI 可以读取的结构化数据源（设计稿、数据库、文件系统）</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="title">🛠️ Tools <span class="tag tag-green">操作</span></div>
|
||||
<p>AI 可以调用的功能接口（读Figma、发消息、查数据库）</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="title">💬 Prompts <span class="tag tag-green">模板</span></div>
|
||||
<p>预定义的交互模板（标准操作流程）</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>MCP 对比 Hermes Skills</h3>
|
||||
<table>
|
||||
<tr><th width="150">维度</th><th>MCP 协议</th><th>Hermes Skills</th></tr>
|
||||
<tr><td>标准化程度</td><td>行业标准，跨工具通用</td><td>Hermes 自有格式</td></tr>
|
||||
<tr><td>连接对象</td><td>任何 MCP Server（Figma/数据库/飞书/...）</td><td>Hermes 内部工具链</td></tr>
|
||||
<tr><td>生态</td><td>快速增长的开源生态</td><td>你个人沉淀</td></tr>
|
||||
<tr><td>适用场景</td><td>AI 与外部系统交互</td><td>Agent 行为定义/工作流</td></tr>
|
||||
</table>
|
||||
|
||||
<div style="background:rgba(129,140,248,0.06); border-radius:12px; padding:20px; margin-top:16px;">
|
||||
<strong style="color:var(--accent2);">💡 建议：</strong>
|
||||
<p style="color:var(--text-muted); margin-top:8px; font-size:14px;">
|
||||
Hermes 如果增加 <strong style="color:var(--text);">MCP Client 能力</strong>，你的 Agent（8个Profile）就能通过标准协议连接任意 MCP Server——包括 Figma、数据库、监控系统。这是 <strong style="color:var(--text);">架构级的可扩展性投资</strong>，比"给 Codex 配 Figma"具体组合更具长期价值。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7. 你的可能性 -->
|
||||
<section>
|
||||
<h2><span class="num">7</span> 博海体系的可行方向</h2>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="tl-title">🏗️ 方向A：Hermes + MCP Client 集成</div>
|
||||
<div class="tl-desc">
|
||||
为 Hermes 增加 MCP 协议支持，让所有 Profile 的 Agent 都能通过标准协议连接外部系统。一旦接入，Figma MCP、数据库 MCP、飞书 MCP 等生态资源都可利用。
|
||||
<br><span style="color:var(--accent3);">价值：架构级，复用率高</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="tl-title">📊 方向B：Figma MCP + 你的 Grafana 看板</div>
|
||||
<div class="tl-desc">
|
||||
你已经有 Grafana 和多个监控面板。如果用 Figma MCP 生成前端看板界面 + Hermes 对接 Grafana API 拿数据，可以快速生成自定义管理界面。
|
||||
<br><span style="color:var(--accent3);">价值：实用，见效快</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="tl-title">🔌 方向C：你的 8 个 Profile 接入 MCP 生态</div>
|
||||
<div class="tl-desc">
|
||||
不同的 Profile 连接不同的 MCP Server——wecom-project 连项目管理工具、wecom-finance 连财务系统、wecom-ops 连运维监控。统一协议、统一管理。
|
||||
<br><span style="color:var(--accent3);">价值：系统性，长期收益</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 8. 总结 -->
|
||||
<section>
|
||||
<h2><span class="num">8</span> 总结</h2>
|
||||
<div class="card-grid two">
|
||||
<div class="card">
|
||||
<div class="title">✅ 本文说对了什么</div>
|
||||
<ul>
|
||||
<li>Codex + Figma MCP 确实能打通设计→开发链路</li>
|
||||
<li>数据看板场景目前最成熟</li>
|
||||
<li>门槛降低是真实的</li>
|
||||
<li>MCP 是关键桥接技术</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="title">⚠️ 本文没说的或夸大的</div>
|
||||
<ul>
|
||||
<li>复杂产品（多页面、用户系统、权限）远未自动化</li>
|
||||
<li>AI 生成的设计审美和细节仍需人工把关</li>
|
||||
<li>MCP 协议本身有稳定性和安全风险</li>
|
||||
<li>"直接上线"大多需要大量后续调整</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card" style="grid-column: 1 / -1;">
|
||||
<div class="title">🎯 对你的核心启示</div>
|
||||
<p style="color:var(--text-muted);">
|
||||
<strong style="color:var(--text);">Codex + Figma 本身不是你需要复制的组合</strong>（你的 Hermes 已经有 Agent 能力，且前端UI不在当前核心需求中）。但背后的两个资产值得关注：<br><br>
|
||||
<strong style="color:var(--accent);">① MCP 协议</strong> — 正在成为 AI 工具连接的行业标准，如果 Hermes 支持 MCP Client，你的 Agent 体系将获得标准化的外部系统连接能力。<br>
|
||||
<strong style="color:var(--accent2);">② 设计→代码自动化思路</strong> — 即使你不需要 Figma，这个思路可以迁移到其他领域：标准化数据交换 → AI 自动化处理 → 输出可交付成果。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="footer">
|
||||
博海技术管理 · ai.sxbh.ltd · 任富海专属学习助手
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user