AI and design
AI and Design. There are two aspects: “Designing with the help of AI” and “Designing products/services with AI”.
Designing with AI assistance
ToDo
Tools
- magicpath.ai
- Figma style canvas
- Generation at the component level
- Design system management that looks pretty good
- beta.reweb.so
- Figma style canvas
- Generation at the component level
- Theme management
Product/service design with AI
Sometimes the most important outcome is the experience of creating something, rather than the artifact the tool produces. In this case, Over-automation may actually be a disadvantage. Note: Values in the process
Automation should be applied in a way that complements human shortcomings and enhances strengths. The algorithm that recommends news similar to the news I read reinforces a human weakness (Selective exposure).
Automation must provide not only reinforcing feedback (Reinforcing feedback loop) but also balancing feedback (Balancing feedback loop).
Good UI practices:
Publications
Books:
- Human-centered AI
- People + AI guidebook (by Google)
- Weapons of math destruction
Papers:
- Beyond safety: Toward a value-sensitive approach to the design of AI systems
- Value Sensitive Design: Shaping technology with moral imagination
- Designing multispecies worlds for robots, cats, and humans
- Automatic generation of visualizations and infographics with LLMs
- Evaluating large language models in generating synthetic HCI research data
Miscellaneous notes
- 2023-12 Bottleneck of AI-Human interaction loop
- 2023-12-12 - Designing for AI: Panel Notes by LukeW
- Chat is a very flexible interface, people can define how they want to use it and when they want to use it. But it is a very direct interaction with the model itself. There’s few affordances to help people understand the capabilities and limitations they are interacting with.
- Text is a very imprecise medium, it’s good for general direction but more controls are needed for specific use cases. In the future, we’ll have a lot more powerful interfaces to AI models.
- 2023-12 - Google Gemini demo. How to create UI on the fly
- 2023-03 - Building humane UI with LMs
- The argument is that although the current method is centered on “Text-in / Text-out”, in fact, the “Anything-you-can-turn-into-text in / Anything-you-can-create-from-text out” method is possible.
- I think “Natural language-in / natural language-out” describes the current approach more accurately than “Text-in / Text-out.” “Text-in / Text-out” is the traditional Unix CLI. The advantage of the “NL-in / NL-out” approach enabled by LLMs is more flexible composition (compared with the traditional UNIX CLI). “Anything-you-can-turn-into-text in / Anything-you-can-create-from-text out” could inadvertently undermine that flexibility. In the Google Gemini demo, the approach that creates UI on the fly lets you interact with the resulting UI, but feels harder to compose than “NL-in / NL-out.”
Articles
- 2025-04-15 - User research, AI, and insight from practitioners: Eunhee Kim
- 2024-05-13 - A Design Space for Intelligent and Interactive Writing Assistants
- 2024-05-11- DirectGPT: A Direct Manipulation Interface to Interact with Large Language Models
- 2024-02-16 - The UX of AI: Lessons from Perplexity
- 2024-02-16 - AI Models and Headsets
- 2023-10-27 - nngroup.com/articles/ai-roles-ux/
- 2023-03-03 - How AI Technology Will Transform Design
Tools
- readdy.ai - Similar to v0.dev, but explicitly positioned as a “service for designers.”
- Select shadcn/ui, etc. from the drop-down and enter the prompt to generate code.
- When you click a specific link on the created screen, the page corresponding to “that link” is created. Example: Clicking the “Blog Post Title” link on the “Blog List” screen creates the “Blog Body” screen, and so on.
- magicpath.ai