prompt library

Summary

assorted LLM prompts I used to create various parts of bencuan.me.

overview

LLMs and coding agents are getting good and I’ve found a great deal of success in using them to implement various features and designs around the Garden and other parts of my website. This is a collection of prompts I’ve used in the past, mostly as a reference for myself if I ever need them again, but also to share publicly in case anyone is looking for a data point on how someone is successfully using coding agents for some reason.

I primarily use Claude Opus 4.6, either with Augment Code (VSCode extension or Intent) or Claude Code (CLI).

general pattern

I have found the most success in structuring prompts like this:

Start with a high-level goal: “I want to implement <some feature> that allows me/users to <do a thing>”.

Add context: link screenshots, Figma designs, guideline documents, or other external sources of context. I explicitly include a brief description of each piece of context and what I intend to use it for.

List implementation details: free-form collection of bullet points with very specific information about how I want this feature to be implemented. (for certain things where I’m not sure or don’t particularly care about the specifics, I usually use hints like “use your best judgement on this” or “make an informed decision on the best way to do this”).

List follow-up or sub-tasks: If there are related pieces of this feature, I provide some nudging towards a reasonable ordering of tasks to follow, and specific things to not forget to do after the feature is done being implemented (like cleaning up old files, or testing the feature). This can be done in conjunction with listing implementation details (i.e., split implementation lists into subpoints of a numbered list)

examples

turtlenet

I want to create a new https://bencuan.me/turtlenet subpage containing contents for my TurtleNet blog series. It is currently hosted elsewhere, and I have designed a new page layout for it to live on my website instead.

Implement this page according to this design: https://www.figma.com/design/Ndyn8rMc8frfnPrywwN44f/TurtleNet?node-id=2935-95&m=dev

Some design details:

• Show as many pages to the left and right of the current page as possible (default 5, but resize based on screen width). If there are no available pages to go to before, grey out the ‘before’ arrow. Do the same for the ‘after’ arrow.
• Make the ‘go home’ banner static.
• Make it so that when you scroll down, the navigation bar sticks to the top inline with the ‘go home’ banner and remains at the top no matter how much you scroll.

There are some fonts available in public/fonts. Use the fonts specified in the Figma document. You may need to update _fonts.scss to create definitions for Frama and Supply Sans.

Structure this as a new Astro collection where each page is an independent Markdown document and there is a template page [...turtlenet].astro in the pages directory that has the base template for each of the pages. The base turtlenet landing page (bencuan.me/turtlenet) should have the contents of the introduction page. (“Welcome to TurtleNet!“)

The contents for the pages are available in this repository: https://github.com/64bitpandas/devlog. Transform this content in the following ways:

• Download all images and store them locally in the repository, rather than linking to a CDN. You may create a temporary script to make this more efficient and managable of a process.
• Preserve the datePublished, title, cover, and slug properties.
• Make all links from one turtlenet page to another turtlenet page transformed into internal links that work.

In the footer:

• Use turtlenet.gif as the 88x31 card.
• Automatically build a single-page-edition based on the contents of the individual pages and go to this page if the link is clicked. (The single page edition should still have the splash banner at the top including the sticky ‘go home’ button, and be formatted in the same way except it also includes large headers for each of the sections.)

After you’re done, remove the existing bencuan.me/blog/turtlenet placeholder page and make it redirect to ‘bencuan.me/turtlenet’. Ensure that the blog card on the bencuan.me/blog landing page is still present and links to the new page.

Implement this in the turtlenet-v2 branch of the repository and create a pull request to main once you are complete. Review this pull request thoroughly for good Astro coding practices, consistency, and readability.

research syllabus design

Update the research syllabus (research.mdx) to adhere to the Figma design at https://www.figma.com/design/9UcxvuQeEy5yDuJy10vJO5/research-syllabus, which can be accessed using the Local MCP Server.

First, create the banner. It should have the background image overlay at /img/research/rs_backdrop.png. The banner should also be formatted for mobile devices, as suggested by the design.

Next, assign background colors to each section as determined by the design. The ‘systems for machine learning’ section is special because it’s in dark mode, so flip the font color to be light inside of it.

Next, create a reusable component for the badges as specified in the ‘bridges and badges’ section. There should also be an option for a ‘bridged’ badge, which has a linear gradient of all the colors that represent its components. For example, if the bridged badge is ‘engineering-spaces-music’, it should have a blue-green-yellow gradient.

Next, create boxes around the ‘big questions’ and ‘reading list’ sections according to the design. These should re-use the existing CollapsibleBox system. Only the reading lists should be collapsible, though, and they should start collapsed by default.

Next, format all of the footnotes with the proper component. I put placeholder numbers for them, so the numbering may be incorrect. The numbers should all be unique and strictly increasing.

TRMNL caltrain vibe coding

Create a custom plugin for the TRMNL e-ink display that shows the time until the next Caltrain trains leaving from a particular station.

Reference:

• The reference/caltrain is a copy of the https://github.com/tyler-simons/caltrain repository, which should demonstrate the shape of the Caltrain API and the patterns
• The reference/BARTcom-TRMNL folder is a copy of the https://github.com/jetsharklambo/BARTcom-TRMNL/blob/main/settings.yml repository, which is an example of a TRMNL plugin for the BART transit system. Some of the patterns from here (such as the options for specifying stations, layout, how to make a trmnl app in general…) are useful. Caltrain, unlike BART, has only one line (northbound/southbound) but has three possible train types (local, limited, express) that skip particular stations.

Specifications:

