@bitovi/vybit 0.11.7 → 0.13.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/README.md +3 -2
- package/overlay/dist/overlay.js +5985 -2572
- package/package.json +5 -1
- package/panel/dist/assets/{DesignMode-Yfq3lye8.js → DesignMode-DotlKICs.js} +15 -15
- package/panel/dist/assets/index-BWb2WAKo.js +61 -0
- package/panel/dist/assets/index-DN-H7d0q.css +1 -0
- package/panel/dist/index.html +2 -2
- package/server/app.ts +2 -0
- package/server/mcp-tools.ts +115 -4
- package/server/queue.ts +46 -0
- package/server/storybook.ts +4 -1
- package/server/tailwind-v4.ts +10 -5
- package/server/websocket.ts +20 -1
- package/shared/types.ts +251 -3
- package/storybook-addon/preview-v10.ts +17 -12
- package/storybook-addon/preview.ts +17 -12
- package/panel/dist/assets/index-0eiAXBf9.js +0 -62
- package/panel/dist/assets/index-BWp0wXqx.css +0 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# VyBit
|
|
2
2
|
|
|
3
|
-
Change designs, draw mockups,
|
|
3
|
+
Change designs, draw mockups, provide suggestions, and report bugs __in your browser__ and send them to your favorite coding agent (Claude, Cursor, Copilot, etc) to be implemented. VyBit works with React apps built with Tailwind v3 or v4.
|
|
4
4
|
|
|
5
5
|
<img width="1453" height="903" alt="Cursor_and_Carton_Case_Management" src="https://github.com/user-attachments/assets/59b8e280-a827-4fa0-95e3-6c350afacbc9" />
|
|
6
6
|
|
|
@@ -10,8 +10,9 @@ Change designs, draw mockups, and provide suggestions __in your browser__ and se
|
|
|
10
10
|
|----------|----------|----------|
|
|
11
11
|
| 1 | Vibe code your design system | `Claude, build a button, card and badge. Add storybook.` |
|
|
12
12
|
| 2 | __Use VyBit to fine-tune your design system in Storybook__ - Adjust colors, spacing, shadows, layout and more | <img alt="image" src="https://github.com/user-attachments/assets/79ca04be-db8f-458f-8632-87cc040875db" /> |
|
|
13
|
-
| 3a | __Use VyBit to design features__ - drop
|
|
13
|
+
| 3a | __Use VyBit to design features__ - drop your design system components into pages | <img width="1481" height="922" alt="image" src="https://github.com/user-attachments/assets/415acdb7-102a-4c31-910b-10536c59ee4a" /> |
|
|
14
14
|
| 3b | __Use VyBit to design features__ - sketch a feature with the design canvas | <img width="1482" height="924" alt="image" src="https://github.com/user-attachments/assets/924e9733-baf6-4492-b9da-05fd27c2df93" /> |
|
|
15
|
+
| 3c | __Use VyBit to report bugs__ - send recent errors, console.logs, DOM snapshots, and events | Image Coming Soon |
|
|
15
16
|
| 4 | Add text or voice messages for extra context | <img width="376" height="261" alt="image" src="https://github.com/user-attachments/assets/546ea987-a0ad-4809-85c6-52fb91fb987e" /> |
|
|
16
17
|
|
|
17
18
|
Plus, VyBit always knows what page, components, and elements you're editing, making it easier for agents to know exactly what you want!
|