Project Background: An Open-Source Alternative to Anthropic’s Implementation
On April 17, 2026, the AI company Anthropic released its Claude Design feature, based on the Opus 4.7 model. This feature, capable of generating deliverable design outputs like HTML pages or presentations from a single user instruction, garnered significant attention in the industry. Just 11 days later, a development team called nexu-io launched an open-source project on GitHub named Open Design, aiming to provide a functionally equivalent alternative. The project quickly attracted a large number of developers, earning over 18,000 stars.
Core Architecture: A Middle Layer Connecting the Frontend to Local Agents
Open Design is not positioned as a standalone AI model but rather as a connector framework. It transforms various coding AI agents already installed on a user’s local machine into a powerful design engine. Its technical architecture is divided into two parts:
- Frontend Interface: A Next.js-based web application that runs in the browser, providing the user interaction interface.
- Local Daemon: A Node.js-based service that runs on the user’s local computer, responsible for task scheduling and interaction with AI agents.
When a user inputs a design request, the local daemon combines a predefined skill description file (SKILL.md) and a design specification file (DESIGN.md) into a complete prompt. It then calls the command-line interface (CLI) of a local coding agent via standard input/output (stdio). Crucially, the agent is granted real file system access, allowing it to perform actual operations on the user’s computer—such as creating project directories, reading templates, modifying CSS styles, and generating HTML files—rather than operating in an isolated virtual sandbox. The results are rendered in real-time within a sandboxed iframe on the frontend for user preview and modification.
Technical Features: Model Agnosticism and Refined Prompt Engineering
Unlike Claude Design, which is tightly coupled with the Opus 4.7 model, Open Design follows a “Bring Your Own Model/Agent” (BYOM/BYOA) principle. Upon startup, its local daemon automatically scans the system’s PATH environment variable to detect installed coding agent CLIs, such as Claude Code, Codex, Cursor, and OpenCode, and invokes the most powerful one available. This model-agnostic design offers significant flexibility and extensibility.
To avoid generating low-quality or generic “AI-like” designs, the project has implemented deep optimizations in its prompt engineering:
- Structured Requirements: Before generation, the system guides the user through a form to clarify key information like the target platform, audience, design style, and brand context, converting vague requests into structured input.
- Self-Critique Mechanism: Before outputting the final result, the AI conducts a five-dimensional self-evaluation. The result is only accepted if all dimension scores exceed a predefined threshold (e.g., 3); otherwise, a redo is triggered.
- Style Blacklist (Slop Blacklist): The project includes a built-in list of “bad taste” elements, explicitly prohibiting design choices that can look cheap, such as harsh gradients, generic emoji icons, and inappropriate fonts (e.g., using Inter for headlines). It also mandates the use of placeholders when real data is unavailable to avoid fabricating content.
Built-in Assets and Usage Flow
Open Design comes with a rich set of pre-configured assets out of the box to accelerate the design process and ensure a professional standard:
- Design Systems: It includes 71 brand-level design systems from renowned tech companies like Apple, Stripe, Vercel, Airbnb, Tesla, and Notion. Users can switch between them with a single click from a dropdown menu, and the system will automatically apply the new design tokens for rendering.
- Skill Library: It contains 19 composable skills covering a wide range of common scenarios, from web page prototypes and magazine-style presentations to data dashboards, mobile app mockups, pricing pages, and marketing emails.
Users can complete the local deployment with just three commands: git clone, cd, and pnpm install && pnpm dev:all. After launching, they can access localhost:3000, select a skill and a design system, input their text-based requirements, and start the automated design process. The final product can be exported as a standalone HTML file, a PDF, a PPTX file, or a ZIP archive containing all assets.
