A modern, high-fidelity low-code development platform template with interactive UI components. This project provides a complete set of HTML templates showcasing a comprehensive low-code development platform interface, perfect for rapid prototyping and development.
Dashboard Interface - Main control panel with project overview and analytics
Project Management - Create, edit, and manage development projects
Version Management - Track and manage application versions
Visual Designer - Drag-and-drop interface builder with component library
Form Designer - Advanced form builder with logic designer and validation
Model Designer - Data model designer with field management and relationships
Data Sources Management - Connect and manage various data sources
Data Models Management - Design and manage data models with relationships
API Management - Design, test, and manage REST APIs
Application Publishing - Deploy and publish applications to production
Login Page - Clean and modern authentication interface
Registration Page - User registration with company information
System Settings - Comprehensive platform configuration
- Dashboard Management - Comprehensive project overview and analytics
- Project Management - Create, edit, and manage development projects
- Visual Designer - Drag-and-drop interface builder with component library
- Form Designer - Advanced form builder with logic designer and validation
- Model Designer - Data model design with field management and associations
- Data Source Management - Connect and manage various data sources
- API Management - Design, test, and manage REST APIs
- Version Control - Track and manage application versions
- System Settings - Comprehensive platform configuration
- Modern UI Design - Clean, professional interface following modern design principles
- Responsive Layout - Fully responsive design supporting desktop, tablet, and mobile
- Interactive Components - Rich interactive elements with smooth animations
- Consistent Branding - Unified brand identity across all pages
- Accessibility - Built with accessibility best practices in mind
- Pure HTML/CSS/JS - No framework dependencies, easy to customize
- Tailwind CSS - Utility-first CSS framework for rapid styling
- FontAwesome Icons - Comprehensive icon library
- Modular Architecture - Well-organized code structure
- Cross-browser Compatible - Works on all modern browsers
lowcode-dev-template/
├── ./ # Main template files
│ ├── css/ # Shared CSS styles
│ │ └── style.css # Unified styling system
│ ├── js/ # JavaScript utilities
│ │ └── breadcrumb.js # Breadcrumb navigation manager
│ ├── images/ # Image assets
│ │ └── username.png # User avatar image
│ ├── interface-planning.md # Product interface planning document
│ ├── ui-design-system.md # UI design system specifications
│ ├── dashboard.html # Main dashboard
│ ├── projects.html # Project management
│ ├── designer.html # Visual designer
│ ├── form-designer.html # Form builder
│ ├── model-designer.html # Data model designer
│ ├── data-sources.html # Data source management
│ ├── data-models.html # Data model management
│ ├── api-management.html # API management
│ ├── publish.html # Application publishing
│ ├── versions.html # Version management
│ └── settings.html # System settings
├── LICENSE # MIT License (English)
├── LICENSE_CN.md # MIT License (Chinese)
├── README.md # This file (with integrated design system)
├── README_CN.md # Chinese documentation
└── CONTRIBUTING.md # Contribution guidelines
- A modern web browser (Chrome, Firefox, Safari, Edge)
- A local web server (optional, for development)
-
Clone the repository
git clone https://github.com/peterfei/lowcode-dev-template.git cd lowcode-dev-template -
Open in browser
- Simply open any HTML file in your browser
- Or use a local server for better development experience:
# Using Python python -m http.server 8000 # Using Node.js npx serve . # Using PHP php -S localhost:8000
-
Navigate to prototypes
- Open
dashboard.htmlto start exploring - Use the sidebar navigation to access different features
- Open
- Customize the design
- Modify
css/style.cssfor global styles - Edit individual HTML files for page-specific changes
- Update
js/breadcrumb.jsfor navigation logic
- Modify
- Add new pages
- Follow the existing structure and naming conventions
- Update the sidebar navigation in all pages
- Extend functionality
- Add new JavaScript modules in
js/ - Create new CSS components in
css/ - Follow the modular architecture pattern
- Add new JavaScript modules in
| Document Type | Filename | Description | Link |
|---|---|---|---|
| Interface Planning | interface-planning.md | Complete product interface architecture and layout planning | View Details |
| UI Design System | ui-design-system.md | Unified design specifications and component standards | View Details |
Rapid Development Platform
├── User Authentication Module (Login, Register, Password Reset)
├── Main Console Module (Dashboard, Project Management, User Settings)
├── Visual Designer Module (Designer Interface, Component Library, Property Panel)
├── Data Management Module (Data Sources, Data Models, API Management)
└── Publishing Module (App Publishing, Version Management, Deployment)
- Standard Layout: 1920x1080 (Top Navigation 60px + Sidebar 280px + Main Content 1640px)
- Compact Layout: 1366x768 (Top Navigation 50px + Sidebar 240px + Main Content 1126px)
- Responsive Design: Supports desktop, tablet, and mobile adaptation
- Login/Register: Centered card layout with step-by-step forms
- Main Console: Grid layout with card components and data visualization
- Visual Designer: Three-column layout (Component Library + Canvas + Property Panel)
- Data Management: List + detail layout with graphical editor
- Publishing Management: Step-by-step wizard layout with real-time monitoring
/* Primary Colors */
--primary-500: #0ea5e9; /* Primary Brand Color */
--secondary-500: #64748b; /* Secondary Color */
/* Functional Colors */
--success-500: #22c55e; /* Success Color */
--warning-500: #f59e0b; /* Warning Color */
--error-500: #ef4444; /* Error Color */
--info-500: #3b82f6; /* Info Color *//* Chinese Fonts */
--font-family-zh: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
/* English Fonts */
--font-family-en: "Inter", "SF Pro Display", -apple-system, sans-serif;
/* Font Sizes */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */--space-2: 0.5rem; /* 8px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */- Button Components: Primary buttons, secondary buttons, hover effects
- Input Components: Unified styling, focus states, placeholders
- Card Components: Shadow effects, hover animations, content sections
- Navigation Components: Top navigation, sidebar navigation, breadcrumb navigation
- Primary Icon Library: FontAwesome 6.0
- Icon Sizes: xs(12px) ~ xl(32px)
- Icon Style: Linear icons primary, filled icons secondary
- Transition Animations: 0.2s ease basic transitions
- Hover Animations: Lift up, scale, fade in/out effects
- Loading Animations: Rotate, pulse animation effects
- Simple and Efficient: Clean interface, efficient and convenient operations
- Consistency: Unified design language and interaction patterns
- Accessibility: Support for accessibility and keyboard navigation
- Responsive: Adapt to different screen sizes and devices
- Mouse Operations: Hover effects, right-click menus
- Touch Operations: Click feedback, gesture support
- Keyboard Operations: Shortcuts, Tab navigation
- Loading States: Skeleton screens, progress bars, loading animations
- Empty States: Empty state illustrations, operation prompts
- Success States: Success messages, auto-close
- Error States: Error messages, retry buttons
| Document | Path | Description |
|---|---|---|
| Interface Planning | interface-planning.md |
Complete product interface architecture design, including information architecture, layout planning, and key interface design |
| UI Design System | ui-design-system.md |
Unified design system specifications, including colors, typography, spacing, components, icons, and animations |
-
Interface Planning Document - Understand overall product architecture and interface layout
- Information Architecture Design: Module division and navigation structure
- Layout Planning: Adaptation solutions for different screen sizes
- Key Interface Design: Detailed interface design for each module
-
UI Design System Specifications - Follow unified design standards
- Color System: Primary colors, functional colors, neutral colors
- Typography System: Chinese and English fonts, sizes, weight specifications
- Component Standards: Button, input, card, navigation component standards
- Icon System: Icon library selection and size specifications
- Animation System: Transition, hover, loading animation effects
-
User Experience Analysis - Understand user needs and interaction design
- Design Principles: Simple and efficient, consistency, accessibility
- Interaction Design: Mouse, touch, keyboard operation support
- State Design: Loading, empty, success, error states
# View interface planning
cat interface-planning.md
# View UI design system specifications
cat ui-design-system.md
The project uses a unified CSS system in css/style.css. Key customization points:
- CSS Variables: Modify color scheme and spacing
- Component Styles: Customize individual component appearance
- Responsive Breakpoints: Adjust for different screen sizes
- Animation Effects: Modify transition and animation properties
Extend the platform with additional features:
- New Page Types: Add specialized designer interfaces
- Component Library: Expand the available UI components
- Data Integration: Connect to real data sources
- User Management: Implement authentication and authorization
- API Integration: Connect to backend services
The prototype is fully responsive and optimized for:
- Desktop: 1200px+ (Full feature set)
- Tablet: 768px - 1199px (Adapted layout)
- Mobile: 320px - 767px (Touch-optimized)
- Flexible Grid System: Adapts to different screen sizes
- Touch-Friendly Interface: Optimized for mobile interaction
- Collapsible Navigation: Mobile-friendly menu system
- Scalable Typography: Readable on all devices
- Chrome: 90+
- Firefox: 88+
- Safari: 14+
- Edge: 90+
We welcome contributions! Please see our Contributing Guidelines for details.
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
- UI/UX Improvements: Enhance the design and user experience
- New Features: Add new functionality and pages
- Documentation: Improve documentation and examples
- Bug Fixes: Report and fix issues
- Performance: Optimize code and assets
This project is licensed under the MIT License - see the LICENSE file for details.
本项目采用MIT许可证 - 详情请参见 LICENSE_CN.md 文件。
- Tailwind CSS - For the utility-first CSS framework
- FontAwesome - For the comprehensive icon library
- OpenSpec - For the development workflow methodology
- Contributors - Thanks to all contributors who help improve this project
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: peterfeispace@gmail.com
- Add more interactive components
- Implement data persistence
- Add user authentication
- Create component library
Made with ❤️ for the developer community