1. Quick Start: From Cropping to Color

Start by adjusting asset dimensions with Image Cropper (图片裁剪) to unify canvas ratios. Then open Color Palette (配色方案生成) to quickly extract harmonious palettes, or use Color Converter (颜色转换器) to convert between HEX/RGB for cross-platform consistency. For gradient backgrounds, Gradient Generator (渐变色生成) generates CSS code in one click.

2. UI and Icons: Crafting Fine Details

Choose the right font: use Font Previewer (字体预览) to compare Chinese and English typefaces in real time before entering interface text. For icons, Icon Finder (图标搜索) offers a huge library of vector icons with keyword filters. If you need custom icons, convert downloaded SVGs to bitmaps via SVG to PNG (SVG 转 PNG) for legacy system compatibility.

3. Output Mockups and Share

After finishing your design, Mockup Generator (样机生成) embeds your UI into device frames to produce high-fidelity presentation images. Finally, use Image Cropper again to optimize export dimensions, or batch-convert assets with SVG to PNG. All tools are free, watermark-free, and ideal for rapid iteration.

FAQ

Q: How to make color schemes more professional? A: Use Color Palette's "Random" mode, then fine-tune hues manually and verify contrast with Color Converter.

Q: SVG to PNG output is blurry? A: Ensure the source SVG is larger than the target size, and select 2x or 3x scaling during conversion.

Q: How to customize mockup backgrounds? A: Mockup Generator supports uploading custom backgrounds; first crop your background image to the device screen ratio using Image Cropper.