DesignCode
Health Pass
- License — License: Apache-2.0
- Description — Repository has a description
- Active repo — Last push 0 days ago
- Community trust — 23 GitHub stars
Code Fail
- process.env — Environment variable access in app/server/gemini-acp-runner.mjs
- network request — Outbound network request in app/server/gemini-acp-runner.mjs
- process.env — Environment variable access in app/server/index.js
- process.env — Environment variable access in app/server/llm.js
- network request — Outbound network request in app/server/llm.js
- process.env — Environment variable access in app/server/storage-layout.js
- spawnSync — Synchronous process spawning in scripts/fix-bundle-signatures.mjs
- process.env — Environment variable access in scripts/fix-bundle-signatures.mjs
Permissions Pass
- Permissions — No dangerous permissions requested
This agent-powered graphic design workbench transforms text instructions into production-grade design drafts using HTML, CSS, and SVG. It supports exporting to multiple formats including multi-layer PSD files, SVG, and PDF.
Security Assessment
The tool reads environment variables to manage API keys and makes outbound network requests to communicate with LLM providers (such as Gemini, Claude, and OpenAI). No hardcoded secrets were detected, and it does not request inherently dangerous system permissions. However, there is a critical failure regarding synchronous process spawning in a build script (`fix-bundle-signatures.mjs`). While process execution is relatively standard for local development build scripts, spawning processes synchronously can pose a security risk if the environment is compromised or if malicious inputs are injected. Overall risk is rated as Medium.
Quality Assessment
The project is licensed under the permissive Apache-2.0 license. It is highly active, with its last code push being today. The repository has a moderate and growing community footprint with 23 GitHub stars, indicating early but genuine user trust. It features comprehensive documentation, a clear feature set, and internationalization support.
Verdict
Use with caution. The core design application itself appears safe, but users should review the synchronous process execution in the build scripts before running them in sensitive environments.
Agent-powered graphic design workbench that uses HTML/CSS/SVG as the design medium, supporting vector-quality output, editable elements, multi-layer PSD export, lossless text rendering, and other production-grade features.
DesignCode is an agent-based graphic design workbench that transforms simple instructions into high-quality design drafts. It supports production-grade features such as vector-level lossless output, multi-layer PSD export, art asset management, and style presets. In areas like multi-turn instruction following, editability, and text rendering, it offers advantages that traditional AI image generation models cannot match.
DesignCode supports a wide range of graphic design needs, including but not limited to posters, postcards, product detail pages, media promotional graphics, static web designs, book covers, and typographic layouts — any scenario involving text content.
Features
- Describe your requirements directly to the Agent in the chat panel, receive a complete design draft, and iterate through continuous conversation.
- Preview the design in real-time on the canvas, with direct text editing capability.
- Get vector-level output — export as high-resolution PNG, SVG, or PDF.
- Export multi-layer PSD files where each layer has a proper alpha channel.
- Pre-configure size requirements, style presets, and content fields from the menu.
- Build a user-level asset library, and select which assets to use in each design.
- Supports Codex, Claude Code, OpenCode, and Gemini CLI.
- Full version history — every single adjustment can be traced back.
- i18n-based internationalization support.
- Cross-platform — supports macOS and Windows.
Quick Start
Using Installers
For users who want to get started quickly, download the installer for your platform from Releases.
DesignCode requires an Agent backend to function, and comes with Codex, OpenCode, and Gemini CLI built in. You can obtain an API key for any model to use with OpenCode, or use Codex and Gemini CLI through their respective subscriptions.
DesignCode includes support for Claude Code, but due to licensing restrictions, Claude Code cannot be bundled with the project. If you wish to use it, please install it separately.
Building from Source
If you need to customize DesignCode or want early access to unreleased updates, make sure you have Node.js ≥ 18 and a Rust toolchain, install a supported Agent CLI, and build from source.
# Clone the repository
git clone https://github.com/haruhiyuki/DesignCode.git
cd DesignCode
# Install dependencies
npm install
# Desktop development mode
# macOS
npm run desktop:dev
# Windows
npm run desktop:dev:windows
# — or build a distributable package —
# macOS
npm run desktop:build
# Windows
npm run desktop:build:windows
How It Works
DesignCode's unique advantages stem from its technical approach. Unlike image generation models that use diffusion techniques, DesignCode uses HTML / CSS / SVG as its design medium, making it far better suited for graphic design scenarios that demand high-quality text typesetting, clarity, and editability.
The expanding capability boundary of LLMs has made this approach viable. Leading models' ability to write aesthetically pleasing front-end code and SVG graphics is growing rapidly, and current top-tier models have proven capable of handling most design tasks well.
About
DesignCode is published by the Haruhi Suzumiya Dev Group.
The Haruhi Suzumiya Dev Group is an affiliate of the Haruhi Suzumiya Fan Club, dedicated to creating more projects that make the world a more exciting place.
Feel free to submit your application to join via [email protected]!
License
Reviews (0)
Sign in to leave a review.
Leave a reviewNo results found