skills.rest
ahostbr
ahostbrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ls-design-huashu

Design high-fidelity HTML prototypes with brand asset validation and anti-AI slop guardrails.

Updated Aug 5, 2026
Search Tags:#brand consistency#anti ai slop#design variations#html prototype#motion demo#playwright verification
One-click install
npx skills add https://github.com/ahostbr/liteharness --skill ls-design-huashu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ls-design-huashu
Source: https://github.com/ahostbr/liteharness/tree/main/liteharness/catalog/skills/ls-design-huashu
Command: npx skills add https://github.com/ahostbr/liteharness --skill ls-design-huashu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

花叔Design (Huashu-Design) turns vague design intent into high-fidelity, brand-consistent HTML deliverables (interactive prototypes, demos, slide-like decks, and motion-ready animation) while enforcing strict anti–AI slop guardrails and fact/asset validation.

Core Features & Use Cases

  • High-fidelity HTML design production: Produce clickable interaction prototypes, hi-fi visual demos, HTML slide decks, and motion-design HTML scenes.
  • Brand-consistent asset enforcement: Uses a “core assets” workflow that prioritizes real logo/product/UI imagery and validates assets via brand-spec.md so the output stays recognizable and non-generic.
  • Anti–AI slop + quality gates: Applies explicit rules to avoid common AI design clichés (emoji, SVG imagery, fake data, generic gradients) and uses honest placeholders when assets/data are missing.
  • Design-direction consulting fallback: When requirements are ambiguous, recommends 3 differentiated directions from philosophy “streams,” shows prebuilt showcases, and generates multiple visual demos for selection.
  • Interactive evaluation output (optional): Can run an expert-style multi-dimension review and produce a repair checklist after delivery.

Quick Start

Ask the assistant to act as 花叔Design and produce a brand-consistent hi-fi HTML interactive prototype for the following concept, stating any involved product/brand facts to verify and requesting which assets (logo, product/UI screenshots, color palette, fonts) you can provide: “Deliver an interactive HTML prototype (with variations) and generate a brand-spec.md using my provided assets; if anything is missing, ask me instead of using placeholders.”

Frequently Asked Questions about ls-design-huashu

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate high-fidelity HTML prototypes that avoid generic AI design patterns?▼

To build high-fidelity HTML design prototypes with brand consistency, you must supply real brand assets like logos, product UI screenshots, color palettes, and fonts. These assets are validated through a brand-spec.md file to ensure the final interactive prototype remains strictly recognizable and non-generic.

What is the best way to create HTML slide decks and motion-design scenes with strict brand consistency?▼

The best way to create HTML slide decks and motion-design scenes with strict brand consistency is to use a workflow that prioritizes real brand assets and validates them against a brand specification. This approach prevents generic outputs and ensures all visual variations adhere to the actual brand identity.

How do I handle vague design requirements when building clickable interaction prototypes?▼

When handling vague design requirements for clickable interaction prototypes, trigger a design-direction consulting fallback that proposes 3 differentiated directions from philosophy streams. This process shows prebuilt showcases and generates multiple visual demos for you to select from before proceeding with the final HTML output.

Do I need to provide real product UI screenshots to generate a non-generic visual demo?▼

Yes, you need to provide real product UI screenshots and brand assets to generate a non-generic visual demo. If assets or data are missing, the workflow mandates using honest placeholders and explicitly asking you for the required materials rather than substituting fake data or generic SVG imagery.

Can I run an expert-style multi-dimension review on my HTML design variations?▼

Yes, you can run an optional interactive evaluation output to perform an expert-style multi-dimension review on your HTML design variations. Thisreview analyzes the delivered high-fidelity prototype and produces a detailed repair checklist to guide any necessary design refinements.

Related Skills

Explore More Design & Creative Skills→
MrAlexisCordMrAlexisCord

brand-designer

Generate brand identity assets including logos, color palettes, and typography systems.

Community
Advanced
zunyiqingfeng-codezunyiqingfeng-code
2

huashu-design

Create high-fidelity HTML prototypes and motion demos from concise briefs.

Community
Advanced
SheshiyerSheshiyer

press-release-copy

Generate launch press releases from brand, product, and launch data.

Community
Basic
yopitekyopitek

huashu-xhs-image

Generate Xiaohongshu cover images in 3:4 portrait PNGs with HTML fallback.

Community
Advanced