# alchaincyf/huashu-design

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/alchaincyf-huashu-design).**

18,928 stars · 2,348 forks · HTML · MIT

## Links

- GitHub: https://github.com/alchaincyf/huashu-design
- awesome-repositories: https://awesome-repositories.com/repository/alchaincyf-huashu-design.md

## Description

huashu-design is a design system infrastructure and a set of specialized design engines for high-fidelity HTML prototyping, quality evaluation, and presentation conversion. It provides tools for generating interactive single-file HTML mockups, frame-based motion design, and a visual evaluator that analyzes design quality across five dimensions using radar charts.

The system distinguishes itself through a translation pipeline that converts HTML slide decks into editable PowerPoint and PDF objects rather than flat images. It includes a motion design engine that uses a time-slice model to render animations and narrated videos with synthesized speech, as well as a brand-asset extraction pipeline that scrapes official websites to ensure color and logo compliance.

The project covers a broad range of design capabilities, including the creation of print-quality infographics and data visualizations, device environment simulation for mobile app prototyping, and strategic tools for proposing visual directions based on established design philosophies. It also features real-time style injection via a parameter-driven interface for adjusting typography and color palettes.

## Tags

### User Interface & Experience

- [Interactive HTML Prototypes](https://awesome-repositories.com/f/user-interface-experience/interactive-html-prototypes.md) — Renders high-fidelity designs as interactive single-file HTML and CSS mockups for cross-platform consistency.
- [Interactive Prototyping Engines](https://awesome-repositories.com/f/user-interface-experience/interactive-prototyping-engines.md) — Creates high-fidelity HTML and CSS mockups with device frames and state-driven navigation to validate user flows.
- [Brand Asset Management](https://awesome-repositories.com/f/user-interface-experience/brand-asset-management.md) — Provides a pipeline to scrape official websites and resolve brand colors and logos into structured specifications.
- [Device Shell Simulations](https://awesome-repositories.com/f/user-interface-experience/device-shell-simulations.md) — Renders designs within accurate hardware shells and browser frames to provide realistic visual context. ([source](https://github.com/alchaincyf/huashu-design/blob/master/SKILL.md))
- [Editable Document Translators](https://awesome-repositories.com/f/user-interface-experience/html-content-processing/html-content-processing/html-to-image-converters/editable-document-translators.md) — Converts web document elements into editable PowerPoint and PDF objects instead of flat image exports.
- [HTML to Presentation Converters](https://awesome-repositories.com/f/user-interface-experience/html-to-presentation-converters.md) — Translates HTML slide decks into native PowerPoint objects with editable text boxes instead of flat images. ([source](https://github.com/alchaincyf/huashu-design#readme))
- [Interactive HTML Prototype Generators](https://awesome-repositories.com/f/user-interface-experience/interactive-html-prototype-generators.md) — Creates interactive single-file HTML mockups with device frames and state-driven navigation.
- [Presentation Deck Rendering](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-management-configuration/presentation-deck-rendering.md) — Builds browser-based slide decks with keyboard navigation and export capabilities to PowerPoint or PDF formats.
- [Presentation Decks](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-management-configuration/slide-content-authoring/presentation-decks.md) — Provides tools for creating high-definition HTML slide decks with keyboard navigation and export to PDF and PPTX. ([source](https://github.com/alchaincyf/huashu-design/blob/master/README.en.md))
- [Animation Timelines](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/timeline-sequence-management/animation-timelines.md) — Generates high-frame-rate video files and GIFs using a stage and sprite time-segment model. ([source](https://github.com/alchaincyf/huashu-design/blob/master/README.md))
- [Visual Direction Generators](https://awesome-repositories.com/f/user-interface-experience/design-generators/visual-direction-generators.md) — Generates multiple distinct visual styles based on design philosophies to resolve ambiguous project requirements. ([source](https://github.com/alchaincyf/huashu-design/blob/master/README.md))
- [Interaction State Machines](https://awesome-repositories.com/f/user-interface-experience/interaction-state-machines.md) — Manages interactive user flows through a state machine that triggers transitions between HTML view layers.
- [Mobile Mockups](https://awesome-repositories.com/f/user-interface-experience/mobile-mockups.md) — Generates iOS and Android prototypes using standardized device frames and independent interactive state machines. ([source](https://github.com/alchaincyf/huashu-design/blob/master/SKILL.md))
- [Editable Export Engines](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-management-configuration/presentation-deck-rendering/editable-export-engines.md) — Produces HTML slide decks with the capability to export them as editable PowerPoint files with modifiable text. ([source](https://github.com/alchaincyf/huashu-design/blob/master/README.md))
- [Dynamic Style Injection](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/dynamic-styling-systems/dynamic-style-injection.md) — Updates visual attributes in real-time by mapping a control interface to CSS variables.
- [Product and Image Mockups](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-authoring-software/design-tools/product-and-image-mockups.md) — Creates interactive mockups, design variations, and animations using HTML to simulate user flows and visual explorations. ([source](https://github.com/alchaincyf/huashu-design/blob/master/SKILL.md))
- [Visual Direction Strategy Tools](https://awesome-repositories.com/f/user-interface-experience/visual-direction-strategy-tools.md) — Analyzes vague briefs to propose three distinct visual styles based on established design schools with parallel demos. ([source](https://github.com/alchaincyf/huashu-design/blob/master/README.en.md))
- [Visual Style References](https://awesome-repositories.com/f/user-interface-experience/visual-styling-systems/visual-style-references.md) — Generates distinct visual directions based on established design philosophies and aesthetic references. ([source](https://github.com/alchaincyf/huashu-design#readme))

### Artificial Intelligence & ML

- [Quality Evaluators](https://awesome-repositories.com/f/artificial-intelligence-ml/generative-content-apis/quality-evaluators.md) — Evaluates visual work across five dimensions to produce a radar chart and list of improvements. ([source](https://github.com/alchaincyf/huashu-design/blob/master/README.en.md))
- [Design Agent Skills](https://awesome-repositories.com/f/artificial-intelligence-ml/agentic-systems-frameworks/integration-deployment/agent-configuration-tools/claude-code-configurations/design-agent-skills.md) — Provides a specialized skill for Claude Code to generate high-fidelity HTML prototypes, presentations, and animations.
- [Narrated Video Creators](https://awesome-repositories.com/f/artificial-intelligence-ml/text-to-speech/narrated-video-creators.md) — Transforms text and visual content into video files by synthesizing speech, mixing audio, and rendering frames. ([source](https://github.com/alchaincyf/huashu-design/tree/master/scripts))

### Part of an Awesome List

- [Design Evaluation Pipelines](https://awesome-repositories.com/f/awesome-lists/ai/ai-observability-and-evaluation/design-evaluation-pipelines.md) — Maps visual quality across five specific dimensions to generate radar charts and actionable improvements.
- [Hardware Shell Mockups](https://awesome-repositories.com/f/awesome-lists/devtools/hardware-simulation/hardware-shell-mockups.md) — Encapsulates designs within accurate device bezels and browser frames to simulate realistic hardware contexts.

### Graphics & Multimedia

- [Animation & Motion Graphics](https://awesome-repositories.com/f/graphics-multimedia/animation-motion.md) — Develops time-based animations and renders them into video files or GIFs with integrated audio and speech synthesis.
- [Infographic Generators](https://awesome-repositories.com/f/graphics-multimedia/infographic-generators.md) — Builds high-precision typography and grid layouts for export as vector PDF, SVG, or high-resolution images. ([source](https://github.com/alchaincyf/huashu-design/blob/master/README.en.md))

### Software Engineering & Architecture

- [Iterative Design Reviews](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture-design/iterative-design-reviews.md) — Evaluates visual work across philosophy, hierarchy, and execution using a radar chart and action list. ([source](https://github.com/alchaincyf/huashu-design#readme))
- [Visual Design Evaluators](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture-design/iterative-design-reviews/visual-design-evaluators.md) — Evaluates layouts using design philosophy and radar charts to identify actionable improvements in hierarchy and execution.

### System Administration & Monitoring

- [Time-Slice Rendering Engines](https://awesome-repositories.com/f/system-administration-monitoring/performance-monitoring-tools/performance-resource-management/frame-rate-monitors/frame-timing-trackers/animation-timing-engines/time-slice-rendering-engines.md) — Calculates motion frames using a segmented time-based system to render animations as video files or GIFs.

### Web Development

- [Motion Design Frameworks](https://awesome-repositories.com/f/web-development/frontend-development-resources/motion-design-frameworks.md) — Provides a framework for building frame-based animations and narrated videos exported as MP4 or GIF files.

### Business & Productivity Software

- [Presentation Format Converters](https://awesome-repositories.com/f/business-productivity-software/knowledge-content-creation/presentation-visual-tools/presentation-format-converters.md) — Converts HTML-based design decks into portable document and presentation formats for offline viewing and sharing. ([source](https://github.com/alchaincyf/huashu-design/tree/master/scripts))

### Content Management & Publishing

- [Export Formats](https://awesome-repositories.com/f/content-management-publishing/content-formats-exporting/export-formats.md) — Converts HTML designs into searchable PDFs or editable presentations by translating document elements into native objects. ([source](https://github.com/alchaincyf/huashu-design/blob/master/SKILL.md))
- [Print-Ready Exports](https://awesome-repositories.com/f/content-management-publishing/content-formats-exporting/export-formats/pdf-exports/print-ready-exports.md) — Develops print-quality infographics with precise grid layouts for high-resolution PDF, PNG, or SVG export. ([source](https://github.com/alchaincyf/huashu-design/blob/master/README.md))
- [HTML to Native Presentation Converters](https://awesome-repositories.com/f/content-management-publishing/html-to-native-presentation-converters.md) — Translates HTML slide decks into editable PowerPoint files with native text objects instead of flat images.

### Data & Databases

- [Data Visualization](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/data-visualization.md) — Renders magazine-quality layouts and data visualizations using precision typography for PDF or SVG export. ([source](https://github.com/alchaincyf/huashu-design#readme))

### Development Tools & Productivity

- [Design Variation Tools](https://awesome-repositories.com/f/development-tools-productivity/visual-design-tools/design-variation-tools.md) — Produces multiple design directions across color and layout for side-by-side comparison and refinement. ([source](https://github.com/alchaincyf/huashu-design/blob/master/SKILL.md))

### Mobile Development

- [Mobile Screen Replicas](https://awesome-repositories.com/f/mobile-development/ui-prototyping-tools/mobile-screen-replicas.md) — Produces precise iPhone screen replicas with status bars and dynamic elements featuring state-driven transitions. ([source](https://github.com/alchaincyf/huashu-design#readme))