nutui-templates

Create mobile e-commerce templates with NutUI for Vue and React projects.

4|Updated Apr 12, 2026
One-click install
npx skills add https://github.com/tiantangcao1980-web/DesignDNA-Skills --skill nutui-templates
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nutui-templates
Source: https://github.com/tiantangcao1980-web/DesignDNA-Skills/tree/main/designdna/skills/nutui-templates
Command: npx skills add https://github.com/tiantangcao1980-web/DesignDNA-Skills --skill nutui-templates

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

NutUI templates accelerate mobile e-commerce UI development by providing ready-to-copy page layouts and clear integration guidance for Vue and React.

Core Features & Use Cases

  • Template catalog covering Home, Goods, Cart, Me, Checkout, and other pages in Vue and React variants.
  • Browse live or copy templates directly into your project and scaffold with NutUI CLI.
  • Customize templates to fit branding while preserving NutUI components and patterns.
  • Use cases include quickly bootstrapping product detail, shopping cart, and user profile flows with minimal setup.
  • Pre-flight guidelines help ensure production-ready templates.

Quick Start

Copy a Vue or React template into your project to scaffold your first page with NutUI templates.

Frequently Asked Questions about nutui-templates

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create mobile e-commerce pages with NutUI for Vue and React?

To create mobile e-commerce pages with NutUI, you can copy pre-built templates for Home, Goods, Cart, Me, and Checkout directly into your Vue or React project. This accelerates UI development by providing ready-to-use page layouts and integration guidance.

Can I use NutUI templates to scaffold a shopping cart and checkout flow in React?

Yes, you can use NutUI templates to scaffold shopping cart and checkout flows in React. The template catalog includes ready-to-copy layouts for these specific pages, allowing you to bootstrap e-commerce features with minimal setup.

What is the best way to customize NutUI components in a Vue mobile template?

The best way to customize NutUI components in a Vue mobile template is to copy the template into your project and modify it to fit your branding. This approach preserves underlying NutUI components and patterns while allowing full visual customization.

Does the NutUI template catalog include a user profile page for mobile apps?

Yes, the NutUI template catalog includes a user profile page, referred to as the Me page, for mobile apps. It provides a ready-to-copy layout that helps you quickly bootstrap user account flows in both Vue and React projects.

Do I need the NutUI CLI tool to copy templates into my project?

Yes, you need the NutUI CLI tool to scaffold and wire templates into your project. The CLI provides the tooling required to copy, customize, and integrate the pre-built mobile e-commerce page layouts effectively.

Are there limitations when using NutUI templates for mobile e-commerce UI development?

The main limitation is that NutUI templates require existing NutUI integration and CLI tooling in your project. You must ensure your environment meets these pre-flight guidelines to successfully wire the templates into your Vue or React application.