https://github.com/easazade/deziner
Design UI inside VS Code as structured code, with tokens as CSS variables, components as custom HTML elements, and AI agents able to read, edit, and generate your designs.
https://github.com/easazade/deziner
Last synced: 17 days ago
JSON representation
Design UI inside VS Code as structured code, with tokens as CSS variables, components as custom HTML elements, and AI agents able to read, edit, and generate your designs.
- Host: GitHub
- URL: https://github.com/easazade/deziner
- Owner: easazade
- Created: 2026-05-16T11:59:45.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-06-17T10:08:01.000Z (about 2 months ago)
- Last Synced: 2026-06-17T11:19:05.204Z (about 2 months ago)
- Language: TypeScript
- Size: 43.9 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Deziner
Deziner is a code-native UI design tool for VS Code.
It lets you design interfaces directly inside the VS Code, while turning design tokens into CSS variables and components into reusable HTML custom elements.
## What It Does
Deziner gives you a visual way to design UI inside VS Code, but keeps the design stored as structured code.
Instead of locking design inside a closed visual format, Deziner keeps it close to real HTML and CSS. This makes the design easier to understand, reuse, and move into actual projects.
## Why Deziner Exists
Design and development often live in separate worlds.
A design is created in one tool, then developers have to manually recreate it in code.
Deziner reduces that gap by making the design itself code-native.
The output is readable by developers, usable by projects, and understandable by AI agents.
## Core Features
- Design UI inside VS Code
- Define design tokens as code
- Generate CSS variables from tokens
- Define reusable components
- Generate HTML custom elements from components
- Keep design output readable and portable
- Allow AI agents to understand and modify designs
## AI-Friendly Design
Because Deziner stores design as structured code, AI agents can work with it more easily.
AI agents can help with things like:
- Creating new components
- Updating design tokens
- Changing layouts
- Generating component variations
- Refactoring design structures
- Translating components into React, Vue, Svelte, or other frameworks
---
# deziner README
This is the README for your extension "deziner". After writing up a brief description, we recommend including the following sections.
## Features
Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
For example if there is an image subfolder under your extension project workspace:
\!\[feature X\]\(images/feature-x.png\)
> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
## Requirements
If you have any requirements or dependencies, add a section describing those and how to install and configure them.
## Extension Settings
Include if your extension adds any VS Code settings through the `contributes.configuration` extension point.
For example:
This extension contributes the following settings:
- `myExtension.enable`: Enable/disable this extension.
- `myExtension.thing`: Set to `blah` to do something.
## Known Issues
Calling out known issues can help limit users opening duplicate issues against your extension.
## Release Notes
Users appreciate release notes as you update your extension.
### 1.0.0
Initial release of ...
### 1.0.1
Fixed issue #.
### 1.1.0
Added features X, Y, and Z.
---
## Following extension guidelines
Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
- [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)
## Working with Markdown
You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
- Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux).
- Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux).
- Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets.
## For more information
- [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
- [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
**Enjoy!**