DesignWeaver

a tool that helps novices generate better design prompts by surfacing key visual dimensions, leading to more diverse and expert-aligned product designs

Sirui Tao
Sirui Tao
UC San Diego
Ivan Liang
Ivan Liang
UC San Diego
Cindy Peng
Cindy Peng
Carnegie Mellon University
Zhiqing Wang
Zhiqing Wang
UC San Diego
Srishti Palani
Srishti Palani
Tableau Research
Steven P. Dow
Steven P. Dow
UC San Diego
Full Video Paper šŸ“„ Arxiv šŸ“ Code šŸ’»



Demo of DesignWeaver in action

What is DesignWeaver?

DesignWeaver is an AI-powered interface that helps novice designers craft richer text prompts by surfacing key design dimensions (e.g., style, material, ergonomics) from images and documents. In a controlled study (nā€Æ=ā€Æ52), it resulted in longer, more nuanced prompts and more diverse, novel designs compared to a standard text-only interface (Tao et al., 2025).

Figure 1: DesignWeaver: An AI-enabled product design interface for novices. The components include (A) Prompt Box, (B) Dimension Palette, (C) Image Gallery, and (D) Favorite Folder

How DesignWeaver Works

  1. Upload Design Brief
    Client persona, requirements, moodboard ā†’ system extracts 3 initial dimensions.
  2. Build AI Prompt
    Click tags or type text ā†’ prompt autoā€‘formats.
  3. Generate & Inspect Designs
    View 3 AIā€‘rendered images ā†’ use Info to surface new tags.
  4. Iterate & Refine
    Add/remove tags, regenerate ā†’ favorite best designs.
Figure 2: Overview of the iterative design process using DesignWeaver. The process involves four main stages: (1) Ingest the design document to extract initial dimensions and tags, (2) Refine and recommend dimensions to generate prompts, (3) Use prompts to render and refine images, and (4) Iterate based on new dimensions and tags inspired by the generated images.

Key Features of DesignWeaver

  1. Dimension Palette

    • Autoā€‘extracts dimensions (style, color, form) from an uploaded brief
    • Lets users toggle tags (e.g., ā€œminimalist,ā€ ā€œsustainableā€) to build prompts

  2. Interactive Prompt Box

    • Merges user text with activated tags
    • Autoā€‘completes and reā€‘formats prompts via GPTā€‘4

  3. Image Gallery & Feedback

    • Generates 3 DALLĀ·Eā€Æ3 images per prompt
    • Infoā€‘button overlays new tags from generated images (via GPTā€‘4oā€‘mini)
    • ā€œLikeā€ favorites for sideā€‘byā€‘side comparison
Figure 3: User Interface of DesignWeaver. The UI facilitates structured dimensional tagging and interactive exploration of AI-generated designs. Key features include a design document for guidance, a prompt box for input, a dimension palette for organizing and modifying design aspects, and an image panel displaying generated outputs. Users can add or delete dimensions, tag designs, view detailed image information, and curate favorite designs for final selection. This workflow supports iterative refinement and creativity.

DesignWeaver Implementation Details

  • Frontend: React
  • Backend: Python + Firebase / Firestore
  • AI Models: GPTā€‘4o (prompting), DALLĀ·Eā€Æ3 (image generation), GPTā€‘4oā€‘mini (tag extraction)
Figure 4: The baseline interface mimics a standard text-to-image setup, excluding scaffolding components.

DesignWeaver Research Results

A user study involving 52 novice designers revealed that DesignWeaver:

  • Prompt Quality: Encouraged longer and more nuanced text prompts.
  • Design Diversity: Led to the creation of more diverse and innovative images.
  • Creative Exploration: Rated higher on creative exploration and continuous improvement of design ideas
Figure 5: Workflow of the user study.

DesignWeaver Impact & Conclusion

DesignWeaver bridges the gap between novice and expert design approaches by:

  • Providing structured guidance in prompt engineering.
  • Enabling a deeper exploration of design spaces through iterative feedback.
  • Enhancing the overall quality and novelty of design outputs.
Figure 6: Participants rated DesignWeaver higher than the Baseline on ease of idea-to-prompt conversion, design space exploration, prompt generation, concept refinement, and iterative design improvement (Left).
DesignWeaver participants created semantically more diverse images than the Baseline (Right).
Figure 7: Top 5 expert rated chair on novelty.

Conclusion

DesignWeaverā€™s dimensional scaffolding bridges noviceā€‘expert gaps by making domain vocabulary explicit and enabling rapid, structured exploration of design spacesā€”ultimately fostering more innovative, userā€‘aligned product concepts.

BibTeX

@inproceedings{tao2024designweaver, title = {DesignWeaver: Dimensional Scaffolding for Text-to-Image Product Design}, author = {Tao, Sirui and Liang,
Ivan and Peng, Cindy and Wang, Zhiqing and Palani, Srishti and Dow, Steven}, booktitle = {Conference on Human Factors in Computing Systems}, year =
{2025} }

References

2025

  1. CHI
    designweaver.png
    DesignWeaver: Dimensional Scaffolding for Text-to-Image Product Design
    Sirui Tao, Ivan Liang, Cindy Peng, Zhiqing Wang, Srishti Palani, and Steven Dow
    In Conference on Human Factors in Computing Systems, 2025
    Bib PDF Video Code Website