figma-to-code-agent 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (166) hide show
  1. package/CHANGELOG.md +55 -0
  2. package/LICENSE +21 -0
  3. package/QUICKSTART.md +198 -0
  4. package/README.md +149 -0
  5. package/dist/FigmaToCodeAgent.d.ts +55 -0
  6. package/dist/FigmaToCodeAgent.d.ts.map +1 -0
  7. package/dist/FigmaToCodeAgent.js +251 -0
  8. package/dist/FigmaToCodeAgent.js.map +1 -0
  9. package/dist/assets/index.d.ts +6 -0
  10. package/dist/assets/index.d.ts.map +1 -0
  11. package/dist/assets/index.js +7 -0
  12. package/dist/assets/index.js.map +1 -0
  13. package/dist/cli.d.ts +3 -0
  14. package/dist/cli.d.ts.map +1 -0
  15. package/dist/cli.js +261 -0
  16. package/dist/cli.js.map +1 -0
  17. package/dist/extraction/FigmaAPIClient.d.ts +53 -0
  18. package/dist/extraction/FigmaAPIClient.d.ts.map +1 -0
  19. package/dist/extraction/FigmaAPIClient.js +275 -0
  20. package/dist/extraction/FigmaAPIClient.js.map +1 -0
  21. package/dist/extraction/FigmaCache.d.ts +28 -0
  22. package/dist/extraction/FigmaCache.d.ts.map +1 -0
  23. package/dist/extraction/FigmaCache.js +120 -0
  24. package/dist/extraction/FigmaCache.js.map +1 -0
  25. package/dist/extraction/MCPClient.d.ts +75 -0
  26. package/dist/extraction/MCPClient.d.ts.map +1 -0
  27. package/dist/extraction/MCPClient.js +254 -0
  28. package/dist/extraction/MCPClient.js.map +1 -0
  29. package/dist/extraction/index.d.ts +9 -0
  30. package/dist/extraction/index.d.ts.map +1 -0
  31. package/dist/extraction/index.js +27 -0
  32. package/dist/extraction/index.js.map +1 -0
  33. package/dist/extraction/types.d.ts +122 -0
  34. package/dist/extraction/types.d.ts.map +1 -0
  35. package/dist/extraction/types.js +6 -0
  36. package/dist/extraction/types.js.map +1 -0
  37. package/dist/generation/AICodeOptimizer.d.ts +10 -0
  38. package/dist/generation/AICodeOptimizer.d.ts.map +1 -0
  39. package/dist/generation/AICodeOptimizer.js +33 -0
  40. package/dist/generation/AICodeOptimizer.js.map +1 -0
  41. package/dist/generation/ReactGenerator.d.ts +27 -0
  42. package/dist/generation/ReactGenerator.d.ts.map +1 -0
  43. package/dist/generation/ReactGenerator.js +423 -0
  44. package/dist/generation/ReactGenerator.js.map +1 -0
  45. package/dist/generation/VueGenerator.d.ts +23 -0
  46. package/dist/generation/VueGenerator.d.ts.map +1 -0
  47. package/dist/generation/VueGenerator.js +337 -0
  48. package/dist/generation/VueGenerator.js.map +1 -0
  49. package/dist/generation/index.d.ts +6 -0
  50. package/dist/generation/index.d.ts.map +1 -0
  51. package/dist/generation/index.js +7 -0
  52. package/dist/generation/index.js.map +1 -0
  53. package/dist/generation/types.d.ts +24 -0
  54. package/dist/generation/types.d.ts.map +1 -0
  55. package/dist/generation/types.js +3 -0
  56. package/dist/generation/types.js.map +1 -0
  57. package/dist/index.d.ts +10 -0
  58. package/dist/index.d.ts.map +1 -0
  59. package/dist/index.js +17 -0
  60. package/dist/index.js.map +1 -0
  61. package/dist/llm/BedrockProvider.d.ts +8 -0
  62. package/dist/llm/BedrockProvider.d.ts.map +1 -0
  63. package/dist/llm/BedrockProvider.js +34 -0
  64. package/dist/llm/BedrockProvider.js.map +1 -0
  65. package/dist/llm/LLMFactory.d.ts +5 -0
  66. package/dist/llm/LLMFactory.d.ts.map +1 -0
  67. package/dist/llm/LLMFactory.js +21 -0
  68. package/dist/llm/LLMFactory.js.map +1 -0
  69. package/dist/llm/OpenAIProvider.d.ts +7 -0
  70. package/dist/llm/OpenAIProvider.d.ts.map +1 -0
  71. package/dist/llm/OpenAIProvider.js +34 -0
  72. package/dist/llm/OpenAIProvider.js.map +1 -0
  73. package/dist/llm/index.d.ts +5 -0
  74. package/dist/llm/index.d.ts.map +1 -0
  75. package/dist/llm/index.js +21 -0
  76. package/dist/llm/index.js.map +1 -0
  77. package/dist/llm/types.d.ts +23 -0
  78. package/dist/llm/types.d.ts.map +1 -0
  79. package/dist/llm/types.js +3 -0
  80. package/dist/llm/types.js.map +1 -0
  81. package/dist/transformation/ASTFactory.d.ts +92 -0
  82. package/dist/transformation/ASTFactory.d.ts.map +1 -0
  83. package/dist/transformation/ASTFactory.js +240 -0
  84. package/dist/transformation/ASTFactory.js.map +1 -0
  85. package/dist/transformation/ASTParser.d.ts +13 -0
  86. package/dist/transformation/ASTParser.d.ts.map +1 -0
  87. package/dist/transformation/ASTParser.js +177 -0
  88. package/dist/transformation/ASTParser.js.map +1 -0
  89. package/dist/transformation/TransformationPipeline.d.ts +31 -0
  90. package/dist/transformation/TransformationPipeline.d.ts.map +1 -0
  91. package/dist/transformation/TransformationPipeline.js +42 -0
  92. package/dist/transformation/TransformationPipeline.js.map +1 -0
  93. package/dist/transformation/index.d.ts +7 -0
  94. package/dist/transformation/index.d.ts.map +1 -0
  95. package/dist/transformation/index.js +25 -0
  96. package/dist/transformation/index.js.map +1 -0
  97. package/dist/transformation/transformers/AIComponentSplitter.d.ts +14 -0
  98. package/dist/transformation/transformers/AIComponentSplitter.d.ts.map +1 -0
  99. package/dist/transformation/transformers/AIComponentSplitter.js +71 -0
  100. package/dist/transformation/transformers/AIComponentSplitter.js.map +1 -0
  101. package/dist/transformation/transformers/AILayoutAnalyzer.d.ts +18 -0
  102. package/dist/transformation/transformers/AILayoutAnalyzer.d.ts.map +1 -0
  103. package/dist/transformation/transformers/AILayoutAnalyzer.js +125 -0
  104. package/dist/transformation/transformers/AILayoutAnalyzer.js.map +1 -0
  105. package/dist/transformation/transformers/AISemanticNamer.d.ts +12 -0
  106. package/dist/transformation/transformers/AISemanticNamer.d.ts.map +1 -0
  107. package/dist/transformation/transformers/AISemanticNamer.js +50 -0
  108. package/dist/transformation/transformers/AISemanticNamer.js.map +1 -0
  109. package/dist/transformation/transformers/ComponentExtractor.d.ts +16 -0
  110. package/dist/transformation/transformers/ComponentExtractor.d.ts.map +1 -0
  111. package/dist/transformation/transformers/ComponentExtractor.js +91 -0
  112. package/dist/transformation/transformers/ComponentExtractor.js.map +1 -0
  113. package/dist/transformation/transformers/FigmaLayerPreserver.d.ts +14 -0
  114. package/dist/transformation/transformers/FigmaLayerPreserver.d.ts.map +1 -0
  115. package/dist/transformation/transformers/FigmaLayerPreserver.js +48 -0
  116. package/dist/transformation/transformers/FigmaLayerPreserver.js.map +1 -0
  117. package/dist/transformation/transformers/FigmaStructureOptimizer.d.ts +16 -0
  118. package/dist/transformation/transformers/FigmaStructureOptimizer.d.ts.map +1 -0
  119. package/dist/transformation/transformers/FigmaStructureOptimizer.js +65 -0
  120. package/dist/transformation/transformers/FigmaStructureOptimizer.js.map +1 -0
  121. package/dist/transformation/transformers/FlattenTransformer.d.ts +15 -0
  122. package/dist/transformation/transformers/FlattenTransformer.d.ts.map +1 -0
  123. package/dist/transformation/transformers/FlattenTransformer.js +69 -0
  124. package/dist/transformation/transformers/FlattenTransformer.js.map +1 -0
  125. package/dist/transformation/transformers/LayoutOptimizer.d.ts +15 -0
  126. package/dist/transformation/transformers/LayoutOptimizer.d.ts.map +1 -0
  127. package/dist/transformation/transformers/LayoutOptimizer.js +63 -0
  128. package/dist/transformation/transformers/LayoutOptimizer.js.map +1 -0
  129. package/dist/transformation/transformers/SemanticNamer.d.ts +14 -0
  130. package/dist/transformation/transformers/SemanticNamer.d.ts.map +1 -0
  131. package/dist/transformation/transformers/SemanticNamer.js +65 -0
  132. package/dist/transformation/transformers/SemanticNamer.js.map +1 -0
  133. package/dist/transformation/transformers/SimplifyTransformer.d.ts +23 -0
  134. package/dist/transformation/transformers/SimplifyTransformer.d.ts.map +1 -0
  135. package/dist/transformation/transformers/SimplifyTransformer.js +138 -0
  136. package/dist/transformation/transformers/SimplifyTransformer.js.map +1 -0
  137. package/dist/transformation/types.d.ts +129 -0
  138. package/dist/transformation/types.d.ts.map +1 -0
  139. package/dist/transformation/types.js +7 -0
  140. package/dist/transformation/types.js.map +1 -0
  141. package/dist/validation/index.d.ts +6 -0
  142. package/dist/validation/index.d.ts.map +1 -0
  143. package/dist/validation/index.js +7 -0
  144. package/dist/validation/index.js.map +1 -0
  145. package/package.json +81 -0
  146. package/test-app/test-react/index.html +19 -0
  147. package/test-app/test-react/package.json +16 -0
  148. package/test-app/test-react/src/Component.jsx +146 -0
  149. package/test-app/test-react/src/Component.module.css +572 -0
  150. package/test-app/test-react/src/Homepage.jsx +53 -0
  151. package/test-app/test-react/src/Homepage.module.css +218 -0
  152. package/test-app/test-react/src/ProductPage.jsx +74 -0
  153. package/test-app/test-react/src/ProductPage.module.css +357 -0
  154. package/test-app/test-react/src/ShoppingCart.jsx +151 -0
  155. package/test-app/test-react/src/ShoppingCart.module.css +739 -0
  156. package/test-app/test-react/src/main.jsx +9 -0
  157. package/test-app/test-react/vite.config.js +6 -0
  158. package/test-app/test-vue/index.html +19 -0
  159. package/test-app/test-vue/package.json +15 -0
  160. package/test-app/test-vue/src/App.vue +16 -0
  161. package/test-app/test-vue/src/Component.vue +723 -0
  162. package/test-app/test-vue/src/Homepage.vue +271 -0
  163. package/test-app/test-vue/src/ProductPage.vue +431 -0
  164. package/test-app/test-vue/src/ShoppingCart.vue +890 -0
  165. package/test-app/test-vue/src/main.js +4 -0
  166. package/test-app/test-vue/vite.config.js +6 -0
