What Inspired Us In enterprise design workflows, a lot of time is spent manually breaking down reference visuals—extracting colors, identifying fonts, and recreating elements—before actual design work begins. This repetitive process slows teams down and often leads to inconsistencies. DesignDNA was inspired by the need to automate this pre-design phase and make reference visuals instantly usable inside Adobe Express.
What We Learned We learned how AI can be used to improve efficiency and consistency at scale, not just creativity. The project also showed us how AI-assisted coding tools like Cursor enable non-developers to build functional products, and how clear design intent is critical when collaborating with AI.
How We Built the Project We followed a design-first approach by defining an enterprise workflow and creating a clean, Adobe-native UI in Adobe Express Code Playground. Using Cursor, we implemented the add-on with HTML, CSS, and JavaScript, integrating AI for color extraction, font recognition, and element segmentation. The focus throughout was on simplicity, speed, and enterprise usability.
Challenges We Faced Our biggest challenge was translating a design-led vision into working code without prior development experience. Managing AI-generated code while keeping the UI consistent required careful prompting and iteration. We also had to scope features realistically within limited time and ensure the solution remained enterprise-safe.
Built With
- adobeexpressadd-onsdk
- canvasapi
- css
- filereaderapi
- javascript
- node.js
- react
- typescript
Log in or sign up for Devpost to join the conversation.