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
/* Subtle animation */
@keyframes subtleAnimation {
0% {
transform: translateY(-5px);
opacity: 0.8;
}
50% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-5px);
opacity: 0.8;
}
}
/* Apply the animation to the H1 element */
h1 {
animation: subtleAnimation 3s infinite;
}
How this looks in an article:
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.
Next steps: How you can take this prompt further
Example prompts you could try, beginning with "Using only embedded HTML and CSS..."
- Create a dynamic line animation beneath the H1 text, moving from left to right.
- Fade in the text gradually when the user scrolls to the section.
- Implement text scaling on hover for an interactive effect.
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'
<button class="custom-button" type="button">Tap Me!</button>Paste into Shorthand's Custom CSS Editor
/* Interactive Button Effect */
@keyframes wiggle {
0% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}
.custom-button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.custom-button:hover,
.custom-button:active {
background-color: #45a049;
animation: wiggle 0.5s infinite;
}
.custom-button:active {
transform: scale(0.9);
}
How this looks in an article:
In the series of revolutions that is digital storytelling, artificial intelligence is swiftly taking centre stage.
In this article, we'll walk you through 10 ways to supercharge your Shorthand stories, using ChatGPT to write custom HTML, CSS, and JS.
Next steps: How you can take this prompt further
Example prompts you could try, beginning with "Using only embedded HTML and CSS..."
- Create a button with a gradient background that smoothly transitions to another gradient colour when hovered.
- Generate an image pop-up animation, that smoothly scales up and changes appearance on hover.
- Design an animated progress bar that dynamically fills up or changes colour based on a specific event or action.
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'
<div id="typed-text" class="typing-animation">This is a block of text being typed out.</div>
Paste into Shorthand's Custom CSS Editor
/* Typling animation */
.typing-animation {
overflow: hidden;
white-space: nowrap;
border-right: 0.15em solid #000;
animation: typing 2s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: #000; }
}
Paste into Shorthand's Custom JS Editor
// Function to check if an element is visible on the screen
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
// Function to handle the typing animation
function handleTypingAnimation() {
var typedText = document.getElementById("typed-text");
if (isElementInViewport(typedText)) {
typedText.classList.add("typing-animation");
} else {
typedText.classList.remove("typing-animation");
}
}
// Reset the typing animation on click
document.getElementById("typed-text").addEventListener("click", function() {
this.classList.remove("typing-animation");
void this.offsetWidth;
this.classList.add("typing-animation");
});
// Check for the typing animation on scroll
window.addEventListener("scroll", handleTypingAnimation);
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..."
- Reveal an answer once a user has finished watching a video.
- Create an effect that reveals an image when scrolled into view. The image should fade in gradually.
- Create an effect that decodes text when scrolled into view. The text should transform from random characters to the actual message.
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'
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">Row 1</div>
<div class="accordion-content">
Content for Row 1
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Row 2</div>
<div class="accordion-content">
Content for Row 2
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Row 3</div>
<div class="accordion-content">
Content for Row 3
</div>
</div>
</div>
Paste into Shorthand's Custom CSS Editor
.accordion {
width: 100%;
}
.accordion-item {
margin-bottom: 10px;
}
.accordion-header {
background-color: #eee;
padding: 10px;
cursor: pointer;
}
.accordion-content {
padding: 10px;
display: none;
background-color: #f9f9f9;
}
Paste into Shorthand's Custom JS Editor
var accordionHeaders = document.querySelectorAll('.accordion-header');
accordionHeaders.forEach(function(header) {
header.addEventListener('click', function() {
var content = this.nextElementSibling;
if (content.style.display === 'block') {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
});
});
How this looks in an article:
How to use AI-generated code in your Shorthand stories
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..."
- Design a FAQ section using an accordion component. It should display questions that expand to reveal answers when clicked.
- Create a collapsible menu using an accordion component. It should have categories and subcategories that expand when clicked.
- Build a dynamic product description section with an accordion component. Clicking on a product should expand to show additional details like specifications and reviews.
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'
<p>The future of spaceflight is poised for remarkable advancements and possibilities.</p>
<blockquote class="highlight">Reusable rocket technology, like SpaceX's pioneering efforts, will significantly reduce launch costs and enable more missions. This breakthrough opens doors to ambitious goals, such as Mars colonization.</blockquote>
<p>Advanced propulsion systems, like ion drives and nuclear propulsion, will shorten travel times...</p>
Paste into Shorthand's Custom CSS Editor
.highlight {
font-size: 1.2em;
color: #333;
padding: 10px;
margin: 20px 0;
border-left: 10px solid #FAB700;
background-color: #FFF8E1;
}
How this looks in an article:
The future of spaceflight is poised for remarkable advancements and possibilities.
Reusable rocket technology, like SpaceX's pioneering efforts, will significantly reduce launch costs and enable more missions. This breakthrough opens doors to ambitious goals, such as Mars colonization.
Advanced propulsion systems, like ion drives and nuclear propulsion, will shorten travel times to distant destinations, expanding human exploration of the solar system. Space tourism will become a reality, allowing ordinary individuals to witness the awe-inspiring vistas of space and develop a stronger connection to our planet.
Next steps: How you can take this prompt further
Example prompts you could try, beginning with "Using only embedded HTML and CSS..."
- Review the text and design an interactive quiz to test understanding.
- Propose a responsive timeline design for the given text's chronological events.
- Explore the text and create a simple interactive infographic to visually represent the most information presented.
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
body, h1, h2, h3, h4, h5, h6, p, span, div {
font-family: 'Montserrat', sans-serif;
}
Include HTML in the <head> block on publish
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">Not sure where this code goes? Have a look here:
How this looks in an article:
Welcome to my article
In the series of revolutions that is digital storytelling, artificial intelligence is swiftly taking centre stage.
In this article, we'll walk you through 10 ways to supercharge your Shorthand stories, using ChatGPT to write custom HTML, CSS, and JS.
Summary
We'll be taking you from simple ways to kick your stories up a level, through to elegant design solutions — so, buckle in!
Next steps: How you can take this prompt further
- Help me find a professional font that goes well with my article's theme. Give me the code to add it to my page.
- I need a font that looks bold and matches my brand's style for this article. Here's a sample of the text...
- I want my article to look amazing and be easy to read. Recommend a fancy font that fits the style and give me the code to put it in my layout.
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
body {
font-family: 'Merriweather', serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
}
Include HTML in the <head> block on publish
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">Not sure where this code goes? Have a look here:
How this looks in an article:
Welcome to my article
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. In this article, we'll walk you through 10 ways to supercharge your Shorthand stories, using ChatGPT to write custom HTML, CSS, and JS.
Summary
We'll be taking you from simple ways to kick your stories up a level, through to elegant design solutions — so, buckle in!
Next steps: How you can take this prompt further
- I need a complementary font to go with my chosen a font for my blog post.
- I've selected a font for my article, but I want to enhance the design by pairing it with another font.
- I've chosen a serif font for my article, but I need a great font to pair with it. Any suggestions?
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:
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 center stage.
Using AI tools alongside Shorthand, especially Open AI's ChatGPT, can help you produce beautiful, engaging content even faster.
Next steps: How you can take this prompt further
Example prompts you could try, beginning with "Using only embedded HTML and CSS..."
- Help me select a distinctive and eye-catching colour palette that will make my article truly stand out.
- I'm looking for a bold and energetic colour scheme to make my article visually striking and captivating.
- I want to give my article a relaxed and casual vibe. Propose a laid-back colour palette that will make readers feel at ease while going through the content.
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'
<code>
<div class="text-mesh">
Your article text.
</div>
</code>
Paste into Shorthand's Custom CSS Editor
.text-mesh {
background: #FF9900;
background-image: radial-gradient(at 77.0% 30.0%, hsl(0, 0%, 20%) 0px, transparent 50%),
radial-gradient(at 23.0% 62.0%, hsl(210, 100%, 40%) 0px, transparent 50%);
-webkit-background-clip: text; /* For Safari and older browsers */
background-clip: text;
color: transparent;
}
How this looks in an article:
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.
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!
Next steps: How you can take this prompt further
Example prompts you could try, beginning with "Using only embedded HTML, CSS, and JS..."
- Create impactful text shadows for depth and visual interest in my article.
- Suggest design techniques for stunning effects like 3D text, metallic finishes, or neon glow in your content.
- Apply gradient effects to text strokes or outlines for attention-grabbing typography.
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'
<code>
<div class="floating-photo">
<img src="https://images.unsplash.com/photo-1575178094668-132dc931ad35" alt="Floating Photograph">
</div>
</code>
Paste into Shorthand's Custom CSS Editor
.floating-photo {
perspective: 1000px;
width: 100%; /* Adjust as needed */
height: 100%; /* Adjust as needed */
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
border-radius: 10px;
}
.floating-photo img {
padding: 12px 12px 0px 12px;
width: 100%;
height: 100%;
transition: transform 0.3s ease;
}
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..."
- Create an image zoom feature, enabling users to click or hover for a smooth transition to a larger image size.
- Design an image overlay effect, displaying semi-transparent text when hovering over an image for additional information or call-to-action.
- Develop a responsive image comparison slider, enabling horizontal sliding to compare two images.
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.
Built with Shorthand