• Unlike the BART plugin which specifies origin to destination, I’m mostly interested in a view that shows northbound and southbound departures in a split screen from a single station that’s specified in the options. The Northbound side should have the text “Northbound from STATION_NAME” and “Southbound from STATION_NAME” where STATION_NAME is replaced with the full name of the station in the configuration.
• Show the tags LOCAL, LIMITED, or EXPRESS based on the train type.
• Display “On Time” or “Delayed N minutes” in the place where the BART plugin says “Arrive X:XX PM”.
• Write a simple, concise user-facing README.md. Also write a DEVELOPER_README.md with instructions on how to configure this plugin on the TRMNL app marketplace and make it availble to users.

Fixing Astro Sitemap

Update this sitemap serialize() function to read each file it’s rendering to attempt to get the lastmod date.

• Search for the data-lastmod= tag. If it exists, set the lastmod to that date. By default, if itdoesn’t exist, set lastmod to the current date at time of build. Use this as a reference: https://www.printezisn.com/blog/post/adding-accurate-lastmod-tags-to-your-astro-sitemap/

colors app

I want to create a new website at bencuan.me/colors based on the “color” Figma project (which can be accessed via the Figma MCP integration).

General guidelines:

• The default color for the header is Catppuccin blue, hex 1E66F5.
• Links are also in Catppuccin blue and are bolded and underlined.
• The current page (palettes/explorer/about) should be bolded in the header. If a non-current page link is hovered it should also be bolded (with some animation time; the font is variable).

Code guidelines:

• Keep all styles in a separate color_app.scss. This should be a standalone sass file that only inherits fonts, mixins and spacing, and define all of its own styles, animations, etc. in one big file for all of the colors pages.
• Keep all code as separate from existing code as possible. If any new content or components are needed, put them in a color-app subfolder.
• Use Astro best practices and idiomatics whenever possible. Use the “Astro docs” MCP server to access the Astro documentation.
• Treat all Figma design details (like spacing, font sizes, and other formatting) as suggestions but not the ultimate truth. If there are obvious developer errors like grid spacing being a few pixels off, or elements that seem out of place, use your best judgement to balance code conciseness and simplicity with what is presented by Figma. If any decision points arise, make the decision and note it down in a DECISIONS.md file.
• Keep comments and documentation as minimal as possible. I prefer code to be concise and readable on its own.

First, implement the “palettes” page. @https://www.figma.com/design/a4VkNmvHwM8NS2bzMSCl8V/color?node-id=1-2&m=dev

• The palettes are read from color-books/_palettes.json. Help fill this in with three sample palettes for the time being: Catppuccin Latte (https://catppuccin.com/palette/), bencuan.me v7 (https://bencuan.me/colophon/), and Dracula (https://en.wikipedia.org/wiki/Dracula_(color_scheme), in that order. Some colors will have a tag, which will appear in the pill next to the color name if exists. Valid tags are “background”, “secondary”, “text”, and “highlight”.
• When a user scrolls to a certain color palette, update the header to reflect the text and highlight colors.
• The color palette section itself should respect the text, background, and highlight colors.
• Find a phosophor icon for ‘copy’, and have that display as a button next to both the hex and RGB codes in the markdown table for each palette. The table should display each color in a bubble. The background color for the hex and rgb codes should be the secondary color. Also highlight the entire table row background as the secondary color when hovered over.
• Fill in the source links with the links provided above (except for Dracula, whose source link is https://draculatheme.com/)
• Bold the first word of each theme name in the title.
• Ensure the final theme in the list is at minimum 100vh so the user can experience the header change.

Second, implement the “explorer” page. @https://www.figma.com/design/a4VkNmvHwM8NS2bzMSCl8V/color?node-id=2-33&m=dev

• All color books are available in JSON format under src/color-books. The “components” are in CIELAB format, so we will need a helper function to convert them into hex and RGB values as needed.
• A JSON containing friendly names for certain PANTONE colors is available in _pantone-color-names.json. These names will need to be formatted in a friendly manner. For example, “PANTONE 13-5305 TCX” should display “Pale Aqua” in the second line of the swatch. If no friendly name can be matched, then the second line of the swatch should be blank.
• Bold the prefix (like “PANTONE” or “HKS”) in both the main header title and in the swatch main name first line. All color books with the same prefix should be rendered on the same page, and each have a distinct title. Special cases: Pantone and Pantone+ should be on the same page as each other, and TOYO 94 and TOYO COLOR FINDER should be on the same page as each other.
• The “standard” selector can be used to jump between pages.
• On mobile devices, hide the favorites and size popups. Only display the standard selector.
• When a swatch is selected, play an animation that rounds and unrounds the border radius, darken the square, display “Copied!” on top of the color square, and copy the hex code to the clipboard. It should also update the header to use that color, inferring light/dark text in the header depending on how light the color is.
• If a swatch is hovered, it should be scaled up a bit, and the Phosphor star outline icon should display on the top right. If the star is clicked, the
• Store favorites to local cookies.
• The “preset” button in the favorites panel should automatically override the currently selected favorites and load a preset of favorites. This should be read from a _favorites.json in the color-books directory, which contains a list of color names per standard prefix. The “notes” field is unused in code and is only for human readability.
• The “filter” button in the favorites panel should hide all colors except for the user-selected favorites, then read “unfilter” where “un” is bolded.
• The “clear” button in the favorites panel should clear all favorites and reset the header colors.
• The “size” slider should be ratcheting and control how many swatches will appear on the grid.

Finally, implement the “about” page. @https://www.figma.com/design/a4VkNmvHwM8NS2bzMSCl8V/color?node-id=4-207&m=dev

• The about page is very straightforward, static, and has no interaction other than links.
  • “This repository” links to https://github.com/jacobbubu/acb
  • “here” links to https://github.com/64bitpandas/bencuan.me/tree/main/src/color-books
  • “Catppuccin blue” links to https://catppuccin.com/
  • “Click here” links back to bencuan.me root