How to generate clickable prototypes and editable slides via terminal conversation
Type 'make a prototype for an observation log app' into the agent window, and a few minutes later you get a clickable screen and an editable slide deck. This tool is a design skill that produces results without opening a graphic editor. If you provide brand assets, it follows their tone; if you provide nothing, it suggests three directions from 84 styles for you to choose from.
Changes in version 3.0: Bolder directions and consistency management
The recent release of version 3.0 changed how design directions are proposed. The agent now first generates six thumbnails, then completes three of them into actual designs for comparison. The style library has also expanded to 84 types, adding app and Asian design styles. A feature called the 'appearance ledger' was introduced, which remembers the colors and layouts of previously created designs to help prevent repeating similar feels in new projects. The design checking feature automatically inspects for image corruption or readability issues.
Outputs created with a single sentence
This tool takes text prompts and generates various forms of design deliverables. Web pages or app prototypes are provided as a single HTML file, placed inside an actual iPhone frame where click testing is possible. Presentation materials come out as an HTML deck that plays directly in the browser and an editable PPTX file with live text boxes. Animations can be exported in MP4 and GIF formats, including background music. The entire process is conducted solely through conversation with the agent, requiring no separate button or panel manipulation.
The 5-step protocol for reading brand assets
When creating designs for a specific brand, this tool follows a mandatory 5-step protocol. It first asks for guidelines the user has; if none exist, it searches for colors on the official brand page. It extracts color values from SVG files, website HTML, or product screenshots and organizes them by frequency. These extracted values are fixed as CSS variables and applied consistently to all designs. This process prevents the AI from incorrectly using brand colors based on memory. Internal testing confirmed that the stability of the version with this protocol applied has significantly improved compared to previous versions.
Installation and usage environment
This skill is installed with the npx skills add alchaincyf/huashu-design command. It can be used immediately in agents that support skills, such as Claude Code, Cursor, and Codex. After installation, you must verify that subdirectories like references/, assets/, and scripts/ have been created correctly. Some older CLI versions have a file synchronization bug, so you may need to update to the latest version and reinstall. Core rendering and export processes are performed 100% locally, while cloud features are optional. All data is stored in the local ~/.huashu-design/ folder and is not sent externally.
Limitations to check before applying
This tool does not support precise editing at the level of a graphic editor. PPTX files allow text editing, but individually modifying image layers or importing into Figma for detailed adjustments is difficult. Complex animations such as 3D effects, physics simulations, or particle systems are not included in the implementation scope. If you create a design from scratch without any brand assets, the finish may be somewhat lower. It is fully open source under the MIT license, making both personal and commercial use free. It is suitable for developers or designers who prefer working in the terminal and avoiding graphical interfaces.
