Anta CLI

A powerful CLI tool to scaffold Anta apps with integrated Figma design files. Create production-ready Next.js projects with matching design systems in seconds.

Features

• 🚀 Quick Setup: Scaffold a complete Next.js application instantly
• 🎨 Integrated Design: Generate matching Figma design files automatically
• 🎯 Brand Customization: Interactive prompts for branding (colors, style, pages)
• 📦 Auto Configuration: Automatically updates config with your project details
• 🌐 Dev Server: Starts development server immediately after setup
• 🎭 Design Styles: Choose from Modern, Minimal, Corporate, Creative, or Tech styles
• 📄 Page Templates: Select from 7 pre-built page layouts

Installation

Global Installation

npm install -g anta

NPX (No Installation)

npx anta new-client my-client

Usage

Create a New Client Project

anta new-client <client-name>

This command will:

1. Clone the Next.js starter template
2. Ask for project customization details
3. Update configuration with your branding
4. Install dependencies
5. Generate a Figma design file (optional)
6. Start the development server

Example

npx anta new-client acme-corp

You'll be prompted for:

• Client/Company Name: The client's official name
• Project Title: The website/app title
• Tagline: A short description
• Primary Color: Main brand color (hex)
• Secondary Color: Secondary brand color (hex)
• Accent Color: Accent/highlight color (hex)
• Design Style: Modern, Minimal, Corporate, Creative, or Tech
• Pages: Select which pages to include (Home, About, Services, Portfolio, Contact, Blog, Team)

Options

| Option | Description | Default | |--------|-------------|---------| | -r, --repo <url> | GitHub repository URL for starter template | https://github.com/theanta/nextjs-starter.git | | --skip-install | Skip dependency installation | false | | --skip-dev | Skip starting development server | false | | --skip-figma | Skip Figma file generation | false | | --figma-token <token> | Figma personal access token | env: FIGMA_TOKEN | | -h, --help | Display help information | | | -V, --version | Display version number | |

Figma Integration

Setup

To enable Figma file generation:

1. Get a Figma Personal Access Token:

   • Go to Figma → Settings → Account → Personal Access Tokens
   • Generate a new token
   • Copy the token

2. Set the Token:

   # Option 1: Environment variable (recommended)
   export FIGMA_TOKEN=your-token-here
      
   # Option 2: Command line option
   npx anta new-client my-client --figma-token your-token-here

Generated Figma File

The generated Figma file includes:

• Brand Colors: As Figma color styles
• Typography: Font styles and sizing
• Components: Buttons, cards, forms, navigation, footer
• 5 Page Layouts:
  • Home (Hero, Features, CTA, Footer)
  • About (Hero, Story, Team, Values, Footer)
  • Services (Hero, Services Grid, Process, CTA, Footer)
  • Portfolio (Hero, Projects Grid, Case Studies, Footer)
  • Contact (Hero, Contact Form, Map, Footer)

Design Spec

Even without Figma API access, Anta generates a figma.json file with your complete design specification:

{
  "client": "Acme Corp",
  "project": "Acme Corp Website",
  "brandColors": {
    "primary": "#3B82F6",
    "secondary": "#1E40AF",
    "accent": "#10B981"
  },
  "designStyle": "Modern",
  "typography": {
    "heading": "Inter",
    "body": "Inter"
  },
  "pages": ["home", "about", "services", "portfolio", "contact"]
}

Configuration

The generated project includes a config.js file with all your customizations:

module.exports = {
  siteName: 'Acme Corp Website',
  siteDescription: 'Leading the industry',
  clientName: 'Acme Corp',
  primaryColor: '#3B82F6',
  secondaryColor: '#1E40AF',
  accentColor: '#10B981',
  designStyle: 'Modern',
  pages: ['home', 'about', 'services', 'portfolio', 'contact'],
  // ... more configuration
};

Examples

Basic Usage

npx anta new-client my-client

With Custom Repository

npx anta new-client my-client --repo https://github.com/myorg/my-starter.git

Skip Development Server

npx anta new-client my-client --skip-dev

Skip Figma Generation

npx anta new-client my-client --skip-figma

With Figma Token

npx anta new-client my-client --figma-token figd_xxxxxxxxxx

Project Structure

After running the command, your project will have:

my-client/
├── pages/              # Next.js pages
├── components/         # React components
├── styles/            # CSS/Tailwind styles
├── public/            # Static assets
├── config.js          # Project configuration
├── figma.json         # Design specification
├── package.json       # Dependencies
└── README.md          # Project README

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn
• Git
• Figma account (optional, for design file generation)

Workflow

1. Run Command: npx anta new-client xyz
2. Answer Prompts: Customize your project
3. Get Scaffolded App: Next.js app with your branding
4. Get Design File: Figma file with matching design system
5. Start Building: Dev server running, design file ready

Troubleshooting

Common Issues

1. Repository not found: Make sure the repository URL is correct and accessible
2. Permission denied: Ensure you have write permissions in the target directory
3. Figma generation failed: Check your Figma token is valid
4. Dependencies installation failed: Check your internet connection and npm configuration

Getting Help

If you encounter any issues:

1. Check the console output for specific error messages
2. Verify all prerequisites are installed
3. Ensure your Figma token is valid (if using Figma integration)

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

Version 1.0.0

• Initial release
• Client project scaffolding
• Figma design file generation
• Interactive customization prompts
• 5 pre-built page templates
• Design style selection
• Automatic configuration updates