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:

• Detailed layout specifications
• Best practices for implementation
• Mobile responsiveness guidelines
• Best use cases for the selected style

License

MIT