AI Assisted UI Development - spinningideas/resources GitHub Wiki

UI Design Coding Summary

This document provides a high-level summary of the sequenced process and professional techniques for AI-driven UI development.

Successful development follows the PIVI Model (Plan, Implement, Validate, and Iterate).

Technique: Extract brand identity from existing websites or reference materials to create a "source of truth". There are tools that allow putting in the url of existing sites if you have them, or you can use screenshots and other reference materials.
Tools:
- https://www.design-extractor.com/
- Firecrawl Branding Mode: Extracts primary colors, border radii, fonts, and spacing from any URL.
- Go Full Page: Chrome extension to capture full-page reference screenshots.
- Dribbble: For visual inspiration and "vibe" selection.
- https://www.aligndev.dev/ + https://github.com/razr001/align-dev
- https://getdesign.md/design-md + https://www.design-extractor.com/

Technique: Use "Design Thinking" to commit to a bold aesthetic direction (e.g., minimalist, maximalist, retro-futuristic) before writing any code.
Tools:
- Figma Make - https://www.figma.com/make/
- Stitch - https://stitch.withgoogle.com/ - For high-reasoning design planning and PRD/Spec generation.
Prompting Strategy: Use detailed design briefs and developer briefs to provide the AI with structured instructions on colors, layout, and hierarchy.

Technique: Extract high-resolution image assets (like 3D objects) from generated mocks. This allows the AI to implement complex visuals via background images rather than difficult-to-code 3D logic.
Tools:
- Replicate: For background removal and generating 3D assets with parallax movement.

Technique: Never start from a blank slate. Always begin with a structured process and structured codebase (Vite + Tailwind + shadcn/UI) to ensure the project is built upon a solid foundation using clear guidance. Research and find an agentic harness and process/approach that makes sense to you (https://github.com/spinningideas/resources/wiki/AI-Agent-Harnesses)
Tools:
- AI Dev Tools
Workflow:
1. Context Reset: Separate planning and execution into different conversations to avoid context window degradation.
2. Modular Rules Architecture: Split rules by concern (e.g., .agents/components.md or api.md) to keep the AI agent focused.
3. PRD-First Development: The PRD becomes the source of truth for every feature.

Technique: Use the AI to review its own design and output annotations for potential improvements.
Validation Strategy: Includes Human Validation (code review/manual tests) and AI Validation (unit and integration tests).

The 5 Techniques Separating Top Agentic Engineers Right Now (Source: Cole Medin)
Firecrawl: How to Clone Any Website Design (Source: Firecrawl)
Nano Banana + Gemini 3 = S-TIER UI DESIGNER (Source: AI Jason)
Vibe coding beautiful UIs in 3 simple steps (Source: Morning Maker Show)

Below are some good design skills and tools that can be used for UI/UX design: