This paper describes design ideas, architecture and implementation techniques of a kind of visual Web designer VWD (Visual Web Designer). VWD consists of five parts: interactive interface description language based on IFDL, a pattern extraction method, a interface prototype designer based on browser, a visual Web design based on Eclipse plug-in, a compiler engine. Interactive interface description language defines reusable Web structure. Pattern extraction methods describe the schema definition and extraction mode. VWD accelerated interface prototyping application's needs to be quickly identified. Eclipse plug-in based designer facilitates docking and debugging in data models services facilitates collaborative development by separating frontend from backend. Application examples and assessments indicate that VWD improved application development efficiency.