Dentsu Digital Develops 'HOZO', a New Method for Designing and Implementing Website UI Using Natural Language Instructions

Dentsu Digital Inc. (Headquarters: Minato-ku, Tokyo; President and CEO: Hisashi Takimoto; hereinafter 'Dentsu Digital') has established 'HOZO', a method for designing and implementing website UI that complies with design systems*1 through natural language dialogue with AI, and will begin operations today. In recent years, the evolution and spread of generative AI in website production has brought attention to a development style called 'Vibe Coding'*2, which generates code solely from natural language instructions. On the other hand, in the field of companies operating large-scale websites, UI inconsistencies accumulated over years of operation due to the involvement of multiple departments and production companies have become a challenge. Even if a design system is established, reflecting it across all existing pages requires enormous man-hours, forcing designers and engineers to manually handle each page. Dentsu Digital has developed the new method 'HOZO' by integrating its expertise in website construction and operation support with the track record of many AI solutions, including '∞AI® (Mugen AI)'*3. Through dialogue with AI, it consistently executes everything from generating UI components compliant with corporate design systems to building pages and even bidirectional conversion with cloud design tools. Under the tagline 'Design, Instant Assembly.', 'HOZO' aims to realize a new UI development experience that assembles designs for each company solely through dialogue with AI, following the philosophy of the traditional Japanese woodworking technique 'hozumi' (mortise and tenon joint). ■ Key Points of 'HOZO' ① UI Generation Compliant with Corporate Design Systems It automatically extracts and classifies dozens of UI patterns such as navigation, cards, tables, and CTAs from existing website URLs or data on cloud design tools, and systematizes design tokens such as colors, fonts, and margins. This enables AI to generate UI components compliant with a company's unique design system. It achieves strict compliance with design systems, which was difficult with general-purpose AI tools, and eliminates UI inconsistencies across pages. ② Bidirectional Conversion Between Code and Cloud Design Tools The generated UI can be output not only in code formats such as HTML and React but also in formats editable on cloud design tools. Furthermore, it supports bidirectional conversion between code and cloud design tools. This allows designers to conduct quality reviews on cloud design tools and engineers to do so in code, realizing a development workflow that incorporates human judgment rather than leaving everything to AI. ③ Backward Calculation Approach from Existing Sites This method adopts a backward-calculation approach based on existing websites. It is possible to replace only the design system while preserving the content of existing pages. Additionally, if parts of the design system are changed, it is automatically reflected in previously generated UIs, supporting continuous operation and improvement. Even personnel unfamiliar with design systems can conduct UI verification in accordance with the design system using only natural language instructions. Going forward, Dentsu Digital aims to expand the application scope of this development method beyond the operation and unification of design systems on existing sites to include the planning and design stages of new pages, as well as AI-based UI evaluation and improvement proposals, extending to the entire website production process. Based on Vibe Coding, it will support clients in achieving both improved digital experience quality and operational efficiency. The Dentsu Group in Japan is promoting its unique AI strategy 'AI For Growth', which contributes to the growth of clients and society by combining 'human intelligence' and 'AI intelligence'. For more information on AI For Growth, please see the following webpage: https://www.dentsu.co.jp/labo/ai_for_growth/ *1: A design system is a mechanism that systematically organizes design rules and parts to streamline development. *2: Vibe Coding is a general term for a development style that generates software code through natural language dialogue with AI. *3: About '∞AI®' https://www.dentsudigital.co.jp/services/data-ai/mugen-ai https://www.dentsudigital.co.jp/ Dentsu Digital is Japan's largest comprehensive digital firm. With the purpose of 'Moving people's hearts, creating value, and changing the way the world works,' it realizes all forms of transformation by integrally utilizing creativity and technology that resonate with consumers. As a partner for clients' business growth, it aims for 'transformation and growth' of the economy and society by creating new value together.