shiny-drawing
Darren HopwoodPROJECT TITLE: InstructScope SUBTITLE: Powered by InstructBrain CORE VISION: Build a standalone, single-function B2B SaaS web application optimized specifically for widescreen laptop screens (1080p and up). The purpose of the app is "Pre-Construction Scope Auditing." Users (Senior Site Managers and Quantity Surveyors) will upload complex architectural drawing PDFs during a project's PCSA (Pre-Construction Services Agreement) phase. The app uses an advanced AI engine (InstructBrain) to visually analyze vector linework, hatching, and text callouts to allocate construction scope to separate trade packages, automatically exposing high-risk "grey areas" (scope gaps) before contracts are signed. BRANDING & AESTHETIC: - Brand Name: InstructScope - Subtitle: Powered by InstructBrain - Colors: Follow the official premium, tech-forward InstructSite Green aesthetic. Dark mode prioritized for professional, modern dashboard appeal, utilizing crisp borders and zero clutter. LAYOUT ARCHITECTURE (3-Panel Laptop Workspace): 1. HEADER: Displays "INSTRUCTSITE | InstructScope (Powered by InstructBrain)", current Project Name, Active Drawing Selector, and a prominent "Export Scope Pack" button. 2. LEFT PANEL (20% Width): Trade Package Matrix. A clean interactive list of subcontractors (e.g., Roofing, Cladding, Drylining, MEP, Fire Protection). Clicking a trade filters and highlights only their corresponding scope on the canvas. 3. CENTER CANVAS (60% Width): The High-Resolution Drawing Viewer. Supports smooth pan and mouse-wheel zoom for PDF blueprints. Overlays transparent, color-coded geometric highlights directly over drawing details based on trade allocation (e.g., blue for roofing, green for cladding). 4. BOTTOM PANEL (20% Height / Full Width below canvas): The AI "Grey Area" Audit Trail. A live feed of flagged scope risks, omissions, and interface conflicts with amber/red severity markers. CORE BACKEND & DATABASE STRUCTURE (PostgreSQL/Supabase Native): - 'projects': Id, name, client_name, contract_type (e.g., PCSA). - 'drawings': Id, project_id, drawing_number, drawing_title, storage_url, processed_status. - 'trade_packages': Id, project_id, trade_name, color_code (Hex for canvas overlays). - 'drawing_elements': Id, drawing_id, element_type, raw_content (parsed text/vector), bounding_box (JSON coordinates), suggested_trade_id, assigned_trade_id. - 'scope_gaps': Id, drawing_id, element_id, risk_level (Low/Med/High), gap_description, recommended_action, status (Open/Resolved). INTELLIGENT TRADE CLASH INTERFACES TO PROGRAM (InstructBrain Logic): The backend must run incoming parsed data through a specialized risk matrix targeting high-value Tier-1 contract omissions: - Roofing vs. Cladding: Interface seals, insulation behind parapets, VCL upstand continuity. - MEP vs. Drylining: Plywood backing/pattresses inside stud walls for heavy kit, acoustic/fire mastic penetration seals, access hatches. - Fire Protection vs. All Trades: Deflection head seals at concrete soffits, ductwork fire damper installation vs. wiring, touching up structural steel intumescent paint after secondary drilling. - MEP vs. Groundworks: Builder's Work in Connection (BWIC), concrete housekeeping plinths, core-drilling ownership for penetrations >150mm. OUTPUTS REQUIRED from 8080.ai Agents: - Frontend Dev: Responsive Next.js/React workspace optimized for widescreen, rendering mock interactive PDF overlays using the JSON bounding boxes. - Backend Dev: Python FastAPI or Node.js endpoints handling file uploads, DB writes, and mock processing loops for the trade matrix. - QA Agent: Automated visual testing for the canvas layout and responsive panel splits.
Comments (0)
Sign in to leave a comment
System Requirements
shiny-drawing System Requirements Document
1. Introduction
The "shiny-drawing" project is a standalone B2B SaaS web application designed to optimize pre-construction scope auditing. This application is tailored for widescreen laptop screens and aims to assist Senior Site Managers and Quantity Surveyors in analyzing complex architectural drawings during the PCSA phase. By leveraging advanced AI capabilities, the application identifies and manages potential scope gaps, enhancing efficiency and reducing risk.
2. System Overview
The "shiny-drawing" application provides a comprehensive platform for pre-construction scope auditing. Users can upload architectural drawing PDFs, which the system analyzes using AI to allocate construction scope to trade packages and highlight high-risk areas. The application is designed for widescreen displays, ensuring an optimal user experience for professionals in the construction industry.
3. Functional Requirements
- As a Senior Site Manager, I should be able to upload architectural drawing PDFs for analysis.
- As a Quantity Surveyor, I should be able to view and interact with the analyzed drawings.
- As a User, I should be able to export scope packages after analysis.
- As a User, I should be able to filter and highlight trade-specific scopes on the drawing canvas.
- As a User, I should be able to view flagged scope risks and recommended actions.
4. User Personas
- Senior Site Manager: Responsible for overseeing construction projects and ensuring that all aspects are completed on time and within budget.
- Quantity Surveyor: Specializes in managing all costs related to building and civil engineering projects, from initial calculations to final figures.
5. Visuals Colors and Theme
- primary: #1A535C (Deep Teal)
- primary_light: #4ECDC4 (Light Teal)
- secondary: #FF6B6B (Coral)
- accent: #00FF00 (Branding Green)
- highlight: #FF9F1C (Orange)
- bg: #000000 (Dark Background)
- surface: rgba(26, 83, 92, 0.8)
- text: #011627 (Rich Black)
- text_muted: #7A7A7A (Gray)
- border: rgba(233, 69, 96, 0.2)
6. Signature Design Concept
The "shiny-drawing" homepage will feature an interactive blueprint aesthetic. Users will be greeted with a dynamic, pencil-sketch animation that morphs into a detailed architectural drawing as they scroll. Using @react-three/fiber and gsap, the homepage will simulate a drafting table where users can "draw" with their cursor, revealing different sections of the site. This interactive experience will engage users, making the process of exploring the application feel like an extension of their professional work.
7. Interaction Model & Motion Direction
The landing page will utilize a "parallax" interaction model, creating a layered depth effect as users scroll. Decorative elements like drafting tools and blueprint grids will move at different speeds, enhancing the storytelling aspect of the homepage. Internal pages will adopt a "static" model to prioritize clarity and readability, ensuring that users can focus on detailed data and analysis without distraction.
8. Non-Functional Requirements
- The application must be responsive and optimized for 1080p and higher resolutions.
- The system should handle concurrent uploads and analyses without performance degradation.
- Data security and user privacy must be ensured through secure authentication and data handling practices.
9. Tech Stack
- Frontend: React for Web
- Backend: Python FastAPI or Node.js
- Database: PostgreSQL/Supabase
10. Assumptions and Constraints
- The application will be used primarily on laptops or monitors in a professional setting.
- Standard email and password authentication will be implemented initially.
- The system will prioritize dark mode for a modern, professional aesthetic.
11. Glossary
- PCSA: Pre-Construction Services Agreement
- AI: Artificial Intelligence
- B2B: Business-to-Business
- PDF: Portable Document Format
This document outlines the comprehensive system requirements for the "shiny-drawing" project, ensuring a clear path forward for design and development.
My Dashboard
Monitor your pre-construction scope auditing projects, track AI-analyzed architectural drawings, and manage trade package allocations — all in one place.
My Dashboard
Monitor your pre-construction scope auditing projects, track AI-analyzed architectural drawings, and manage trade package allocations — all in one place.
No comments yet. Be the first!