How should a website look? What size should the buttons be? What layout should you use? Do your users need an OTP to reset their passwords? These are all questions that proper user interface and user experience (UI/UX) design answer.
Design prototyping and testing are critical steps in optimizing website UX functionality. One study reported that improving UX design led to a 400% increase in website conversions.
For such an important task, we need the best possible tools and resources we can get. And lately I've been enjoying using Sourcegraph's Cody. Cody is an AI tool that speeds up coding by helping you understand, write, and fix code. It accesses information from your entire codebase, and also references documentation pages, to provide context about functions and variables, help create new code, and improve your design system.
When combined with Tailwind CSS, which is a utility-first CSS framework, you can rapidly build UI components that are both functional and visually appealing.
In this tutorial, I'll teach you how to build UIs faster with Cody and Tailwind CSS so you can leverage AI to streamline your workflow.
Let's build yet another Todo App, but with a spin. Each to-do item will have a timer that can be started, paused, and reset. This might be useful to track how much time you spend working on specific tasks.
From the Cody docs, Cody's chat allows you to add files and symbols as context in your messages.
Even though Cody will be doing most of the heavy lifting, it's great to have a plan of how we want the UI to look. Here are the wireframes I created with wireframe.cc:
This tutorial uses Visual Studio Code, but the development process is similar across other code editors. If you haven't set up an editor yet, choose one that suits your preference and install Node.js.
Pick the right option for your code editor. If you're using Visual Studio Code, that would be, Install Cody in VS Code.
Opening the extension in your code editor prompts a sign-in:
We'll be working with a Vite + React + TailwindCSS project, but these ideas can easily be applied to any other framework (think Vue, Astro, Svelte, or regular Vanilla JS) or styling library (like Bootstrap, Bulma, Foundation CSS, or anything you'd prefer).
Run the following command to create a new React project, abc-planning-todo-app:
For consistency, let's pick a color palette we'll use for our to-do app.
To use these colors in our Tailwind theme, we first need to give them descriptive names. Let's ask Cody for help!
For the rest of this article, all quotes represent a single prompt message used when chatting with Cody.
First, we create the Header component. With templates for relatively uncomplicated components (for example text inputs, headers, buttons and dropdowns), it's as simple as providing a name for the component, and the copy content it should contain.
Create a simple React Header Component with only company name on the far left and company motto on the far right. Use the Tailwind theme @tailwind.config.js
Cody will generate a Header component, which you can then copy and paste into .
You can also save the code to a new file in your project directly from the Cody chat.
Next, create the Footer component with this prompt:
Create a simple React Footer Component with content Copyright C ABC Planning. Use the Tailwind theme @tailwind.config.js*. Ensure footer is always at the bottom of the viewport*
Next, we'll need a container that will hold all our to-dos. Let's ask Cody to create a to-do container component.
Create a React TodoContainer Component that will serve as a container for Todo items. Use the Tailwind theme @tailwind.config.js*. It should be mobile-responsive*.
We tell Cody:
A good Chat-oriented programming (CHOP) strategy is to separate the creation of markup from the creation of content. This simplifies the prompting process.
Cody can generate both very well, but trying to fine-tune a single prompt for both tasks might be challenging. Each prompt should have a clear, specific goal for best results.
You can save frequently used prompts for future use and share them with other team members within your organization. Commands offer quick, ready-to-use shortcuts for common coding tasks like writing, describing, fixing, and identifying code issues.
Firstly, select the code you would like to generate documentation for, we'll use for this example. Run the Document Code command, and we get a JSDoc docstring for the Footer component class.
Let's create a new prompt to improve the accessibility of our web app and ensure it adheres to the WCAG standard.
Above you can see the results from our accessibility prompt.
AI tools can significantly speed up your workflow, but it's essential to remember that AI is still a work in progress. As powerful as these tools can be, they can also make mistakes or "hallucinate," producing code that seems correct but doesn't actually work in your specific context.
To use AI responsibly for coding, it's crucial to approach it from a point of understanding what needs to be done. Before relying on AI, make sure you have a solid grasp of the task at hand. AI works best when used as a productivity booster rather than a replacement for your expertise.
Here are a few key things to keep in mind when working with AI-generated code:
When used thoughtfully and carefully, AI can make your development process more efficient and help you focus on higher-level tasks. However, it's essential to balance its use with human oversight to ensure the quality and accuracy of the code you're building.
Creating user-friendly UIs has traditionally been time-consuming and difficult to manage. But using Cody, we created an interactive and attractive user interface with minimal effort. Cody supported us throughout the entire development process.
Here are some potential enhancements you can make:
If you enjoyed learning about Cody, you can try more of its features and applications. Sign up for a free, forever account and boost your productivity designing, creating, documenting, and managing applications.
If you want to learn more, you can read this article about chat-oriented programming (CHOP) and how to use Cody for it: Chat-oriented programming (CHOP) in action.
