Ai-website-creator NPM

ai-website-creator

A Node.js package that helps you create React website components with predefined templates and design guidelines.

Features

Creates a src/components directory in your project
Generates React components:
- Header.js: Responsive navigation header
- Hero.js: Main hero section
Generates design guidelines and instruction files:
- styles.md: Design guidelines based on your selected style
- HeaderInstructions.md: Header layout templates based on your selected header style
- HeroInstructions.md: Hero section layout templates based on your selected hero style
- buildInstructions.md: Step-by-step build process and asset guidelines

Usage

You can run this package directly using npx:

# Run with interactive style selection (all options default to Option 1)
npx ai-website-creator

# Or specify styles directly
npx ai-website-creator --style="Option 2" --header="Option 3" --hero="Option 4"

Style Options

The package includes 5 predefined style options for the overall design:

Option 1 (default): Bold and vibrant design for tech startups and e-commerce
Option 2: Professional and trustworthy design for service businesses
Option 3: Creative and dynamic design for agencies and educational platforms
Option 4: Eco-friendly and scientific design for environmental organizations
Option 5: Serene and luxurious design for hospitality businesses

Header Style Options

Five header layout options available:

Option 1 (default): Left-Aligned Logo with Right-Aligned Navigation
Option 2: Centered Logo with Split Navigation
Option 3: Full-Width Header with Integrated Search
Option 4: Sticky Header with Scroll Effects
Option 5: Overlay Header with Transparent Background

Hero Style Options

Five hero section options available:

Option 1 (default): Minimalist Lead Capture Hero
Option 2: Product Showcase Hero
Option 3: Video-Centric Hero
Option 4: Image-Centric Hero with Overlay Text
Option 5: Interactive Hero with Scroll Animations

Each style includes detailed guidelines for implementation and best use cases.

Using in your code

If you want to use it programmatically, first install it locally:

npm install ai-website-creator

Then use it in your code:

const aiWebsiteCreator = require('ai-website-creator');

// Initialize with default styles
aiWebsiteCreator.initialize();

// Or initialize with specific styles
aiWebsiteCreator.initialize('Option 2', 'Option 3', 'Option 4');

Using npm scripts

If you've installed it locally, you can add it to your package.json scripts:

{
  "scripts": {
    "create-components": "ai-website-creator",
    "create-components:custom": "ai-website-creator --style=\"Option 2\" --header=\"Option 3\" --hero=\"Option 4\""
  }
}

Then run:

# Use default styles (Option 1 for all)
npm run create-components

# Use custom styles
npm run create-components:custom

Generated Files

The package will create a src/components directory in your project with the following files:

src/
└── components/
    ├── Header.js             # Responsive navigation header component
    ├── Hero.js              # Main hero section component
    ├── styles.md            # Design guidelines for your selected style
    ├── HeaderInstructions.md # Header layout templates based on selection
    ├── HeroInstructions.md   # Hero section layout templates based on selection
    └── buildInstructions.md  # Build process and asset guidelines

Each instruction file includes: