Inspiration
Design teams waste hours making “what-if” theme comps. We wanted a 60-second way to show stakeholders their product in a new brand—without messing up layout, copy, or data.
What it does
- Ingests a UI screenshot
- Applies your brand tokens (primary/secondary colors, background/surface, link, radii, shadows)
- Runs iterative, constraint-driven edits so layout, text, icons, and imagery stay identical
- Exports the final restyled image plus per-step outputs ## How I built it
- Planner turns tokens → ordered edit steps (primary actions → links → surfaces → radii → shadows → hairlines → charts).
- Each step calls FLUX.1 Kontext [dev] on FAL (fal_client.subscribe("fal-ai/flux-kontext/dev", ...)) with a strong Constraints clause to preserve geometry/content.
- Gradio UI for upload, token editor (form + JSON), step picker, prompts preview, and before/after.
- Python/Pillow pipeline stitches the step results and saves everything to /outputs.
Challenges I ran into
- Getting vivid recolors without unintended style drift.
- Crafting prompts that change only UI (buttons/cards) while ignoring photos and text.
- Keeping results legible on dark surfaces (contrast).
Accomplishments that we're proud of
- Clean, repeatable layout-safe edits—no accidental element shifts.
- Token-driven plan that’s easy to tweak and reuse across brands.
- Paste-and-run app that works out of the box with FAL.
What's next for Design-System Restyler
- Mask painter per step for surgical targeting (e.g., only buttons or nav).
- Contrast checker to auto-adjust text colors for accessibility.
- Drift guard (SSIM/CLIP) with auto-retry seeds.
- Local path (Diffusers/ComfyUI + TensorRT) for the NVIDIA “Local Use Case” track.
- Optional LoRA for brand-specific shadows/gradients.
Log in or sign up for Devpost to join the conversation.