---
title: "Generate Modules In Seconds With This Single Prompt"
description: "Discover how AI-generated prompts can streamline module creation and enhance coding efficiency."
---

# Generate Modules In Seconds With This Single Prompt

![Vecna editing HTML on a Macbook with a paper coffee cup, scene from Stranger Things](https://cdn.sanity.io/images/cyu7k2r0/production/258f8d4db0a1bc5293e37960bfee2e241c6b13b9-2688x1760.png)

I’ve always pledged my SanityPress template was fully written by myself—100% hand-coded. Unfortunately (or fortunately), this is no longer the case.

## Embracing AI for Code Generation

In recent months, I've been actively using Claude Code and Cursor's Agent mode to generate a significant portion of the code. By experimenting with various prompts, I've developed a straightforward approach that helps me generate the precise code I need with minimal intervention. This method is about 80-95% successful, akin to having a skilled junior developer without the onboarding hassle.

## The Power of a Simple Prompt

The prompt I've refined creates a working module with specified fields, including a React component with Tailwind styles that align with the existing codebase.

```text
code:add a new module `___` with fields:\n- field 1 // intro, etc\n- field 2[] // items, etc; array with subfields\n> field 2.1\n> field 2.2\n- field 3 // ctas, etc\n\nrun typegen, then create the frontend component. It should ___. On mobile, ___.
```

*Filename: Prompt template*

Place the first blank with the name of the module (i.e. `card-list`, `testimonial-grid`, etc).

List out the fields needed for your new module.

The agent is smart enough to understand that `intro` or `content` are richtext fields, and `ctas` is an array of `cta` objects.

Use `>` for nested fields, listed directly under the field that should have subfields.

In the last sentence, explain to the agent how the module should look. If mobile has a separate layout, mention that as needed, along with any other details about your module.

### Example Prompt

Say I wanted a list of cards displayed in a grid layout. Each card should have an image or an icon, a richtext field (`content`), and call-to-actions. My prompt could look like this:

```text
code:add a new module `card-list` with fields:\n- intro\n- cards[]\n> image\n> icon (image)\n> content\n- ctas\nrun typegen, then create the frontend component. It should display the items in a grid layout. On mobile, they are stacked in a single column.
```

*Filename: Prompt sample*

## The Process

In a matter of a minute, Cursor:

- creates the Sanity Schema with all fields, including an icon for previews.
- registers the new schema in `sanity/schemaTypes/index.ts` and adds it to the list of schemas to be used in the `page` document
- runs `npm run typegen` to generate the TypeScript types
- creates a basic implementation of the frontend component; correctly typed, and importing any other necessary components like `<PortableText>` or `<CTAList>` etc
- registers the frontend component in `src/ui/modules/index.tsx`

![Screenshot of Cursor after completing the task with the given prompt](https://cdn.sanity.io/images/cyu7k2r0/production/dc27abbd10e0914a5d0b48ade0cf852a0277d067-3248x2112.png)

*Editor: Cursor; Model: Composer 1*

## Minor Adjustments

I had to make minor changes, such as grouping the `image` and `icon` subfields under the same fieldset with a two-column display option, but overall, the task was executed perfectly.

## Conclusion

SanityPress has always been built on a foundation of consistent structure, simplicity, and customizability. It turns out the code is well-suited for use with agentic models.

Give SanityPress and vibe coding a try, now with a prompt that can significantly boost your productivity!

![SanityPress Things](https://cdn.sanity.io/images/cyu7k2r0/production/194a4faa2cbea8f1ffc40a8f3951b10747faffea-1376x768.png)