Visual Prompt Atlas

• 

• 

• 

Inspiration

When creating images and videos with AI, we found that the hardest part is often not writing the prompt—it is deciding what the result should look like before generation begins.

Users may want a “cinematic” image or a “more powerful camera angle,” but they may not know which aspect ratio, composition, camera position, lighting setup, or visual style can produce that result. The traditional workflow requires searching for references, studying prompts, and repeatedly experimenting. Successful ideas are also difficult to preserve and reuse.

We created Visual Prompt Atlas to turn abstract visual language into semantic cards that people can see, understand, and select.

What it does

Visual Prompt Atlas is a visual semantic exploration and prompt compilation tool for AI image and video creation.

Users can browse visual concepts across dimensions such as aspect ratio, theme, subject, scene, object, composition, position, camera, action, style, lighting, and constraints. Each card uses an image and a concise explanation to communicate a specific visual concept.

By continuously selecting cards through the @ interaction, users can assemble semantic nodes into an editable, traceable, and reusable visual plan. The system then compiles that plan into structured prompts for different AI generation platforms.

Its main value is not producing longer prompts. It is:

Helping users see what they are choosing before generation—and understand why every choice exists.

How we built it

We designed a structured visual semantic model that separates creative decisions into clear visual dimensions. Each semantic node stores:

Chinese and English names A concise semantic definition A replaceable reference image Chinese and English compilation text Applicable contexts and constraints Card and compiler version information

The interface supports visual card browsing, continuous @ selection, combination management, visual plan saving, and prompt compilation.

Images are separated from semantics. An image is only the current visual explanation and can be replaced at any time, while the card ID, semantic node, and compilation content remain unchanged.

When users select too many concepts or create a confusing combination, they can optionally connect their own DeepSeek API key. DeepSeek reorganizes and improves the prompt, but its output is presented as a candidate version and never silently replaces the original compilation.

Challenges we ran into

One of the most difficult parts of the project was building a visual reference library that is accurate, understandable, and safe to display.

I manually collected and matched more than 100 reference images. For every image, I had to search, copy, paste, and carefully evaluate it:

Does it accurately represent the intended visual meaning? Can users understand it when displayed as a small card? Does it introduce unrelated visual variables that may cause confusion? Is it appropriate for public display? Could it create copyright concerns? Does it genuinely improve the selection experience?

This process was extremely time-consuming, and many visual concepts do not have one universally correct reference image. Mechanically filling hundreds of remaining cards would require significant effort without guaranteeing consistent quality.

We also learned that visual references are inherently subjective. Different users may have very different interpretations of beauty, cinematic imagery, or a particular art style. Permanently assigning one image to every semantic card could restrict how users understand and apply that concept.

For this reason, cards that have not yet been fully reviewed use temporary placeholders rather than being presented as verified references. This challenge led us to a more sustainable product decision:

The semantic card remains stable, while its reference image can be replaced at any time.

Users can preserve the card name, definition, @ node, and prompt compilation content while replacing only the image with one that is more accurate, visually appropriate, or relevant to their project.

As a result, Visual Prompt Atlas does not depend on a permanently fixed image library. Its visual explanations can continue evolving with its users, projects, and quality standards.

Another challenge was managing a large number of images locally. Browser localStorage was not reliable enough, so we migrated image assets to IndexedDB and added WebP compression, ZIP backups, legacy-data migration, and automatic rollback when an import fails.

We also needed to ensure that AI-assisted prompt optimization would not omit selected nodes, change their original meaning, or introduce content the user never selected.

Accomplishments that we're proud of

We completed the full workflow from visual exploration to executable prompts:

Browse references → Understand semantics → Select with @ → Manage the combination → Compile the prompt → Save and reuse

The current system supports:

Multi-dimensional visual semantic cards Chinese and English prompt compilation Replaceable card images User-created private cards Named visual plans and reusable snapshots Backup, recovery, and legacy-data migration Optional DeepSeek prompt optimization Compressed and persistent local image storage Responsive desktop and mobile interfaces

Most importantly, we demonstrated that selecting visual meaning through images can become a practical alternative to starting with an empty prompt box.

What we learned

Our most important lesson is that users do not simply need more prompt words. They need a clearer visual decision-making process.

A useful visual card must quickly explain:

What is this? Which part of the image does it affect? Why would I choose it? How will it be compiled into the final prompt?

We also learned that not every visual reference should immediately become an executable card. Reference works provide inspiration, semantic nodes describe observable meaning, and verified @ cards provide execution.

These layers should remain connected without being treated as the same thing.

We also discovered that a flexible reference system is more valuable than a permanently fixed visual library. Keeping semantics stable while allowing images to be replaced makes the product more adaptable to different users, projects, and aesthetic preferences.

What's next for Visual Prompt Atlas

The next stage will focus on improving visual content quality instead of adding unnecessary product complexity:

Produce accurate controlled-variable images using a consistent benchmark scene Correct cards whose images do not match their semantic meaning Expand subjects, scenes, objects, actions, lighting setups, and art styles Improve card names and one-sentence explanations Validate prompt compilation across different generation platforms Test reusable visual plans in real creative projects Conduct usability testing with real creators Continue replacing temporary images with accurate, attractive, and legally safe references

Our long-term goal is to make Visual Prompt Atlas a continuously evolving visual language—one that helps beginners understand visual concepts while enabling professional creators to preserve, combine, and reuse their visual decisions.

Built With

• api
• canvas
• css
• deepseek
• html5
• image
• localstorage
• next.js
• openai
• react
• tailwind
• typescript
• webp