Sigil

Sigil is a visual development tool that transforms AI prompt creation into a precise art, allowing creators to build complex instructions like an architect.

Comment

About the project Inspiration In the new era of generative AI, our words have become spells, capable of conjuring incredible digital creations. But like any magic, it can be unpredictable. We've all felt the frustration of having a perfect, complex vision in our minds, only to see it lost in translation, resulting in generic or incorrect outputs from the AI.

The inspiration for Sigil was born from a simple but powerful question: What if we could architect our conversations with AI? What if we could build our prompts with the precision of a blueprint, instead of the guesswork of a magic chant? We wanted to move from being mere prompters to becoming true prompt architects. We built Sigil because it's the tool we wished we had for our own creative and technical projects.

What it does Sigil is a visual workspace that transforms prompt engineering into a structured, intuitive, and powerful art form. Instead of a single, intimidating text box, Sigil provides a dynamic canvas where users can:

Deconstruct Ideas: Break down a complex thought into its fundamental components, creating individual, editable blocks called "Sigils".

Compose Visually: Arrange and reorder these Sigils on the canvas. The application understands that the vertical order of the blocks dictates the narrative and logical flow of the prompt.

Edit with Precision: Effortlessly add, delete, and edit the content of each Sigil on the fly, allowing for rapid experimentation.

Cast the Spell: With a single click, Sigil combines the ordered blocks into a coherent, powerful prompt and sends it to the Gemini API. The epic, structured response is then displayed in a clean modal, showing the direct result of the user's visual composition.

It's a new paradigm for AI interaction: Deconstruct your thoughts. Compose your magic.

How we built it Sigil is a testament to a true human-AI partnership. The project was built using a "stack" of modern and AI-powered tools:

Core Development: The application was prototyped and built using Bolt.new and its AI code generation. We then transitioned to a local environment with Visual Studio Code and Node.js for final polishing.

Frontend Framework: React with TypeScript for a robust and type-safe architecture.

Styling: Tailwind CSS for the modern, dark-mode interface.

Interaction: @dnd-kit for the high-performance drag-and-drop canvas.

Generative Engine: The Google Generative AI API (Gemini) powers the core text generation.

Creative Production: In the spirit of the project, every creative asset was generated with AI. The logo, the video narration voice, the background music, and all the supporting visual images for the demo video were created using various AI tools. This project was not only built with AI, it was imagined with it.

Challenges we ran into Our biggest challenge was the stability of the online development environment for a highly interactive app like Sigil. The "hot-reloading" feature, while powerful, caused constant refreshes that made development difficult. We overcame this by strategically migrating the project to a local environment to finalize the code, and then redeploying the stable version back to Bolt's infrastructure. This taught us resilience and the importance of adapting your workflow to find the best tool for each stage of a project.

Accomplishments that we're proud of We are incredibly proud of building a fully functional prototype that proves our core thesis: that a visual, block-based interface is a more intuitive and powerful way to engineer prompts. We are also proud of having used AI as a true creative partner in every step of the process, from code to final video production.

What we learned This hackathon was an intense learning experience. We learned the power of AI-assisted development for rapid prototyping, and the importance of a stable local environment for polishing complex UIs. Most importantly, we learned that the future of human-AI collaboration lies in creating better interfaces that bridge the gap between human thought and machine understanding.

What's next for Sigil The version of Sigil we're submitting is just the first chapter. Our vision for the future is vast and includes:

Multi-Modality: Expanding beyond text to support image generation (DALL-E, Midjourney), code generation, and even music.

A Community "Grimoire": A shared library where users can save, publish, and discover powerful "spells" (prompt templates) created by the community.

Result History: A panel to view and compare past results, allowing users to track which prompt structures work best.

Advanced Connections: Moving beyond a simple vertical order to allow users to create complex, non-linear graphs and logic flows.

Built with React

TypeScript

Bolt.new

Vite

Tailwind CSS

@dnd-kit

Google Generative AI API (Gemini)

Node.js

Visual Studio Code

AI (for Logo, Music, Voice & Imagery)

Built With

Share this project:

Updates