AI导哈

Astro组件生成服务器

一个基于数据驱动的Astro组件生成工具，能够自动从设计数据和内容资料生成Astro组件、部分和页面模板。

  • by YoshiokaY
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 YoshiokaY/astro-mcp

使用说明

Astro发电机MCP服务器

数据驱动Astro自动生成项目MCP（Model Context Protocol）服务器

概要

这MCP服务器从设计数据、线框、内容资料中Astro自动生成组件、节和页面模板。

主要功能

  • ✅ 组件生成: Props定义可重复使用Astro生成组件
  • ✅ 节生成：从内容数据_parts生成下属节
    • 新: SCSS自动生成（astro-dev mixinに准据）
    • 新: app.js自动更新（Tab/Accordion等脚本登录）
  • ✅ 页面生成：批量生成整个页面结构
  • ✅ 架构生成: Excel/Markdown/JSON从TypeScript自动生成类型定义

v0.2.0主要改善点

astro-dev项目实际使用经验解决了以下问题：

  1. ✅ 利用现有脚本: Tab.ts、Accordion.ts等的astro-dev使用现有脚本
  2. ✅ Mixin使用: @include mq()、@include hover()使用SCSS生成
  3. ✅ .contentInner二重设定の防止：灵活的容器控制
  4. ✅ 样式分隔符: Astro不是文件SCSS分离到文件

了解更多信息 改进.md 来修改标记元素的显示属性。

安装

方法1：npx直接运行（建议）

npx astro-dev-mcp

方法2:全局安装

npm install -g astro-dev-mcp

方法3:本地开发

git clone https://github.com/YoshiokaY/astro-dev-mcp.git
cd astro-dev-mcp
npm install
npm run build
npm link

Claude Desktop设定

~/Library/Application Support/Claude/claude_desktop_config.json 添加：

npx使用时

{
	"mcpServers": {
		"astro-generator": {
			"command": "npx",
			"args": ["astro-dev-mcp"]
		}
	}
}

全局安装

{
	"mcpServers": {
		"astro-generator": {
			"command": "astro-dev-mcp"
		}
	}
}

对于本地开发

{
	"mcpServers": {
		"astro-generator": {
			"command": "node",
			"args": ["/absolute/path/to/astro-dev-mcp/dist/index.js"]
		}
	}
}

用法

1.生成组件

提示示例:

ArticleCardコンポーネントを生成してください。

Props:
- ttl: タイトル（文字列）
- desc: 説明文（文字列）
- date: 投稿日（文字列）
- category: カテゴリ（文字列）
- img: 画像パス（文字列）
- imgAlt: 画像の代替テキスト（文字列）

デザイン:
- プライマリカラー: #0ea5e9
- レイアウト: grid
- フォントサイズ: 1.6rem

执行MCP工具:

{
	"name": "generate-component",
	"arguments": {
		"componentName": "ArticleCard",
		"props": {
			"ttl": { "type": "string", "description": "タイトル" },
			"desc": { "type": "string", "description": "説明文" },
			"date": { "type": "string", "description": "投稿日" },
			"category": { "type": "string", "description": "カテゴリ" },
			"img": { "type": "string", "description": "画像パス" },
			"imgAlt": { "type": "string", "description": "画像の代替テキスト" }
		},
		"design": {
			"colors": { "primary": "#0ea5e9" },
			"layout": "grid",
			"typography": { "size": "1.6rem" }
		},
		"accessibility": true
	}
}

出力:

  • src/components/ArticleCard.astro
  • src/scss/components/_c_article_card.scss

2.章节生成（改进版）

提示示例:

recruitページでQ&Aをアコーディオンで実装してください。

执行MCP工具:

{
	"name": "generate-section",
	"arguments": {
		"prompt": "Q&Aをアコーディオンで実装",
		"pageName": "recruit",
		"content": {
			"ttl": "よくある質問",
			"items": [
				{ "ttl": "質問1", "content": "回答1" },
				{ "ttl": "質問2", "content": "回答2" }
			]
		},
		"generateScss": true,
		"scssOptions": {
			"spacing": {
				"sectionPadding": "6rem 0",
				"itemGap": "1.6rem"
			}
		}
	}
}

