Skip to content

Commit 9c881f7

Browse files
caley-bmarciocloudflarepedrosousa
authored
First round of "how we AI" topics to get the ball rolling. (#26422)
* First round of "how we AI" topics to get the ball rolling. * fixed spacing issue in the frontmatter. * Fixed titles and made some of the headings smaller. * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/cloudspeaker.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/cloudspeaker.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/cloudspeaker.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/cloudspeaker.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/cloudspeaker.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/clue.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/when-we-use-ai.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/when-we-use-ai.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/index.mdx Co-authored-by: Pedro Sousa <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/prompt-libraries.mdx Co-authored-by: Pedro Sousa <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/prompt-libraries.mdx Co-authored-by: Pedro Sousa <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/when-we-use-ai.mdx Co-authored-by: Pedro Sousa <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/when-we-use-ai.mdx Co-authored-by: Pedro Sousa <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/when-we-use-ai.mdx Co-authored-by: Pedro Sousa <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/when-we-use-ai.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/when-we-use-ai.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/when-we-use-ai.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/cloudspeaker.mdx Co-authored-by: Pedro Sousa <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/cloudspeaker.mdx Co-authored-by: Pedro Sousa <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/clue.mdx Co-authored-by: Pedro Sousa <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/clue.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/clue.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/clue.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/clue.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/clue.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/clue.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/clue.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/clue.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/clue.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/index.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/examples/index.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/prompt-libraries.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/prompt-libraries.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/prompt-libraries.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/prompt-libraries.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/prompt-templates.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/prompt-templates.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/prompt-templates.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/prompt-templates.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/prompt-templates.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/prompt-templates.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/prompt-templates.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/prompt-templates.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/when-we-use-ai.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/when-we-use-ai.mdx Co-authored-by: marciocloudflare <[email protected]> * Update src/content/docs/style-guide/how-we-docs/how-we-ai/when-we-use-ai.mdx Co-authored-by: marciocloudflare <[email protected]> * Integrated Alexa's feedback. --------- Co-authored-by: marciocloudflare <[email protected]> Co-authored-by: Pedro Sousa <[email protected]>
1 parent 52c3a48 commit 9c881f7

File tree

7 files changed

+377
-0
lines changed

7 files changed

+377
-0
lines changed
Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
pcx_content_type: concept
3+
title: Cloudspeaker
4+
sidebar:
5+
order: 2
6+
---
7+
8+
One of the greatest challenges at any scale is understanding what your customers are _really_ saying. At Cloudflare, we collect massive amounts of customer feedback every day. This feedback is a goldmine of insight, but it is scattered across dozens of disparate, public-facing channels: our own Cloudflare community forum, Reddit, X (formerly Twitter), GitHub, Discord, HackerNews, and more.
9+
10+
Individually, these posts are anecdotes. Collectively, they are a strategic asset. The problem is that the sheer size of these datasets makes it impossible to manually process them for product, content, and design insights. This mass of unorganized feedback was an underutilized opportunity to see cross-functional trends.
11+
12+
To solve this, we built CloudSpeaker, an internal tool created to amplify the voice of the user. Its purpose is to save time, increase efficiency, and consolidate public feedback from all these external communities into a single, unified view.
13+
14+
## The goal: Turning unstructured noise into actionable insight
15+
16+
CloudSpeaker was designed to give any stakeholder at Cloudflare — from product managers and engineers to our user experience teams — a quick way to "check the pulse" of the products and features they own.
17+
18+
The tool allows anyone to see:
19+
20+
- A combined view of product feedback from many channels.
21+
- Recurring issues and customer pain points.
22+
- General sentiment for a product over time.
23+
24+
This consolidated view is now a key part of our planning cycles, informing everything from user research and persona creation to feature requests and quarterly backlog prioritization.
25+
26+
## How it is built: An AI-powered data pipeline
27+
28+
CloudSpeaker is built entirely on our own products. The real power, however, comes from its AI-driven data pipeline, managed by our Data Intelligence team.
29+
30+
Here is how it works:
31+
32+
1. **Ingestion:** On a daily basis, our pipelines ingest new community content from our various public sources.
33+
2. **AI classification:** This new, unstructured content is fed into our AI Content Pipeline. We use Large Language Models (LLMs) via [Workers AI](/workers-ai/) to automatically classify every single post. Each post is tagged with three key pieces of information:
34+
- **Product(s) mentioned:** It identifies which of the 60+ Cloudflare products are being discussed.
35+
- **Sentiment:** The model analyzes the text to determine the user's sentiment, classifying it on a spectrum from `negative` to `neutral` to `positive`.
36+
- **Post type:** It categorizes the intent of the post, such as a `help request`, `feature request`, or `bug report`.
37+
3. **Storage and display:** Once the AI completes its inference, these new classifications are stored in our D1 database and become viewable in the CloudSpeaker UI.
38+
39+
## The workflow: On-demand AI analysis
40+
41+
The backend classification pipeline solves the problem of manual processing. The frontend application solves the problem of accessibility.
42+
43+
In the CloudSpeaker dashboard, a product manager can filter the entire dataset — spanning up to six months — by any combination of product, sentiment, post type, or date range. If they want to see all `negative` sentiment posts about a specific product that were `feature requests` in the last quarter, they can do so in seconds.
44+
45+
Furthermore, we added a second layer of AI directly into the UI. After filtering down to a set of comments, the user can select a **Summarize** button. This uses Workers AI to generate an on-the-fly summary of the currently displayed comments, providing an instant, qualitative overview of quantitative data.
46+
47+
CloudSpeaker is a powerful example of using AI not to generate content, but to analyze and structure the vast amounts of content our users generate every day. It transforms what was once an impossible manual task into a critical source of automated, actionable insights.
Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
pcx_content_type: concept
3+
title: CLUE
4+
sidebar:
5+
order: 1
6+
---
7+
8+
At Cloudflare, we believe that high-quality, customer-facing content is a critical part of the user experience. But as teams scale, maintaining a consistent voice, tone, and terminology across thousands of UI strings, error messages, and API descriptions becomes a monumental challenge. Traditional style guides and glossaries are essential, but they are static. They cannot provide real-time feedback or help us _measure_ content quality.
9+
10+
To solve this, we built CLUE: Content Legibility for User Ease. CLUE is an internal tool that functions as a personal writing assistant for everyone at Cloudflare. It empowers anyone, from engineers to product managers, to feel confident in their content creation.
11+
12+
When a stakeholder shares content with CLUE, it provides a score and actionable recommendations. This simple feedback loop is a powerful mechanism for measuring and improving our content over time.
13+
14+
## The goal: Quantifying "good content"
15+
16+
The core challenge CLUE addresses is that "good" content is easy to recognize but hard to measure. We know that effective copy uses an active voice, has an action-led structure, and removes unnecessary words, but how do you quantify that improvement at scale?
17+
18+
Our answer was **content scorecards**. Scorecards are a scalable evaluation tool that creates consistency. They allow us to assign measurable value to the elements that define "good content," focusing on the criteria most critical for user success, satisfaction, and understanding.
19+
20+
The user flow is designed to be straightforward: you select your content type, enter your content, and CLUE provides instant feedback. It supports a wide range of critical content, including:
21+
22+
- General UI content and page descriptions
23+
- Error messages
24+
- API endpoint and parameter descriptions
25+
- Customer-facing emails
26+
27+
## How it is built: A hybrid, model-driven approach
28+
29+
CLUE was truly built by Cloudflare, for Cloudflare, on Cloudflare. The application itself is built on Cloudflare Pages and protected by Cloudflare Access.
30+
31+
We adopted a model-driven approach for content evaluation, which provides a systematic, data-driven, and consistent assessment, removing the subjectivity of manual reviews. This model allows us to assess content in seconds, handle complex criteria like readability, and weight criteria based on what we find to be most critical for users.
32+
33+
Critically, CLUE is not just one thing, it is a hybrid solution of AI and traditional checks. This combination allows us to evaluate context while still having the granular control needed for some elements of our style guide.
34+
35+
## The workflow: Using CLUE as an LLM copy editor
36+
37+
The rise of Generative AI and LLMs, like Gemini, has been a boon for generating text quickly. However, an LLM does not inherently understand or apply Cloudflare's specific content guidelines, voice, and tone.
38+
39+
This is where CLUE's role becomes essential. CLUE is not designed to _write_ content for you; it is designed to make sure the content you _do_ write meets our standards.
40+
41+
Think of CLUE as a specialized copy editor. It ensures that any piece of content — whether human-generated or created with an LLM's help — is ready for our users. This pairing is incredibly powerful:
42+
43+
- **Generate:** A stakeholder uses an LLM to quickly draft initial versions of API descriptions or an error message.
44+
- **Refine:** They paste that LLM-generated content into CLUE.
45+
- **Iterate:** CLUE provides targeted tips on how to better meet Cloudflare's glossary, style guide, voice, tone, and UX best practices, turning a generic draft into a polished, effective piece of content.
46+
47+
This democratizes UX writing, improves our efficiency by reducing manual reviews, and ultimately builds user trust through a consistent, high-quality experience. It helps users learn our products faster and resolve issues more efficiently, which is our ultimate goal.
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
pcx_content_type: navigation
3+
title: Examples
4+
sidebar:
5+
order: 5
6+
---
7+
8+
import { DirectoryListing } from "~/components";
9+
10+
The true value of AI is not just in using it; it is in _how_ you use it. At Cloudflare, our team has embraced AI as a **force multiplier**, allowing us to solve internal challenges, scale our expertise, and improve the quality of our work.
11+
12+
These are not just off-the-shelf AI products. They are tools built _by_ Cloudflare, _for_ Cloudflare, combining our own institutional knowledge, content standards, and logic with the power of AI models.
13+
14+
## Why we build our own AI-powered tools
15+
16+
Our AI-powered solutions have a dual benefit:
17+
18+
1. **For our team:** They help us automate manual processes, scale our impact, and focus on higher-value strategic work.
19+
2. **For Cloudflare:** They empower all our colleagues — from product to engineering — to make better decisions, create higher-quality content, and understand our users more deeply.
20+
21+
We have seen a lot of success with this approach, as it allows us to democratize specialized skills. We can embed content strategy, style guide rules, and user feedback analysis directly into the workflows of the people who need it most.
22+
23+
These tools range in complexity, role, and use case, from simple, locally-run scripts that automate a repetitive chore to full-fledged applications that serve the entire company.
24+
25+
The following sections provide examples of these tools and our guiding principles. We cover how they were built, the specific problems they solve, and the practical guidelines we've established for using AI effectively.
26+
27+
<DirectoryListing />
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
pcx_content_type: navigation
3+
title: How we AI
4+
sidebar:
5+
order: 9
6+
---
7+
8+
import { DirectoryListing } from "~/components";
9+
10+
This section shares how Cloudflare uses AI to accelerate and augment our content operations. We view AI as a tool that enables us to do our best work, faster. Whether we are designing prompts, researching a new product, or finding ways to turn a manual, week-long process into a job that takes an afternoon to complete, we are continuously looking for ways to iterate and streamline our operations. We know that when we can save time on one time-intensive task, we can spend more time on improving our content experiences for our customers.
11+
12+
As a result, we use and have used AI to:
13+
14+
- Vibecode, test, and deploy a web application for scoring in-product strings, error messages, and API docs.
15+
- Perform competitive analyses and audits on documentation.
16+
- Streamline documenting REST API examples.
17+
- Design prompts based on our content types, templates, and style to enable stakeholders with a doc idea to quickly draft content for us to review and publish.
18+
- Find topics missing descriptions, generate descriptions based on the page’s content, and add them to each page.
19+
- And more…
20+
21+
We hope you learn from the topics below. As always, [submit a pull request](/style-guide/contributions/) if you find something that is inaccurate, missing, or needs more information.
22+
23+
<DirectoryListing />
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
pcx_content_type: concept
3+
title: Prompt libraries
4+
sidebar:
5+
order: 4
6+
---
7+
8+
A prompt library is a curated and organized collection of pre-written prompts. These libraries serve as a valuable resource for anyone who frequently interacts with AI, such as writers, developers, and students. At Cloudflare, we use prompt libraries to help our teams scale their work, maintain a consistent brand voice, and efficiently capture and share knowledge across different roles.
9+
10+
Think of a prompt library as a recipe book for AI. Instead of starting from scratch every time you need the AI to perform a task, you can browse the library for a relevant, pre-tested prompt that is known to produce good results. These prompts are often designed to be reusable and customizable.
11+
12+
:::note
13+
While prompts are designed to produce great outputs, the user (human) still needs to provide relevant context and resources for the AI to produce those results and review the output for technical accuracy. It is unlikely one prompt will create a great first draft – some rework, either through follow-up prompts or adding more information – is going to be necessary.
14+
:::
15+
16+
### Inside a prompt library
17+
18+
Prompt libraries can vary in complexity (a simple table in an internal wiki topic versus a web-based application) and content, but they typically contain:
19+
20+
- **A collection of prompts:** These are the core of the library, ranging from simple questions to complex instructions with multiple parameters.
21+
- **Categorization:** Prompts are usually organized by task (for example, writing, coding, summarizing), role (for example, developer, account executives, product managers), or output format (for example, blog post, email, code snippet).
22+
- **Prompt templates:** Many libraries include templates with placeholders that users can fill in with their specific information. This allows for easy customization and reuse.
23+
- **Examples and best practices:** Some libraries provide examples of the output generated by a particular prompt, along with tips on how to use and modify it effectively.
24+
25+
### Key benefits of using a prompt library
26+
27+
Utilizing a prompt library offers several significant advantages:
28+
29+
- **Increased efficiency:** By providing ready-to-use prompts, libraries save a significant amount of time and effort that would otherwise be spent on crafting and testing new prompts for recurring tasks.
30+
- **Improved consistency and quality:** Pre-tested prompts that are known to work well lead to more consistent and higher-quality outputs from the AI. This is particularly important for businesses that need to maintain a consistent brand voice.
31+
- **Enhanced learning and discovery:** For those new to prompt engineering, libraries can be an excellent educational tool, showcasing effective prompting techniques and the capabilities of AI models.
32+
- **Accelerated knowledge capture:** Prompt library users can focus on capturing knowledge instead of building prompts or drafting content manually. This accelerates documenting information and sharing it with others – hopefully to prevent the same issue from occurring again or enabling others to be successful sooner.
33+
- **Facilitated collaboration:** Shared prompt libraries in a team or organizational setting allow for the dissemination of best practices and successful prompts, fostering collaboration and improving the collective AI literacy.
34+
- **Scalability:** As you or your organization's use of AI grows, a well-organized prompt library allows for the efficient management and scaling of your prompting strategies.
35+
36+
In essence, a prompt library is a powerful tool for streamlining interactions with AI models, ensuring high-quality results, and accelerating the adoption and effective use of generative AI technologies.

0 commit comments

Comments
 (0)