An AI-powered SaaS application that transforms wireframe sketches into production-ready code.
Report Bug
.
Request Feature
Sketchify is a full-stack SaaS application designed for designers and developers to accelerate the UI development process. It provides a digital canvas where users can sketch wireframes, generate a complete design system from a mood board, and then leverage the power of AI to convert these sketches into fully-styled, production-ready HTML and CSS code in real-time.
Key features include:
- An infinite canvas for sketching wireframes with various tools.
- AI-powered style guide generation from mood board images.
- Real-time streaming of AI-generated code directly onto the canvas.
- Interactive design chat to iteratively refine AI-generated components.
- A complete subscription and credit system for monetization.
This project is built with a modern, scalable tech stack designed for performance and real-time capabilities.
- Next.js
- React
- TypeScript
- Tailwind CSS
- Convex
- Redux Toolkit
- Anthropic API (via Vercel AI SDK)
- Polar
- Ingest
- Shadcn/UI
To get a local copy up and running, follow these simple steps.
- Node.js:
Ensure you have Node.js (v18 or later) installed.
# To check if Node.js is installed, run:
node -vYou can download it from https://nodejs.org/.
- Environment Variables
You will need to sign up for accounts with the following services to get the necessary API keys: * Convex * Clerk (for authentication) * Anthropic (for AI models) * Polar (for payments) * Ingest (for background jobs)
-
Clone the repo
git clone https://github.com/itsskofficial/Sketchify.git
-
Enter into the directory
cd Web2 -
Install npm packages
npm install
-
Set up Environment Variables
Create a
.env.localfile in the root of the project and add the necessary API keys and configuration variables. Use the.env.examplefile as a template.# Convex CONVEX_DEPLOYMENT= NEXT_PUBLIC_CONVEX_URL= # Clerk Auth NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= CLERK_SECRET_KEY= # Anthropic AI ANTHROPIC_API_KEY= # Polar Payments POLAR_ACCESS_TOKEN= POLAR_WEBHOOK_SECRET= NEXT_PUBLIC_POLAR_PLAN_ID= # Ingest INGEST_SIGNING_KEY= INGEST_EVENT_KEY= # App URL NEXT_PUBLIC_APP_URL=http://localhost:3000 -
Run the development server
npm run devOpen http://localhost:3000 with your browser to see the result.
Sketchify serves as a powerful tool for designers to bring their ideas to life without writing code.
- Create a Project: After signing in, create a new project from your dashboard.
- Build a Style Guide: Navigate to the Style Guide tab, upload inspiration images to the mood board, and use the "Generate with AI" feature to create a unique color palette and typography system.
- Sketch a Wireframe: Go to the canvas, create a frame, and use the drawing tools to sketch out your UI wireframe.
- Generate Design: Click the "Generate Design" button on the frame. The AI will use your sketch and the project's style guide to generate a fully styled component in real-time.
- Iterate with Chat: Use the design chat to make conversational requests and refine the generated UI until it's perfect.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the repository a star! Thanks again!
- Fork the Project
- 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
Distributed under the MIT License. See LICENSE for more information.
This project would not have been possible without the incredible tools and services provided by the following: