快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

详细介绍

概要

该项目旨在优化AI代理从构建静态网站环境到实施、质量检查的整个工作流程。因此，此处不管理具体的代码等。

通过按照AGENTS.md的指导来创建package.json和目录，我们能够最大限度地利用大型语言模型（LLM）性能提升所带来的好处。除了AGENTS.md中的提示外，我们没有使用任何具体指示，只使用了抽象且通用的提示。

没有使用代理特有的功能（如子代理或自定义命令等）。如果针对特定代理进行优化，可以更少步骤且更高效地实现自动化，但这并非本项目的目标。

事先需要的设置

请在您使用的代理（如Codex或Claude Code）中注册以下MCP。

Figma 开发者模式 MCP（或：Figma 开发模式 MCP，具体翻译可能根据上下文调整）

- https://help.figma.com/hc/ja/articles/32132100833559-Dev-Mode-MCP设置利用AI功能

Chrome 开发者工具（mcp）

- https://developer.chrome.com/blog/chrome-devtools-mcp?hl=ja（中文翻译为：https://developer.chrome.com/博客/Chrome-DevTools-MCP?hl=ja（注：此处“hl=ja”表示页面语言设置为日语，实际翻译中不直接译出，但为保持链接原样，故保留））

操作步骤

1. 编辑 AGENTS.md

请编辑示例文件AGENTS.md，将其设置为您喜欢的环境配置。使用 Claude Code 的用户，请根据需要使用以下命令等创建通用规则。

cp AGENTS.md CLAUDE.md

2. 确认与Figma MPC的通信

请从您的使用环境中执行以下提示，确认是否能与Figma MPC进行通信。

Figma MCPから下記セクションのキーカラーを取得してください。

https://www.figma.com/design/xxx

3. 环境构建

请向AI代理输入以下提示。

[task_01.md](tasks/task_01.md) に従って、作業を開始してください。

4. 创建Figma引导线

在task_02.md中追加所需的section url 请向AI代理投递以下提示。

[task_02.md](tasks/task_02.md) に従って、作業を開始してください。

※设计指南已生成至docs/figma/guide-line.md，请确认。

小贴士 如果将设计指南中包含如下部分URL的列表提供给代理，代理就能更容易地进行上下文管理标题（PC） https://www.figma.com/design/xxx（注：此网址为示例，实际翻译时无需翻译网址本身，但为保持格式一致，此处仍保留原样。实际中文语境下，我们通常会说“访问Figma设计页面：https://www.figma.com/design/xxx”或者直接提及网址以说明资源位置。）

5. 生成编码任务

[task_03.md](tasks/task_02.md) に従って、作業を開始してください。

文件将生成在 tasks/coding_tasks.md 中。

6. 开始作业

[coding_tasks.md](tasks/coding_tasks.md) の◯◯を始めてください。

现在可以按顺序开始作业了。

其他便捷的提示（可复制粘贴）

当整体编码质量较差时

#指示
コーディングしたプレビューをデザイン案に極限まで近づけるためのタスクをtasks/improvement_tasks.mdに書いてください。コンテキストが圧迫されない程度にタスクは分割してください。

まずはfigma mpc経由でPC全体を確認し、次にchrome-devtools mcp経由で実際のPCの実装を確認して、何が不足しているかを検証してください。（すでにhttp://localhost:4321/に開発サーバーを立ち上げておきました）
次は同じ手順でSPをチェックしてください。

細かいセクション毎のテキストやデザインはチェックしなくても良いです。

之后，依次执行 tasks/improvement_tasks.md 中的任务

当想要解决特定部分的问题时

"ヘッダー"と"MVセクション"の画像処理がうまくいっていません。Figma MPC(デザイン)とpuppeteer MCP(実装)を比較しながら修正してください。

当想要提升特定部分的质量时

# 指示
Figma MPC(デザイン)とchrome-devtools MCP(実装)を比較して、"ヘッダー"のデザインと実装の一致度を高めてください。

# 注意事項
- PCとSPのどちらもチェックしてください
- 下記チェック項目は必ずチェックしてください
    - 配置している要素は一致しているか
    - 文字列は全て一致しているか
    - マージン・空白は一致しているか
    - 背景色やボタン色は一致しているか
    - ボーダーやシャドウのデザインが一致しているか
- あなたが一致度が90%になったと判断するまで、この作業はやめないでください

目录标签

AI代理工作流优化Claude自动化测试本地部署静态网站构建Figma集成

支持客户端

Claude

接入字段

传输方式（transport，传输协议）

未说明

鉴权方式（authType，认证方式）

none

工具数量（toolCount，工具数）

0

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

未说明none部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

仍需确认：installCommand

来源信息

MCP World

mcpworld.com

/detail/dfc99ea00dd728eb707f53292a4c1e17

一个优化AI代理从静态网站环境构建到实现和质量检查工作流程的工具。

继续浏览同类 MCP

更多AI代理 MCP（18,706）返回 MCP 目录

上一个 MCP

Static Mcpify

将结构化内容转换为静态MCP服务器，为AI代理提供即时内容访问。

下一个 MCP

Statuscast MCP Server

一个通过模型上下文协议（MCP）服务器将Statuscast状态页面管理功能暴露为LLM可调用工具的服务，适用于创建事件、检查组件状态、管理订阅者和内容模板。

Static Web Site Agentic Coding