Example Claude Design Prompts

Example Claude Design Prompts

# Task 1

Create an updated version of the context item single view display for "Abbreviation, spelling, dates, and formatting" Context item. 

Name this page. Context item: Single View

## Changes to apply:

1. Wrap the entire entity view in a white card frame to match the markdown editor treatment. Current state has the form on a tinted background and the editor on white, creating two competing visual zones.
2. Add right sidebar navigation:
   - Top: 
   - Contains context items scope metadata:
     - Last updated author
     - Use case
     - Language
     - Tags
     - Site sections and target entities
       See the edit screen for reference to understand what kind of values appear under these categories.
   - Bottom: Create a navigation element based off of the screenshot of the sibling elements within this context item. We should be able to see FinDrop brand guidelines as the parent, and abbreviation, spelling, dates, and formatting as the current item we are looking at. This should be highlighted. Then visuals and imagery and writing tone and voice are siblings with which you can click to navigate to the other contexts easily.

## Reference Screenshots

1. "Before" Screenshot of the single context item display as it is now with the light grey background. 
2. Example of the context item edit form, where you can see the Markdown editor's text formatting and how it sits on a white background, as well as the right-hand panel, which we will use in the new layout. 
3. A screenshot of the context item FinDrop brand guidelines and its three subcontext items, which should appear as a navigation in the right-hand panel 



# Task 2

Duplicate the existing layout and open it in a new tab, and start creating a new variation of the context item single entity view for when the context item is a connected context source. This example will be when the data for the context comes from Google Analytics. 

Name this page. Context item: Google Analytics Connector - Single View

## Content area

Entirely replace the markdown that appears in the source with a simple markdown table listing five URLs with a table of four key stats:

- Engage sessions
- Sessions
- Page views
- Time on page

Show it by day for the last seven days. 


## Right Panel 

When you have a connected context source, the same panels appear, but beneath the metadata panel there is a new panel with the following information: 

For Connected Context items, surface sync metadata in the sidebar: 

- Last synced (relative time)
- Next sync
- Sync status
- Sync schedule with edit link
- Manual "Sync now" button
- Source freshness from external system if available