Doodle2Design

Frustrated that AI always misses your aesthetic vision? Doodle2Design translates raw doodles and instinctual visual choices into a tailored, human-approved site layout—no vague text prompts required.

Comment

Inspiration

AI can write flawless code, but it lacks visual taste, something we found to be a problem when using AI to create our personal websites. We noticed that humans struggle to articulate aesthetic feelings into text prompts like "make it look cool and modern", and that the result is almost always a generic, sterile interface.

We built Doodle2Design to act as a translation layer between human intuition and machine execution. Instead of struggling with text prompts, users express their taste visually through sketches, image decision-making, and image references. Our engine mathematically maps that visual DNA directly into frontend styling.

What it does

  1. Intuition Input: The user draws a quick mood sketch on a digital canvas or uploads multiple reference images.
  2. A/B Choice Making: The user completes 10 rapid, text-free visual choices (A vs. B) based purely on personal preference
  3. Vibe Extraction: A Vision-Language Model (VLM) analyzes the visual selections and outputs a structured JSON document of the design tokens.
  4. Instant Redesign: Deterministic code maps the JSON tokens directly to CSS Custom Properties (:root variables), instantly transforming a live site's aesthetic without changing any HTML elements.

How we built it

  • Backend: Python 3.10+, FastAPI, and Uvicorn serve the API and static frontend.

  • Frontend: Vanilla JavaScript, HTML, and CSS power the drawing canvas, image comparisons, and live demo. No frontend build step or Node.js is required to run the app.

  • Vision model: The optional Anthropic Messages API integration analyzes images and returns structured design tokens. Pydantic validates the tokens, and fixed mappings convert them into CSS variables and predefined visuals.

  • Offline mode: Pillow analyzes image brightness, saturation, edge density, and color palette to generate a deterministic theme when no API key is set or a model call fails.

  • Reference library: Local images are organized by category and indexed with a generated JSON manifest. Seeded selection creates the image comparisons.

Challenges we ran into

  • Repetitive Image Selection: Early A/B pairing logic sometimes presented users with duplicate or overly similar images. We refined our filtering algorithm to guarantee maximum visual contrast across all 10 rounds.
  • Superficial Styling Limits: Initially, the site only changed basic colors and fonts, making the transformation feel surface-level. We expanded our CSS variable architecture to control dynamic geometry, shadow styles, border weights, and SVG noise textures.

Accomplishments that we're proud of

  • Text-Free Calibration: Engineered a smooth, text-free UI that includes a variety of animations, graphics, and unique design elements, driven entirely by visual intuition.
  • Safe & Deterministic AI: Showed that AI can style web applications reliably without hallucinating broken CSS code.
  • Instant Reskinning: Delivered real-time visual transformations on a live application so the user can see a clear before and after state.

What we learned

Humans are vastly better at selecting visual vibes than trying to find a way to prompt them via text and shallow descriptions. Additionally, AI models excel when constrained to choosing structured design tokens rather than writing raw code.

What's next for Doodle2Design

  • Adaptive A/B pair re-planning after round 5 based on early preferences.
  • Exporting extracted vibes to Figma style dictionaries, Tailwind CSS configs, and React theme providers.

Built With

Share this project:

Updates