@promptui-lib/mcp-agent 0.1.2 → 0.1.4
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/README.md +87 -5
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
<
|
|
2
|
-
<img src="./logo.png" alt="PromptUI Logo" width="200" />
|
|
3
|
-
</p>
|
|
4
|
-
|
|
5
|
-
<h1 align="center">PromptUI</h1>
|
|
1
|
+
<h1 align="center">🎨 PromptUI</h1>
|
|
6
2
|
|
|
7
3
|
<p align="center">
|
|
8
4
|
<a href="https://www.npmjs.com/package/@promptui-lib/cli"><img src="https://img.shields.io/npm/v/@promptui-lib/cli.svg" alt="npm version" /></a>
|
|
@@ -356,6 +352,92 @@ Create `promptui.config.json`:
|
|
|
356
352
|
|
|
357
353
|
---
|
|
358
354
|
|
|
355
|
+
## Figma Support
|
|
356
|
+
|
|
357
|
+
### What We Extract from Figma
|
|
358
|
+
|
|
359
|
+
| Element | Supported | Notes |
|
|
360
|
+
|---------|-----------|-------|
|
|
361
|
+
| **Colors** | ✅ Yes | RGB, Hex, tokens |
|
|
362
|
+
| **Spacing** | ✅ Yes | Padding, margin, gap |
|
|
363
|
+
| **Typography** | ✅ Yes | Font size, weight, family |
|
|
364
|
+
| **Border Radius** | ✅ Yes | All corners |
|
|
365
|
+
| **Shadows** | ✅ Yes | Drop shadow, inner shadow |
|
|
366
|
+
| **Layout** | ✅ Yes | Auto Layout → Flexbox |
|
|
367
|
+
| **SVG/Icons** | ✅ Yes | Exported as inline SVG |
|
|
368
|
+
| **Images** | ⚠️ Partial | Placeholder generated |
|
|
369
|
+
| **Gradients** | ⚠️ Partial | Linear gradients |
|
|
370
|
+
| **Animations** | ❌ No | Not available via Figma API |
|
|
371
|
+
| **Prototype Links** | ❌ No | Prototype data only |
|
|
372
|
+
|
|
373
|
+
### Bootstrap Components Mapping
|
|
374
|
+
|
|
375
|
+
Name your Figma frames to auto-map to Bootstrap components:
|
|
376
|
+
|
|
377
|
+
| Figma Frame Name | Bootstrap Output |
|
|
378
|
+
|------------------|------------------|
|
|
379
|
+
| `#Alert` | `<div class="alert">` |
|
|
380
|
+
| `#Badge` | `<span class="badge">` |
|
|
381
|
+
| `#Breadcrumb` | `<nav class="breadcrumb">` |
|
|
382
|
+
| `#Button` | `<button class="btn">` |
|
|
383
|
+
| `#ButtonGroup` | `<div class="btn-group">` |
|
|
384
|
+
| `#Card` | `<div class="card">` |
|
|
385
|
+
| `#Carousel` | `<div class="carousel">` |
|
|
386
|
+
| `#Collapse` | `<div class="collapse">` |
|
|
387
|
+
| `#Dropdown` | `<div class="dropdown">` |
|
|
388
|
+
| `#ListGroup` | `<ul class="list-group">` |
|
|
389
|
+
| `#Modal` | `<div class="modal">` |
|
|
390
|
+
| `#Navbar` | `<nav class="navbar">` |
|
|
391
|
+
| `#Nav` or `#Tabs` | `<ul class="nav">` |
|
|
392
|
+
| `#Offcanvas` | `<div class="offcanvas">` |
|
|
393
|
+
| `#Pagination` | `<nav class="pagination">` |
|
|
394
|
+
| `#Progress` | `<div class="progress">` |
|
|
395
|
+
| `#Spinner` | `<div class="spinner">` |
|
|
396
|
+
| `#Toast` | `<div class="toast">` |
|
|
397
|
+
| `#Tooltip` | `data-bs-toggle="tooltip"` |
|
|
398
|
+
|
|
399
|
+
### Material UI Components Mapping
|
|
400
|
+
|
|
401
|
+
| Figma Frame Name | MUI Output |
|
|
402
|
+
|------------------|------------|
|
|
403
|
+
| `#Alert` | `<Alert>` |
|
|
404
|
+
| `#Avatar` | `<Avatar>` |
|
|
405
|
+
| `#Badge` | `<Badge>` |
|
|
406
|
+
| `#Breadcrumb` | `<Breadcrumbs>` |
|
|
407
|
+
| `#Button` | `<Button>` |
|
|
408
|
+
| `#Card` | `<Card>` |
|
|
409
|
+
| `#Checkbox` | `<Checkbox>` |
|
|
410
|
+
| `#Chip` | `<Chip>` |
|
|
411
|
+
| `#Dialog` or `#Modal` | `<Dialog>` |
|
|
412
|
+
| `#Drawer` | `<Drawer>` |
|
|
413
|
+
| `#Input` or `#TextField` | `<TextField>` |
|
|
414
|
+
| `#List` | `<List>` |
|
|
415
|
+
| `#Menu` | `<Menu>` |
|
|
416
|
+
| `#Pagination` | `<Pagination>` |
|
|
417
|
+
| `#Progress` | `<LinearProgress>` |
|
|
418
|
+
| `#Radio` | `<Radio>` |
|
|
419
|
+
| `#Select` | `<Select>` |
|
|
420
|
+
| `#Slider` | `<Slider>` |
|
|
421
|
+
| `#Snackbar` | `<Snackbar>` |
|
|
422
|
+
| `#Switch` | `<Switch>` |
|
|
423
|
+
| `#Table` | `<Table>` |
|
|
424
|
+
| `#Tabs` | `<Tabs>` |
|
|
425
|
+
| `#Tooltip` | `<Tooltip>` |
|
|
426
|
+
|
|
427
|
+
### Form Components
|
|
428
|
+
|
|
429
|
+
| Figma Frame Name | React + SCSS | Bootstrap | MUI |
|
|
430
|
+
|------------------|--------------|-----------|-----|
|
|
431
|
+
| `#Input` | `<input>` | `<input class="form-control">` | `<TextField>` |
|
|
432
|
+
| `#Select` | `<select>` | `<select class="form-select">` | `<Select>` |
|
|
433
|
+
| `#Checkbox` | `<input type="checkbox">` | `<input class="form-check-input">` | `<Checkbox>` |
|
|
434
|
+
| `#Radio` | `<input type="radio">` | `<input class="form-check-input">` | `<Radio>` |
|
|
435
|
+
| `#Switch` | `<input type="checkbox">` | `<div class="form-switch">` | `<Switch>` |
|
|
436
|
+
| `#Textarea` | `<textarea>` | `<textarea class="form-control">` | `<TextField multiline>` |
|
|
437
|
+
| `#FormGroup` | `<div class="form-group">` | `<div class="mb-3">` | `<FormControl>` |
|
|
438
|
+
|
|
439
|
+
---
|
|
440
|
+
|
|
359
441
|
## For Designers
|
|
360
442
|
|
|
361
443
|
### Figma Rules
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@promptui-lib/mcp-agent",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "MCP Agent server for PromptUI - bridges Figma Plugin to code generation",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
"bin"
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@promptui-lib/core": "0.1.
|
|
38
|
-
"@promptui-lib/figma-parser": "0.1.
|
|
39
|
-
"@promptui-lib/codegen": "0.1.
|
|
37
|
+
"@promptui-lib/core": "0.1.4",
|
|
38
|
+
"@promptui-lib/figma-parser": "0.1.4",
|
|
39
|
+
"@promptui-lib/codegen": "0.1.4"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@types/node": "^20.0.0",
|