{"id":51863512,"url":"https://github.com/easazade/deziner","last_synced_at":"2026-07-24T12:01:29.957Z","repository":{"id":365434806,"uuid":"1240654707","full_name":"easazade/deziner","owner":"easazade","description":"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.","archived":false,"fork":false,"pushed_at":"2026-06-17T10:08:01.000Z","size":45,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-17T11:19:05.204Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/easazade.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-05-16T11:59:45.000Z","updated_at":"2026-06-17T10:08:38.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/easazade/deziner","commit_stats":null,"previous_names":["easazade/deziner"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/easazade/deziner","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easazade%2Fdeziner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easazade%2Fdeziner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easazade%2Fdeziner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easazade%2Fdeziner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/easazade","download_url":"https://codeload.github.com/easazade/deziner/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easazade%2Fdeziner/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35841138,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-24T02:00:07.870Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-24T12:01:29.140Z","updated_at":"2026-07-24T12:01:29.951Z","avatar_url":"https://github.com/easazade.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Deziner\n\nDeziner is a code-native UI design tool for VS Code.\n\nIt lets you design interfaces directly inside the VS Code, while turning design tokens into CSS variables and components into reusable HTML custom elements.\n\n## What It Does\n\nDeziner gives you a visual way to design UI inside VS Code, but keeps the design stored as structured code.\n\nInstead 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.\n\n## Why Deziner Exists\n\nDesign and development often live in separate worlds.\n\nA design is created in one tool, then developers have to manually recreate it in code.\n\nDeziner reduces that gap by making the design itself code-native.\n\nThe output is readable by developers, usable by projects, and understandable by AI agents.\n\n## Core Features\n\n- Design UI inside VS Code\n- Define design tokens as code\n- Generate CSS variables from tokens\n- Define reusable components\n- Generate HTML custom elements from components\n- Keep design output readable and portable\n- Allow AI agents to understand and modify designs\n\n## AI-Friendly Design\n\nBecause Deziner stores design as structured code, AI agents can work with it more easily.\n\nAI agents can help with things like:\n\n- Creating new components\n- Updating design tokens\n- Changing layouts\n- Generating component variations\n- Refactoring design structures\n- Translating components into React, Vue, Svelte, or other frameworks\n\n---\n\n# deziner README\n\nThis is the README for your extension \"deziner\". After writing up a brief description, we recommend including the following sections.\n\n## Features\n\nDescribe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.\n\nFor example if there is an image subfolder under your extension project workspace:\n\n\\!\\[feature X\\]\\(images/feature-x.png\\)\n\n\u003e 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.\n\n## Requirements\n\nIf you have any requirements or dependencies, add a section describing those and how to install and configure them.\n\n## Extension Settings\n\nInclude if your extension adds any VS Code settings through the `contributes.configuration` extension point.\n\nFor example:\n\nThis extension contributes the following settings:\n\n- `myExtension.enable`: Enable/disable this extension.\n- `myExtension.thing`: Set to `blah` to do something.\n\n## Known Issues\n\nCalling out known issues can help limit users opening duplicate issues against your extension.\n\n## Release Notes\n\nUsers appreciate release notes as you update your extension.\n\n### 1.0.0\n\nInitial release of ...\n\n### 1.0.1\n\nFixed issue #.\n\n### 1.1.0\n\nAdded features X, Y, and Z.\n\n---\n\n## Following extension guidelines\n\nEnsure that you've read through the extensions guidelines and follow the best practices for creating your extension.\n\n- [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)\n\n## Working with Markdown\n\nYou can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:\n\n- Split the editor (`Cmd+\\` on macOS or `Ctrl+\\` on Windows and Linux).\n- Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux).\n- Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets.\n\n## For more information\n\n- [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)\n- [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)\n\n**Enjoy!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasazade%2Fdeziner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feasazade%2Fdeziner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasazade%2Fdeziner/lists"}