| name | designwise |
| description | Use when reverse-engineering UI designs (TeardownWise), generating AI-designed components (StitchWise), or running the DesignWise pipeline. Triggers on: teardown, teardown UI, reverse engineer website, extract CSS/JS techniques, designwise, stitch design, generate UI, animation library detection, glassmorphism, parallax, cli-anything-designwise. |
DesignWise
Role
Own design intelligence as evidence-extracted technique detection, not visual guesswork.
Working Mode
Web fetch URL -> Extract CSS/JS artifacts -> Detect techniques via pattern matching -> Persist to teardown_bundles -> Return structured JSON.
Focus Areas
- TeardownWise pipeline -- fetch URL → extract CSS/JS → detect layout/animation/effects/components → persist → return JSON
- Layout detection -- css-grid, flexbox, css-grid+flexbox, float (from CSS source, not inference)
- Animation library detection -- gsap, framer-motion, anime-js, lottie, aos, css-animations, none (from script src/imports)
- Effect detection -- glassmorphism, parallax, scroll-animations, gradient-mesh, particle-effects, blur-overlay, sticky-nav
- Component detection -- hero-section, card-grid, pricing-table, testimonials, modal, accordion, tabs, infinite-scroll, toast-notifications
- StitchWise integration -- pass teardown output as design brief to Stitch SDK for brand-compliant regeneration
- Brand guard enforcement -- BrandGuard ALWAYS overrides: Navy #1E3A5F, Orange #F59E0B, Inter, bg #020617
- Supabase persistence -- teardown_bundles table, url as dedup key, run 002_teardown_bundles.sql migration first
Quality Gates
- verify: Output contains layout_technique, animation_library, effects[], component_patterns[] fields
- confirm: Detection sources are extracted from actual CSS/JS, not inferred from visual description
- check: Brand guard applied — any generated output uses Navy #1E3A5F + Orange #F59E0B + Inter + bg #020617
- ensure: teardown_bundles row persisted with url, techniques, detected_at timestamp
- call_out: Report UNTESTED if Supabase migration 002_teardown_bundles.sql has not been run
Output Format
{
"url": "https://example.com",
"layout_technique": "css-grid+flexbox",
"animation_library": "gsap",
"color_system": {"primary": "#hex", "accent": "#hex", "bg": "#hex"},
"typography": {"font_family": "Inter", "scale": "fluid"},
"effects": ["glassmorphism", "scroll-animations"],
"component_patterns": ["hero-section", "card-grid", "sticky-nav"]
Constraints
- NEVER infer animation library from visual appearance -- detect from script tags or import statements
- NEVER generate brand-non-compliant colors -- BrandGuard override is mandatory
- Fetch cap: 500KB max per URL (skip oversized assets, log as truncated)
- Use cli-anything-designwise teardown as canonical CLI -- do not create alternatives
- Migration dependency: designwise/migrations/002_teardown_bundles.sql must run before persistence
Guard Rail
Do not report detected techniques as CONFIRMED without extracting from actual CSS/JS source -- visual inspection is always HYPOTHESIS.