package/package.json ADDED
@@ -0,0 +1,81 @@
1
+ {
2
+ "name": "figma-to-code-agent",
3
+ "version": "0.3.0",
4
+ "description": "AI Agent that converts Figma designs to production-ready code with optional LLM enhancements",
5
+ "main": "dist/index.js",
6
+ "types": "dist/index.d.ts",
7
+ "bin": {
8
+ "figma-to-code": "dist/cli.js"
9
+ },
10
+ "files": [
11
+ "dist",
12
+ "test-app/test-react/src/**/*.{jsx,css}",
13
+ "test-app/test-react/src/main.jsx",
14
+ "test-app/test-react/index.html",
15
+ "test-app/test-react/vite.config.js",
16
+ "test-app/test-react/package.json",
17
+ "test-app/test-vue/src/**/*.{vue,js}",
18
+ "test-app/test-vue/src/main.js",
19
+ "test-app/test-vue/index.html",
20
+ "test-app/test-vue/vite.config.js",
21
+ "test-app/test-vue/package.json",
22
+ "README.md",
23
+ "LICENSE",
24
+ "CHANGELOG.md",
25
+ "QUICKSTART.md"
26
+ ],
27
+ "engines": {
28
+ "node": ">=18"
29
+ },
30
+ "scripts": {
31
+ "build": "tsc",
32
+ "test": "jest",
33
+ "test:watch": "jest --watch",
34
+ "test:coverage": "jest --coverage",
35
+ "lint": "eslint src --ext .ts",
36
+ "format": "prettier --write \"src/**/*.ts\"",
37
+ "prepublishOnly": "npm run lint && npm run build"
38
+ },
39
+ "keywords": [
40
+ "figma",
41
+ "code-generation",
42
+ "react",
43
+ "vue",
44
+ "design-to-code",
45
+ "ai",
46
+ "llm",
47
+ "bedrock",
48
+ "openai",
49
+ "anthropic"
50
+ ],
51
+ "author": "lewiscutey",
52
+ "license": "MIT",
53
+ "repository": {
54
+ "type": "git",
55
+ "url": "https://github.com/lewiscutey/figma-to-code-agent.git"
56
+ },
57
+ "bugs": {
58
+ "url": "https://github.com/lewiscutey/figma-to-code-agent/issues"
59
+ },
60
+ "homepage": "https://github.com/lewiscutey/figma-to-code-agent#readme",
61
+ "devDependencies": {
62
+ "@types/jest": "^29.5.12",
63
+ "@types/node": "^20.11.19",
64
+ "@types/ws": "^8.18.1",
65
+ "@typescript-eslint/eslint-plugin": "^7.0.1",
66
+ "@typescript-eslint/parser": "^7.0.1",
67
+ "eslint": "^8.56.0",
68
+ "jest": "^29.7.0",
69
+ "prettier": "^3.2.5",
70
+ "ts-jest": "^29.1.2",
71
+ "ts-node": "^10.9.2",
72
+ "typescript": "^5.3.3"
73
+ },
74
+ "dependencies": {
75
+ "@aws-sdk/client-bedrock-runtime": "^3.987.0",
76
+ "axios": "^1.6.7",
77
+ "fast-check": "^3.15.1",
78
+ "puppeteer": "^22.0.0",
79
+ "ws": "^8.19.0"
80
+ }
81
+ }
package/test-app/test-react/index.html ADDED
@@ -0,0 +1,19 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Figma to Code - React Test</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600&display=swap" rel="stylesheet">
10
+ <style>
11
+ * { margin: 0; padding: 0; box-sizing: border-box; }
12
+ body { min-width: 1440px; }
13
+ </style>
14
+ </head>
15
+ <body>
16
+ <div id="root"></div>
17
+ <script type="module" src="/src/main.jsx"></script>
18
+ </body>
19
+ </html>
package/test-app/test-react/package.json ADDED
@@ -0,0 +1,16 @@
1
+ {
2
+ "name": "test-react",
3
+ "version": "1.0.0",
4
+ "type": "module",
5
+ "scripts": {
6
+ "dev": "vite",
7
+ "build": "vite build",
8
+ "preview": "vite preview"
9
+ },
10
+ "devDependencies": {
11
+ "@vitejs/plugin-react": "^4.3.4",
12
+ "react": "^18.3.1",
13
+ "react-dom": "^18.3.1",
14
+ "vite": "^6.0.5"
15
+ }
16
+ }
package/test-app/test-react/src/Component.jsx ADDED
@@ -0,0 +1,146 @@
1
+ import React from 'react'
2
+ import styles from './Component.module.css'
3
+ import imgmars_methane_2 from './assets/mars-methane-2.png'
4
+ import imgmask_group from './assets/mask-group.png'
5
+ import imggroup_2608 from './assets/group-2608.png'
6
+ import imggroup from './assets/group.png'
7
+ import imggroup_10 from './assets/group-10.png'
8
+
9
+ export function Component(props) {
10
+ const containerRef = React.useRef(null)
11
+ const [scale, setScale] = React.useState(1)
12
+
13
+ React.useEffect(() => {
14
+ const updateScale = () => {
15
+ if (containerRef.current) {
16
+ const parentWidth = containerRef.current.parentElement?.clientWidth || window.innerWidth
17
+ setScale(Math.min(1, parentWidth / 1920))
18
+ }
19
+ }
20
+ updateScale()
21
+ window.addEventListener('resize', updateScale)
22
+ return () => window.removeEventListener('resize', updateScale)
23
+ }, [])
24
+
25
+ return (
26
+ <div className={styles['responsive-wrapper']}>
27
+ <div ref={containerRef} className={styles['scale-container']} style={{ transform: `scale(${scale})` }}>
28
+ <div className={styles['element']}>
29
+ {/* group2526 */}
30
+ <div className={styles['group2526']}>
31
+ {/* text */}
32
+ <span className={styles['text']}>隐私</span>
33
+ {/* miuiMiui12 */}
34
+ <span className={styles['miui-miui12']}>MIUI不仅担当你生活中的得力助手，更为你的个人信息安全竭尽全力。
35
+ 在MIUI 12当中，你可以轻松管理你的隐私。来了解下吧。</span>
36
+ {/* miui12 */}
37
+ <span className={styles['miui12']}>MIUI 12
38
+ 为你提供的隐私安全工具
39
+ 比以往更强大</span>
40
+ </div>
41
+ {/* rectangle28 */}
42
+ <div className={styles['rectangle28']} />
43
+ {/* group2523 */}
44
+ <div className={styles['group2523']}>
45
+ {/* maskGroup */}
46
+ <div className={styles['mask-group']}>
47
+ {/* maskGroup */}
48
+ <div className={styles['mask-group-1']}>
49
+ {/* marsMethane2 */}
50
+ <img className={styles['mars-methane2']} src={imgmars_methane_2} alt="marsMethane2" />
51
+ </div>
52
+ {/* rectangle30 */}
53
+ <div className={styles['rectangle30']} />
54
+ </div>
55
+ {/* text */}
56
+ <span className={styles['text-1']}>触碰想象</span>
57
+ {/* group2512 */}
58
+ <div className={styles['group2512']}>
59
+ {/* 01 */}
60
+ <span className={styles['element-1']}>01</span>
61
+ {/* rectangle38 */}
62
+ <div className={styles['rectangle38']} />
63
+ </div>
64
+ </div>
65
+ {/* group2527 */}
66
+ <div className={styles['group2527']}>
67
+ {/* text */}
68
+ <span className={styles['text-2']}>感受真实</span>
69
+ {/* group2512 */}
70
+ <div className={styles['group2512-1']}>
71
+ {/* 02 */}
72
+ <span className={styles['element-2']}>02</span>
73
+ {/* rectangle38 */}
74
+ <div className={styles['rectangle38-1']} />
75
+ </div>
76
+ </div>
77
+ {/* group2528 */}
78
+ <div className={styles['group2528']}>
79
+ {/* maskGroup */}
80
+ <img className={styles['mask-group-2']} src={imgmask_group} alt="maskGroup" />
81
+ {/* text */}
82
+ <span className={styles['text-3']}>隐私保护</span>
83
+ {/* group2512 */}
84
+ <div className={styles['group2512-2']}>
85
+ {/* 03 */}
86
+ <span className={styles['element-3']}>03</span>
87
+ {/* rectangle38 */}
88
+ <div className={styles['rectangle38-2']} />
89
+ </div>
90
+ </div>
91
+ {/* group2529 */}
92
+ <div className={styles['group2529']}>
93
+ {/* text */}
94
+ <span className={styles['text-4']}>贴心功能</span>
95
+ {/* group2512 */}
96
+ <div className={styles['group2512-3']}>
97
+ {/* 04 */}
98
+ <span className={styles['element-4']}>04</span>
99
+ {/* rectangle38 */}
100
+ <div className={styles['rectangle38-3']} />
101
+ </div>
102
+ </div>
103
+ {/* group2530 */}
104
+ <div className={styles['group2530']}>
105
+ {/* text */}
106
+ <span className={styles['text-5']}>发布计划</span>
107
+ {/* group2512 */}
108
+ <div className={styles['group2512-4']}>
109
+ {/* 05 */}
110
+ <span className={styles['element-5']}>05</span>
111
+ {/* rectangle38 */}
112
+ <div className={styles['rectangle38-4']} />
113
+ </div>
114
+ </div>
115
+ {/* group2608 */}
116
+ <img className={styles['group2608']} src={imggroup_2608} alt="group2608" />
117
+ {/* group2524 */}
118
+ <div className={styles['group2524']}>
119
+ {/* rectangle44 */}
120
+ <div className={styles['rectangle44']} />
121
+ {/* group */}
122
+ <img className={styles['group']} src={imggroup} alt="group" />
123
+ {/* group9 */}
124
+ <div className={styles['group9']}>
125
+ {/* text */}
126
+ <span className={styles['text-6']}>首页</span>
127
+ {/* text */}
128
+ <span className={styles['text-7']}>隐私</span>
129
+ {/* text */}
130
+ <span className={styles['text-8']}>无障碍</span>
131
+ {/* text */}
132
+ <span className={styles['text-9']}>小米商城</span>
133
+ {/* text */}
134
+ <span className={styles['text-10']}>云服务</span>
135
+ {/* text */}
136
+ <span className={styles['text-11']}>小米社区</span>
137
+ </div>
138
+ {/* group10 */}
139
+ <img className={styles['group10']} src={imggroup_10} alt="group10" />
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ )
145
+ }
146
+