出力:

  • src/pages/_parts/_recruit/_qa.astro (Astro组件）
  • SCSS代码（src/scss/pages/_recruit.scss），模板名称将采用不同的格式
  • src/js/app.js 自动更新（Accordion.tsを追加）

生成代码的特征:

✅ 使用现有脚本: astro-dev的，之Accordion.ts利用率 ✅ Mixin使用: @include mq()、@include hover()、@include fontsize() ✅ 容器控制: .contentInner防止双重设定 ✅ 样式分隔符: SCSS分离到文件（在Astro文件中<style>无）

3.生成整个页面

提示示例:

blogページを生成してください。

ページ情報:
- slug: blog
- タイトル: 技術ブログ
- 説明: Web開発に関する最新情報
- URL: /blog/

セクション構成:
1. hero（ヒーローセクション）
2. articles（記事一覧）
3. categories（カテゴリー）
4. qa（よくある質問）

パンくずリスト:
- ホーム > 技術ブログ

执行MCP工具:

{
	"name": "generate-page",
	"arguments": {
		"pageName": "blog",
		"pageData": {
			"head": {
				"slug": "blog",
				"ttl": "技術ブログ",
				"description": "Web開発に関する最新情報",
				"url": "/blog/"
			},
			"breadcrumbs": [
				{ "text": "ホーム", "link": "/" },
				{ "text": "技術ブログ", "link": "/blog/" }
			],
			"contents": {
				"hero": { "ttl": "Tech Blog", "subtitle": "最新の技術情報を発信" },
				"articles": { "ttl": "最新記事", "items": [] },
				"categories": { "ttl": "カテゴリー", "items": [] },
				"qa": { "ttl": "よくある質問", "items": [] }
			}
		},
		"sections": ["hero", "articles", "categories", "qa"]
	}
}

出力:

  • src/pages/blog/index.astro

4. Excel从模式生成

提示示例:

以下のExcelデータからPageData型を生成してください。

| セクション種類 | タイトル | 説明文 | 投稿日 | カテゴリ |
|--------------|---------|--------|--------|---------|
| articles | 記事1 | 説明1 | 2025-01-01 | フロントエンド |
| articles | 記事2 | 説明2 | 2025-01-02 | バックエンド |

执行MCP工具:

{
	"name": "generate-schema",
	"arguments": {
		"sourceType": "excel",
		"sourceData": "/path/to/data.xlsx",
		"schemaName": "PageData"
	}
}

出力:

export interface PageData {
	head: {
		slug: string;
		ttl: string;
		description: string;
		url: string;
	};
	contents: {
		articles: {
			ttl: string;
			items: {
				タイトル: string;
				説明文: string;
				投稿日: string;
				カテゴリ: string;
			}[];
		};
	};
}

实践工作流示例

案例1:从设计渐变LPmake

1. デザインカンプのスクリーンショットをアップロード

「このデザインからヒーローセクションを生成してください」

2. MCPがセクションを生成

3. 「同じデザインで、特徴セクションも生成してください」

4. 「これらのセクションを組み合わせて、LPページ全体を生成してください」

案例2：Excel从内容资料自动生成

1. Excelファイルのパスを指定

「このExcelからブログページのデータ構造を生成してください」

2. スキーマ生成

3. 「生成されたスキーマに基づいて、ページ全体を生成してください」

开発

构建

npm run build

开发模式（监视）

npm run dev

MCP Inspector（调试）

npm run inspector

项目结构

astro-mcp/
├── src/
│   ├── index.ts                    # MCPサーバーエントリーポイント
│   ├── tools/                      # MCPツール実装
│   │   ├── generateComponent.ts
│   │   ├── generateSection.ts
│   │   ├── generatePage.ts
│   │   └── generateSchema.ts
│   ├── generators/                 # コード生成ロジック
│   │   ├── astroGenerator.ts
│   │   ├── scssGenerator.ts
│   │   └── typeGenerator.ts
│   ├── templates/                  # テンプレート
│   │   ├── sectionTemplates.ts
│   │   └── pageTemplates.ts
│   ├── parsers/                    # データパーサー
│   │   ├── excelParser.ts
│   │   └── markdownParser.ts
│   └── utils/                      # ユーティリティ
│       └── formatter.ts
├── package.json
├── tsconfig.json
└── README.md

支持UI模式

交互模式（脚本协作）

  • tab：选项卡UI（Tab.ts协作）
    • 自动app.js的Tab.ts注册
    • ARIA支持属性和键盘操作
  • accordion：折叠UI（Accordion.ts协作）
    • 自动app.js的Accordion.ts注册
    • 高度动画焦点管理
  • modal：模式画廊（Modal.ts协作）
    • 自动app.js的Modal.ts注册
    • 视频/图片/自定义dialog应对

静态模式

  • grid：网格布局
    • 响应列数控制
    • 图像支持（支持图形组件）
  • carousel：卡塞尔
    • Swiper.js连携想定
    • 自动播放选项
  • list：简单列表
    • 基本信息显示

节类型

  • hero：英雄部分
  • articles：记事一覧
  • categories：类别列表
  • qa：问答/常见问题
  • features：特征・机能绍介
  • tech：技术栈
  • concept：概念说明
  • videos：视频内容
  • custom：自定义分项

路线图

Phase 1: 原型（完成）

  • [x] 基本的MCP服务器构建
  • [x] 组件生成功能
  • [x] 节生成功能
  • [x] 页面生成功能
  • [x] 架构生成功能

Phase 2: 扩张机能（次期）

  • [ ] Figma API协作（设计令牌自动提取）
  • []图像OCR支持（设计渐变分析）
  • []响应SCSS自动生成
  • []辅助功能检查功能

Phase 3: AI強化（将来）

  • []直接从自然语言生成
  • []设计系统学习功能
  • []组件库管理

许可证

麻省理工学院

貢献

Issue、Pull Request欢迎光临。

联系我们

有关项目的问题GitHub的，之Issue那就拜托了。

相关 MCP