CSSGeneratorGPT is the perfect tool for developers and designers who want to bring their raw HTML to life. With just a few clicks, this AI-powered template takes your plain HTML and styles it beautifully, so you don’t have to spend hours coding CSS from scratch or hunting for design ideas.
It is built with Next.js and OpenAI API. Whether you're building something new or want to make your website prettier, this template turns your basic website into something that looks amazing.
https://css-generator-gpt.vercel.app/
- Provide raw HTML to produce CSS
- Add custom commands to generate CSS according to UI preference
- Live preview to view the CSS suggestions
- Redesign the generated CSS using prompts
- Next.js for Frontend -Tailwind CSS and Chakra UI for UI
- OpenAI API Key for AI-Powered Features
- Transform raw HTML into responsive designs with AI-generated CSS.
- Customize styling options and receive instant visual feedback on your code.
- Suitable for prototyping, refining applications, and exploring CSS styling techniques.
- Clone the repository:
https://github.com/0xmetaschool/css-generator-gpt.git
- Navigate to the project directory:
cd css-generator-gpt
- Install dependencies:
npm install
- Set up environment variables:
Create an .env file in the root directory and add the following variables:
OPENAI_API_KEY=your_openai_api_key
- Run the development server:
npm run dev
Open your browser and navigate to http://localhost:3000.
We love contributions! Here's how you can help make the CSSGeneratorGPT even better:
- Fork the project (
gh repo fork https://github.com/0xmetaschool/code-styler) - Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Please open an issue in the GitHub repository for any queries or support.