figma-to-code-agent 0.6.0 → 0.8.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.
- package/CHANGELOG.md +61 -0
- package/README.md +69 -77
- package/README.zh-CN.md +173 -0
- package/dist/agent/ConversationContext.d.ts +91 -0
- package/dist/agent/ConversationContext.d.ts.map +1 -0
- package/dist/agent/ConversationContext.js +271 -0
- package/dist/agent/ConversationContext.js.map +1 -0
- package/dist/agent/DecisionEngine.d.ts +77 -0
- package/dist/agent/DecisionEngine.d.ts.map +1 -0
- package/dist/agent/DecisionEngine.js +414 -0
- package/dist/agent/DecisionEngine.js.map +1 -0
- package/dist/agent/ExecutionOrchestrator.d.ts +55 -0
- package/dist/agent/ExecutionOrchestrator.d.ts.map +1 -0
- package/dist/agent/ExecutionOrchestrator.js +360 -0
- package/dist/agent/ExecutionOrchestrator.js.map +1 -0
- package/dist/agent/IntentUnderstandingEngine.d.ts +43 -0
- package/dist/agent/IntentUnderstandingEngine.d.ts.map +1 -0
- package/dist/agent/IntentUnderstandingEngine.js +261 -0
- package/dist/agent/IntentUnderstandingEngine.js.map +1 -0
- package/dist/agent/index.d.ts +9 -0
- package/dist/agent/index.d.ts.map +1 -0
- package/dist/agent/index.js +30 -0
- package/dist/agent/index.js.map +1 -0
- package/dist/agent/types.d.ts +111 -0
- package/dist/agent/types.d.ts.map +1 -0
- package/dist/agent/types.js +6 -0
- package/dist/agent/types.js.map +1 -0
- package/dist/cli/InteractiveCLI.d.ts +109 -0
- package/dist/cli/InteractiveCLI.d.ts.map +1 -0
- package/dist/cli/InteractiveCLI.js +534 -0
- package/dist/cli/InteractiveCLI.js.map +1 -0
- package/dist/cli/ProgressDisplay.d.ts +117 -0
- package/dist/cli/ProgressDisplay.d.ts.map +1 -0
- package/dist/cli/ProgressDisplay.js +370 -0
- package/dist/cli/ProgressDisplay.js.map +1 -0
- package/dist/cli/index.d.ts +6 -0
- package/dist/cli/index.d.ts.map +1 -0
- package/dist/cli/index.js +22 -0
- package/dist/cli/index.js.map +1 -0
- package/dist/consistency/DesignConsistencyChecker.d.ts +125 -0
- package/dist/consistency/DesignConsistencyChecker.d.ts.map +1 -0
- package/dist/consistency/DesignConsistencyChecker.js +448 -0
- package/dist/consistency/DesignConsistencyChecker.js.map +1 -0
- package/dist/consistency/index.d.ts +5 -0
- package/dist/consistency/index.d.ts.map +1 -0
- package/dist/consistency/index.js +21 -0
- package/dist/consistency/index.js.map +1 -0
- package/dist/context/CodeStyleMatcher.d.ts +124 -0
- package/dist/context/CodeStyleMatcher.d.ts.map +1 -0
- package/dist/context/CodeStyleMatcher.js +558 -0
- package/dist/context/CodeStyleMatcher.js.map +1 -0
- package/dist/context/IncrementalUpdater.d.ts +97 -0
- package/dist/context/IncrementalUpdater.d.ts.map +1 -0
- package/dist/context/IncrementalUpdater.js +431 -0
- package/dist/context/IncrementalUpdater.js.map +1 -0
- package/dist/context/index.d.ts +6 -0
- package/dist/context/index.d.ts.map +1 -0
- package/dist/context/index.js +22 -0
- package/dist/context/index.js.map +1 -0
- package/dist/feedback/FeedbackLoop.d.ts +125 -0
- package/dist/feedback/FeedbackLoop.d.ts.map +1 -0
- package/dist/feedback/FeedbackLoop.js +353 -0
- package/dist/feedback/FeedbackLoop.js.map +1 -0
- package/dist/feedback/index.d.ts +5 -0
- package/dist/feedback/index.d.ts.map +1 -0
- package/dist/feedback/index.js +21 -0
- package/dist/feedback/index.js.map +1 -0
- package/dist/mcp/FigmaMCPIntegration.d.ts +72 -0
- package/dist/mcp/FigmaMCPIntegration.d.ts.map +1 -0
- package/dist/mcp/FigmaMCPIntegration.js +173 -0
- package/dist/mcp/FigmaMCPIntegration.js.map +1 -0
- package/dist/mcp/MCPServiceManager.d.ts +109 -0
- package/dist/mcp/MCPServiceManager.d.ts.map +1 -0
- package/dist/mcp/MCPServiceManager.js +237 -0
- package/dist/mcp/MCPServiceManager.js.map +1 -0
- package/dist/mcp/MCPToolAdapter.d.ts +73 -0
- package/dist/mcp/MCPToolAdapter.d.ts.map +1 -0
- package/dist/mcp/MCPToolAdapter.js +249 -0
- package/dist/mcp/MCPToolAdapter.js.map +1 -0
- package/dist/mcp/index.d.ts +7 -0
- package/dist/mcp/index.d.ts.map +1 -0
- package/dist/mcp/index.js +23 -0
- package/dist/mcp/index.js.map +1 -0
- package/dist/mcp-server/MCPServer.d.ts +125 -0
- package/dist/mcp-server/MCPServer.d.ts.map +1 -0
- package/dist/mcp-server/MCPServer.js +449 -0
- package/dist/mcp-server/MCPServer.js.map +1 -0
- package/dist/mcp-server/index.d.ts +5 -0
- package/dist/mcp-server/index.d.ts.map +1 -0
- package/dist/mcp-server/index.js +21 -0
- package/dist/mcp-server/index.js.map +1 -0
- package/dist/monitoring/ExecutionSummary.d.ts +160 -0
- package/dist/monitoring/ExecutionSummary.d.ts.map +1 -0
- package/dist/monitoring/ExecutionSummary.js +345 -0
- package/dist/monitoring/ExecutionSummary.js.map +1 -0
- package/dist/monitoring/Logger.d.ts +139 -0
- package/dist/monitoring/Logger.d.ts.map +1 -0
- package/dist/monitoring/Logger.js +406 -0
- package/dist/monitoring/Logger.js.map +1 -0
- package/dist/monitoring/index.d.ts +6 -0
- package/dist/monitoring/index.d.ts.map +1 -0
- package/dist/monitoring/index.js +22 -0
- package/dist/monitoring/index.js.map +1 -0
- package/dist/performance/LLMCache.d.ts +133 -0
- package/dist/performance/LLMCache.d.ts.map +1 -0
- package/dist/performance/LLMCache.js +358 -0
- package/dist/performance/LLMCache.js.map +1 -0
- package/dist/performance/ParallelProcessor.d.ts +89 -0
- package/dist/performance/ParallelProcessor.d.ts.map +1 -0
- package/dist/performance/ParallelProcessor.js +253 -0
- package/dist/performance/ParallelProcessor.js.map +1 -0
- package/dist/performance/TokenMonitor.d.ts +166 -0
- package/dist/performance/TokenMonitor.d.ts.map +1 -0
- package/dist/performance/TokenMonitor.js +315 -0
- package/dist/performance/TokenMonitor.js.map +1 -0
- package/dist/performance/index.d.ts +7 -0
- package/dist/performance/index.d.ts.map +1 -0
- package/dist/performance/index.js +23 -0
- package/dist/performance/index.js.map +1 -0
- package/dist/prototype/InteractivePrototypeGenerator.d.ts +175 -0
- package/dist/prototype/InteractivePrototypeGenerator.d.ts.map +1 -0
- package/dist/prototype/InteractivePrototypeGenerator.js +624 -0
- package/dist/prototype/InteractivePrototypeGenerator.js.map +1 -0
- package/dist/prototype/index.d.ts +5 -0
- package/dist/prototype/index.d.ts.map +1 -0
- package/dist/prototype/index.js +21 -0
- package/dist/prototype/index.js.map +1 -0
- package/dist/skill/SkillConfig.d.ts +66 -0
- package/dist/skill/SkillConfig.d.ts.map +1 -0
- package/dist/skill/SkillConfig.js +233 -0
- package/dist/skill/SkillConfig.js.map +1 -0
- package/dist/skill/SkillInterface.d.ts +102 -0
- package/dist/skill/SkillInterface.d.ts.map +1 -0
- package/dist/skill/SkillInterface.js +425 -0
- package/dist/skill/SkillInterface.js.map +1 -0
- package/dist/skill/index.d.ts +7 -0
- package/dist/skill/index.d.ts.map +1 -0
- package/dist/skill/index.js +23 -0
- package/dist/skill/index.js.map +1 -0
- package/dist/skill/types.d.ts +103 -0
- package/dist/skill/types.d.ts.map +1 -0
- package/dist/skill/types.js +6 -0
- package/dist/skill/types.js.map +1 -0
- package/dist/templates/TemplateManager.d.ts +147 -0
- package/dist/templates/TemplateManager.d.ts.map +1 -0
- package/dist/templates/TemplateManager.js +418 -0
- package/dist/templates/TemplateManager.js.map +1 -0
- package/dist/templates/index.d.ts +6 -0
- package/dist/templates/index.d.ts.map +1 -0
- package/dist/templates/index.js +10 -0
- package/dist/templates/index.js.map +1 -0
- package/dist/tools/CodeGenerationTool.d.ts +32 -0
- package/dist/tools/CodeGenerationTool.d.ts.map +1 -0
- package/dist/tools/CodeGenerationTool.js +63 -0
- package/dist/tools/CodeGenerationTool.js.map +1 -0
- package/dist/tools/FigmaExtractionTool.d.ts +45 -0
- package/dist/tools/FigmaExtractionTool.d.ts.map +1 -0
- package/dist/tools/FigmaExtractionTool.js +105 -0
- package/dist/tools/FigmaExtractionTool.js.map +1 -0
- package/dist/tools/ProjectAnalysisTool.d.ts +104 -0
- package/dist/tools/ProjectAnalysisTool.d.ts.map +1 -0
- package/dist/tools/ProjectAnalysisTool.js +428 -0
- package/dist/tools/ProjectAnalysisTool.js.map +1 -0
- package/dist/tools/ToolRegistry.d.ts +59 -0
- package/dist/tools/ToolRegistry.d.ts.map +1 -0
- package/dist/tools/ToolRegistry.js +162 -0
- package/dist/tools/ToolRegistry.js.map +1 -0
- package/dist/tools/TransformationTool.d.ts +30 -0
- package/dist/tools/TransformationTool.d.ts.map +1 -0
- package/dist/tools/TransformationTool.js +50 -0
- package/dist/tools/TransformationTool.js.map +1 -0
- package/dist/tools/index.d.ts +10 -0
- package/dist/tools/index.d.ts.map +1 -0
- package/dist/tools/index.js +32 -0
- package/dist/tools/index.js.map +1 -0
- package/dist/tools/types.d.ts +74 -0
- package/dist/tools/types.d.ts.map +1 -0
- package/dist/tools/types.js +6 -0
- package/dist/tools/types.js.map +1 -0
- package/dist/transformation/transformers/LayoutOptimizer.d.ts +8 -0
- package/dist/transformation/transformers/LayoutOptimizer.d.ts.map +1 -1
- package/dist/transformation/transformers/LayoutOptimizer.js +157 -15
- package/dist/transformation/transformers/LayoutOptimizer.js.map +1 -1
- package/dist/version/VersionManager.d.ts +128 -0
- package/dist/version/VersionManager.d.ts.map +1 -0
- package/dist/version/VersionManager.js +400 -0
- package/dist/version/VersionManager.js.map +1 -0
- package/dist/version/index.d.ts +5 -0
- package/dist/version/index.d.ts.map +1 -0
- package/dist/version/index.js +21 -0
- package/dist/version/index.js.map +1 -0
- package/package.json +3 -1
- package/QUICKSTART.md +0 -178
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,66 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.8.0] - 2026-02-28
|
|
4
|
+
|
|
5
|
+
### Added
|
|
6
|
+
- Version management system (VersionManager) for tracking code generation history
|
|
7
|
+
- Feedback loop system (FeedbackLoop) for iterative improvement based on user feedback
|
|
8
|
+
- LLM response caching (LLMCache) with TTL and LRU eviction
|
|
9
|
+
- Token usage monitoring (TokenMonitor) with budget management and cost tracking
|
|
10
|
+
- Parallel processing (ParallelProcessor) for concurrent component generation
|
|
11
|
+
- Version comparison and diff generation
|
|
12
|
+
- Version rollback functionality
|
|
13
|
+
- Feedback analysis with automatic change detection
|
|
14
|
+
- Cache persistence to disk
|
|
15
|
+
- Token usage statistics by model and operation
|
|
16
|
+
- Component independence analysis for parallel execution
|
|
17
|
+
|
|
18
|
+
### Changed
|
|
19
|
+
- Replaced uuid package with crypto.randomUUID for version ID generation
|
|
20
|
+
- Enhanced performance optimization capabilities
|
|
21
|
+
- Improved iteration tracking and management
|
|
22
|
+
|
|
23
|
+
### Tests
|
|
24
|
+
- Added 79 new tests for Phase 3 modules
|
|
25
|
+
- Total test count: 533+ tests (all passing)
|
|
26
|
+
- Added comprehensive unit tests for VersionManager (20 tests)
|
|
27
|
+
- Added comprehensive unit tests for FeedbackLoop (15 tests)
|
|
28
|
+
- Added comprehensive unit tests for LLMCache (18 tests)
|
|
29
|
+
- Added comprehensive unit tests for TokenMonitor (14 tests)
|
|
30
|
+
- Added comprehensive unit tests for ParallelProcessor (12 tests)
|
|
31
|
+
|
|
32
|
+
## [0.7.0] - 2026-02-27
|
|
33
|
+
|
|
34
|
+
### Added
|
|
35
|
+
- MCP (Model Context Protocol) server implementation for integration with Claude Desktop and Kiro IDE
|
|
36
|
+
- Kiro Skill interface for seamless design-to-code workflow in Kiro IDE
|
|
37
|
+
- Design consistency checker for analyzing design token consistency
|
|
38
|
+
- Interactive prototype generator with state management
|
|
39
|
+
- Custom template system for code generation
|
|
40
|
+
- Comprehensive property-based tests for agent components (ConversationContext, DecisionEngine, ExecutionOrchestrator, IntentUnderstandingEngine)
|
|
41
|
+
- Property-based tests for ToolRegistry
|
|
42
|
+
- End-to-end agent workflow tests
|
|
43
|
+
- Cross-delivery consistency integration tests
|
|
44
|
+
- Agent architecture with conversation context, intent understanding, decision engine, and execution orchestrator
|
|
45
|
+
|
|
46
|
+
### Changed
|
|
47
|
+
- Updated README with bilingual support (English and Chinese)
|
|
48
|
+
- Refined documentation structure and removed redundant content
|
|
49
|
+
- Fixed broken documentation links
|
|
50
|
+
- Improved CLI guide with comprehensive examples and troubleshooting
|
|
51
|
+
|
|
52
|
+
### Documentation
|
|
53
|
+
- Added MCP Service Configuration Guide (docs/MCP_GUIDE.md)
|
|
54
|
+
- Added Kiro Skill Usage Guide (docs/KIRO_SKILL_GUIDE.md)
|
|
55
|
+
- Added CLI Usage Guide (docs/CLI_GUIDE.md)
|
|
56
|
+
- Created README.zh-CN.md for Chinese documentation
|
|
57
|
+
- Updated QUICKSTART.md with clearer instructions
|
|
58
|
+
|
|
59
|
+
### Tests
|
|
60
|
+
- Total test count: 222 tests (all passing)
|
|
61
|
+
- Added 7 new test files for agent components and integrations
|
|
62
|
+
- Updated jest.config.js to handle uuid module transformation
|
|
63
|
+
|
|
3
64
|
## [0.6.0] - 2026-02-13
|
|
4
65
|
|
|
5
66
|
### Added
|
package/README.md
CHANGED
|
@@ -2,11 +2,34 @@
|
|
|
2
2
|
|
|
3
3
|
Convert Figma designs to production-ready React/Vue components. Supports CSS Modules, Tailwind, and plain CSS.
|
|
4
4
|
|
|
5
|
-
> 📖 New here? Check the [Quick Start Guide](QUICKSTART.md) for step-by-step setup.
|
|
5
|
+
> 📖 New here? Check the [Quick Start Guide](docs/QUICKSTART.md) for step-by-step setup.
|
|
6
|
+
>
|
|
7
|
+
> English | [中文](README.zh-CN.md)
|
|
8
|
+
|
|
9
|
+
## Usage
|
|
10
|
+
|
|
11
|
+
### 1. CLI Tool
|
|
12
|
+
For local development and CI/CD integration.
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npx figma-to-code-agent --token YOUR_TOKEN --file FILE_KEY --framework react --output ./output
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
[Full CLI Guide →](docs/CLI_GUIDE.md)
|
|
19
|
+
|
|
20
|
+
### 2. MCP Service
|
|
21
|
+
Integrate with Claude Desktop or Kiro IDE, generate code through AI conversations.
|
|
22
|
+
|
|
23
|
+
[MCP Configuration Guide →](docs/MCP_GUIDE.md)
|
|
24
|
+
|
|
25
|
+
### 3. Kiro Skill
|
|
26
|
+
Use as a Skill in Kiro IDE for seamless design-to-code workflow.
|
|
27
|
+
|
|
28
|
+
[Kiro Skill Guide →](docs/KIRO_SKILL_GUIDE.md)
|
|
6
29
|
|
|
7
30
|
## Examples
|
|
8
31
|
|
|
9
|
-
### Example 1 — MIUI12
|
|
32
|
+
### Example 1 — MIUI12 Website (Global Navigation)
|
|
10
33
|
|
|
11
34
|
| Original Design | React | Vue |
|
|
12
35
|
|:-:|:-:|:-:|
|
|
@@ -34,32 +57,33 @@ Convert Figma designs to production-ready React/Vue components. Supports CSS Mod
|
|
|
34
57
|
|
|
35
58
|
- 🎨 Extract designs from Figma API with caching and rate-limit handling
|
|
36
59
|
- ⚛️ Generate React (.jsx/.tsx) and Vue (.vue) components
|
|
37
|
-
- 🎭 CSS Modules, Tailwind CSS
|
|
38
|
-
- 📐
|
|
39
|
-
- 🖼️
|
|
40
|
-
- 🔤 Full typography support (font family, size, weight, line-height, letter-spacing, color)
|
|
41
|
-
- 👁️ Figma layer filtering (hidden layers, mask shapes)
|
|
60
|
+
- 🎭 Support CSS Modules, Tailwind CSS, and plain CSS
|
|
61
|
+
- 📐 Responsive layout with viewport adaptation
|
|
62
|
+
- 🖼️ 2x resolution image export, auto-detect vector icons
|
|
42
63
|
- 🎯 Design token extraction (CSS variables, SCSS, JSON, JS)
|
|
43
|
-
-
|
|
44
|
-
-
|
|
45
|
-
- 🖼️ Asset management (image dedup, SVG-first, semantic naming, import generation)
|
|
46
|
-
- 🔍 Visual validation (Puppeteer rendering, pixel comparison, similarity scoring)
|
|
47
|
-
- ♿ Accessibility enhancement (ARIA roles, alt text, landmark detection)
|
|
48
|
-
- ⚡ Performance optimization (lazy loading, code splitting hints, redundant wrapper removal)
|
|
49
|
-
- 🎨 Style deduplication (merge identical CSS rules across components)
|
|
50
|
-
- 📱 Responsive code generation (media queries from breakpoint metadata)
|
|
64
|
+
- ♿ Accessibility enhancements (ARIA roles, alt text)
|
|
65
|
+
- ⚡ Performance optimization (lazy loading, code splitting, style deduplication)
|
|
51
66
|
- 🤖 Optional AI enhancements (semantic naming, component splitting, code optimization)
|
|
67
|
+
- 🔌 MCP server (integrate with Claude Desktop / Kiro IDE)
|
|
68
|
+
- 🎯 Kiro Skill (use as a skill in Kiro IDE)
|
|
69
|
+
- 📊 Design consistency checker
|
|
70
|
+
- 🎮 Interactive prototype generator
|
|
52
71
|
|
|
53
72
|
## Install
|
|
54
73
|
|
|
74
|
+
### Global Installation
|
|
55
75
|
```bash
|
|
56
76
|
npm install -g figma-to-code-agent
|
|
57
77
|
```
|
|
58
78
|
|
|
59
|
-
|
|
79
|
+
### Local Installation
|
|
80
|
+
```bash
|
|
81
|
+
npm install figma-to-code-agent
|
|
82
|
+
```
|
|
60
83
|
|
|
84
|
+
### Use with npx (no installation required)
|
|
61
85
|
```bash
|
|
62
|
-
npx figma-to-code-agent --token
|
|
86
|
+
npx figma-to-code-agent --token YOUR_TOKEN --file FILE_KEY --output ./output
|
|
63
87
|
```
|
|
64
88
|
|
|
65
89
|
## Quick Start
|
|
@@ -73,91 +97,60 @@ npx figma-to-code-agent \
|
|
|
73
97
|
--framework react \
|
|
74
98
|
--output ./output
|
|
75
99
|
|
|
76
|
-
# Generate and preview
|
|
100
|
+
# Generate and preview
|
|
77
101
|
npx figma-to-code-agent \
|
|
78
102
|
--token YOUR_FIGMA_TOKEN \
|
|
79
103
|
--file FILE_KEY \
|
|
80
|
-
--node NODE_ID \
|
|
81
104
|
--framework react \
|
|
82
105
|
--output ./output \
|
|
83
106
|
--preview
|
|
84
107
|
```
|
|
85
108
|
|
|
109
|
+
For more usage options, see the [Quick Start Guide](docs/QUICKSTART.md).
|
|
110
|
+
|
|
86
111
|
## How It Works
|
|
87
112
|
|
|
88
|
-
1.
|
|
89
|
-
2.
|
|
90
|
-
3.
|
|
91
|
-
4.
|
|
92
|
-
5.
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
8. Deduplicates identical CSS rules and generates responsive media queries
|
|
96
|
-
9. Wraps output in a responsive scale container (no horizontal scrollbar)
|
|
113
|
+
1. **Extract**: Fetch design data via Figma API (with caching)
|
|
114
|
+
2. **Parse**: Parse design tree into intermediate AST
|
|
115
|
+
3. **Transform**: Apply transformation pipeline (flatten, extract components, optimize, semantic naming)
|
|
116
|
+
4. **Generate**: Generate framework-specific component code
|
|
117
|
+
5. **Optimize**: Style deduplication, responsive handling, accessibility enhancements
|
|
118
|
+
|
|
119
|
+
For detailed architecture, see [Architecture Documentation](spec/ARCHITECTURE.md).
|
|
97
120
|
|
|
98
121
|
## CLI Options
|
|
99
122
|
|
|
100
123
|
| Option | Description | Default |
|
|
101
124
|
|--------|-------------|---------|
|
|
102
|
-
| `--token <token>` | Figma API token
|
|
125
|
+
| `--token <token>` | Figma API token | — |
|
|
103
126
|
| `--file <key>` | Figma file key | — |
|
|
104
|
-
| `--node <id>` | Target node ID
|
|
127
|
+
| `--node <id>` | Target node ID | root |
|
|
105
128
|
| `--framework` | `react` or `vue` | `react` |
|
|
106
129
|
| `--style` | `css-modules`, `tailwind`, or `css` | `css-modules` |
|
|
107
|
-
| `--typescript` | Enable TypeScript
|
|
130
|
+
| `--typescript` | Enable TypeScript | `false` |
|
|
108
131
|
| `--output <dir>` | Output directory | `./output` |
|
|
109
|
-
| `--extract-tokens <fmt>` | Extract design tokens: `css`, `scss`, `json`, `js` | — |
|
|
110
132
|
| `--preview` | Preview in browser after generation | — |
|
|
133
|
+
| `--mcp` | Start MCP server mode | — |
|
|
111
134
|
|
|
112
|
-
### AI Options
|
|
135
|
+
### AI Options
|
|
113
136
|
|
|
114
137
|
| Option | Description |
|
|
115
138
|
|--------|-------------|
|
|
116
139
|
| `--llm-provider` | `bedrock`, `openai`, or `anthropic` |
|
|
117
140
|
| `--llm-model` | Model name |
|
|
118
|
-
| `--
|
|
119
|
-
| `--llm-api-key` | API key for OpenAI/Anthropic (or `LLM_API_KEY` env) |
|
|
120
|
-
| `--ai-naming` | AI-powered semantic component naming |
|
|
121
|
-
| `--ai-splitting` | AI-powered component splitting |
|
|
141
|
+
| `--ai-naming` | AI-powered semantic naming |
|
|
122
142
|
| `--ai-optimization` | AI-powered code optimization |
|
|
123
|
-
| `--ai-layout` | AI-powered layout analysis |
|
|
124
|
-
|
|
125
|
-
## Programmatic API
|
|
126
143
|
|
|
127
|
-
|
|
128
|
-
import { FigmaToCodeAgent } from 'figma-to-code-agent'
|
|
144
|
+
For complete options, see [CLI Usage Guide](docs/CLI_GUIDE.md).
|
|
129
145
|
|
|
130
|
-
|
|
131
|
-
figmaToken: 'your-token',
|
|
132
|
-
fileKey: 'your-file-key',
|
|
133
|
-
framework: 'react',
|
|
134
|
-
styleMode: 'css-modules',
|
|
135
|
-
typescript: false,
|
|
136
|
-
outputDir: './output',
|
|
137
|
-
extractTokens: 'css', // optional: 'css' | 'scss' | 'json' | 'js'
|
|
138
|
-
})
|
|
146
|
+
## Documentation
|
|
139
147
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
src/
|
|
147
|
-
├── extraction/ # Figma API client, MCP protocol, caching
|
|
148
|
-
├── transformation/ # AST parsing, layout optimization, transformers
|
|
149
|
-
│ └── transformers/ # Flatten, component extraction, semantic naming,
|
|
150
|
-
│ # style merger, responsive merger, accessibility,
|
|
151
|
-
│ # performance optimizer, AI-powered transformers
|
|
152
|
-
├── generation/ # React and Vue code generators, file organizer
|
|
153
|
-
├── tokens/ # Design token extraction and export
|
|
154
|
-
├── assets/ # Asset management (image extraction, dedup)
|
|
155
|
-
├── validation/ # Visual validation (Puppeteer, pixel comparison)
|
|
156
|
-
├── config/ # Configuration management
|
|
157
|
-
├── errors/ # Error handling and recovery
|
|
158
|
-
├── llm/ # LLM providers (Bedrock, OpenAI)
|
|
159
|
-
└── cli.ts # CLI entry point
|
|
160
|
-
```
|
|
148
|
+
- 📖 [Quick Start](docs/QUICKSTART.md) - Get started in 5 minutes
|
|
149
|
+
- 🖥️ [CLI Guide](docs/CLI_GUIDE.md) - Complete CLI reference
|
|
150
|
+
- 🔌 [MCP Guide](docs/MCP_GUIDE.md) - Integrate with Claude/Kiro
|
|
151
|
+
- 🎯 [Kiro Skill Guide](docs/KIRO_SKILL_GUIDE.md) - Use in Kiro IDE
|
|
152
|
+
- 🏗️ [Architecture](spec/ARCHITECTURE.md) - System architecture
|
|
153
|
+
- 🎨 [Examples](assets/) - Real conversion examples
|
|
161
154
|
|
|
162
155
|
## Development
|
|
163
156
|
|
|
@@ -166,16 +159,15 @@ git clone https://github.com/lewiscutey/figma-to-code-agent.git
|
|
|
166
159
|
cd figma-to-code-agent
|
|
167
160
|
npm install
|
|
168
161
|
npm run build # Compile TypeScript
|
|
169
|
-
npm test # Run
|
|
170
|
-
npm run lint #
|
|
171
|
-
npm run format # Prettier
|
|
162
|
+
npm test # Run tests (222 tests)
|
|
163
|
+
npm run lint # Lint code
|
|
172
164
|
```
|
|
173
165
|
|
|
174
166
|
## Requirements
|
|
175
167
|
|
|
176
168
|
- Node.js 18+
|
|
177
|
-
-
|
|
169
|
+
- Figma access token ([Get token](https://www.figma.com/developers/api#access-tokens))
|
|
178
170
|
|
|
179
171
|
## License
|
|
180
172
|
|
|
181
|
-
MIT
|
|
173
|
+
MIT License - See [LICENSE](LICENSE) file for details
|
package/README.zh-CN.md
ADDED
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
# Figma-to-Code Agent
|
|
2
|
+
|
|
3
|
+
将 Figma 设计转换为生产就绪的 React/Vue 组件。支持 CSS Modules、Tailwind 和纯 CSS。
|
|
4
|
+
|
|
5
|
+
> 📖 新手入门?查看 [快速入门指南](docs/QUICKSTART.md) 获取详细步骤。
|
|
6
|
+
>
|
|
7
|
+
> [English](README.md) | 中文
|
|
8
|
+
|
|
9
|
+
## 使用方式
|
|
10
|
+
|
|
11
|
+
### 1. 命令行工具(CLI)
|
|
12
|
+
适合本地开发和 CI/CD 集成。
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npx figma-to-code-agent --token YOUR_TOKEN --file FILE_KEY --framework react --output ./output
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
[完整 CLI 指南 →](docs/CLI_GUIDE.md)
|
|
19
|
+
|
|
20
|
+
### 2. MCP 服务
|
|
21
|
+
集成到 Claude Desktop 或 Kiro IDE,通过 AI 对话生成代码。
|
|
22
|
+
|
|
23
|
+
[MCP 配置指南 →](docs/MCP_GUIDE.md)
|
|
24
|
+
|
|
25
|
+
### 3. Kiro Skill
|
|
26
|
+
在 Kiro IDE 中作为 Skill 使用,提供无缝的设计到代码工作流。
|
|
27
|
+
|
|
28
|
+
[Kiro Skill 指南 →](docs/KIRO_SKILL_GUIDE.md)
|
|
29
|
+
|
|
30
|
+
## 示例展示
|
|
31
|
+
|
|
32
|
+
### 示例 1 — MIUI12 官网(全局导航)
|
|
33
|
+
|
|
34
|
+
| 原始设计 | React | Vue |
|
|
35
|
+
|:-:|:-:|:-:|
|
|
36
|
+
|  |  |  |
|
|
37
|
+
|
|
38
|
+
### 示例 2 — 主页(World Peas)
|
|
39
|
+
|
|
40
|
+
| 原始设计 | React | Vue |
|
|
41
|
+
|:-:|:-:|:-:|
|
|
42
|
+
|  |  |  |
|
|
43
|
+
|
|
44
|
+
### 示例 3 — 购物车
|
|
45
|
+
|
|
46
|
+
| 原始设计 | React | Vue |
|
|
47
|
+
|:-:|:-:|:-:|
|
|
48
|
+
|  |  |  |
|
|
49
|
+
|
|
50
|
+
### 示例 4 — 产品页面
|
|
51
|
+
|
|
52
|
+
| 原始设计 | React | Vue |
|
|
53
|
+
|:-:|:-:|:-:|
|
|
54
|
+
|  |  |  |
|
|
55
|
+
|
|
56
|
+
## 功能特性
|
|
57
|
+
|
|
58
|
+
- 🎨 从 Figma API 提取设计,支持缓存和速率限制处理
|
|
59
|
+
- ⚛️ 生成 React (.jsx/.tsx) 和 Vue (.vue) 组件
|
|
60
|
+
- 🎭 支持 CSS Modules、Tailwind CSS 和纯 CSS
|
|
61
|
+
- 📐 响应式布局,自适应视口
|
|
62
|
+
- 🖼️ 2x 分辨率图片导出,自动检测矢量图标
|
|
63
|
+
- 🎯 设计令牌提取(CSS 变量、SCSS、JSON、JS)
|
|
64
|
+
- ♿ 无障碍增强(ARIA 角色、alt 文本)
|
|
65
|
+
- ⚡ 性能优化(懒加载、代码分割、样式去重)
|
|
66
|
+
- 🤖 可选 AI 增强(语义命名、组件拆分、代码优化)
|
|
67
|
+
- 🔌 MCP 服务器(集成到 Claude Desktop / Kiro IDE)
|
|
68
|
+
- 🎯 Kiro Skill(在 Kiro IDE 中作为技能使用)
|
|
69
|
+
- 📊 设计一致性检查器
|
|
70
|
+
- 🎮 交互原型生成器
|
|
71
|
+
|
|
72
|
+
## 安装
|
|
73
|
+
|
|
74
|
+
### 全局安装
|
|
75
|
+
```bash
|
|
76
|
+
npm install -g figma-to-code-agent
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### 本地安装
|
|
80
|
+
```bash
|
|
81
|
+
npm install figma-to-code-agent
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### 使用 npx(无需安装)
|
|
85
|
+
```bash
|
|
86
|
+
npx figma-to-code-agent --token YOUR_TOKEN --file FILE_KEY --output ./output
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## 快速开始
|
|
90
|
+
|
|
91
|
+
```bash
|
|
92
|
+
# 生成 React 组件
|
|
93
|
+
npx figma-to-code-agent \
|
|
94
|
+
--token YOUR_FIGMA_TOKEN \
|
|
95
|
+
--file FILE_KEY \
|
|
96
|
+
--node NODE_ID \
|
|
97
|
+
--framework react \
|
|
98
|
+
--output ./output
|
|
99
|
+
|
|
100
|
+
# 生成并预览
|
|
101
|
+
npx figma-to-code-agent \
|
|
102
|
+
--token YOUR_FIGMA_TOKEN \
|
|
103
|
+
--file FILE_KEY \
|
|
104
|
+
--framework react \
|
|
105
|
+
--output ./output \
|
|
106
|
+
--preview
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
更多使用方式请查看 [快速入门指南](docs/QUICKSTART.md)。
|
|
110
|
+
|
|
111
|
+
## 工作原理
|
|
112
|
+
|
|
113
|
+
1. **提取**:通过 Figma API 获取设计数据(支持缓存)
|
|
114
|
+
2. **解析**:将设计树解析为中间 AST
|
|
115
|
+
3. **转换**:应用转换管道(扁平化、组件提取、优化、语义命名)
|
|
116
|
+
4. **生成**:生成框架特定的组件代码
|
|
117
|
+
5. **优化**:样式去重、响应式处理、无障碍增强
|
|
118
|
+
|
|
119
|
+
详细架构请参考 [系统架构文档](spec/ARCHITECTURE.md)。
|
|
120
|
+
|
|
121
|
+
## CLI 选项
|
|
122
|
+
|
|
123
|
+
| 选项 | 描述 | 默认值 |
|
|
124
|
+
|--------|-------------|---------|
|
|
125
|
+
| `--token <token>` | Figma API 令牌 | — |
|
|
126
|
+
| `--file <key>` | Figma 文件 Key | — |
|
|
127
|
+
| `--node <id>` | 目标节点 ID | root |
|
|
128
|
+
| `--framework` | `react` 或 `vue` | `react` |
|
|
129
|
+
| `--style` | `css-modules`、`tailwind` 或 `css` | `css-modules` |
|
|
130
|
+
| `--typescript` | 启用 TypeScript | `false` |
|
|
131
|
+
| `--output <dir>` | 输出目录 | `./output` |
|
|
132
|
+
| `--preview` | 生成后在浏览器中预览 | — |
|
|
133
|
+
| `--mcp` | 启动 MCP 服务器模式 | — |
|
|
134
|
+
|
|
135
|
+
### AI 选项
|
|
136
|
+
|
|
137
|
+
| 选项 | 描述 |
|
|
138
|
+
|--------|-------------|
|
|
139
|
+
| `--llm-provider` | `bedrock`、`openai` 或 `anthropic` |
|
|
140
|
+
| `--llm-model` | 模型名称 |
|
|
141
|
+
| `--ai-naming` | AI 驱动的语义命名 |
|
|
142
|
+
| `--ai-optimization` | AI 驱动的代码优化 |
|
|
143
|
+
|
|
144
|
+
完整选项请参考 [CLI 使用指南](docs/CLI_GUIDE.md)。
|
|
145
|
+
|
|
146
|
+
## 文档
|
|
147
|
+
|
|
148
|
+
- 📖 [快速入门](docs/QUICKSTART.md) - 5 分钟快速上手
|
|
149
|
+
- 🖥️ [CLI 指南](docs/CLI_GUIDE.md) - 命令行完整参考
|
|
150
|
+
- 🔌 [MCP 指南](docs/MCP_GUIDE.md) - 集成到 Claude/Kiro
|
|
151
|
+
- 🎯 [Kiro Skill 指南](docs/KIRO_SKILL_GUIDE.md) - Kiro IDE 使用
|
|
152
|
+
- 🏗️ [系统架构](spec/ARCHITECTURE.md) - 架构设计
|
|
153
|
+
- 🎨 [示例项目](assets/) - 真实转换示例
|
|
154
|
+
|
|
155
|
+
## 开发
|
|
156
|
+
|
|
157
|
+
```bash
|
|
158
|
+
git clone https://github.com/lewiscutey/figma-to-code-agent.git
|
|
159
|
+
cd figma-to-code-agent
|
|
160
|
+
npm install
|
|
161
|
+
npm run build # 编译 TypeScript
|
|
162
|
+
npm test # 运行测试(222 个测试)
|
|
163
|
+
npm run lint # 代码检查
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
## 系统要求
|
|
167
|
+
|
|
168
|
+
- Node.js 18+
|
|
169
|
+
- Figma 访问令牌([获取令牌](https://www.figma.com/developers/api#access-tokens))
|
|
170
|
+
|
|
171
|
+
## 许可证
|
|
172
|
+
|
|
173
|
+
MIT License - 详见 [LICENSE](LICENSE) 文件
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import type { ConversationContext as IConversationContext, Message, Intent, TaskState, UserPreferences, Artifact } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* 对话上下文管理器
|
|
4
|
+
* 维护用户意图、历史交互和任务状态
|
|
5
|
+
*/
|
|
6
|
+
export declare class ConversationContextManager {
|
|
7
|
+
private context;
|
|
8
|
+
private persistencePath?;
|
|
9
|
+
constructor(sessionId?: string, persistencePath?: string);
|
|
10
|
+
/**
|
|
11
|
+
* 创建新的对话上下文
|
|
12
|
+
*/
|
|
13
|
+
private createNewContext;
|
|
14
|
+
/**
|
|
15
|
+
* 获取当前上下文
|
|
16
|
+
*/
|
|
17
|
+
getContext(): IConversationContext;
|
|
18
|
+
/**
|
|
19
|
+
* 添加消息到历史记录
|
|
20
|
+
*/
|
|
21
|
+
addMessage(role: Message['role'], content: string, metadata?: Record<string, any>): void;
|
|
22
|
+
/**
|
|
23
|
+
* 设置用户意图
|
|
24
|
+
*/
|
|
25
|
+
setIntent(intent: Intent): void;
|
|
26
|
+
/**
|
|
27
|
+
* 获取用户意图
|
|
28
|
+
*/
|
|
29
|
+
getIntent(): Intent | null;
|
|
30
|
+
/**
|
|
31
|
+
* 更新任务状态
|
|
32
|
+
*/
|
|
33
|
+
updateTaskState(updates: Partial<TaskState>): void;
|
|
34
|
+
/**
|
|
35
|
+
* 获取任务状态
|
|
36
|
+
*/
|
|
37
|
+
getTaskState(): TaskState;
|
|
38
|
+
/**
|
|
39
|
+
* 创建检查点
|
|
40
|
+
*/
|
|
41
|
+
createCheckpoint(data: any): string;
|
|
42
|
+
/**
|
|
43
|
+
* 从检查点恢复
|
|
44
|
+
*/
|
|
45
|
+
restoreFromCheckpoint(checkpointId: string): boolean;
|
|
46
|
+
/**
|
|
47
|
+
* 更新用户偏好
|
|
48
|
+
*/
|
|
49
|
+
updateUserPreferences(preferences: Partial<UserPreferences>): void;
|
|
50
|
+
/**
|
|
51
|
+
* 获取用户偏好
|
|
52
|
+
*/
|
|
53
|
+
getUserPreferences(): UserPreferences;
|
|
54
|
+
/**
|
|
55
|
+
* 添加生成的产物
|
|
56
|
+
*/
|
|
57
|
+
addArtifact(artifact: Omit<Artifact, 'id' | 'timestamp'>): string;
|
|
58
|
+
/**
|
|
59
|
+
* 获取所有产物
|
|
60
|
+
*/
|
|
61
|
+
getArtifacts(): Artifact[];
|
|
62
|
+
/**
|
|
63
|
+
* 获取特定版本的产物
|
|
64
|
+
*/
|
|
65
|
+
getArtifactsByVersion(version: number): Artifact[];
|
|
66
|
+
/**
|
|
67
|
+
* 获取历史消息
|
|
68
|
+
*/
|
|
69
|
+
getHistory(): Message[];
|
|
70
|
+
/**
|
|
71
|
+
* 清空历史记录(保留用户偏好)
|
|
72
|
+
*/
|
|
73
|
+
clearHistory(): void;
|
|
74
|
+
/**
|
|
75
|
+
* 持久化上下文到文件
|
|
76
|
+
*/
|
|
77
|
+
private persist;
|
|
78
|
+
/**
|
|
79
|
+
* 从文件加载上下文
|
|
80
|
+
*/
|
|
81
|
+
private loadFromFile;
|
|
82
|
+
/**
|
|
83
|
+
* 导出上下文为 JSON
|
|
84
|
+
*/
|
|
85
|
+
export(): string;
|
|
86
|
+
/**
|
|
87
|
+
* 从 JSON 导入上下文
|
|
88
|
+
*/
|
|
89
|
+
import(json: string): boolean;
|
|
90
|
+
}
|
|
91
|
+
//# sourceMappingURL=ConversationContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ConversationContext.d.ts","sourceRoot":"","sources":["../../src/agent/ConversationContext.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,mBAAmB,IAAI,oBAAoB,EAC3C,OAAO,EACP,MAAM,EACN,SAAS,EACT,eAAe,EACf,QAAQ,EAET,MAAM,SAAS,CAAC;AAEjB;;;GAGG;AACH,qBAAa,0BAA0B;IACrC,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,eAAe,CAAC,CAAS;gBAErB,SAAS,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,MAAM;IAYxD;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAoBxB;;OAEG;IACH,UAAU,IAAI,oBAAoB;IAIlC;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI;IAWxF;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAK/B;;OAEG;IACH,SAAS,IAAI,MAAM,GAAG,IAAI;IAI1B;;OAEG;IACH,eAAe,CAAC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI;IAQlD;;OAEG;IACH,YAAY,IAAI,SAAS;IAIzB;;OAEG;IACH,gBAAgB,CAAC,IAAI,EAAE,GAAG,GAAG,MAAM;IAYnC;;OAEG;IACH,qBAAqB,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO;IAiBpD;;OAEG;IACH,qBAAqB,CAAC,WAAW,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,IAAI;IAQlE;;OAEG;IACH,kBAAkB,IAAI,eAAe;IAIrC;;OAEG;IACH,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,WAAW,CAAC,GAAG,MAAM;IAWjE;;OAEG;IACH,YAAY,IAAI,QAAQ,EAAE;IAI1B;;OAEG;IACH,qBAAqB,CAAC,OAAO,EAAE,MAAM,GAAG,QAAQ,EAAE;IAIlD;;OAEG;IACH,UAAU,IAAI,OAAO,EAAE;IAIvB;;OAEG;IACH,YAAY,IAAI,IAAI;IAYpB;;OAEG;IACH,OAAO,CAAC,OAAO;IAgBf;;OAEG;IACH,OAAO,CAAC,YAAY;IAUpB;;OAEG;IACH,MAAM,IAAI,MAAM;IAIhB;;OAEG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;CAW9B"}
|