How to use AI-generated code in your Shorthand stories
10 ways to supercharge your Shorthand designs using ChatGPT
In the series of revolutions that is digital storytelling, artificial intelligence is swiftly taking centre stage. Using AI tools alongside Shorthand, especially Open AI's ChatGPT, can help you produce beautiful, engaging content even faster.
by Simon Brunton and ChatGPT 🤖
In this article, we'll walk you through 10 ways to supercharge your Shorthand stories, using ChatGPT to write custom HTML, CSS, and JS.
We'll be taking you from simple ways to kick your stories up a level, through to elegant design solutions — so, buckle in!
Contents
10 interactive, typographic, and design ideas to try
Interactive ideas
1. Animation
2. Interactive effects
3. Typed text
4. Accordion
Typographic ideas
5. Generate and style a pull quote
6. Choose a custom font
7. Font pairing
Design ideas
8 Generate a colour palette
9. Advanced text effects
10. Custom image styling
Setting expectations
Using your own HTML, CSS, and JavaScript codes inside of Shorthand can be very useful, but it is more advanced territory and, as such, mightn't always work as expected.
Small hiccups can lead to bigger problems like messed up page layouts, hard-to-read text, or buttons and links that don't work.
Trying to make beautiful stories with complex design features or high-resolution media could make them heavy and slow to load. You may also end up using more custom code than is necessary, which could complicate changes to your content and make bug-finding more difficult.
Lastly, without proper understanding of responsive design principles, using custom code could lead you to create pages that don't display properly on all device types. This could lead to a less-than-ideal experience for users on smaller devices. If in doubt, you can always paste your code into ChatGPT, give it some context and ask it why it’s not working.
It's also important to clarify that HTML and CSS custom coding are only available on select Shorthand plans: reach out if you're wondering what your options are, and how to upgrade.
General tips for effective ChatGPT prompts
Let's go over some important pointers for crafting prompts to get the best results from ChatGPT.
1. Ask clear and specific questions for direct answers.
2. Use proper grammar and complete sentences to aid ChatGPT's understanding.
3. Avoid asking too many questions at once, and keep them concise.
4. Provide relevant background information for specific inquiries.
5. Include relevant keywords to enhance understanding and receive appropriate responses.
6. Review your prompt for accuracy and clarity.
7. Remember, you can always ask follow-up questions, or ask ChatGPT to rephrase its response.
10 interactive, typographic, and design ideas to try
Interactive ideas
1. Animation
Difficulty: ⭐️
Animation can enhance the appearance of buttons, images, or other elements inside your story.
Here's the initial prompt I gave ChaptGPT to get an animation for H1 text.
Initial prompt
"Using only CSS, give me a custom subtle animation for the H1 text in my article."
Output
Paste into Shorthand's custom CSS editor
How this looks in an article:
Next steps: How you can take this prompt further
Example prompts you could try, beginning with "Using only embedded HTML and CSS..."
2. Interactive effects
Difficulty: ⭐️⭐️
Interactive effects are great for increasing engagement with your stories. These make clickable elements seem more dynamic and interesting.
I asked ChatGPT to generate code using only embedded HTML and CSS, that would allow for the interactive animation of a button both on click and hover.
Initial prompt
"Using only embedded HTML and CSS, generate code to dynamically animate a button on click and hover."
Output
Use inside the 'Custom HTML Block'
Paste into Shorthand's Custom CSS Editor
How this looks in an article:
Next steps: How you can take this prompt further
Example prompts you could try, beginning with "Using only embedded HTML and CSS..."
3. Typed text
Difficulty: ⭐️⭐️⭐️
This effect simulates the appearance of text being typed out as the viewer scrolls to a specific area.
Here's what I asked ChatGPT:
Initial prompt
"Create an interactive effect using embedded HTML, CSS, and JS that simulates a block of text being typed out when scrolled into view, and resets on click."
Output
Use inside the 'Custom HTML Block'
Paste into Shorthand's Custom CSS Editor
Paste into Shorthand's Custom JS Editor
How this looks in an article:
Click the text or scroll away to reset the example above.
Next steps: How you can take this prompt further
Example prompts you could try, beginning with "Using only embedded HTML, CSS, and JS..."
4. Accordion
Difficulty: ⭐️
Accordion components improve your article layout by organising content into collapsible sections, letting readers show or hide specific information while at the same time reducing clutter.
Since I wanted to put different sets of information in each section, here's how I phrased it for ChatGPT.
Initial prompt
"Help me create an accordion component. This component needs to be three rows and can only use embedded HTML, custom CSS, and JS."
Output
Use inside the 'Custom HTML Block'
Paste into Shorthand's Custom CSS Editor
Paste into Shorthand's Custom JS Editor
How this looks in an article:
Click the sections to hide/reveal text sections.
Next steps: How you can take this prompt further
Example prompts you could try, beginning with "Using only embedded HTML, CSS, and JS..."
Typographic ideas
5. Generate and style a pull quote
Difficulty: ⭐️
Pull quotes are a great way to make interesting parts of articles pop. They use attractive typography and design elements to highlight important points in the text.
Here, I had a two-step process: I gave ChatGPT a short paragraph and asked it to find the most important part. Next, I asked how to turn that important part into a highlighted quote using only HTML and CSS.
Initial prompts
"Analyse the key part of the following text..."
"Suggest an HTML/CSS technique to highlight or pullquote it."
Output
Use inside the 'Custom HTML Block'
Paste into Shorthand's Custom CSS Editor
How this looks in an article:
Next steps: How you can take this prompt further
Example prompts you could try, beginning with "Using only embedded HTML and CSS..."
6. Choose a custom font
Difficulty: ⭐️⭐️⭐️
Custom fonts can bring a distinctive and individual look to your article, allowing you to create specific looks that align with your design vision — but remember to check the licencing of a font before using it!
Here's what I asked ChatGPT.
Initial prompt
"Choose a custom font that would enhance the design and engagement of my article and generate code so that I can embed it in my page."
Output
ChatGPT suggested Montserrat, a popular font that offers a modern, clean, and professional look. Montserrat is widely used across various websites and digital platforms, and has a wide range of weights and styles, allowing you to create visual hierarchy and emphasis within your article.
Paste into Shorthand's Custom CSS Editor
Include HTML in the <head> block on publish
Not sure where this code goes? Have a look here:
How this looks in an article:
Next steps: How you can take this prompt further
7. Font pairing
Difficulty: ⭐️⭐️
I asked ChatGPT for a font suggestion to pair with Montserrat. Pairing different fonts like this can help create a clearer structure in your article. It also adds visual appeal and brings balance to your design.
Initial prompt
"What's a good font to pair with Montserrat? And can you generate code so I can embed it."
Output
ChatGPT suggested Merriweather, explaining that it's a serif font that offers a classic and elegant style. Paired with Montserrat, it creates a harmonious contrast between its traditional elegance and the clean lines of Montserrat.
Paste into Shorthand's Custom CSS Editor
Include HTML in the <head> block on publish
Not sure where this code goes? Have a look here:
How this looks in an article:
Next steps: How you can take this prompt further
Design ideas
8. Generate a colour palette
Difficulty: ⭐️
Custom colour palettes can make your article visually stunning and tailored to your style. They help you stand out, engage your readers, and for this example, no coding expertise is required.
I asked ChatGPT to generate a professional colour palette that would make my article more visually engaging.
Initial prompt
"I want to create a visually engaging article by using a professional colour palette. Suggest a simple colour scheme that would make my content stand out."
Output
ChatGPT suggested a simplified colour scheme consisting of three colours:
#FF9900 (Vibrant Orange)
#333333 (Charcoal Gray)
#0066CC (Deep Blue)
In this example, instead of coding, we'll simply paste the generated hex values (e.g. #FF9900) into the colour palette options on the left menu. After this, we can use them to style text and backgrounds in our article.
How this looks in an article:
Next steps: How you can take this prompt further
Example prompts you could try, beginning with "Using only embedded HTML and CSS..."
9. Advanced text effects
Difficulty: ⭐️⭐️
Advanced text effects can enhance the visual appeal of your content in more interesting ways.
In this example, I first asked ChatGPT to generate a gradient background based on the colours it generated in the previous example. I then asked for a way to apply this gradient background to my text.
Initial prompts
"Generate a gradient background based on the following colours #FF9900, #333333, #0066CC."
"Now that I have this gradient background, I'd like to apply it as a fill to a block of text: How do I do that?"
Use inside the 'Custom HTML Block'
Paste into Shorthand's Custom CSS Editor
How this looks in an article:
Next steps: How you can take this prompt further
Example prompts you could try, beginning with "Using only embedded HTML, CSS, and JS..."
10. Custom image styling
Difficulty: ⭐️⭐️
By adding unique borders and shadows, images can grab a reader's attention, and make your article more dynamic and engaging.
I asked ChatGPT to come up with code that adds interesting styles to my images. For this example, I'll use the following image from Unsplash:
Initial prompt
"Generate HTML and CSS code for captivating image styling with unique corners and shadows to grab readers' attention. Provide any additional implementation instructions or recommendations."
Output
Use inside the 'Custom HTML Block'
Paste into Shorthand's Custom CSS Editor
How this looks in an article:
Next steps: How you can take this prompt further
Example prompts you could try, beginning with "Using only embedded HTML, CSS, and JS..."
Summary
Using AI tools like ChatGPT to enhance your Shorthand stories is a game-changer. Although it's not a simple cut-and-paste exercise, using AI to aid your design can yield practical, exciting, and frankly gorgeous results.
With experimentation and a bit of practice, you can harness the joined powers of AI and Shorthand to create beautiful, engaging stories to delight your readers — faster than ever.
Title images courtesy of Milad Fakurian on Unsplash. Icons from Remix Icon.
