Generate Modules In Seconds With This Single Prompt

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.

add a new module `___` with fields:
- field 1 // intro, etc
- field 2[] // items, etc; array with subfields
> field 2.1
> field 2.2
- field 3 // ctas, etc

run typegen, then create the frontend component. It should ___. On mobile, ___.

1. Place the first blank with the name of the module (i.e. card-list, testimonial-grid, etc).
2. List out the fields needed for your new module.
   1. The agent is smart enough to understand that intro or content are richtext fields, and ctas is an array of cta objects.
3. Use > for nested fields, listed directly under the field that should have subfields.
4. 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:

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

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 ui/modules/index.ts

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!