Kaleidocode
A Figma plugin that allows you to convert VS Code themes to Figma color libraries, swap and relink themes, and create new VS Code themes from scratch
Install / Use
/learn @kaleidocode-app/KaleidocodeREADME
Features
Generate Themes
Create color guides and color styles based off of a selection of pre-loaded VS Code color themes (Default Dark, Default Light, Ayu Light, Dracula, and Nord).
Swap Themes
Easily swap components between color themes and relink color styles if they have become detached.
Create Custom Themes
Paste in a JSON file for your custom VS Code theme or other VS Code themes not currently in the plugin.
How to use
1. Generate color styles
First, you'll need to generate color guides and styles in your new file. In the "Generate" tab, select the themes you'd like to create or Select All themes.
<img width="300" src="https://pro2-bar.myportfolio.com/v1/assets/4e633164-4a32-429c-b8f4-17e9f5a13f60/a7067dcb-6cb6-4509-93ab-894412829b5f_rw_1200.png?h=be5166f8c62cc1ba848b30c91f3a86d8" />2. Create a custom theme
To create a custom theme, paste in the JSON for your theme into the text box. Note, this should match the formatting for all other VS Code color themes, where the colors are defined "activityBar.background": "#fafafa"
3. Swap themes
To swap themes, simply select the frame with all the components you'd like to swap, select the theme you'd like to switch to in the Swap tab, and click Swap Theme. The themes must be present in the file to switch themes.
You can also relink color styles by having the layers name the same name as their desired color and appending three dashes (---). For example, the side bar background layer would need to be named ---sideBar.background. This is what enables Kaleidocode to go find the color style for the desired theme and relink it.
Building the source code
This plugin template uses Typescript. If you are familiar with Javascript, Typescript will look very familiar. In fact, valid Javascript code is already valid Typescript code.
Typescript adds type annotations to variables. This allows code editors such as Visual Studio Code to provide information about the Figma API while you are writing code, as well as help catch bugs you previously didn't notice.
For more information, visit https://www.typescriptlang.org/
Using Typescript requires a compiler to convert Typescript (code.ts) into Javascript (code.js) for the browser to run.
To get the TypeScript compiler working:
- Download Visual Studio Code if you haven't already: https://code.visualstudio.com/.
- Install the TypeScript compiler globally:
sudo npm install -g typescript. - Open this directory in Visual Studio Code.
- Compile TypeScript to JavaScript: Run the "Terminal > Run Build Task..." menu item, then select "tsc: watch - tsconfig.json". You will have to do this again every time you reopen Visual Studio Code.
That's it! Visual Studio Code will regenerate the JavaScript file every time you save.
Related Skills
diffs
341.0kUse the diffs tool to produce real, shareable diffs (viewer URL, file artifact, or both) instead of manual edit summaries.
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
1.9kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
ui-ux-designer
Use this agent when you need to design, implement, or improve user interface components and user experience flows. Examples include: creating new pages or components, improving existing UI layouts, implementing responsive designs, optimizing user interactions, building forms or dashboards, analyzing existing UI through browser snapshots, or when you need to ensure UI components follow design system standards and shadcn/ui best practices.\n\n<example>\nContext: User needs to create a new dashboard page for team management.\nuser: "I need to create a team management dashboard where users can view team members, invite new members, and manage roles"\nassistant: "I'll use the ui-ux-designer agent to design and implement this dashboard with proper UX considerations, using shadcn/ui components and our design system tokens."\n</example>\n\n<example>\nContext: User wants to improve the user experience of an existing form.\nuser: "The signup form feels clunky and users are dropping off. Can you improve it?"\nassistant: "Let me use the ui-ux-designer agent to analyze the current form UX and implement improvements using our design system and shadcn/ui components."\n</example>\n\n<example>\nContext: User wants to evaluate and improve existing UI.\nuser: "Can you take a look at our pricing page and see how we can make it more appealing and user-friendly?"\nassistant: "I'll use the ui-ux-designer agent to take a snapshot of the current pricing page, analyze the UX against Notion-inspired design principles, and implement improvements using our design tokens."\n</example>
