FrameLayoutKit MCP服务器
FrameLayoutKit的模型上下文协议（MCP）服务器，为使用FrameLayoutKit框架的iOS开发人员提供AI支持的帮助。该服务器使用FrameLayout Kit的直观语法帮助生成Swift UIKit代码，转换现有的自动布局代码，验证布局，并提供迁移指导。
特性
🚀 代码生成
为所有布局类型生成FrameLayoutKit代码：
- 框架布局 -带填充和对齐的单视图容器
- VStack布局/Hstack布局 -垂直/水平堆叠
- ZStack布局 -重叠视图
- 双框架布局 -带分布控制的双视图布局
- 网格框架布局 -多行/列网格布局
- 滚动堆栈视图 -可滚动堆栈
- FlowFrame布局 -包裹流布局
🔄 自动布局转换
将现有的UIKit自动布局代码转换为FrameLayoutKit：
- NSLayoutConstraint转换
- UITackView迁移
- 布局锚点转换
- 保留代码结构和注释
✅ 代码验证
验证以下对象的FrameLayoutKit代码：
- 语法正确性
- 语义有效性
- 最佳实践
- 性能优化建议
📋 迁移助手
生成全面的迁移指南：
- 项目范围分析
- 逐个文件推荐
- 工作量估算
- 逐步迁移策略
安装
# Clone the repository
git clone https://github.com/kennic/framelayoutkit-mcp.git
cd framelayoutkit-mcp
# Install dependencies
npm install
# Start the server
npm start配置
适用于克劳德桌面
添加到您的Claude配置文件中：
{
"mcpServers": {
"framelayoutkit": {
"command": "node",
"args": ["/path/to/framelayoutkit-mcp/src/index.js"],
"env": {}
}
}
}对于带有Continue的VS代码
添加到“继续”配置中：
{
"models": [{
"title": "Claude with FrameLayoutKit",
"provider": "anthropic",
"model": "claude-3-sonnet",
"mcpServers": [{
"name": "framelayoutkit",
"command": "node",
"args": ["./framelayoutkit-mcp/src/index.js"]
}]
}]
}使用示例
生成VStackLayout
// Request
{
"tool": "generate-framelayout",
"arguments": {
"layoutType": "VStackLayout",
"views": [
{
"name": "titleLabel",
"type": "UILabel",
"text": "Welcome"
},
{
"name": "button",
"type": "UIButton",
"text": "Get Started"
}
],
"configuration": {
"spacing": 20,
"padding": 16,
"distribution": "center"
}
}
}生成的Swift代码：
// Add views to stack
let titleLabel = {
let label = UILabel()
label.text = "Welcome"
return label
}()
let button = {
let button = UIButton(type: .system)
button.setTitle("Get Started", for: .normal)
return button
}()
let stackLayout = VStackLayout()
stackLayout.spacing(20).distribution(.center).padding(16)
stackLayout + titleLabel
stackLayout + button将自动布局转换为FrameLayoutKit
// Request
{
"tool": "convert-autolayout",
"arguments": {
"swiftCode": "/* Your existing Auto Layout code */",
"options": {
"migrationStrategy": "conservative",
"useOperatorSyntax": true
}
}
}验证FrameLayoutKit代码
// Request
{
"tool": "validate-framelayout",
"arguments": {
"swiftCode": "/* Your FrameLayoutKit code */",
"checkLevel": "full"
}
}FrameLayoutKit语法验证
MCP服务器正确实现了FrameLayoutKit的语法模式：
✅ 操作员使用情况
+用于向布局添加视图的运算符- `` DoubleFrameLayout的操作员
- 可链式方法语法
✅ 布局属性
- 正确对齐菜单(
.top,.center,.bottom,.fill,.fit) - 每种布局类型的分布选项
- 适当的填充/间距应用
✅ 视图包装
- 所有视图都自动包裹在FrameLayout实例中
- 单项配置支持
- 正确的帧计算委托
✅ 布局层次结构
- 布局类型的正确嵌套
- 正确的亲子关系
- 网格和流布局的内部堆栈管理
建筑
服务器由以下组件构建：
- Node.js 带有ES模块
- @模型上下文协议/sdk 用于MCP实施
- 萨德 用于模式验证
- 每个工具的模块化类结构
关键组件
- 框架布局生成器 -生成FrameLayoutKit代码
- 自动布局转换器 -将自动布局转换为FrameLayoutKit
- 框架布局验证器 -验证语法和语义
- 迁移分析器 -分析迁移项目
贡献
欢迎投稿！请确保：
- 代码遵循FrameLayoutKit的官方语法
- 所有生成的代码都是有效的Swift
- 测试涵盖新功能
- 文档已更新
许可证
MIT许可证-有关详细信息，请参阅许可证文件
支持
对于问题和疑问：
- GitHub问题： framelayoutkit mcp/issues
- FrameLayoutKit文档： FrameLayoutKit文档
致谢
- Nam Kennic的框架布局工具包
- Anthropic的模型上下文协议
- iOS开发社区