Getting Started

Creating your first project

Visit the Codeyst homepage and you'll see a prompt box where you can start building right away.

Describe what you want to build in natural language. Be specific about your requirements, features, and design preferences.

Watch as the AI analyzes your request and starts generating your project. You'll see real-time progress as files are being created and all the operations the AI is performing.

Once generation starts, your project interface will open automatically with live preview and code access.

Understanding the interface

The project interface is divided into 2 main parts: the chat panel on the left and the workspace panel on the right.

The chat panel is where you communicate with the AI. Describe changes, ask questions, or request new features here. You can see real-time updates of AI operations and file creation as they happen.

The workspace panel has 2 tabs: Preview and Code. By default, the Preview tab is selected when you open your project.

The Preview tab shows your application running in real-time. Interact with your app directly to test functionality and see how it behaves.

Switch to the Code tab to access your project's files. It includes a file explorer showing your folder structure, a code editor to view file contents, and a 'Download' button at the top to export your entire project.

Writing effective prompts

Be specific about what you want. Instead of saying 'make it better', describe exactly what needs improvement: 'add a hero section with a gradient background, large heading, and call-to-action button'.

Upload images with your prompts to provide visual guidance. You can attach screenshots of designs you like, mockups you've created, or reference images to show exactly what you're envisioning.

Use images for design references - show the AI a website layout, color scheme, or UI component style you want to replicate. This is much more effective than trying to describe visual details in words.

Break complex requests into smaller, focused steps. Instead of asking for an entire dashboard at once, start with the layout, then add components, then refine styling.

Reference specific UI elements by name: navigation bar, hero section, feature cards, contact form, footer. This helps the AI understand your structure clearly.

Mention colors, fonts, spacing, and layout preferences when you have them. Details like 'use a blue gradient background' or 'make the text larger and bolder' produce better results.

Iterate progressively. Build the foundation first (structure and layout), then refine styling (colors, fonts, spacing), then add interactivity (buttons, forms, animations).

Previewing and testing

The preview updates automatically as the AI makes changes to your code. Watch it in real-time to see your project come to life.

Interact with your app directly in the preview - click buttons, fill out forms, navigate between pages. This helps you catch issues and understand how everything works.

Test responsive design by resizing the preview window or asking the AI to optimize for mobile devices, tablets, or different screen sizes.

Development is iterative - start with core functionality, then enhance and refine. Review the preview after each change and request adjustments if something isn't quite right.

If you see bugs or styling issues, describe them clearly in the chat. The AI can fix errors, adjust layouts, tweak colors, or modify any aspect of your project.

Switch to the Code tab's file explorer to inspect the generated code and understand your project's structure. This helps you make more informed requests.

Don't hesitate to request changes multiple times. The AI learns from your feedback and the conversation context, improving results with each iteration.