Resources
Here you'll find design resources and development tools related to Ghuo Design.
Design Resources
Sketch Component Library
Complete Ghuo Design component library for Sketch design software.
- File Format: .sketch
- Contents: All basic components, icon library, color specifications
- Update Frequency: Updated with component library versions
Figma Component Library
Design component library for Figma, supporting team collaboration.
- File Format: Figma file
- Contents: Complete component system, design specifications, prototype templates
- Features: Auto layout, component variants, design tokens
Adobe XD Resource Pack
Design resource pack for Adobe XD users.
- File Format: .xd
- Contents: UI components, wireframe templates, interactive prototypes
- Use Cases: Rapid prototyping, user experience design
Development Tools
VS Code Extension
VS Code extension plugin to improve development efficiency.
Features:
- Component code snippet auto-completion
- Intelligent property suggestions
- Theme color preview
- Quick component documentation access
Chrome Developer Tools
Browser extension to help debug and optimize Ghuo Design applications.
Features:
- Component tree visualization
- Real-time style editing
- Performance analysis tools
- Accessibility checking
Icon Resources
Icon Library Download
Complete Ghuo Design icon library in multiple formats.
Included Formats:
- SVG vector icons
- PNG bitmap icons (multiple sizes)
- Icon Font
- React/Vue component format
Icon Categories:
- General icons (200+)
- Business icons (150+)
- Brand icons (50+)
- Decorative icons (100+)
Font Resources
Recommended Fonts
Font recommendations that work well with Ghuo Design.
Chinese Fonts:
- PingFang SC
- Microsoft YaHei
- Source Han Sans
English Fonts:
- Inter
- Roboto
- Open Sans
- Lato
Template Resources
Page Templates
Common page layout templates, ready to use.
Admin Dashboard Templates:
- Dashboard page
- Data list page
- Form page
- Detail page
Marketing Page Templates:
- Product introduction page
- Feature showcase page
- Pricing page
- About us page
Component Templates
Usage templates and best practices for composite components.
Data Display:
- Statistics card combinations
- Chart display combinations
- Table operation combinations
Form Combinations:
- Basic information forms
- Advanced search forms
- Multi-step forms
Learning Resources
Design Guidelines
In-depth understanding of Ghuo Design's design philosophy and usage methods.
- Design Values
- Design Principles
- Visual Language
Development Documentation
Detailed component API documentation and usage examples.
Video Tutorials
Learn how to use Ghuo Design through videos.
Basic Tutorials:
- Introduction to Ghuo Design
- Environment setup and installation
- Your first Ghuo Design application
Advanced Tutorials:
- Detailed theme customization
- Complex form design
- Data visualization practices
Community Resources
GitHub Repository
Open source code repository, contributions welcome.
- Main Repository: Core component library code
- Documentation Repository: Official website and documentation source
- Examples Repository: Usage examples and templates
Discussion Community
Exchange and discuss with other developers and designers.
- GitHub Discussions: Technical discussions and feedback
- WeChat Group: Real-time communication and experience sharing
- QQ Group: Beginner Q&A and resource sharing
Blog Articles
Technical articles shared by team and community members.
- Design system construction experience
- Component library development practices
- User experience design insights
- Frontend technology sharing
Download Instructions
All resources are free to download and use, following the MIT open source license.
Usage Terms:
- Can be used for commercial and non-commercial projects
- Free to modify and distribute
- Must retain original copyright notice
How to Get:
- Direct download: Click the download link for the corresponding resource
- Git clone: Clone the latest version from GitHub repository
- NPM install: Install component library through package manager
If you have any questions or suggestions, please contact us through GitHub Issues or community channels.