AI导哈

AI网站构建优化工具

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

  • by ShinyaFurumata
  • 本地部署
  • 更新于
在 GitHub 查看 ShinyaFurumata/static-web-site-agentic-coding

使用说明

概要

该项目旨在优化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%になったと判断するまで、この作業はやめないでください

相关 MCP